There are 3 divs and 3 links.
Only one div should be displayed at a time. When user clicks on a link for one of the other divs, the current one should fade out and the selected one should fade in, in place of the previous div.
Here is the code at the moment:
Javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
switches = $('#switches > li');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).click(
function() {
switches.removeClass('active');
slides.removeClass('active').fadeOut('slow');
$(this).addClass('active');
$(this).data('slide').addClass('active').fadeIn('slow');
});
});
</script>
CSS
<style style="text/css">
ul {
list-style: none;
}
li:hover {
text-decoration: underline;
}
#switches .active {
font-weight: bold;
}
#slides div {
display: none;
}
#slides div.active {
display: block;
}
.outer {
position: absolute;
}
.outer div {
width: 600px;
height: 300px;
}
#uno {
background-color: red;
}
#dos {
background-color: blue;
}
#tres {
background-color: green;
}
</style>
HTML
<ul id="switches">
<li class="active">First slide</li>
<li>Second slide</li>
<li>Third slide</li>
</ul>
<div class="outer" id="slides">
<div class="active" id="uno">
First div.
</div>
<div id="dos">
Second div.
</div>
<div id="tres">
Third div.
</div>
</div>
You can view the page here:
http://dl.dropbox.com/u/6920023/proofOfConcept.html
I'm attempting to use standard Jquery to do this, but clearly there is something wrong with my javascript code.
Can you spot what's wrong and how to fix it?
Your CSS defines a div that's not active as hidden. So as soon as you remove the active class, it will be hidden immediately.
So, remove this entry:
#slides div {
display: none;
}
And add something like this on page load:
$(function() {
$('#slides div:not([class="active"])').hide();
}); // will hide inactive slides initially but not always
The issue is that you use slides.removeClass('active').fadeOut('slow');. So first it will remove the active class, which means (according to your CSS) that it will be a regular div, thus with the property display: none;.
So your div is automatically hidden. It's only afterwards that you do your fadeOut('slow'), on a hidden div thus.
Better would be to do something like:
$('div.active').fadeOut(1000).delay(1000).removeClass('active');
$(this).delay(2000).fadeIn(1000).delay(1000).addClass('active');
This works, if I understand the question correctly.
The issue is that you can't fade in an element that is hot hidden or unchcanged.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
switches = $('#switches > li');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).click(
function() {
switches.removeClass('active');
slides.removeClass('active').fadeOut('slow').hide();
$(this).addClass('active');
$(this).data('slide').addClass('active').fadeIn('slow');
});
});
</script>
Related
I have a menu with a list of items created dynamically using javascript.
They have different colour and country attributes created using setAttribute.
$("#menuList a").hover(
function() {
var countryName = $(this).attr('country');
var fruitColour = $(this).attr('colour');
$('#toshow').append($("countryName \n fruitColour"));
},
function() {}
);
.toshow {
display: none;
}
#menuList a:hover div.toshow {
top: 0;
right: 0;
display: block;
position: absolute;
z-index: 99999;
background: red;
width: 200px;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menubar" id="menuList">
<li>Watermelon</li>
<li>Grapes</li>
<li>Strawberry</li>
<li>Blueberry</li>
</ul>
<div class="toshow" id="toshow"></div>
Here, I want to have a separated hidden div (display at top right of the page or next to the menuList) that does not have any content until any of the <a> tag being hovered, and show its responding two attributes until no more mouse hovered.
The code does not have errors. But I don't see anything in red when the mouse hovered through the list. Is it possible to achieve what I am looking for?
You can use the mouseout event to hide the toshow div with hide as you leave a list element. And at each hover event, you can change the html of toshow to the values of the li element which the user is hovering over and use show to display it.
Also make sure you attach the event handlers after you've inserted the html of the dynamically generated list.:
function displayGeneratedList() {
$('#menuList').html(`
<li>Watermelon</li>
<li>Grapes</li>
<li>Strawberry</li>
<li>Blueberry</li>
`);
$("#menuList a").hover(function() {
var countryName = $(this).attr('country');
var fruitColour = $(this).attr('colour');
$('#toshow').html(`${countryName}<br>${fruitColour}`).show();
});
$('#menuList a').mouseout(function() {
$('#toshow').hide();
});
}
$(document).ready(function() {
displayGeneratedList();
});
#menuList {
display: inline-block;
}
.toshow {
display: none;
float: right;
background: maroon;
width: 200px;
height: 100px;
padding: 5px;
color: white
}
<ul class="menubar" id="menuList">
</ul>
<div class="toshow" id="toshow"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have list of different list items so when i click on specific item from list it should move from its current position to top position using jquery animate and at the same time hide remaining list items using jquery.
$(document).ready(function() {
$(".menu").click(function() {
$("li").animate({
top: '2px'
}, 'slow');
});
});
ul>li {
list-style-type: none;
line-height: 34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li>Account</li>
<li>Profile</li>
<li>History</li>
</ul>
You can show click element by adding addClass and css to added class and simultaneously you can hide others li by jquery hide(). Hope it helps. I'm just adding the animation to it.
$(document).ready(function() {
$("li").click(function() {
$(this).addClass('top');
$('li').hide();
});
});
ul>li {
list-style-type: none;
line-height: 34px;
}
.top{
display:inline-block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Account</li>
<li>Profile</li>
<li>History</li>
</ul>
Inorder to animate top the element has to be able to take the css property top. So far I made the element to be capable enough to take the property top and I animated it to top while reducing the opacity using transition. These jquery this are done for the sibling li elements of the clicked one.
$(document).ready(function() {
$(".menu li").click(function() {
$(this).siblings('li').animate({
top: '-60px'
}, 'fast');
$(this).siblings('li').css({
'opacity': '0'
});
});
});
ul>li {
list-style-type: none;
line-height: 34px;
position: relative;
top: 10px;
transition: all 2s ease;
}
.menu {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li>Account</li>
<li>Profile</li>
<li>History</li>
</ul>
I am trying to make a show content on mouseover and make it stay visible while the mouse is hovered on the list since I am planning to put a button there, but when I do hover, hidden content kept bouncing for some reason.
jQuery code
$('li.employers').mouseover(function () {
$('.employer_content').show("slow");
$(this).addClass("bluehover");
});
$('li.employers').mouseout(function () {
$('.employer_content').hide("fast");
$(this).removeClass("bluehover");
});
HTML
<li class="employers">
<div>employer</div>
<div class="employer_content">some content.</div>
</li>
<li class="court">
<div>court</div>
<div class="court_content">some content.</div>
</li>
http://jsfiddle.net/zLdnnxnh/3/
You can use only CSS to show/hide the contents.
You can take advantage of :hover class in CSS.
Demo using CSS only
.whatwedo {
padding: 20px;
color: #fff;
max-width: 480px;
margin: 0 auto;
}
ul li {
list-style-type: none;
}
ul > li {
background-color: #08588c;
display: inline-block;
width: 100%;
cursor: pointer;
float: left;
max-width: 100px;
padding: 10px;
}
.whatwedo {} ul.wwd_list {
padding: 0;
margin: 0;
}
.employer_content,
.court_content,
.companies_content,
.labor_content {
display: none;
clear: right;
}
.bluehover {
background-color: #01395d;
}
.content {
padding-top: 10px;
display: none;
}
.wwd_list li:hover .content {
display: block;
}
<div class="whatwedo">
<ul class="wwd_list">
<li class="employers">
<div>employer</div>
<div class="content">some content.</div>
</li>
<li class="court">
<div>court</div>
<div class="content">some content.</div>
</li>
<li class="companies">
<div>companies</div>
<div class="content">some content.</div>
</li>
<li class="laborunion">
<div>labour union</div>
<div class="content">some content.</div>
</li>
</ul>
</div>
CSS Demo with Animation
If you still want to use jQuery:
You are using mouseover event that is causing the handler to run when the mouse is moved over the element, use mousein instead
Use hover instead of mousein and mouseout
Your code is not flexible, you can optimize your code as follow
Use stop() to stop the previous animations
Demo
$('.wwd_list li').hover(function() {
$(this).find('div.content').stop().show("slow");
$(this).addClass("bluehover");
}, function() {
$(this).find('div.content').stop().hide("slow");
$(this).removeClass("bluehover");
});
.whatwedo {
padding: 20px;
color: #fff;
max-width: 480px;
margin: 0 auto;
}
ul li {
list-style-type: none;
}
ul > li {
background-color: #08588c;
display: inline-block;
width: 100%;
cursor: pointer;
float: left;
max-width: 100px;
padding: 10px;
}
.whatwedo {} ul.wwd_list {
padding: 0;
margin: 0;
}
.employer_content,
.court_content,
.companies_content,
.labor_content {
display: none;
clear: right;
}
.bluehover {
background-color: #01395d;
}
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="whatwedo">
<ul class="wwd_list">
<li class="employers">
<div>employer</div>
<div class="content">some content.</div>
</li>
<li class="court">
<div>court</div>
<div class="content">some content.</div>
</li>
<li class="companies">
<div>companies</div>
<div class="content">some content.</div>
</li>
<li class="laborunion">
<div>labour union</div>
<div class="content">some content.</div>
</li>
</ul>
</div>
You can use hover instead of mouseover and mouseout. Something like this:
$('li.employers').hover(function () {
$('.employer_content').show("slow");
$(this).addClass( "bluehover" );
console.log('mouse in');
}, function() {
$('.employer_content').hide("slow");
$(this).removeClass( "bluehover" );
console.log('mouse out');
});
Here's an example
How about this?
You can use stop() to stop the animation and continue the new animation from where it has stopped
$('.employer_content').stop().show("slow");
$('.employer_content').stop().hide("slow");
As recommended by others, use mouseenter than mouseover
Replace mouseover function with mouseenter and mouseout with mouseleave.
You can see this fiddle is working.
http://jsfiddle.net/ebilgin/zLdnnxnh/7/
Try using mouseenter and mouseleave instead:
From https://api.jquery.com/mouseover/:
This event type can cause many headaches due to event bubbling. For
instance, when the mouse pointer moves over the Inner element in this
example, a mouseover event will be sent to that, then trickle up to
Outer. This can trigger our bound mouseover handler at inopportune
times. See the discussion for .mouseenter() for a useful alternative.
$('li.employers').mouseenter(function () {
$('.employer_content').show("slow");
$(this).addClass("bluehover");
});
$('li.employers').mouseleave(function () {
$('.employer_content').hide("fast");
$(this).removeClass("bluehover");
});
http://jsfiddle.net/zLdnnxnh/5/
Just remove fast from your hide function. It is WORKING. Check this fiddle: http://jsfiddle.net/zp3jr43u/
The JavaScript code should like the following.
$('li.employers').mouseover(function () {
$('.employer_content').show("slow");
$(this).addClass("bluehover");
});
$('li.employers').mouseout(function () {
$('.employer_content').hide();
$(this).removeClass("bluehover");
});
Somehow the mouseover event gets triggered multiple times. I got it working by using the .stop() method before toggling the element.
http://jsfiddle.net/zLdnnxnh/4/
There's no need to have separate classes for each list item you have. Even with these separate classes the code below should get you up and running with ease.
$('.wwd_list li').hover(function () {
$('div:last-child',this).show("slow");
$(this).addClass( "bluehover" );
}, function(){
$('div:last-child',this).hide("slow");
$(this).removeClass( "bluehover" );
});
Note the fact that you only need to use one hover function instead of mouse in and mouse out. This works because you have two divs in the wwd_lsit class and the last one just so happens to be the one you want to target. So be careful with this if you ever want to change something!
Replace mouseover with mouseenter and mouseout with mouseleave.
See a more factorised form :
$('li').on({
mouseenter: function() {
jQuery("div.content", this).show('slow');
$(this).addClass( "bluehover" );
},
mouseleave: function() {
jQuery("div.content", this).hide('fast');
$(this).removeClass( "bluehover" );
}
});
(content class has been added to each content divs)
See the updated fiddle
I have a sliding menu that should be displayed over an image, actually a logo. However, when it does, it is shifted as if the text of the menu wanted to avoid touching the image.
See :
the problem in image http://fruityhotchocolate.com/m.png
(note: the website is in french)
I deal with the event as follows:
$("nav>#menu>ul>li").hover(function(e) {
$("ul",this).css("display","block");
});
Thanks.
You don't need javascript, you can do it with CSS:
Add the following code:
#menu>ul>li>ul {
display: none;
list-style: none;
}
#menu>ul>li:hover>ul {
display: block;
}
Moreover, you should use child selectors (>) instead of descendant selectors:
#menu>ul
#menu>ul>li>ul
#menu>ul>li>ul>li
#menu>ul>li>ul>li>a
#menu>ul>li>a, #menu>ul>li>a:hover, #menu>ul>li>a:visited
Basically, what happens is that the li expands to the same width as the ul because it does not have a fixed width. Try:
$(document).ready(function() {
$('#menu ul').children('li').each(function () {
$(this).css('width', $(this).css('width'));
});
});
Try it with CSS:
<div class="content">
<img src="https://www.google.com.br/images/srpr/logo3w.png" />
<ul class="menu">
<li>Item 1</li>
</ul>
</div>
CSS:
.content {
position: relative;
}
.content:hover .menu {
display: block;
}
.menu {
position: absolute;
display: none;
}
Demo: http://jsfiddle.net/nfKc4/
I am starting a Jquery drop down menu for a new project and it is working as expected on Google Chrome, Firefox, Safari but of course it is giving me some headache on Internet Explorer.
here's the thing,
See this page
http://www.universidadedoingles.com.br/dev/index.ASP
on mouse over the menu HOME, the drop down appers, when you move over the links in IE you see some flashes of the background, which doesn't happens on Chrome and ETC.
here's the js coda I am using to do the dd menu.
<script type="text/javascript">
$(document).ready(function() {
$("ul.mainmenu li.menuhome").mouseover(function(){
$(".arrow-spacer").show(); //When mouse over ...
//Following event is applied to the subnav itself (making height of subnav 150px)
$(this).find('.submenu').show().animate({height: '150px', opacity:'1'},{queue:false, duration:300})
});
$("ul.mainmenu li.menuhome").mouseout(function(){ //When mouse out ...
//Following event is applied to the subnav itself (making height of subnav 0px)
$(this).find('.submenu').hide().animate({height:'0px', opacity:'0'},{queue:false, duration:200})
});
//menu itembackground color animation
$("li").hover(function() {
$(this).animate();},
function() {
$(".arrow-spacer").hide();
});
});
</script>
That's it, I guess it may be simple, but it's been weeks and I still can't get it to work.
Thanks a lot.
I noticed that the anchor <a> tags have a margin on them. My first thing would be to try using padding instead. IE doesn't treat a hover in the margin the same way as other browsers.
in some cases it helps to set a z-index on elements that should placed in top of other elements.
In your case I would try to set the z-index on <ul class="submenu">
No blinks anymore! I changed one word hide() to stop (), now there is no blinking on iE. but...
After you show the menu 1 time, everytime you get your mouse below the link or close the link, the menu shows up again.
check this
www.universidadedoingles.com.br/dev
you'll be able to see its behavior
The thing is that the focus to <li> is lost when you mouse over an <a> element.
Here is something you could use to overcome this. I avoided using the <a> tag, instead I used a JavaScript function to send the user to the preferred location. I used JavaScript rather than jQuery hoping to make it more self-explanatory.
<script type="text/javascript" src="jquery.js" ></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#n li').hover(function() {
$('ul', this).slideDown(200);
$(this).children('a:first').addClass('h');
}, function() {
$('ul', this).slideUp(200);
$(this).children('a:first').removeClass('h');
});
});
function gotoPage(pnumber){
var goto;
if(pnumber==1){
goto="home.html";
}else if(pnumber==2){
goto="watsnew.html";
}else if(pnumber==3){
goto="aboutus.html";
}else if(pnumber==4){
goto="contactus.html";
}
window.location.href=goto;
}
</script>
<style type="text/css">
#n {
padding: 0;
list-style: none;
padding-left: 15px;
padding-right: 15px;
width:5em;
}
#n li {
/*display:inline;*/
background: none;
position: relative;
z-index: 1;
font-weight:bold;
margin: 0 auto;
}
#n li .h {
background-color: #fff;
border-left: 1px solid #CF3;
border-right: 1px solid #CF3;
color: #576482;
height:20px; }
#n ul {
position: absolute;
display: none;
margin: 0; padding: 0;
list-style: none
padding-bottom: 3px;
width:200px;
}
#n ul li {
list-style-type:none;
padding:10px;}
#n ul li:hover {
background:#960;}
</style>
<div>
<ul id="n">
<li>MENU
<ul >
<li value="1" onclick="gotoPage(this.value)">HOME</li>
<li value="2" onclick="gotoPage(this.value)">WATS NEW</li>
<li value="3" onclick="gotoPage(this.value)">ABOUT US</li>
<li value="4" onclick="gotoPage(this.value)">CONTACT US</li>
</ul>
</li>
<ul>
</div>