Solved

hover + click function

Posted on 2011-03-13
28
548 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Business Impact of IT Communications

What are the business impacts of how well businesses communicate during an IT incident? Targeting, speed, and transparency all matter. Find out more in this infographic.

 

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
 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

751 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