Solved

hover + click function

Posted on 2011-03-13
28
523 Views
Last Modified: 2012-05-11
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
Comment
Question by:iceman19330
  • 14
  • 13
28 Comments
 

Author Comment

by:iceman19330
ID: 35123371
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35126729
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35126738
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
 

Author Comment

by:iceman19330
ID: 35128692
not sure how to add the fade in part.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35129464
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
 

Author Comment

by:iceman19330
ID: 35129702
the rollover portion isnt working.  not sure why
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35129767
Do you have a url?
0
 

Author Comment

by:iceman19330
ID: 35130751
0
 
LVL 6

Expert Comment

by:mickey159
ID: 35145857
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35146015
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
 

Author Comment

by:iceman19330
ID: 35147787
its still not switching the content when I hover.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35148135
You are not calling the code
0
 

Author Comment

by:iceman19330
ID: 35148297
I'm sorry I am being dense I am not sure how I am not calling it.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35148387
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:iceman19330
ID: 35149081
Alright so I can see the fade working but its not changing the text just fading to the same text.  lol
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35149191
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
 

Author Comment

by:iceman19330
ID: 35149216
The title is different the body text is the same
0
 

Author Comment

by:iceman19330
ID: 35149462
I still dont get why its not switching .. the title should at least be chaning
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35149551
I think I need to try it at home
0
 

Author Comment

by:iceman19330
ID: 35162199
any luck?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35162797
Sorry - will look in 2 hours
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 35163192
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
 

Author Comment

by:iceman19330
ID: 35164923
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
 

Author Comment

by:iceman19330
ID: 35164961
that did it!  I didnt need the 2nd set of code.  :D
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35165361
Great. The amount of code to make the click sticky confused me
0
 

Author Comment

by:iceman19330
ID: 35165482
In the end it  wasnt necessary since I moved the link into the href part.  lol
0
 

Author Closing Comment

by:iceman19330
ID: 35165489
Thanks for you patience
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35166109
You are welcome. Made me learn some more jQuery in the process
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Adding Extra Information box 4 26
custom jquery validation method 11 16
Asp.net mvc foreach 3 15
React or Angular? 6 8
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now