homepage Welcome to WebmasterWorld Guest from 54.227.34.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
div onclick help?
works on FF but not IE?
realignorent



 
Msg#: 4176167 posted 5:36 pm on Jul 25, 2010 (gmt 0)

ok ive been trying to get this code to work forawhile now and have done many searches and foru reading and tried many things to no avail. my div on click commands work on FF but not on IE and its absolutly killing me, I would be willing to make a small donation to someone by helping me to get it to work cause im tired of trying to get this work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<body background ="http://www.njirishfootball.com/new/nice/bb.png">
</body>


<div onclick="document.location = 'http://www.njirishfootball.com/home/roster' " style="cursor: pointer; width: 95px; height:

40px; position: absolute; top: 57px; left: 397px;"></div>

<div onclick="document.location = 'http://www.njirishfootball.com/home/coachingstaff' " style="cursor: pointer; width: 145px;

height: 40px; position: absolute; top: 57px; left: 498px;"></div>

<div onclick="document.location = 'http://www.njirishfootball.com/home/frontoffice' " style="cursor: pointer; width: 122px;

height: 40px; position: absolute; top: 57px; left: 650px;"></div>

<div onclick="document.location = 'http://www.njirishfootball.com/emeralds' " style="cursor: pointer; width: 172px; height:

40px; position: absolute; top: 57px; left: 779px;"></div>

 

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4176167 posted 5:57 pm on Jul 25, 2010 (gmt 0)

Welcome aboard realignorent, why don't you just use the natural object for this, an anchor, and set it's display to block to emulate the div rather than the other way around? Then your problem goes away, and you don't need to rely on javascript to make it work. You can now apply mouseover effects without JS too. You have the additional advantage of getting it indexed as a link, and the text doesn't need to display - note the negative text-indent. Last, you'll help reduce the heartbreak of div-itis. :-) Give this a try, it's tested code.

I wouldn't use absolute positioning for various reasons, but anyway . . .


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
.some-link {
/*
Assuming the divs that are now anchors
have a background image, apply it here.
Remove this border after testing.
*/
border:1px solid #000;
display: block;
text-indent:-5000px;

height:40px;
position:absolute;
top: 57px;
}
.some-link:hover { background: #fefae0; } /* or image */
#first-link { width:95px;left:397px; }
#second-link { width:145px;left:498px; }
#third-link { width:122px;left:650px; }
#fourth-link { width:172px;left:779px; }
</style>
</head>
<body>
<a class="some-link" id="first-link"
href="http://www.example.com/home/roster">Roster</a>
<a class="some-link" id="second-link"
href="http://www.example.com/home/coachingstaff">Coaching Staff</a>
<a class="some-link" id="third-link"
href="http://www.example.com/home/frontoffice">Front Office</a>
<a class="some-link" id="fourth-link"
href="http://www.example.com/home/emeralds">Emeralds</a>
</body>
</html>


A truly semantic solution would be to put them in a <ul>, because what you have there is a list of links, and you could zero out the margins and either display the li's inline or float them. Then you'd just set the properties above as #list-id a instead.

dreamcatcher

WebmasterWorld Senior Member dreamcatcher us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4176167 posted 9:48 am on Jul 26, 2010 (gmt 0)

If you absolutely must use js, try window.location:

onclick="window.location...

dc

realignorent



 
Msg#: 4176167 posted 7:44 am on Jul 27, 2010 (gmt 0)

thank you for your help, actually someone else helped me by telling me to use a image mapping tool and that was the fix to my problem, but thank you for your response's

and im fairly new to html,css,js and other coding so alot of stuff still doesnt make sense to me but thats anyways

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved