slide out and mouse outside glitch jquery - javascript

This is the Fiddle.
The problem is that, when you click on the button to close the slide out box, there is a glitch. I don't know how to fix it.
If someone could help me out that would be great. thanks!
var mouse_is_inside = false;
$(document).ready(function(){
$('#box').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('#box').slideUp();
});
});
That's the code, if it helps anyone.

Use slideToggle instead:
$(".show").click(function(){
$("#box").slideToggle();
});
Fiddle: http://jsfiddle.net/9spzQ/10/

Related

Helping to create style similar to accordian - jquery

I am currently implementing a set of tabs similar to the style of an accordian.
This is my code so far...
http://codepen.io/anon/pen/uqBnH
I am having trouble closing the others when one is selected.
My jQuery code...
$(function(){
$('.panel').hide();
$('.mobtabs').click(function(){
$(this).next().toggle();
});
});
Any help would be greatly appreciated.
Just toggle the others shut with:
$(function () {
$('.panel').hide();
$('.mobtabs').click(function () {
$('.mobtabs').not($(this)).next().hide();
$(this).next().toggle();
});
});
jsFiddle example
You can use:
$(function () {
$('.panel').hide();
$('.mobtabs').click(function () {
var nextPanel = $(this).next();
$('.panel').not(nextPanel).hide();
nextPanel.toggle();
});
});
Fiddle Demo
Make the following changes (I added the sliding) -
$('.panel').hide();
$('.mobtabs').click(function(){
$('.mobtabs').not( $(this) ).next().slideUp(); // close them all
$(this).next().slideToggle(); // slide open (or closed if it applies) this tab
});

How to hide div slowly in javascript

I have two div when I click button to close the div. second div moves upward I just want to do this slowly. I try to use transition effect but cant do it any help? thanks in advance.
fiddle
http://jsfiddle.net/ssZXA/185/
read the documentation about .hide()
the first argument is "duration"
You can use $("#notice").hide('slow');
use fadeOut
$( "#closebutton" ).click(function(event)
{
$("#notice").fadeOut('slow'); //OR fadeOut('10000') time is in milliseconds
});
Jsfiddle
Use
$("#notice").slideToggle();
or
$("#notice").fadeOut();
In Place of
$("#notice").hide();
Plz try this:
$("#notice").hide("slow");
Thanks.
Just apply slow on hide function and I customized your code as follows:
$("#closebutton").button({
icons: {
primary: "ui-icon-close"
},
text: false
}).click(function(event) {
$("#notice").hide("slow");
});
Refer LIVE DEMO
Just do this:
$("#notice").hide('fade');
or
$("#notice").hide('slideUp');
instead of $("#notice").hide();
Demo
$("#notice").hide('fade','slow');
DEMO
or
$("#notice").hide('fade',5000);
5000- indicates it will take 5seconds to hide. you can give any value.
Syntax:
$("selector").hide('type',time);
Try with this.
<body>
<div id="myDiv" style="width:200px;height:150px;background-color:red;">
This is the div that will fade out, slide up, then be removed from the DOM.
</div>
<input id="myButton" type="button" value="Fade" />
</body>
$(function() {
$("#myButton").click(function() {
$("#myDiv").fadeTo("slow", 0.00, function(){
$(this).slideUp("slow", function() {
$(this).remove();
});
});
});
});
Demo
$(function(){
$(this).html('«');
$('.slider-arrow').click(function(){
var x = $(".slider-arrow").offset();
if (x.left == "308")
{
$( ".slider-arrow, .panel").animate({left: "-=300"}, 700);
}
else
{
$( ".slider-arrow, .panel").animate({left: "+=300"}, 700);
}
});
});

jquery menu bar fadein fadeout error

