I wrote a code where a div appears if someone hovers other div, I added the 5 seconds delay so the shown div stays but the problem is that I want it to stay until next link hovered. Means I need the first div to be disappeared if the second link hovered.
Here's JS Fiddle link of my existing code:
http://jsfiddle.net/np87e/880/
$( document ).ready(function() {
$("#theLink3").hover(
function () {
$("#theDiv3").slideDown();
},
function () {
$("#theDiv3").delay(5000).slideUp();
}
);
$("#theLink4").hover(
function () {
$("#theDiv4").slideDown();
},
function () {
$("#theDiv4").delay(5000).slideUp();
}
);
});
You need to call slideUp() of the div in next elements mouseenter callback
$("#theLink3").hover(function () {
$("#theDiv4").stop(true, true).slideUp();
$("#theDiv3").slideDown();
}, function () {
$("#theDiv3").delay(5000).slideUp();
});
Demo: Fiddle
Note: I'm not a fan of writing individual hover handlers like you have done. So
hover here
<div id="theDiv3" class="target">this is the div</div>
<hr />
hover here
<div id="theDiv4" class="target">this is the div</div>
<hr />
then
jQuery(function ($) {
var $targets = $('.target');
$(".trigger").hover(function () {
var $target = $(this).next('.target').stop(true, true).slideDown();
$targets.not($target).stop(true, true).slideUp();
}, function () {
$(this).next('.target').stop(true, true).delay(5000).slideUp();
});
});
Demo: Fiddle
Related
Using jquery plugin with mouse hide and show I am trying to create tool tip.I am facing two problem
Whether my code is correct for mouseout and mouseleave
When I am creating lot of tooltip it was not positioning correctly it was coming down actually it has to come to right side.
I have found so many from stack Overflow but nothing is working out.
Here is the jquery code
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function () {
$("#showtooltip").show();
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function () {
$("#showtooltip1").show();
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function () {
$("#showtooltip2").show();
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
Third mouse over was not working. I am trying to creating I think missed something.
Here is the jsbin Link
Kindly help me
Thanks & Regards
Mahadevan
Just add this css rules to your .tooltip class:
position: absolute;
top: 40px; /* define how much space from tooltip to the top
and this javascript:
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function (e) {
$("#showtooltip").show();
$("#showtooltip").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function (e) {
$("#showtooltip1").show();
$("#showtooltip1").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function (e) {
$("#showtooltip2").show();
$("#showtooltip2").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
I added only this line in javascript mouseenter function:
$("#showtooltip").css('left', e.pageX);
It sets the tooltip left coordinate, in case you have many items, the tooltip will show exactly beneath the hovered item.
Customization
If you want the tooltip right of the hovered item, you will need to add this css:
var rightMargin = 20; // or whatever fits your needs
$("#showtooltip").css('left', e.pageX + rightMargin);
and change your css top property above.
Update
Since this code of yours is very coupled and you asked for a better solution, here it is jQuery code:
$(document).ready(function() {
$(".tooltip").hide();
$(".help").on({
mouseenter: function (e) {
var tooltip = $(this).next(); tooltip.show();
tooltip.css('left', e.pageX + 20);
},
mouseleave: function () {
$(this).next().hide();
}
});
});
to work this, you gonna have to remove your coupled ids and instead add to every anchor tag class help.
the code simply checks if the user is hovering a link, and if so, then just show the next element after it, which happens to be the tooltip.
Here is a FIDDLE
Cheers
I want to write a code which can toggle two sentences fading in and fading out. But I want to toggle the sentences at the same location ie one text fades and the other starts coming in place of the first. In this case the sentences occur one below the other. Is there any way I can do this as in html content always comes one below the other.
This is the jquery script.
<script>
$(document).ready(function(){
$(function(){
$("#hide1").hide();
while(1)
{
$("#hide2").fadeOut(3000);
$("#hide1").fadeIn(3000);
$("#hide1").fadeOut(3000);
$("#hide2").fadeIn(3000);
}
});
});
</script>
Html
<p id="hide1"> Hide 1 <p>
<p id="hide2"> Hide 2 <p>
Demo
Try like this make the queue and animate
$("#hide1").hide();
function hide1() {
$("#hide2").fadeIn(3000);
$("#hide2").fadeOut(3000, hide2);
}
function hide2() {
$("#hide1").fadeIn(3000);
$("#hide1").fadeOut(3000, hide1);
}
hide1();
OR Chaining
$("#hide1").hide();
function hide1() {
$("#hide2").fadeIn(3000).fadeOut(3000, hide2);
}
function hide2() {
$("#hide1").fadeIn(3000).fadeOut(3000, hide1);
}
hide1();
This code would react dynamically, and it does not need any changes even if you want to apply this effect for more than two p elements
$("p").hide();
function test(elem) {
elem.fadeIn(1000, function () {
elem.fadeOut(1000, function () {
test(elem.next('p').length ? elem.next('p') : $('p:first'));
});
});
}
test($('p:first'));
DEMO
Try this:
setInterval(function () {
$('#hide1').fadeOut(1000, function () {
var $this = $(this);
$this.text($this.text() == 'Hide 2' ? 'Hide 1' : 'Hide 2');
$this.fadeIn(1000);
});
}, 3000);
Toggle the text within the setInterval function.
Fiddle Demo
Use a single paragraph tag and toggle the text within it while you try to fade it in and out.
$(document).ready(function(){
$(function(){
window.setInterval(function() {
$("#hideorshow").fadeToggle(1000, "linear", function() {
$("#hideorshow").text($("#hideorshow").text() === "Hide 1" ? "Hide 2" : "Hide 1");
$("#hideorshow").fadeToggle(1000, "linear");
});
}, 2000);
});
});
Also, I would suggest you use fadeToggle() instead of fadeIn() and fadeOut().
Here is a working JSFiddle demo.
show below jquery code
$(document).ready(function () {
$('#prvnote').hide();
$('#regclass').click(function () {
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
});
});
show below HTML code
This div only use as menu
<div id="regclass"><span>View Previous Note</span></div>
Now when i clicked on above div content then below div will display and above span tag content replace with "Post Note"
<div id="newdiv"><form>......</form></div>
<div id="prvnote"><form>......</form></div>
When div(newdiv) show then span content "Post Note" and when div(prvnote) show then span content must be "View Previous Note"
Try this
$(document).ready(function () {
$('#prvnote,#newdiv').hide();
$("#regclass").toggle(function () {
$('#regclass span').text('Post Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
}, function () {
$('#regclass span').text('View Previous Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
});
});
DEMO
HTML
<div id="newdiv" style="display:none"><form>......</form></div>
<div id="prvnote"style="display:none"><form>......</form></div>
<div id="regclass"><span>View Previous Note</span></div>
Jquery
$('#regclass').click(function () {
alert("Hi");
$("#regclass span").html("").append("POST NOW");
$('#prvnote').css({"display":"block"});
$('#newdiv').css({"display":"block"});
});
Check The Fiddler Here
http://jsfiddle.net/ShekharPankaj/3htMG/
Try this:
$(document).ready(function () {
$('#prvnote').hide();
$("#regclass").toggle(function () {
$('#regclass span').text('Post Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
}, function () {
$('#regclass span').text('View Previous Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
});
});
Taken from Sridhar R, i understand you want to show only one div at a time...
Hello I have two divs that fadeToggle with a timer as follows
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
Javascript to make it toggle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow");
$('#div2').fadeToggle("slow");
}
Here is fiddle link http://jsfiddle.net/BnYat/
My issue is that the second div shows up before the first div is done toggle and then causes a jump up to the top.
If there a way to create a smooth transition from one div to the next without the jump effect happening?
A simple solution is to put both div elements in a single container, and position them absolutely:
<div id="container">
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
</div>
#container div {
position: absolute;
}
Example fiddle
Alternatively, you could fade one out completely then fade the next in in the callback:
setInterval(ToggleDiv, 5000);
function ToggleDiv(){
$('#div1').fadeToggle("slow", function() {
$('#div2').fadeToggle("slow");
});
}
Example fiddle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow", function(){
$('#div2').fadeToggle("slow");
});
}
just use animate
$( "#div1" ).animate({
visibility:hidden
}, 5000, function() {
// Animation complete.
});
$( "#div2" ).animate({
visibility:visible
}, 5000, function() {
// Animation complete.
});
Try this
setInterval(ToggleDiv, 5000);
function ToggleDiv() {
var div = "#" + $('div:visible').attr('id');
var div2 = "#" + $('div:not(:visible)').attr('id');
$(div).fadeToggle("slow", function () {
$(div2).fadeToggle("slow");
});
}
DEMO
or
function ToggleDiv() {
if ($('#div1').is(':visible')) {
$('#div1').fadeToggle("slow", function () {
$('#div2').fadeToggle("slow");
});
} else {
$('#div2').fadeToggle("slow", function () {
$('#div1').fadeToggle("slow");
});
}
}
DEMO
How do i make that when i press a button instead of that the div like dropping under the div the the maybe 'home' div disappear when i fire the other show hidden div ?
Here's the Javascript:
jQuery(document).ready(function () {
jQuery('#hideshow2').live('click', function (event) {
jQuery('#content2').toggle('show');
});
});
pretty easy..... See this fiddle. http://jsfiddle.net/RCfVX/
jQuery(document).ready(function () {
jQuery('#homebtn').click(function (event) {
jQuery('#one').toggle();
jQuery('#two').toggle();
});
});