Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Passing style property to function
- Thread starter filipel
- Start date
Hi
Yes, you can. Assuming the insereTexto() function is declared and does what I think...
Feherke.
Yes, you can. Assuming the insereTexto() function is declared and does what I think...
Feherke.
- Thread starter
- #3
Hi
This way it works :
But is not so easy for styles declared elsewhere.
More exactly, what is your goal ?
Feherke.
This way it works :
Code:
<input type="button" [red]style="border-top-style:double"[/red] onClick="insereTexto(this.style.[red]borderTopStyle[/red])" value="Insere Texto" />More exactly, what is your goal ?
Feherke.
- Thread starter
- #5
function insereTexto(objecto)
{
var area=document.getElementById('areaTexto');
area.style.top=objecto.top;
if (document.getElementById) {
if (area.style.visibility=='visible')
area.style.visibility='hidden';
else
area.style.visibility='visible';
}
}
i have some buttons and what i im trying to do is when i click on button a div with id "areaTexto" is positioned on top(plus some pixels) of the button that triggered the function above
{
var area=document.getElementById('areaTexto');
area.style.top=objecto.top;
if (document.getElementById) {
if (area.style.visibility=='visible')
area.style.visibility='hidden';
else
area.style.visibility='visible';
}
}
i have some buttons and what i im trying to do is when i click on button a div with id "areaTexto" is positioned on top(plus some pixels) of the button that triggered the function above
Hi
That is not so simple. More exactly, it would not be so simple, without Peter-Paul Koch's article, "Find position". The [tt]findPos()[/tt] function used below is taken from that article. Works with Mozillas, Opera, Safari and Explorer.
Feherke.
That is not so simple. More exactly, it would not be so simple, without Peter-Paul Koch's article, "Find position". The [tt]findPos()[/tt] function used below is taken from that article. Works with Mozillas, Opera, Safari and Explorer.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
</style>
<style type="text/css">
div#areaTexto {
position: absolute;
display: none;
background-color: pink;
border: dotted red 1px;
}
</style>
<script type="text/javascript">
var plus_some_pixels=10
function insereTexto(objecto)
{
var at=document.getElementById('areaTexto')
at.style.top=(findPos(objecto)[1]+plus_some_pixels)+'px'
at.style.display='block'
}
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
}
</script>
</head>
<body>
<div id="areaTexto">I am areaTexto</div>
<form action="#">
<p><input type="button" value="uno" onclick="insereTexto(this)"></p>
<p><input type="button" value="dos" onclick="insereTexto(this)"></p>
<p><input type="button" value="tres" onclick="insereTexto(this)"></p>
</form>
</body>
</html>Feherke.
- Thread starter
- #7
Hi
Then I would completely change the approach.
Feherke.
Then I would completely change the approach.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
textarea.hideable {
position: absolute;
display: none;
}
</style>
<script type="text/javascript">
function sh(what)
{
var ta=document.getElementById('ta'+what)
ta.style.display='block'
ta.focus()
}
window.onload=function() {
var talist=document.getElementsByTagName('textarea')
for (var i=0;i<talist.length;i++) if (talist[i].className=='hideable') talist[i].onblur=function() { this.style.display='none' }
}
</script>
</head>
<body>
<div id="areaTexto">I am areaTexto</div>
<form action="#">
<p><input type="button" value="uno" onclick="sh(1)"><textarea name="ta1" id="ta1" class="hideable" cols="80" rows="25"></textarea></p>
<p><input type="button" value="dos" onclick="sh(2)"><textarea name="ta1" id="ta2" class="hideable" cols="80" rows="25"></textarea></p>
<p><input type="button" value="tres" onclick="sh(3)"><textarea name="ta1" id="ta3" class="hideable" cols="80" rows="25"></textarea></p>
</form>
</body>
</html>Feherke.
- Thread starter
- #9
RestonDeveloper
Programmer
filipel,
big diffrence between display and visibility.
display shrinks vertical space holder, visibility reserves just hides or shows it.
often people set visibility:hidden when they really should be setting display:none.
display:block then shows it
big diffrence between display and visibility.
display shrinks vertical space holder, visibility reserves just hides or shows it.
often people set visibility:hidden when they really should be setting display:none.
display:block then shows it
Provided that what you hid was a block level element. There are a lot of valid display types so be careful you don't hide a span and turn it into a pseudo-div when you re-display it.
-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
- Status
Similar threads
- Locked
- Question
- Locked
- Question