hover + click function

So I have some sample code where if I hover over a link it will switch some text.  I need it to also need it to if I click on the link redirect to another page.  Where would i add that?

$(function(){
	$('.item-category ul li a').hover(function(){
		var target = $(this).attr('href');
		
		if($(target).hasClass('active'))
			return false;
		
		$('.subcat-details.active').fadeOut('fast',function(){
			$(this).removeClass('active');
			$(target).fadeIn('fast').addClass('active');
		});
		return false;
	});
});

Open in new window

iceman19330Asked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
So I made it work, but I a now a little confused.

1. I changed the ID of the links to Xsubcat-3 and Xsubcat-4
2. I do not understand if you need anything on click anymore
Here is the code I think would be enough

$(document).ready(function() {
  $('.item-category ul li a').hover(function(){
    var divToShow = this.id.substring(1); 
    $('.subcat-details.active').fadeOut('fast',function(){
      $(this).removeClass("active"); // remove the active from the previously active div
      $("#"+divToShow).addClass('active').fadeIn('fast'); // the id of the link is Xsubcat-n
    });
  });
});



Here is the code I tested, in case we DO need to change the look of the link too

$(document).ready(function() {
/*
  $('.item-category ul li a').click(function(){
      if (currentActive) {
        $("#"+currentActive).removeClass('active'); // remove the previous link's class
      }
      $(this).addClass('active');
      currentActive = $(this).attr("id"); // save
    })
*/    
    $('.item-category ul li a').hover(function(){
    // do not activate the fade on hover on the currently selected link
      if(!$(this).hasClass('active')) { // this is not the current link
        $(this).addClass('active');
        if (currentActiveLink) { // did we save one?
          $("#"+currentActiveLink).removeClass('active'); // inactivate the link
        }
        currentActiveLink = this.id;
        currentActiveDiv = currentActiveLink.substring(1); 
        $('.subcat-details.active').fadeOut('fast',function(){
          $(this).removeClass("active"); // remove the active from the previously active div
          $("#"+currentActiveDiv).addClass('active').fadeIn('fast'); // the id of the link is #subcat-x
        });
      }
    });
});

Open in new window

0
 
iceman19330Author Commented:
Okay so I tweaked it a little bit, added the link to where it needs to go to the href and moved the hover element to an id in the anchor tag.
<div class="item-category">
<ul>            
<li><a href="/node/3" id="#subcat-3">Item 1</a></li>
<li><a href="/node/4" id="#subcat-4">Item 2</a></li>
</ul>
</div>
however after I hover the text is gone and wont come back

<div id="subcat-3" class="subcat-details active">
        <h5><a href="/node/3">Item 1</a> </h5>
        <p>blah blah blah blah</p>
        <p>blah blah blah blah</p>      
</div><!--/subcat-details-->
<div id="subcat-4" class="subcat-details "> 
        <h5><a href="/node/4">Item 2</a> </h5>
        <p>blah blah blah blah</p>      
        <p>blah blah blah blah</p>      
</div>
$(function(){
	$('.item-category ul li a').hover(function(){
		var target = $(this).attr('id');
		
		if($(target).hasClass('active'))
			return false;
		
		$('.subcat-details.active').fadeOut('fast',function(){
			$(this).removeClass('active');
			$(target).fadeIn('fast').addClass('active');
		});
		return false;
	});
});

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I would think
$('.item-category ul li a')
             .click(function(){
               }
              )
             .hover(function(){
		var target = $(this).attr('id');
		
		if($(target).hasClass('active'))
			return false;
		
		$('.subcat-details.active').fadeOut('fast',function(){
			$(this).removeClass('active');
			$(target).fadeIn('fast').addClass('active');
		});
		return false;
	});

Open in new window

0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Michel PlungjanIT ExpertCommented:
This code does not make sense

var target = $(this).attr('id');
            
            if($(target).hasClass('active'))

it should just be

if($(this).hasClass('active'))

Same for the fadin part
0
 
iceman19330Author Commented:
not sure how to add the fade in part.
0
 
Michel PlungjanIT ExpertCommented:
Not sure either since it does not really look right to me

Perhaps this is what you mean

