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
Related
I currently have the following code.
to get the #headerfader to resume running after the second function runs (hovering over and off again to reset the fading text)
I've duplicated the code inside the function.
Is there a more elegant way of handling this?
//FADER TEXT
$('#headerFader').carousel({
interval: 2500,
pause: false
});
//BACK HOME TEXT
$('#headerText').hover(
function(){
$(this).find("h1#masterHeader").animate({opacity:0}, 0, function(){
$(this).css("display", "none");
$('#headerText').find("h1#takemeback").css("display", "block");
$('#headerText').find("h1#takemeback").animate({opacity:1,});
});
},
function(){
$(this).find("h1#takemeback").animate({opacity:0}, 0, function(){
$(this).css("display", "none");
$('#headerText').find("h1#masterHeader").css("display", "block");
$('#headerText').find("h1#masterHeader").animate({opacity:1,});
//FADER TEXT
$('#headerFader').carousel({
interval: 2500,
pause: false
});
});
}
);
This is a complex solution to this problem, which minimizes the numbers of jQuery element fetching calls
Note that it's clean and a lot faster than the other solutions provided. Unless it's tested I believe that this is a working piece of code.
Since you are using # div id selector (which is unique) the is no need for calling find() function.
//Object handles
var headerFader = $('#headerFader');
var masterHeader = $('#masterHeader');
var takemeback = $('#takemeback');
headerFader.carousel({
interval: 2500,
pause: false
});
//BACK HOME TEXT
headerFader.hover(
function(){
masterHeader.animate({opacity:0}, 0, function(){
$(this).css("display", "none");
takemeback.css("display", "block").animate({opacity:1}, 1000);
});
},
function(){
takemeback.animate({opacity:0}, 0, function(){
$(this).css("display", "none");
masterHeader.css("display", "block").animate({opacity:1}, 1000);
headerFader.carousel({
interval: 2500,
pause: false
});
});
}
);
Outside your other functions, you'd do this:
function showHeader(el) {
$(el).css("display", "none");
$('#headerText').find("h1#takemeback").css("display", "block");
$('#headerText').find("h1#takemeback").animate({opacity:1,});
}
Then, inside your hover functions, call it:
showHeader(this);
Along with the variable suggestion above, you can chain your statements:
$('#headerText').find("h1#takemeback").css("display", "block").animate({opacity:1,});
Also, #takemeback should be unique, so this would do:
$("#takemeback").css("display", "block").animate({opacity:1,});
I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>
Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.
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/
im a very very noobie in jquery question, im developing a site using maximage plug in, it seem every work perfectly, but i dont know how to hightlight a link when is click it on it, sorry for my terrible english.
Here's the website i'm developing.
http://aranasoluciones.com/azulejera/ejemplo-ok.html
and there is the js
<script type="text/javascript" charset="utf-8">
$(function(){
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 3000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
timeout: 0,
prev: '#arrow_left',
next: '#arrow_right',
},
onFirstImageLoaded: function(){
jQuery('#cycle-loader').hide();
jQuery('#maximage').fadeIn(1500);
jQuery('.in-slide-content').delay(1200).fadeIn('slow');
}
});
});
$('.toggle').bind('click', function(e){e.preventDefault();
$('#maximage').cycle('toggle');
});
$("#2").click(function(e) {
$('#maximage').cycle(1);
return false;
});
$("#1").click(function(e) {
$('#maximage').cycle(0);
return false;
});
$("#3").click(function(e) {
$('#maximage').cycle(2);
return false;
});
</script>
PLEASE HELP!!!!! i will preaciated very much!!!
This would do what you need:
$("#nav li a").click(function () {
$("#nav li a").removeClass("selected"); // OR $("#nav li a").css("background-color");
this.addClass("selected"); // OR $("#nav li a").css("background-color","#0070ba");
});
However would suggest you to change your navigation link id to something more meaningful (instead of #1 #2 #3 to #nav1 #nav2 #nav3).
If i use the code
$("#maximage").cycle(1);
$("#maximage").cycle(2);
explicitly in your website specified using firebug the image getting changed. Could you please check whether the button with id "#1","#2" are defined and event defined for it are correct and the definition for click event should be defined inside $(function(){ }); or document ready. Please check the below code.
<script type="text/javascript" charset="utf-8">
$(function(){
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 3000, // HastomatchthespeedforCSStransitionsinjQuery.maximage.css(lines 30 - 33)
timeout: 0,
prev: '#arrow_left',
next: '#arrow_right',
},
onFirstImageLoaded: function(){
jQuery('#cycle-loader').hide();
jQuery('#maximage').fadeIn(1500);
jQuery('.in-slide-content').delay(1200).fadeIn('slow');
}
});
});
$('.toggle').bind('click', function(e){e.preventDefault();
$('#maximage').cycle('toggle');
$("#2").click(function(e) {
$('#maximage').cycle(1);
return false;
});
$("#1").click(function(e) {
$('#maximage').cycle(0);
return false;
});
$("#3").click(function(e) {
$('#maximage').cycle(2);
return false;
});
});
</script>
Thanks
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");
}
});