Link: https://jsfiddle.net/nbonne/9hcoy9j8/
I aim is to have the medium blue box and everything in it move up when the search button is pressed.
I know my selector is for "form" and it's trying to change the background, I'm having trouble getting anything to animate.
I think this is the correct way to accomplish it but nothing happens:
$("#search-btn").click(function{
$("controls-main").animate({
background: "red"
}, 500);
})
In the fiddle:
Second click handler was missing parentheses (syntax error in console)
s-form class was missing from your form html code (empty selector)
$('search') is a wrong selector. You probably wanted $('[name=search]');
You are animating background, which jQuery's animate doesn't animate.
Updated working fiddle: https://jsfiddle.net/9hcoy9j8/18/
$(document).ready(function() {
$(".rand-wiki").click(function() {
window.open("https://en.wikipedia.org/wiki/Special:Random");
});
$(".s-form").on('click', function () {
$("[name=search]").animate({
marginTop: '40px'
}, 500);
});
});
jQuery on its own can't animate colors. You need another library like jQuery UI. See this SO answer for more information.
Related
I am using Jquery to make click events. It is simple when I am changing css properties, but one of my elements I am trying to change (a canvas) the size in HTML.
I am trying to access and change this html code on a click - width and height:
<canvas id="testCanvas" width="755" height="500" > </canvas>
with this jquery
$('#flipthehood').click(function(){
console.log('hood flipped clicked');
$getElementById('testCanvas').animate({width="200"}, 250);
})
Is this the best way to go about it? if so, could I please have some advice with the syntax to make it work? I am getting an error of unexpected = sign
Thanks a lot
Fetch element using id selector in jquery,
document.getElementById('testCanvas') is equivalent to $('#testCanvas')
and the correct syntax for .animate() is like:
$('#testCanvas').animate({width:"200"}, 250);
Make sure your click events are when the document is ready. Also document.getElementById isn't used in JQuery. This works:
$(document).ready(function() {
$('#flipthehood').click(function(){
console.log('hood flipped clicked');
$('#testCanvas').attr("width", "200");
});
});
If you want it to be a smooth animation simply change it to this:
$(document).ready(function() {
$('#flipthehood').click(function(){
console.log('hood flipped clicked');
$('#testCanvas').animate({width: "200"}, 250);
});
});
$.animate uses a colon instead of an equals sign.
To change an element attribute with jQuery use the .attr() method:
$("#testCanvas).attr("width", 200)
I made a toggle button with pure CSS/jQuery and all works perfectly. The problem comes when I duplicated it and tried to toggle it. As supposed, the toggles 'toggled' at the same time, here is my code so far:
HTML
<div id="container">
<div id="switch-1"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div><br><br>
<div id="switch-2"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div>
</div>
jQuery
$(function(){
$('.space').click(function(){
if($('.circle').hasClass("detector")){
$('.circle').animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').css("background","#8e3135"); $('.light-2').css("background","#adafb2"); $('.circle').removeClass("detector");});
} else {
$('.circle').animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').css("background","#adafb2"); $('.light-2').css("background","#8e3135"); $('.circle').addClass("detector");});
}
});
$('.space').eq(1).click(function(){
if($('.circle').eq(1).hasClass("detector-1")){
$('.circle').eq(1).animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').eq(1).css("background","#8e3135"); $('.light-2').eq(1).css("background","#adafb2"); $('.circle').eq(1).removeClass("detector-1");});
} else {
$('.circle').eq(1).animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').eq(1).css("background","#adafb2"); $('.light-2').eq(1).css("background","#8e3135"); $('.circle').eq(1).addClass("detector-1");});
}
});
});
Or the Jsfiddle:
http://jsfiddle.net/ew0s6nqd/
This is how it works, when you click the toggle it detects if it has a class called "detector". If it doesn't, it animates the toggle and creates one. If it does, that means that the class was previously created so it animates back the toggle and removes the class.
Ok, the problem starts when I duplicate the toggle. I have now two of them which I want to activate individually. The easiest solution was using :eq() jQuery selector or .eq() jQuery function which people classified as a more 'correct' option.
So I add it to the code of the second toggle but it didn't worked. In the fiddle above you can test it by yourself. Please if someone know which is the problems, let me know, thanks!
EDIT: I already used :eq() selector but it didn't work either.
EDIT 2: I use a different detector class called "detector-1" to prevent it from interfering with the other one.
$(function () {
//the click function for every element with the .space class
$('.space').click(function () {
//check on the .circle child of the clicked .space using "this"
if ($('.circle', this).hasClass("detector")) {
//and animate it
$('.circle', this).animate({
marginLeft: "2px"
}, "slow", function () {
// since we are in the animate callback, "this" is now the
// .circle of the clicked .space
// we want the lights to change - so we have to travel the dom upwards
// 1st .parent() brings us to .space
// 2nd .parent() leads us to .switch
// siblings() let us find the .light-1 element
$(this).parent().parent().siblings('.light-1').css("background", "#8e3135");
// same here for light-2
$(this).parent().parent().siblings('.light-2').css("background", "#adafb2");
$(this).removeClass("detector");
});
} else {
$('.circle', this).animate({
marginLeft: "47px"
}, "slow", function () {
$(this).parent().parent().siblings('.light-1').css("background", "#adafb2");
$(this).parent().parent().siblings('.light-2').css("background", "#8e3135");
$(this).addClass("detector");
});
}
});
});
using the this selector, you need to define the click handler only once - and it still works for endless numbers of buttons...
"see working fiddle"
forgot to mention. i changed the css in your fiddle, since the background image didn't show up, i created a white circle via css...
I figured out how to make it thanks to #BhushanKawadkwar
I had to use the :eq() selector on the click function and .eq() function in the other ones. I don't know why, but it works, here's the working fiddle:
http://jsfiddle.net/ew0s6nqd/2/
I can't seem to make the jQueryUI explode effect work. Here's a jsfiddle I tried. Usually when I try the element hides with no explosion effect whatsoever, the jsfiddle just looks strange exploding.
$('h1, h2').click(function() {
$(this).hide('explode');
});
The jQueryUI docs on the explode effect are not very clear on how to use it.
Am I doing something wrong?
You can fix it by putting more text. Here is a jsfiddle https://jsfiddle.net/k380zpgx/. By the way use this code instead it gives you more control of the effect.
$('h1, h2').click(function() {
$(this).hide( "explode", {pieces: 16 }, 2000);
});
I have a sprite image than when mouseenter/mouseleave occurs over it, the background position changes.This is working so far although there is probably a more efficient way of doing it. However I have several images I need to do this with and am trying to find a way to feed the id of the image into the jQuery rather than duplicate code.
The HTML:
<div class='featSmallBox' id='featSmallImg2'>
</div>
The image source is placed using CSS.
This is what I have so far for the jQuery.
$("#featSmallImg2").mouseenter(function(){
$(this).animate({
backgroundPositionX:"100%"
});
});
$("#featSmallImg2").mouseleave(function(){
$(this).animate({
backgroundPositionX:"0%"
});
});
Ideally I need to feed in the id of what is being mouseentered dynamically, but everything I've tried doesn't seem to work.
Apologies if this makes little to no sense. I'm new to both jQuery and this site.
If the jQuery code is the same for all divs containing the sprites, try changing $("#featSmallImg2") in your jQuery to $(".featSmallBox"). This way, all your divs with the class .featSmallBox will have this feature.
Check with event.target
$( "body" ).mouseenter(function( event ) {
console.log( "mouseentered id: " + event.target.id);
});
$("div[id^='featSmallImg']").mouseenter(function(){
$(this).animate({
backgroundPositionX:"100%"
});
});
$("div[id^='featSmallImg']").mouseleave(function(){
$(this).animate({
backgroundPositionX:"0%"
});
});
Try this code. Event will be called for all div's whose id starts with 'featSmallImg'
The below code works but on mouse enter causes flicker
$("#helptext").bind("mouseenter",function(){
$("p:first",this).text("helptext.");
}).bind("mouseleave",function(){
$("p:first",this).text("");
});
The below code does not work
/*
$("helptext").mouseout(function(){
$("p:first",this).text("sdlfksdlfjskldjl");
}).mouseover(function(){
$("p:first",this).text("mouse over");
});*/
I want to remove the flicker or get the second code working.
The HTML for above
<div id="helptext"><img alt="Help Text" src="/static/help.png"></img><p></p></div>
I suggest using hover() this instead of binding to mouseenter and mouseleave looks cleaner to me.
$("#helptext").hover(function(){
$("p:first",this).text("helptext text.");
}, function(){
$("p:first",this).text("");
}
);
Btw. I guess without more of your HTML/CSS code I think we can't solve this issue as the above doesn't flicker for me at all.
Check here http://jsbin.com/ihuna/
This may be kind of obvious, but isn't the piece of code that isn't working missing a # in the first line?
Seems like it should be:
$("#helptext").mouseout(function(){
$("p:first",this).text("sdlfksdlfjskldjl");
}).mouseover(function(){
$("p:first",this).text("mouse over");
});
I think it could be the issue with hover in JQuery version you are using. I am facing the issue of multiple calls for hover when the mouse enters bound element's children.
Check out the following.
http://bugs.jquery.com/ticket/5821