var currentActive = ""; // could be home or whatever is the avtive ID at load
$('.item-category ul li a').click(function(){
    if (currentActive) $("#"+currentActive).removeClass('active'); // remove the previous link's class
    $(this).addClass('active');
    currentActive = $(this).attr("id"); // save
  }).hover(function(){
  // do not activate the fade on hover on the currently selected link
    if(!$(this).hasClass('active')) {
      $('.subcat-details.active').fadeOut('fast',function(){
      $(this).fadeIn('fast');
    }
    return false; // not sure about this one
  });
0
 
iceman19330Author Commented:
the rollover portion isnt working.  not sure why
0
 
Michel PlungjanIT ExpertCommented:
Do you have a url?
0
 
iceman19330Author Commented:
0
 
mickey159Commented:
I am not sure but you want to show new contents when the user hover on the link and bring them to another page when clicked?
0
 
Michel PlungjanIT ExpertCommented:
Missed a bracket


var currentActive = ""; // could be home or whatever is the avtive ID at load
$('.item-category ul li a').click(function(){
    if (currentActive) $("#"+currentActive).removeClass('active'); // remove the previous link's class
    $(this).addClass('active');
    currentActive = $(this).attr("id"); // save
  }).hover(function(){
  // do not activate the fade on hover on the currently selected link
    if(!$(this).hasClass('active')) {
      $('.subcat-details.active').fadeOut('fast',function(){
        $(this).fadeIn('fast');
      });
    }
    return false; // not sure about this one
  });
0
 
iceman19330Author Commented:
its still not switching the content when I hover.
0
 
Michel PlungjanIT ExpertCommented:
You are not calling the code
0
 
iceman19330Author Commented:
I'm sorry I am being dense I am not sure how I am not calling it.
0
 
Michel PlungjanIT ExpertCommented:
You need to invoke it

var currentActive = ""; // could be home or whatever is the avtive ID at load
$(document).ready(function() {
  $('.item-category ul li a').click(function(){
      if (currentActive) $("#"+currentActive).removeClass('active'); // remove the previous link's class
      $(this).addClass('active');
      currentActive = $(this).attr("id"); // save
    }).hover(function(){
    // do not activate the fade on hover on the currently selected link
      if(!$(this).hasClass('active')) {
        $('.subcat-details.active').fadeOut('fast',function(){
          $(this).fadeIn('fast');
        });
      }
      return false; // not sure about this one
    });
});

0
 
iceman19330Author Commented:
Alright so I can see the fade working but its not changing the text just fading to the same text.  lol
0
 
Michel PlungjanIT ExpertCommented:
Right.

It does not help that the div content is actually both the same :)

Try
          $("#"this).fadeIn('fast');
instead of

          $("#"+this.id.substring(1)).fadeIn('fast');
var currentActive = ""; // could be home or whatever is the avtive ID at load
$(document).ready(function() {
  $('.item-category ul li a').click(function(){
      if (currentActive) $("#"+currentActive).removeClass('active'); // remove the previous link's class
      $(this).addClass('active');
      currentActive = $(this).attr("id"); // save
    }).hover(function(){
    // do not activate the fade on hover on the currently selected link
      if(!$(this).hasClass('active')) {
        $('.subcat-details.active').fadeOut('fast',function(){
          $("#"+this.id.substring(1)).fadeIn('fast'); // the id of the link is #subcat-x
        });
      }
      return false; // not sure about this one
    });
});

Open in new window

0
 
iceman19330Author Commented:
The title is different the body text is the same
0
 
iceman19330Author Commented:
I still dont get why its not switching .. the title should at least be chaning
0
 
Michel PlungjanIT ExpertCommented:
I think I need to try it at home
0
 
iceman19330Author Commented:
any luck?
0
 
Michel PlungjanIT ExpertCommented:
Sorry - will look in 2 hours
0
 
iceman19330Author Commented:
I will try the code.  I need the click to go to the next page, I need the hover to display information about what they are going to see on the next page.  Sorry for any confusion.
0
 
iceman19330Author Commented:
that did it!  I didnt need the 2nd set of code.  :D
0
 
Michel PlungjanIT ExpertCommented:
Great. The amount of code to make the click sticky confused me
0
 
iceman19330Author Commented:
In the end it  wasnt necessary since I moved the link into the href part.  lol
0
 
iceman19330Author Commented:
Thanks for you patience
0
 
Michel PlungjanIT ExpertCommented:
You are welcome. Made me learn some more jQuery in the process
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.