I am using the jQuery plugin Gridster.
I have made an add_widget button which adds a new widget. This widget can be deleted again also.
All this is working properly. But when you click the header it should trigger a sliding box. But this sliding box doesn't work on newly added widget, only on the widgets that were there from the start.
HELP!!!!
See this fiddle:
http://jsfiddle.net/ygAV2/
I suspects the:
addbox part
//add box
$('.addbox').on("click", function() {
gridster.add_widget('<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"><div class="box"><div class="menu"><header class="box_header"><h1>HEADER 5</h1></header><div class="deleteme">delete me ;(</div></div></li>', 2, 1)
});
and the sliding box part:
// widget sliding box
$("h1").on("click", function(){
if(!$(this).parent().hasClass('header-down')){
$(this).parent().stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
} else{
$(this).parent().stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(document).click(function() {
if($(".box_header").hasClass('header-down')){
$(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(".box_header").click(function(e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});
The use of .live() is deprecated. http://api.jquery.com/live/
So using the correct way, .on(event, selector, handler) on all your click events.
You will achieve your desired result.
Here is a code snippet
$(document).on("click", 'h1', function() {
if (!$(this).parent().hasClass('header-down')) {
$(this).parent().stop().animate({
height: '100px'
}, {
queue: false,
duration: 600,
easing: 'linear'
}).addClass('header-down');
} else {
$(this).parent().stop().animate({
height: '30px'
}, {
queue: false,
duration: 600,
easing: 'linear'
}).removeClass('header-down');
}
});
and here
//remove box
$(document).on('click', ".deleteme", function () {
$(this).parents().eq(2).addClass("activ");
gridster.remove_widget($('.activ'));
$(this).parents().eq(2).removeClass("activ");
});
and also here
$(document).on("click", ".box_header", function (e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});
I have updated your jsfiddle: http://jsfiddle.net/ygAV2/2/
Related
When I click the burger navigation I am trying to have the menu info drop down after the background fades in. But when I click the nav it doesn't work immediately. Only fading. After successive clicks it works. What am I doing wrong here? How can I get it working on the first click.
https://jsfiddle.net/mo16z57j/
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
$('.navOpen')
.css('opacity', 0).delay(800)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
).toggle();
});
Try the following code
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
$('.navOpen')
.css('opacity', 0).delay(800)
.show()
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
).toggle();
});
My problem:
http://www.danieldoktor.dk/test2/test2.html
when you push either of the settings buttons it triggers both of the boxes.
I would like an overall code to control the button and the slide-down-and-up-box with a code similar to this, which controls each of the boxes individually instead of controlling them both:
$(".someBtnClass").click(function () {
if(!$(".someBoxClass").hasClass('header-down')){
$(".someBoxClass").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
}
else{
$(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(document).click(function() {
if($(".someBoxClass").hasClass('header-down')){
$(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(".someBoxClass").click(function(e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});
Can this be done with a class?
If not, how can it be made, so the boxes, later can be loaded with php?
EDIT
My markup:
HTML
<div class="lists">
<header class="box_header" id="box1">
<h1>HEADER 1</h1>
<div class="setting" id="btn1"></div>
</header>
</div>
<div class="lists">
<header class="box_header" id="box2">
<h1>HEADER 2</h1>
<div class="setting" id="btn2"></div>
</header>
</div>
jQuery
$(".setting").each(function(){
$(this).on("click", function(){if(!$(".box_header").hasClass('header-down')){
$(".box_header").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
}
else{
$(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}});
});
$(document).click(function() {
if($(".box_header").hasClass('header-down')){
$(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(".box_header").click(function(e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});
You're selector is grabbing both. You need to tell it to only grab the parent and animate it, instead of grabbing the "box-header" class and animating it
Javascript:
$('.setting').on('click', function() {
var parent = $(this).parent();
if (!parent.hasClass('header-down')) {
parent.stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
} else {
parent.stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
JSFiddle: http://jsfiddle.net/jeffshaver/kHV8V/1/
Your markup is like this (you should have added this to your question)
<header id="box1" class="box_header">
<h1>HEADER 1</h1>
<div id="btn1" class="setting"></div>
</header>
for each box. So if you click on .setting you want to animate only the .box_header (parent) of the correct settings button, I presume?
$(".setting").on("click", function(){
if(!$(this).parent().hasClass('header-down')){
$(this).parent().stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
} else{
$(this).parent().stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
});
Modified version of your jQuery Code
// widget 1
$("#btn1").each(function(){
$(this).on("click", function(){if(!$(".box_header").hasClass('header-down')){
$("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
}
else{
$(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}});
});
$("#btn2").each(function(){
$(this).on("click", function(){if(!$(".box_header").hasClass('header-down')){
$("#box2").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
}
else{
$(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}});
});
$(document).click(function() {
if($(".box_header").hasClass('header-down')){
$(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(".box_header").click(function(e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});
Demo
The click event should be registered with the "ID" of the setting button and not with the css class, as it will apply to all the matched elements. Create a function passing that particular element and replace your $(".someBoxClass") with $(element). For example,
$('#btn1').click(function(){animate(this)});
function animate(element){
$(element).stop().....
}
You should use ID instead of class.
$("#box1").click(function () {
$("#box2").click(function () {
I think this is what you want: http://jsfiddle.net/MTcvu/
whithout knowing your markup you can try something like this:
var box = $(this).parents("div.parent_class").find('.someBoxClass');
then replace $('.someBoxClass') with box
jQuery("#markets_served").hover(function(){
jQuery.data(document.body, "ms_height", jQuery(this).height());
if(jQuery.data(document.body, "ms_height") == 35) {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
}
});
jQuery("#btn_ms_close").hover(function(){
jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
jQuery("#markets_served").stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery(this).css("display","none");
});
Problem with hovering out. It wont work. It wont hover out when the mouse is out of the content that appears on hover.
http://uscc.dreamscapesdesigners.net/ - example at the bottom " Markets Covered"
Take a look at the hover declaration on the jQuery site. You can specify a handler for the mouseover and mouseout event in one swoop. No need to calculate heights or bind another handler to a new div that appears.
$("#markets_served").hover(
function () {
//do this when over
},
function () {
//do this when out
}
);
Use is like:
$('#el').hover(function(e) { /* hover; */ }, function(e) { /* unhover */ });
here is documentation
Or simplier without data:
jQuery("#markets_served").hover(function() {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
}, function() {
jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","none");
});
When mouse comes in you increase the height of the div but you dont reset it when mouse is outside the div hence the issue.
You should do something like this:
jQuery("#markets_served").hover(
function(){
jQuery.data(document.body, "ms_height", jQuery(this).height());
if(jQuery.data(document.body, "ms_height") == 35) {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
} ,
function(){
jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","none");
}
});
I am using the following code for my jQuery UI tabs:
$('#tabs').tabs({
fx: { opacity: 'toggle', duration: 400 }}).tabs('rotate', 1000);
$("#tabs").hover(function() {
$("#tabs").tabs("rotate",0);
},
function() {
$("#tabs").tabs("rotate",1000);
});
$("#tabs").click(function() {
$("#tabs").tabs('rotate', 0);
});
The tabs are rotating properly and the rotation stop when hovering with the mouse. However, the 'hover' function is also overriding the 'click' function. How can I achieve a pause when hovering, and a complete stop to the rotation on click?
Try this
$('#tabs').tabs({
fx: { opacity: 'toggle', duration: 400 }
}).tabs('rotate', 1000);
$("#tabs").hover(
function() {
$("#tabs").stop();
},
function() {
$("#tabs").tabs("rotate",1000);
}
);
$("#tabs").click(
function() {
$("#tabs").stop(true);
}
);
just a week ago i looked for the same issue. Now i created an extesion: Pause on Hover for jQuery UI Tabs Rotate
Everything works just fine, but when I remove
{queue:false, duration: 800, easing: 'easeInOutQuart'}
from
$(".chapters_list").slideDown(
with a 500, it stops working. So if I don't want easing in my script, it will work fine, when I insert easing into the top function, like is shown below, it stops working. Why wont it allow me to have easing?
$('.article_book_title').click(function () {
if ($(".chapters_list").is(":hidden")) {
$(".chapters_list").slideDown({queue:false, duration: 800, easing: 'easeInOutQuart'}, function () {
doSlide($('UL.chapters_list li:first'))
});
} else {
$(".chapters_list").slideUp({queue:false, duration: 800, easing: 'easeInOutQuart'});
}
});
function doSlide(current) {
$(current).animate({
backgroundColor:'#d6f4aa', color:'#eee'
},40, function() {
$(this).animate({backgroundColor:'#252525', color:'#fff'}, 500)
doSlide($(current).next('li'));
});
}
The shortcut methods like slideUp dont take an object config as an argument.. they take the duration and the call back. If you want more advance options you have to use the animate method.
slideUp API