I'm working on this theme and I wanted to create this simple nav that would fadeIn on click and fadeOut on click.
<div id="mobile-nav">
<a class="exit"></a>
<div class="logo"></div>
<div class="center">
<li class="skincare">Skincare</li>
<li class="makeup">Makeup</li>
<li class="kits">Kits</li>
<li class="help">Help</li>
</div>
</div>
<script>
$(function() {
$('.exit').click(function(){
$('#mobile-nav').fadeOut();
});
}
</script>
However it doesn't seem to work when I try it out. Other types of script like swiper.js works, but this simple script doesn't work. Is there anything wrong with what I'm doing? I've been checking for errors and jQuery is loading as well.
Live preview here - http://magazine.eldecosmetics.com/
It should be
$(function() {
$$('.exit').invoke('observe', 'click', function() {
$('#mobile-nav').toggleClass('fadedOut');
});
});
Your code is
$(function() {
$$('.exit').invoke('observe', 'click', function() {
$('#mobile-nav').toggleClassName('fadedOut');
});
}
In Magento try to avoid jquery conflicts you must use jQuery instead of $ symbol.
For example i have mentioned the correct coding
jQuery(function(){
$$('.exit').invoke('observe', 'click', function() {
jQuery('#mobile-nav').toggleClass('fadedOut');
});
});
Hope it will helps to you guys.
Related
I'm having some trouble with mouseenter event applied on div area in my pages. I'm trying to change background-color of this div on mouse enter but it is all just ignored.
I have a simple HTML CODE:
<div id="services" class="services">
<div id="services-top">
<h2>Services</h2>
</div>
<div id="services-content">
<div id="services-content-left">
<img id="services-content-right-img" class="img-circle" src="http://i.imgur.com/vN5m4vK.jpg" alt="empty">
<h3>STUFF</h3>
</div>
</div>
</div>
And JS stuff with this event:
$(document).ready(function() {
$("services-content-left").mouseenter(function() {
console.log("enter");
$(this).css("background-color", "yellow");
});
});
And as I said before, when I enter this div area, background stays the same, without any changes.
HERE is an example.
Don't you have any idea how to solve it?
Wrong selector :)
$(document).ready(function() {
$("#services-content-left").mouseenter(function() {
console.log("enter");
$(this).css("background-color", "yellow");
});
});
you simply missed out
out in your code, should be $("#services-content-left") instead
$(document).ready(function() {
$("#services-content-left").mouseenter(function() {
console.log("enter");
$(this).css("background-color", "yellow");
});
});
signify a ID selector.
You have missed a # before your services-content-left,
Please have it changed as,
$("#services-content-left").mouseenter(function() {
Working Fiddle: - https://jsfiddle.net/m2wpetp4/4/
Hope this helps!
Can anyone point the issue why I am unable to get the alert popup on first click? It works only every second click (i.e. doesn't work on odd number click and works on even number click).
HTML:
<div class="slider">
<div class="slider-box ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 50%;"></a>
</div>
</div>
jQuery:
$(document).ready(function() {
$("a.ui-slider-handle").click(function() {
alert('test');
});
});
I also tried but didn't work
$(document).ready(function() {
$("a.ui-slider-handle").mousedown(function() {
alert('test');
});
});
Hmm... have you tried to prevent the default anchor behavior? http://jsbin.com/IfirEBOj/2/edit
$("a.ui-slider-handle").click(function( event ) {
event.preventDefault();
alert('test');
});
In any case you should get familiar with some debugging tool and see what errors it throws. If any...
add: return false; to your command
$(document).ready(function() {
$("a.ui-slider-handle").click(function() {
alert('test');
return false;
});
});
Have you tried to void the href attribute?
$(document).ready(function(){
$("a.ui-slider-handle").attr('href', 'javascript:void(0)').click(function(){
alert('test');
});
});
Try this:
<div id="slider"></div>
$(document).ready(function () {
$("#slider" ).slider();
$("#slider").on('click','a',function () {
alert('test');
});
});
check the fiddle:
http://jsfiddle.net/3zEX5/2/
UPDATE:
I think you are clicking on the div first and then the anchor tag comes near it i.e the small slider button. so you are feeling as it is working on odd click, if you can clearly tell you requirment then we can suggest you some way
I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.
<script>
$(document).ready(function () {
$("form.common").first().show();
$(".expand").click(function () {
$(this).parents().next("form.common").show();
})
$(".collapse").click(function () {
$(this).parents().next("form.common").hide();
});
$(".close").click(function () {
$(this).parents().next("div.module").hide();
});
});
</srcipt>
<div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
<h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
<span class="icons_small right close">X</span>
<span class="icons_small right collapse">-</span>
<span class="icons_small right expand">+</span>
</div>
<form class="common">
<fieldset>
<legend> Some Titlee/legend>
</fieldset>
</form>
</div>
Can anyone see why this is not hiding the div?
THanks,
The answer is in the question:
$(".close").click(function () {
$(this).closest("div.module").hide();
});
Demo fiddle
Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree
You had a missing < in <legend> Some Titlee/legend>, after that it works.
Check here
This should work :
$(".close").click(function () {
$(this).parent().hide();
});
JSFiddle
Doc : parent()
I'm trying to face a particular class .mosaic-block to fade on clicking this:
<a href="#">
<div id="t0" class="n0 lfloat"><img src="images/home.png"><br>Home</div>
</a>
My Jquery code is:
<script type="text/javascript">
$(function () {
$('a #t0').click(function() {
$(".mosaic-block").animate({
opacity: 0.0
}, 1500 );
});
});
</script>
But I'm not getting the desired results.
EDIT#1
My .mosain-block HTML code:
<div class="mosaic-block bar">
<h4>Sloppy Art</h4>
<p>abcd</p>
</div>
Your code is fine.
You can see it in action here.
So the error is elsewhere. For example in the jQuery import (yes, I got a hint on this one ;) ) which could look like this :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Why not use the inbuilt fadeOut() method
$(".mosaic-block").fadeOut(1500);
I have a small problem with sliding in jquery. On hover (mouse over), I need my navigation list item to show its content by sliding down and on mouse out it should slide up.
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover">
<a style="background-color:#f78144; color: #000; text-align: center;" href="#">Time Table
</a>
</li>
</ul>
<div id = "hovercontent">
Contents 1
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent").mouseleave(function(){
$(this).slideUp("slow");
});
});
</script>
Here the problem is when I hover on the list the div slides down, but only after I hover on the div and get out of the nav the div is sliding up. I need the div to slide up even if I mouse out of the list with out entering the div. How can this be done?
Better to use mouseover and mouseout will do it for you..
$("#hovercontent").bind("mouseout", function() {
$(this).slideUp("slow");
});
Try this and put it in the doc ready this way: http://jsfiddle.net/ptVbs/
$("#mousehover").hover(function() {
$("#hovercontent").slideDown("slow");
}, function() {
if (!$("#hovercontent").hover()) {
$("#hovercontent").slideUp("slow");
}
});
$("#hovercontent").mouseleave(function() {
$(this).slideUp("slow");
});
you can try it out in fiddle.
Check out http://www.quirksmode.org/js/events_mouse.html. In your eventhandlers, check for the relatedTarget as described there. Use console.log in the eventhandlers to track what's happening. Unfortunately, I can't help further without having the CSS for the classes you use... maybe you could provide a testcase in JSBin at http://jsbin.com/ ?
try this
$(document).ready(function(){
$("#mousehover").mouseover(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent ,#mousehover").mouseleave(function(){
$('#hovercontent').slideUp("slow");
});
});
try it with event.type on 'hover'
You attach an 'hover' event Handler on your #mousehover content, and with event.type you see what event type is going on. With the Event 'hover' you get mouseenter and mouseleave
$(document).ready(function(){
$('#mousehover').on('hover',function(event){
switch(event.type){
case 'mouseenter': $("#hovercontent").slideDown("slow");
break;
case 'mouseleave': $("#hovercontent").slideUp("slow");
break;
}
});
});
I recommend using a class:
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover" class="menu1">
<a style="background-color:#f78144;color:#000;text-align:center;" href="#">Time Table</a>
</li>
</ul>
<div id = "hovercontent" class="menu1">
Contents 1
</div>
JS:
<script>
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$(".menu1").mouseout(function(){
$("#hovercontent").slideUp("slow");
});
});
</script>