so after some questioning i wrote a jsfiddle page to show you what im tried. When going over the link the div shows up but when the mouse goes over it it fadesout and again fadesin. Isnt posible that when going above the div it just stays there until you move the mouse away?
the example on jsfiddle works when you go above the menubar Crepes..
here´s my jquery code.. the css and html are on jsfiddle
thanks for the help!
http://jsfiddle.net/DFxB7/
<script type="text/javascript">
$("#crep, #front").hover(function (e) {
e.preventDefault();
$("#front").fadeIn();
},
function(){
$("#front").fadeOut();
});
</script>
add the event .stop() like this:
$("#crep, #front").hover(function (e) {
e.preventDefault();
$("#front").stop().fadeIn();
},
function(){
$("#front").stop().fadeOut();
});
DEMO
I believe this may give you the functionality you're after...
var toggle = 0;
$("#crep, #front").hover(function (e) {
if(toggle == 0)
{
toggle = 1;
$("#front").stop().fadeIn();
}else{
toggle = 0;
$("#front").stop().fadeOut();
}
});

jQuery mouseenter/leave

I have this code in html:
<div class="sub-status">
<p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>
On hover, I want that to be changed to:
<div class="sub-status">
<p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>
And, I have this code in jQuery:
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
});
$('.sub-status').mouseleave(function() {
$('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
The first function is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.
Thanks.
Change
$('this')...
to
$(this)...
And you can use hover() instead of using two separate functions:
$('.sub-status').hover(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
Updated
Your fiddle isn't working since you are updating the entire content of the hovered element - update just the text in <p> should work.
$('.sub-status').hover(function() {
$(this).children('p')
.removeClass()
.addClass('unsubscribed')
.html("<i>X</i> Unsubscribe");
},function() {
$(this).children('p')
.removeClass()
.addClass('subscribed')
.html("<i class='icon-check'></i> Subscribed");
});
Working fiddle
Here, try this. Working demo: http://jsfiddle.net/XrYj4/3/
$(document).ready(function() {
$('.sub-status').on("mouseenter", function() {
$(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe");
}).on("mouseleave", function() {
$(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed");
});
});
Try to use a hover function:
$(".sub-status").hover(
function () {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},
function () {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
}
);
http://api.jquery.com/hover/
Change 'this' to simply this. Also consider chaining, shown below, this helps users with weaker devices load stuff faster.
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
}).mouseleave(function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});

how to disable another event when done click event

I have 4 li element and I want when hover (mouseenter,mouseleave) everyone of them change background-color for everyone that choose.
I do it this work with this code :
<script>
$( document ).ready(function()
{
$('#center-group').children().on('mouseenter',function(){
$(this).children('.topmenu').children('.r-part').css('background-color','#810000');
$(this).children('.topmenu').children('.r-part').children('.r-part-bot').css('background-color','#980000');
});
$('#center-group').children().on('mouseleave',function(){
$(this).children('.topmenu').children('.r-part').css('background-color','#404040');
$(this).children('.topmenu').children('.r-part').children('.r-part-bot').css('background-color','#4c4c4c');
});
});
</script>
now I want when select (click event) everyone of li change background-color and don't work top event !!! how do it ??? please guide me....
this correct code:
$(document).on('mouseenter','#center-group li',function(){
$(this).children('.topmenu').children('.r-part').css('background-color','#810000').children('.r-part-bot').css('background-color','#980000');;
});
$(document).on('mouseleave','#center-group li',function(){
$('#center-group').children().not('.selected').children('.topmenu').children('.r-part').css('background-color','#404040').children('.r-part-bot').css('background-color','#4c4c4c');
});
$(document).on('click','#center-group li',function(){
$(this).toggleClass('selected');
$(this).siblings().removeClass('selected');
$('#center-group').children('.selected').children('.topmenu').children('.r-part').css('background-color','#810000').children('.r-part-bot').css('background-color','#980000');
$('#center-group').children().not('.selected').children('.topmenu').children('.r-part').css('background-color','#404040').children('.r-part-bot').css('background-color','#4c4c4c');

Categories

Resources