Hi,
I wan't to know how I can make the cursor type to a hand and also how does the positioning change??? in pixel wise.
please note I am a newbie
thanks
WOOWcursor property (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/pr_class_cursor.asp">http://www.w3schools.com/css/pr_class_cursor.asp</a><!-- m -->)
CSS tutorial (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a><!-- m -->)Thanks for the links but problem I am having is with css positioning in explore vs Mozilla. I see a layer I want to show in a different place in netscape than what I see in explore. any ideas how I can fix thisDo you have some script we can look at?I am posting all the related code including the Javascript.
Javascript code:
<script type=text/javascript>
// identify Netscape or MSIE
function toggleT( objName, swi )
{
var theObj = document.getElementById(objName);
( swi == "s" ) ? theObj.style.visibility='visible' : theObj.style.visibility='hidden';
}
</script>
HTML code:
<td height="21" bgcolor="#CCCCCC"><div align="left"><strong><font size="1" face="Verdana, Arial, Helvetica, sans-serif">0680-201
<span id="course" onClick="toggleT('divtag1','s')" onMouseOut="toggleT('divtag1','h')">Financial
Accounting</span></font></strong>
<div id="divtag1">check check check check<font color="#666666">Credit
4</font></>
</div>
</td>
css code:
#course {cursor
ointer; color:#333399; text-decoration: underline;}
#divtag1 { visibility:hidden; position:absolute; top:194px; left:306px; height:auto; width:228px; padding: 3px 3px 3px 3px; font-weight: bold; font-size: 8pt; font-family: Geneva, Arial, Helvetica, san-serif; color:#000000; background:#000033; border-style: solid; border-width: 1px; background-color: #CCCCFF; }This the idea?
function toggleT( objName, swi )
{
var theObj = document.getElementById(objName);
if(document.all) { //IE and Opera
theObj.style.left=0+"px";
}
else { // Mozilla Netscape
theObj.style.top=0+"px";
}
( swi == "s" ) ? theObj.style.visibility='visible' : theObj.style.visibility='hidden';
}Nice Idea Fang BUT I have divtag1,divtag2,divtag3........divtag100
So the problem is for every increase in divtage the height increase by 25px exactly for each divtag1,divtag2..... in Mozilla Netscape part
Hope U understand what I am saying,
exmaple code........
#divtag1 { visibility:hidden; position:absolute; top:194px; left:306px; height:auto; width:228px; padding: 3px 3px 3px 3px; font-weight: bold; font-size: 8pt; font-family: Geneva, Arial, Helvetica, san-serif; color:#000000; background:#000033; border-style: solid; border-width: 1px; background-color: #CCCCFF; }
#divtag2 { visibility:hidden; position:absolute; top:215px; left:306px; height:auto; width:228px; padding: 3px 3px 3px 3px; font-weight: bold; font-size: 8pt; font-family: Geneva, Arial, Helvetica, san-serif; color:#000000; background:#000033; border-style: solid; border-width: 1px; background-color: #CCCCFF; }
#divtag3 { visibility:hidden; position:absolute; top:236px; left:306px; height:auto; width:228px; padding: 3px 3px 3px 3px; font-weight: bold; font-size: 8pt; font-family: Geneva, Arial, Helvetica, san-serif; color:#000000; background:#000033; border-style: solid; border-width: 1px; background-color: #CCCCFF; }function toggleT( objName, swi )
{
var theObj = document.getElementById(objName);
if(document.all) { //IE and Opera
theObj.style.left=parseInt(theObj.currentStyle.left)+100+"px";
}
else { // Mozilla Netscape
theObj.style.top=parseInt(document.defaultView.getComputedStyle(theObj, null).getPropertyValue('top', null))+100+"px";
}
( swi == "s" ) ? theObj.style.visibility='visible' : theObj.style.visibility='hidden';
}
Not 100 div elements on one page I hope!Hi fang thax for the help
theObj.style.top=parseInt(document.defaultView.getComputedStyle(theObj, null).getPropertyValue('top', null))+
so that part does it give the current pixel value from the top?? because it doesn't work no matter how much increment i use.
Yes I do have like 102 divtag
any ideas
Another way is using css.
Use your original function and change the css:
#divtag1 { visibility:hidden; position:absolute; top:194px; left:106px !important; left:506px;height:auto; ... }
left:106px !important; left:506px;
The !important tell Mozilla to use the first value, IE will ignore it and use the second value.Both of the above methods will work in most modern browsers.
You do need to check though.
Another alternative is to load style sheets depending on the users browser, preferably using server side sniffing.Thanks Fang for your help. really Appericiate itYet another option:
Have a hidden div which is shown at a specific position and with the relevant text inserted - a pop-up div.
That would save you adding 100+ divs.Thanks Fang for your help. really Appericiate it
I wan't to know how I can make the cursor type to a hand and also how does the positioning change??? in pixel wise.
please note I am a newbie
thanks
WOOWcursor property (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/pr_class_cursor.asp">http://www.w3schools.com/css/pr_class_cursor.asp</a><!-- m -->)
CSS tutorial (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a><!-- m -->)Thanks for the links but problem I am having is with css positioning in explore vs Mozilla. I see a layer I want to show in a different place in netscape than what I see in explore. any ideas how I can fix thisDo you have some script we can look at?I am posting all the related code including the Javascript.
Javascript code:
<script type=text/javascript>
// identify Netscape or MSIE
function toggleT( objName, swi )
{
var theObj = document.getElementById(objName);
( swi == "s" ) ? theObj.style.visibility='visible' : theObj.style.visibility='hidden';
}
</script>
HTML code:
<td height="21" bgcolor="#CCCCCC"><div align="left"><strong><font size="1" face="Verdana, Arial, Helvetica, sans-serif">0680-201
<span id="course" onClick="toggleT('divtag1','s')" onMouseOut="toggleT('divtag1','h')">Financial
Accounting</span></font></strong>
<div id="divtag1">check check check check<font color="#666666">Credit
4</font></>
</div>
</td>
css code:
#course {cursor
ointer; color:#333399; text-decoration: underline;}#divtag1 { visibility:hidden; position:absolute; top:194px; left:306px; height:auto; width:228px; padding: 3px 3px 3px 3px; font-weight: bold; font-size: 8pt; font-family: Geneva, Arial, Helvetica, san-serif; color:#000000; background:#000033; border-style: solid; border-width: 1px; background-color: #CCCCFF; }This the idea?
function toggleT( objName, swi )
{
var theObj = document.getElementById(objName);
if(document.all) { //IE and Opera
theObj.style.left=0+"px";
}
else { // Mozilla Netscape
theObj.style.top=0+"px";
}
( swi == "s" ) ? theObj.style.visibility='visible' : theObj.style.visibility='hidden';
}Nice Idea Fang BUT I have divtag1,divtag2,divtag3........divtag100
So the problem is for every increase in divtage the height increase by 25px exactly for each divtag1,divtag2..... in Mozilla Netscape part
Hope U understand what I am saying,
exmaple code........
#divtag1 { visibility:hidden; position:absolute; top:194px; left:306px; height:auto; width:228px; padding: 3px 3px 3px 3px; font-weight: bold; font-size: 8pt; font-family: Geneva, Arial, Helvetica, san-serif; color:#000000; background:#000033; border-style: solid; border-width: 1px; background-color: #CCCCFF; }
#divtag2 { visibility:hidden; position:absolute; top:215px; left:306px; height:auto; width:228px; padding: 3px 3px 3px 3px; font-weight: bold; font-size: 8pt; font-family: Geneva, Arial, Helvetica, san-serif; color:#000000; background:#000033; border-style: solid; border-width: 1px; background-color: #CCCCFF; }
#divtag3 { visibility:hidden; position:absolute; top:236px; left:306px; height:auto; width:228px; padding: 3px 3px 3px 3px; font-weight: bold; font-size: 8pt; font-family: Geneva, Arial, Helvetica, san-serif; color:#000000; background:#000033; border-style: solid; border-width: 1px; background-color: #CCCCFF; }function toggleT( objName, swi )
{
var theObj = document.getElementById(objName);
if(document.all) { //IE and Opera
theObj.style.left=parseInt(theObj.currentStyle.left)+100+"px";
}
else { // Mozilla Netscape
theObj.style.top=parseInt(document.defaultView.getComputedStyle(theObj, null).getPropertyValue('top', null))+100+"px";
}
( swi == "s" ) ? theObj.style.visibility='visible' : theObj.style.visibility='hidden';
}
Not 100 div elements on one page I hope!Hi fang thax for the help
theObj.style.top=parseInt(document.defaultView.getComputedStyle(theObj, null).getPropertyValue('top', null))+
so that part does it give the current pixel value from the top?? because it doesn't work no matter how much increment i use.
Yes I do have like 102 divtag
any ideas
Another way is using css.Use your original function and change the css:
#divtag1 { visibility:hidden; position:absolute; top:194px; left:106px !important; left:506px;height:auto; ... }
left:106px !important; left:506px;
The !important tell Mozilla to use the first value, IE will ignore it and use the second value.Both of the above methods will work in most modern browsers.
You do need to check though.
Another alternative is to load style sheets depending on the users browser, preferably using server side sniffing.Thanks Fang for your help. really Appericiate itYet another option:
Have a hidden div which is shown at a specific position and with the relevant text inserted - a pop-up div.
That would save you adding 100+ divs.Thanks Fang for your help. really Appericiate it