How to achieve hover effect using javascript? - javascript

I have 3 bullet images.
1 for active, 1 for hover and 1 for the rest links.
Here is my code:
<img src="images/othersdefdot.png" onclick="funcCaller('fund', 'images/reddot.png', 'local', 'images/othersdefdot.png', 'youthgames', 'images/othersdefdot.png')" name="fund">
How to achieve hover effect in this link?
Check the demo page here

<a href="#" class="toc selected" onMouseover="showPic1()" onMouseout="showPic2()">
<img id="link_img" src="/images/othersdefdot.png" />
</a>
Javascript:
function showPic1() {
document.getElementById('link_img').src = "/images/img1.png";
}
function showPic2() {
document.getElementById('link_img').src = "/images/img2.png";
}

I'm not exactly sure what you're asking, but you can use the onmouseover property.
<img src="images/othersdefdot.png" onclick="funcCaller('fund', 'images/reddot.png', 'local', 'images/othersdefdot.png', 'youthgames', 'images/othersdefdot.png')" onmouseover="javascriptFunction()" name="fund">

You must be looking at the jQuery scrollable here:
http://flowplayer.org/tools/demos/scrollable/plugins/index.html
I think this is what you want.

if its just for hover effect, there is no need to use javascript. You could just use css:
a img:hover{
/*change background*/
}
however if you insist, you could attach event handler onmousedown to it. hope that helps.

Related

How do I change css overflow property of a parent html element when hovering on a mega menu link

So I am using mega menu in my wordpress site and I need to change an element above the mega menu to have visible overflow css when hovering over a mega menu item. here is what I have tried so far.
<div class="l-canvas">
<div id="mega-menu-wrap-max_mega_menu_2" class="mega-menu-wrap">
<div class="mega-menu-toggle" tabindex="0">
<div class="mega-toggle-block mega-menu-toggle-block mega-toggle-block-right mega-toggle-block-1" id="mega-toggle-block-1">
</div>
</div>
<ul id="mega-menu-max_mega_menu_2" class="mega-menu mega-menu-horizontal" data-event="hover" data-effect="fade_up" data-effect-speed="200" data-second-click="close" data-document-click="collapse" data-vertical-behaviour="standard" data-breakpoint="979" data-unbind="true">
<li class="mega-menu-item mega-menu-item-type-taxonomy mega-menu-item-object-product_cat mega-menu-item-has-children mega-align-bottom-left mega-menu-flyout mega-menu-item-10217" id="mega-menu-item-10217">
<a class="mega-menu-link" href="#" aria-haspopup="true" tabindex="0">Link Text</a>
</li>
</ul>
</div>
</div>
And The css is pretty straightforward
.l-canvas{
overflow:hidden;
}
The javascript is where I am having some trouble. Here is what I had working in a fiddle but cant figure out what is going wrong on my page.
$('.l-canvas').on('mouseover', '.mega-menu-item', function () {
$('.l-canvas').css('overflow', 'visible')
});
//remove the overflow visible on mouseout
$('.l-canvas').on('mouseout', '.mega-menu-item', function() {
// on mouseout, reset the overflow to hidden
$('.l-canvas').css('overflow', 'hidden');
});
I think I am close, but just cant seem to get over the final hump. I just don't understand why it wont work on my page or in console of developer tools. Thanks for any help and feedback you can give me on this issue.
Try this:
$(".mega-menu-item").on({
mouseenter: function() {
$(this).closest(".l-canvas").css('overflow', 'visible');
}, mouseleave: function() {
$(this).closest(".l-canvas").css('overflow', 'hidden');
}
});
Have a look at the JQuery documentation for detailed information:
http://api.jquery.com/on/
https://api.jquery.com/closest/
First of all, you will want to listen to the events that occur when you enter or leave a menu-item. Next you will want to find a specific element up the DOM and manipulate the CSS of that element.
Hope this helps!

Weird behaviour with Javascript onclick

