problem can be seen here: http://www.studioimbrue.com/beta
The code:
$(document).ready(function(){
$('div.caption').hide();
$('.captions ul li img').hover(function(){
$(this).siblings('div.caption').fadeIn('medium');
}, function(){
$(this).siblings('div.caption').fadeOut('medium');
});
});
Not sure what's causing the problem... Everything seems to be set up correctly.
The problem is that when the caption appears, your mouse is no longer on the image - a mouseleave event is sent to the image and a mouseenter to the caption div. The former triggers the fadeout. You can solve that by placing both the image and the caption into a container element (e.g. a <div>) and applying the event handler on this container. Then no matter whether the caption is showing or not, the outer container will not receive a mouseleave.
EDIT: Here's a working example:
HTML:
<div class="captions" id="talktostrangers">
<ul>
<li>
<img src="image1.jpg">
<div class="caption">Caption 1</div>
</li>
<li>
<img src="image2.jpg">
<div class="caption">Caption 2</div>
</li>
</ul>
</div>
Javascript:
$('.captions li').hover(function() {
$('.caption', this).fadeIn();
}, function() {
$('.caption', this).fadeOut();
});
Related
I want the menu to automatically animate closed after an item within the menu has been clicked on. And I want the user to still have the option to toggle the menu again. I managed to get the item to disappear after an item is clicked using $('#overlay').toggleClass(); but now the user no longer has the option to click on the menu again. I've tried googling around but can't find a clear answer. I'm new to JavaScript can someone please point me in the right direction.
Link to example http://codepen.io/anon/pen/KpRmgE
HTML
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li >Home</li>
<li>Port</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section id="home">
<p>First</p>
</section>
<section id="portfolio">
<p>Second</p>
</section>
<section id="about">
<p>Third</p>
</section>
<section id="contact">
<p>Fourth</p>
</section>
JavaScript
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
$("nav li").click(function () {
$('#overlay').toggleClass();
});
});
You weren't far off... just a few wrongly placed calls inside the click handler.
Try this:
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$("nav li").click(function() {
$('#overlay').toggleClass('open');
$('#toggle').toggleClass('active');
});
Forked codepen
You can also do it this way to make your event handler more clear:
$('#toggle').click(function() {
// Adding classes, waiting for a click
$(this).addClass('active');
$('#overlay').addClass('open');
$("nav li").click(function () {
// Clicked! Removing classes
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
});
});
I personally usually use the addClass and removeClass functions when you are doing that kind of specific action. That helps you avoid small errors that could take long to be seen. :)
I have my markup like this:
<div class="wrapper-header">
<div class="container">
<div class="navbar">
<ul class="nav navbar-nav">
<li class="">Show Categories</li>
</ul>
</div>
</div>
<div class="wrapper-categories">
<div class="container">
Content Here
</div>
</div>
The .wrapper-categories is display: none; by default, so it only shows once clicked with:
$(".toggle").on('click', function (event){
event.preventDefault();
$(".wrapper-categories").slideToggle("fast");
$(this).html(function(i,html) {
if (html.indexOf('Browse') != -1 ){
html = html.replace('Show','Hide');
} else {
html = html.replace('Hide','Show');
}
return html;
});
});
Now, I'd like to change that to showing on hover instead of on click, with the .wrapper-categories staying open if someone moves their mouse over and closing if it's not on the link or the content div anymore.
I tried replacing changing it to $(".toggle").hover(function() { and that worked, but it's not staying open. What else must I do?
Your code isn't working the way you desire is because the hover event of .toggle works only for itself. As soon as you try to move the mouse cursor over its contents i.e, under .wrapper-categories, the cursor goes out of the .toggle scope.
Here's a working example of how you need to implement this. You need to slightly change the structure of the menu you want to create using a simple structure of ul and li.
Here's is the FIDDLE.
HTML:
<ul class="nav navbar-nav">
<li class="menu">Show Categories
<ul>
<li>
Content Here
</li>
<li>
Content Here
</li>
<li>
Content Here
</li>
</ul>
</li>
</ul>
JS:
$(".menu").mouseover(function(){
$(this).find('ul').css('visibility', 'visible');
});
$(".menu").mouseout(function(){
$(this).find('ul').css('visibility', 'hidden');
});
CSS:
.menu > ul{
visibility:hidden;
}
.menu > ul > li:hover{
font-weight:bold;
}
Here is the solution for your problem.
https://jsfiddle.net/44wrL4g4/2/
I wrapped all in a menu class.
And I have used mouseleave() instead of mouseout(). See the Jquery documentation for these functions.
See the code for further understanding.
I'm new to jquery and I'm doing a slider.
I have:
<ul>
<li> <img src="image.jpg"><p>description of the current image</p></li>
<li> <img src="image.jpg"><p>description of the current image</p></li>
<li> <img src="image.jpg"><p>description of the current image</p></li>
<li> <img src="image.jpg"><p>description of the current image</p></li>
</ul>
what I need to do is when I click on a specific <li> element, it will be displayed in a lightbox with its content.
<div id="lightbox">Here is clicked li and its content</div>
I don't know really where to start.
How do I tell jQuery to take a li and put into div?
You could do as follows:
$(document).ready(function() {
$('li').on('click', function() {
$('#lightbox').html($(this).html());
});
});
below is my code and i want when i mouse hover the Link CMT its div will open and when i mouse out its div closed. .....
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
contents of 1st
</div>
</li>
<li>
<h2>FOIS</h2>
<div class="content">
contents of 2nd
</div>
</li>
<li>
<h2>ASP</h2>
<div class="content">
contents of 3rd
</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">
contents of 4th
</div>
</li>
</ul>
</div>
Try this
$('h2').on('mouseenter', function () {
$(this).next().show();
}).on('mouseleave', function () {
$(this).next().hide();
});
DEMO
incase you want the want the content to be shown when you hover over that too you could do this
$('li').on('mouseenter', function () {
$(this).find('.content').show();
}).on('mouseleave', function () {
$(this).find('.content').hide();
});
DEMO
I've got a similar solution, but using hover() instead:
$(document).ready(function(){
$('h2').hover(function(){
$(this).next().css("display","block");
},function(){
$(this).next().css("display","none");
});
});
jsFiddle Demo
Actually, I like the .show() / .hide() methods better with this:
$(document).ready(function(){
$('h2').hover(function(){
$(this).next().show('fast');
},function(){
$(this).next().hide('fast');
});
});
jsFiddle Demo 2
Not to overdo this or anything, but came across a really interesting solution from another stackoverflow question here:
HOVERINTENT Plugin Solution
Last update though, I promise!
I have three sliding panels in my html.
The thing is that panels overlay each other when open.
I would like to get a function that create an event when one panel (eg. #panel1) is open already and the user will click on the other one (#panel2) then the first one (#panel1) will slide out so there can be only one panel open at a time.
Anyone can help me with that??
Thanks in advance.
HTML:
<ul id="menu">
<li><img id="icon_1" src="images/image1.png"></li>
<li><img id="icon_2" src="images/image2.png"></li>
<li><img id="icon_3" src="images/image3.png" ></li>
</ul>
<div id="panel1"></div>
<div id="panel2"></div>
<div id="top_panel"></div>
jQuery (#panel1 and #panel2 function taken from http://web.archive.org/web/20150227082803/http://www.jqeasy.com/jquery-slide-panel-plugin):
$(document).ready(function(){
$('#panel1').slidePanel({
triggerName: '#icon_1',
speed: 'slow'
});
$('#panel2').slidePanel({
triggerName: '#icon_2',
speed: 'slow'
});
});
$(document).ready(function(){
$("#icon_3").click(function(){
$("#top_panel").slideToggle("slow");
});
});
Something in these lines. I would you data-* attributes to provide a relation between the panels and the images. The follow up the logic based on the conditions.
Javascript
$('#panel1').slidePanel({
speed: 'slow',
position: 'static'
});
$('#panel2').slidePanel({
speed: 'slow',
position: 'static'
});
$("[id^=icon]").click(function () {
// Current active panel
var $currPanel = $('#' + $(this).data('panel'));
// Slideup all the other panels other than $currPanel
$('.panel').not($currPanel).slideUp();
// If $currPanel has no active class only then slide down
if (!$currPanel.hasClass('current')) {
$currPanel.slideDown("slow");
}
// Add class active to current panel
$currPanel.addClass('current');
// Remove class for other panels
$('.panel').not($currPanel).removeClass('current');
});
HTML
<ul id="menu">
<li>
<img id="icon_1" src="images/image1.png" data-panel="panel1">
</li>
<li>
<img id="icon_2" src="images/image2.png" data-panel="panel2">
</li>
<li>
<img id="icon_3" src="images/image3.png" data-panel="top_panel">
</li>
</ul>
<div id="panel1" class="panel"></div>
<div id="panel2" class="panel"></div>
<div id="top_panel" class="panel"></div>
Check Demo