Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 591
  • Last Modified:

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

0
iceman19330
Asked:
iceman19330
  • 14
  • 13
1 Solution
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
Michel PlungjanIT 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:
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 14
  • 13
Tackle projects and never again get stuck behind a technical roadblock.
Join Now