I have a burger menu that needs to register a click (I will then expand the menu..)
The HTML of the burger icon/menu is:
<div class="burger-menu-holder">
<a href="#" id="burger-menu">
☰
</a>
</div>
The CSS is a simple:
#burger-menu{
display: block;
}
The Javascript to register the click and run the function is:
var burger = document.getElementById("burger-menu");
burger.addEventListener('click', function(){
if(burger.style.display=='block'){
alert("LOL");
}
}, false);
However when I click on the menu nothing happens. There's no errors in the console, however when I remove if(burger.style.display == 'block') it works, leading me believe that for some reason it's not testing the CSS properties correctly.
The problem is that burger doesn't have style="display: block;" initially (even though it's visible), so burger.style.display == 'block' fails.
Testing element CSS styles is not very reliable approach. I would go with classes:
var burger = document.getElementById("burger-menu");
burger.addEventListener('click', function() {
if (burger.className === 'show') {
alert("LOL");
}
}, false);
HTML:
☰
And in CSS:
.show {
display: block;
}
Additional advantage of the class name is that you can easily change and style show behavior without affecting javascript code.
try it like this:
<div class="burger-menu-holder">
<a href="#" id="burger-menu" style="display: block;">
☰
</a>
</div>
The DOM property element.style.something will get only inline defined styles, such as:
<a href="#" id="burger-menu" style="display: block;">
For testing styles, use css classes. (Look at dfsq's answer)
The difference between a manually-set "style" parameter and the computed style.
So look at eg getComputedStyle in webkit/opera, currentStyle in IE. The various toolkits offer nicer ways to access this.
As mentioned, it's not an optimal way of testing. However, if you want to, you could use getComputedStyle, then getPropertyValue to get the display value, like so:
var burger = document.getElementById("burger-menu");
burger.addEventListener('click', function(){
// Get the computed display value after the stylesheet has been applied
var display = window.getComputedStyle(burger).getPropertyValue("display");
if(display === "block"){
alert("LOL");
}
}, false);
jsFiddle here

Can't seem to make jQuery onClick fadeOut work on my page

This is killing me. I have spent the better part of two days trying to make this work.
Ultimately, what I am trying to achieve is have a list of 3 items, "Light", "Regular", and "Deep" trigger the fade in of a specific div matched to each item on the list. I am using z-index to layer the divs above a background div.
So when I click on "Light", an image fades in above the background div, and if "Regular" or "Deep" are visible at the time of the click, they fade out (only 1 would be visible at a time anyway).
Basically, the jQuery is set up like this:
$('#main_right_line_one').click(function(){
$('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_light_layover').fadeIn('slow');
});
});
$('#main_right_line_two').click(function(){
$('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_regular_layover').fadeIn('slow');
});
});
$('#main_right_line_three').click(function(){
$('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
$('#main_deep_layover').fadeIn('slow');
});
});
I have my html set up like this:
<div id="main_container">
<div id="main_top_left">
</div>
<div id="main_top_right">
<a id="main_right_line_one" href="#">Light</a><br />
<a id="main_right_line_two" href="#">Regular</a><br />
<a id="main_right_line_three" href="#">Deep</a>
</div>
<div id="main_bottom">
</div>
<div id="main_light_layover">
<img class="light_layover" src="/images/light_layover.png" />
</div>
And my CSS:
#main_light_layover
{
display:none;
position:absolute;
width:900px;
margin:0 auto;
padding:0px;
border:0px;
top:0px;
left:0px;
z-index:8;
overflow:visible;
}
.light_layover
{
position:relative;
top:10px;
left:-60px;
z-index:8;
}
My jQuery isn't that great, but this simply isn't working. I'm wondering if it's having problems since the target for the click is within a second div?
I started playing around with it more to see if I could get something more simple to work, like loading the image normally and using jQuery to fade it out on click, but I can't even get that to work on my specific page, yet I can get a barebones version to work on jsFiddle:
http://jsfiddle.net/UpX3L/197/
It seems like I simply can't get the target for fading to work at all on my specific page. Can anyone offer some insight?
EDIT - Here is a jsFiddle working the way I want the page to work:
http://jsfiddle.net/3XwZv/507/
Remove the e in your click function
$('#main_right_line_one').click(function(){
$('#regular_layover, #deep_layover').fadeOut('slow', function(){
$('#main_light_layover').show('slow');
});
});
$('#main_right_line_two').click(function(){
$('#light_layover, #deep_layover').fadeOut('slow', function(){
$('#regular_layover').fadeIn('slow');
});
});
$('#main_right_line_three').click(function(){
$('#light_layover, #regular_layover').fadeOut('slow', function(){
$('#deep_layover').fadeIn('slow');
});
});
As mentioned in the comments to your post, you selectors are off.
# is the prefix used for ids, . is the prefix used for classes
Thus you want as selector $('.light_layover'), not $('#light_layover').
Also, if your div is hidden, your image may not be shown. So maybe you meant to be using $('#main_light_layover') rather than using just 'light_layover'?
EDIT: Looking at your code... You need to make sure that the elements from your selector are already loaded in the DOM before running $(selector). You can do this via $(document).ready(initialize) where initialize is the function that sets up the click handlers.
See jQuery.load and jQuery.ready

