ansaurus

Question

Why does this jQuery work differently after I move to a different page then hit the back button?

Answer 1

+1 A:

I know this isn't exactly an answer to your question, but changing the CSS properties of an element when hovered can be done entirely in CSS. For your example, your CSS would be something like:

.link {
  background: url('./link.png');
}
.link:hover {
  background: url('file:///Users/J/Desktop/DHTML/Menu/linkselect.png');
}

~~I think you could also wrap the <a> tag around the <li> tag, such that the whole list item is the link (eliminating the need for the $(".link").click(...) code).~~

Oops, can't wrap <a> around <li>, but as Oli mentioned, you can do this in CSS:

.link a {
  display: block;
}

Kip 2009-01-23 19:22:19

Answer 2

+5 A:

You know you can do everything you're doing there with just CSS and HTML?

Set the a to display:block so that it fills the li
Set a :hover state on a to change the background.
???
Profit.

Oli 2009-01-23 19:23:03

You'll probably want to set height and line-height on the link (a, not .link) elements too.

Oli 2009-01-23 19:24:31

+1 for the ??? Profit part. :)

Paolo Bergantino 2009-01-23 19:26:44

I'm not sure that :hover will work in older browsers like IE6 while the javascript method would. That has been my experience in the past when dealing with IE6.

Dan McNevin 2009-01-23 19:30:44

I'm 99% sure the :hover works in IE6.

rmeador 2009-01-23 19:33:13

I don't mean to sound rude, but this is not answering his question. Offering another solution wasn't the request. I am actually curious why the behavior would be different after hitting the back-button.

Jonathan Sampson 2009-01-23 19:38:07

From what I have read, in IE6, :hover is supported on anchors but not things like li,tr, etc.. I have to support IE6 and have had to write javascript workarounds for this.

Dan McNevin 2009-01-23 19:38:57

you may be right that it only works on anchors... I, too, have the misfortune of being forced to support IE6, and we use it all the time, but probably only on anchors.

rmeador 2009-01-23 19:50:34

a:hover works - that's what I'm suggesting. Make the <a> a block, make it fill the <li> and give it the background instead of the <li>

Oli 2009-01-23 19:59:04

IE6 does not support :hover on anything other then a. Making the a as big as the li (using lineheight and display:block as Oli suggests) should work.

Pim Jager 2009-01-23 21:08:15

Answer 3

+2 A:

The following works. I'll leave the CSS details to you. Note also, as other have pointed out, you CAN do this with pure CSS and get the same result. But since that is not what you asked for, I will respect your request and give jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Default Web Project - www.SampsonResume.com</title>
    <style type="text/css">
      .ul {list-style:none;margin:0;padding:0;border:1px solid #CCCCCC;}
      li.link {background-color:#000000;padding:10px;}
        li a {color:#ffffff;text-decoration:none;}
      li.on {background-color:#f1f1f1;cursor:pointer;}
        li.on a {color:#000000;}
    </style>
    <script src='scripts/jquery/jquery-1.3.min.js' type='text/javascript'></script>
      <script type="text/javascript">
        $(document).ready(function(){
          $("li.link").each(function(){
            $(this).hover(
              function(){$(this).addClass("on");},
              function(){$(this).removeClass("on");}
            );
           $(this).click(function(){
             window.location = $(this).find("a").attr("href");
           });    
         });
       });
     </script>
  </head>
  <body>
    <ul>
      <li class="link"><a href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;/li&gt;
      <li class="link"><a href="http://www.yahoo.com"&gt;Yahoo&lt;/a&gt;&lt;/li&gt;
      <li class="link"><a href="http://www.SampsonVideos.com"&gt;SampsonVideos&lt;/a&gt;&lt;/li&gt;
    </ul>
  </body>
</html>

Jonathan Sampson 2009-01-23 19:57:00

The "each" is completely unnecessary, isn't it? That is what chaining is for: $('li.link').hover(...).click(...);

Prestaul 2009-01-24 00:28:53

I do think that this code will fix his problem though. He needs to use the "hover" method or use the mouseenter/mouseleave events in place of mouseover/mouseout. +1 from me!

Prestaul 2009-01-24 00:31:08

Prestaul, I used .each() as a habit, as I generally do more with my links than merely adding classes.

Jonathan Sampson 2009-01-24 00:47:28

Answer 4

A:

Oh well, I said I wouldn't give a CSS-Solution, but here it is anyway:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Default Web Project - www.SampsonResume.com</title>
    <style type="text/css">
      ul {list-style:none;margin:0;padding:0;border:1px solid #CCCCCC;}
      li {margin:0;padding:0;}
        li a {display:block;background-color:#FFF;color:#000;text-decoration:none;}
      li a:hover {color:#FFF;background-color:#000;}
    </style>
  </head>
  <body>

    <ul>
      <li><a href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;/li&gt;
      <li><a href="http://www.yahoo.com"&gt;Yahoo&lt;/a&gt;&lt;/li&gt;
      <li><a href="http://www.SampsonVideos.com"&gt;SampsonVideos&lt;/a&gt;&lt;/li&gt;
    </ul>

  </body>
</html>

Jonathan Sampson 2009-01-23 20:06:22

ansaurus

tags:

views:

answers:

Why does this jQuery work differently after I move to a different page then hit the back button?

related questions