is(:visible) selector not working on class jQuery

Not sure how to explain this, I made a fiddle of what I'm attempting to do:
http://jsfiddle.net/x2btM/9/
here's my code:
HTML:
<div id="ZodOneDragBox">
<div id="aquariusSelectedComp1" class="killSelectedComp1" style="display:none;">
<img src="some.jpg">
</div>
</div>
<div id="ZodTwoDragBox">
<div id="aquariusSelectedComp2" class="killSelectedComp2" style="display:none;">
<img src="some.jpg" width="45" height="45">
</div>
</div>
<div id="aquariusIcnClick" class="iconClicker">
<img src="some_Icon.jpg" width="45" height="45">
</div>
Here's my jquery:
if ($('.killSelectedComp1').is(':visible')) {
//--SELECT BOX TWO
$('#aquariusIcnClick').click(function() {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
});
}
else {
//--SELECT BOX ONE
$('#aquariusIcnClick').click(function() {
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
});
}​
Basically when you click on aquariusIcnClick the image aquariusSelectedComp1 will appear in div ZodOneDragBox. aquariusSelectedComp1 with the class of killSelectedComp1 is now visible, so when you click on the icon aquariusIcnClick again, the image should appear in ZodTwoDragBox. It works for the first box, but the selector is not reading that the image with the corresponding class is currently visible therefor executing what's in the if statement and showing the image in the second box. Hope I explained this well enough, once again, here's my fiddle:
http://jsfiddle.net/x2btM/9/
Not sure what I'm doing wrong, I've googled to make sure that I'm using the :visible selector correctly any and all help is very much appreciated. Thank you
​
you don't need bind your click on div condition instead check your div visibility onclick
$('#aquariusIcnClick').click(function() {
if ($('.killSelectedComp1').is(':visible')) {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
}
else
{
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
}
});
Live Demo
​
Your code is only being executed once when the page loads / or the dom is ready. This means that your if statement is only tested once. You need to modify your code so that the if statement occurs within the click handler. This will mean the visibility of killSelectedComp1 is tested each time the click occurs and you can then make your decision on what to do.
As #rahul has done ;)
Do not bind event condition rather put condition in the event
Live Demo
$('#aquariusIcnClick').click(function() {
if ($('.killSelectedComp1').is(':visible')) {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
}
else {
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
}
});​

jQuery- dynamically alternate between image sources within an animated div

I have a menu that is animated to slide across the page when triggered by clicking on an image of an arrow. I'd like to switch the arrow to a different image source once the menu's animation has completed, and then return back to the original file when the menu has been closed.
Best way to do this?
Thank you!
HTML:
<div id="slider">
<div id="trigger_right">
<img class="arrow_small" src="images/left_small.png" alt="slide menu out" />
</div>
<div class="trans" id="overlay"></div>
<div id="content">
<p>This is content</p>
</div>
</div>
Javascript:
$(function() {
$('#trigger_right').toggle(function (){
$('#slider').animate({'width':'100%'}, 1500);
$('.arrow_small').attr('src','images/right_small.png');
}, function() {
$('#slider').animate({'width':'30px'}, 1500);
$('.arrow_small').attr('src','images/left_small.png');
});
});
jQuery's .animate has a callback that is called when the animate is finished so you can use that to change the images at the appropriate time:
$(function() {
$('#trigger_right').toggle(function () {
$('#slider').animate({'width':'100%'}, 1500, function() {
$('.arrow_small').attr('src','images/right_small.png');
});
}, function() {
$('#slider').animate({'width':'30px'}, 1500, function() {
$('.arrow_small').attr('src','images/left_small.png');
});
});
});
The above assumes that you only have one .arrow_small element of course. Using a class for the arrow and a sprite sheet for the images would be better but that would only require changing the $('.arrow_small').attr() parts to $('.arrow_small').toggleClass() calls as Rob suggests.
If I understand correctly, you only want the images to change after the menu animation has completed.
One way, perhaps not the best, would be to make the JavaScript that changes the src attribute occur after a set period of time using setTimeout(). Instead of:
$('.arrow_small').attr('src','images/right_small.png');
You would have:
setTimeout("toggleImages()", 1500);
function toggleImages(){
// some code to toggle them
}
I haven't tested this, but give it a try. Hope it helps!
I would suggest you set the images up in CSS as classes and then do something like:
.toggleClass("right-small left-small");

Categories