I'm having a problem with the radius of my button. When I click on it the radius of it goes from 50% to 0 so it looks fluently with the panel, but when I mouseleave it doesn't change back.
I've been searching the web for a few days now but I can't find anything on my specific problem.
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").fadeToggle("fast");
if($(this).is(".radius")) {
$(this).removeClass("radius");
return;
}
$(this).addClass("radius").siblings().removeClass("radius");
});
});
$("#Left").mouseleave(function() {
$("#panel").hide();
});
I'm a complete noob at javascript as you can see haha
Maybe something like this? It's a bit hard to tell without a running example of your code, throw it up on jsfiddle if you can.
$("#Left").mouseleave(function() {
$("#panel").hide();
$('#flip').addClass('radius').siblings().addClass('radius');
});
Related
I have 36 boxes where you hover over the title and it slides up to show the hidden text below it, whilst it works as expected the problem is all 36 boxes slide up at the same time instead of just the one you moused over here is the script I am using:
$(document).ready(function() {
$('.caption').mouseenter(function(){
$('.caption').stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$('.caption').stop().animate({height: "8%"}, 1000, function() {
});
});
});
Now after much reading I found that I need to use "this" so I tried this:
$(document).ready(function() {
$('.caption').mouseenter(function(){
$('.caption', this).stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$('.caption', this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
However that just disables the animation altogether, I tried using ".next" also and many other combinations that just resulted in the animation being disabled also.
In short, I have 36 boxes and I only want the actual one you mouse over to slide up not all of them at the same time.
I am a total jQuery novice and have searched for hours but cannot find a working example of exactly what I wish to achieve. Help is greatly appreciated.
Try taking the .caption out of your animate function and just use the reference to this like this
$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$(this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
The this object when used with a jquery even is a reference to the specific element the event was called on.
Ah I got it !
$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
});
$('.caption').mouseleave(function(){
$(this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
Just changed .box to .caption and its working, Thank you guys for you help !
I am going to mark yours as correct though since your answer did put me in the right direction and I only had to make that small change.
I have already explain this discussion in the part 1 topic.
Go here, if you need to re-think my topic.
This was solved, but I have some issues about the JavaScript.
In the last topic, he resolved my issue.
John S answered to my topic:
If your arrow element has the ID "toggle", you could do.
And here is the code, he provided:$(document).ready(function () {
$("#toggle").click(function () {
var $panel = $('#panel');
if ($panel.is(':visible')) {
$panel.slideUp("slow");
} else {
$panel.slideDown("slow", "easeOutBounce");
}
});
});
This is what I wanted, but when you click the text and when you have it at the bottom of the page and if you have a footer over top of it then when you click the text, you got to scroll manually, I do not like this. I want it flow automatically, which means when you click the text, it will bring you the content, without scrolling through the content.
Please tell me, how to achieve the scrolling bug.
So I have a fiddle with two pulsing animations running at different times.
http://jsfiddle.net/JuFxn/16/
The code for the pulse is here. There is more in the fiddle so please check it out.
function fadeItIn() {
var child;
child = 4;
setTimeout(fadeIn, 3000);
function fadeIn() {
$("#child" + child).fadeIn(175);
--child;
if (child >= 0) {
// Continue fading in
setTimeout(fadeIn, 175);
} else {
// Start fading out
++child;
setTimeout(fadeOut, 175);
}
}
function fadeOut() {
$("#child" + child).fadeOut(175);
++child;
if (child <= 4) {
// Continue fading out
setTimeout(fadeOut, 175);
} else {
// Start over again
setTimeout(fadeIn, 3000 - 1575);
}
}
}
The issue I'm having is that when the tab becomes inactive, the timings of the two pulses desync and go off pretty far from each other. I did some research and found this
How can I make setInterval also work when a tab is inactive in Chrome?
They seem to fix the problem by implementing a real world counter in and adding the value of the counter during each cycle and having the div move based on the distance generated by the counter. Would implementing something like that fix the problem I am having? How would I even use it? I think the problem is arising from the use of the setTimeout on the second function.
setTimeout(fadeItInDoom, 500);
If I take out the setTimeout and make it so the two pulses execute at the same time, the timings never go off.
So I ended up figuring out a fix to make it stay in sync.
http://jsfiddle.net/bwCmk/
I changed the animation code entirely so that it is running in jQuery. The fix however comes in how I dealt with changing to the next animation. I just made a different function for each pulsing element and had the next one called at the end of the previous function. So:
FunctionA {
code
functionB();
}
FunctionB {
code
functionC();
}
etc
it worked. Just putting this up so that if anyone else makes something along these lines, they can find a fix for it. Thanks to everyone who answered.
im currently working on my first website- but ive come to a slight problem with this piece of jquery... The page is:
http://beelinetest.site50.net/the_arts_and_culture_in_worcester.html
I have a rollover over effect throughout the completed pages on my website, (when you hover over the link, the word slightly moves to the right) this can be better seen on the events programme page.
But on this page ive got a lot of jquery going on... When clicked the word moves to the left off the page. But because of having the mouse over, (moving the word back to the right on release) the word shoots back on screen to its original place.
Please feel free to look into my code, id really appreciate it- i know you guys are great, so thanks in advance! Tom
Here are the two conflicting codes-
$("#exploretext").click(function(){
$(".moveeverythingleft").animate({"left":"-220px"}, 400);
return false;
});
$("#exploretext").hover(function(){
$("#exploretext").animate({"left":"227px"}, 50);
}, function(){
$("#exploretext").animate({"left":"217px"}, 150);
});
This will unbind your hover effect after a click event :
$("#exploretext").on("click",function()
{
$(this).off("hover", "**");
$(".moveeverythingleft").animate({"left":"-220px"}, 400); return false;
});
$("#exploretext").on('hover',function()
{
$("#exploretext").animate({"left":"227px"}, 50); }, function()
{
$("#exploretext").animate({"left":"217px"}, 150);
});
});
You may have to rebind it later, or to bind another, it depends on what you want to achieve.
It may be way easier to use another animate function, using += :
$("#exploretext").animate({"left":"+=10px"}, 50, 'linear');
edit :
I'm reading your code, the markup and the css is a bit of a mess, I think it makes your work harder than it should be.
I would advise you to try first to clean the HTML and the CSS, then to handle the JS part.
what u can do is store the state of the button in some variable like ..
var position = "LEFT OR RIGHT";
then when u send the button to the left change the variable to left.
and in the hover event check the value and then if the position is left then dont execute whole of the event and if the position is right then execute the event.
function OnExploreClick(){
position = 'left';
//ur code
}
function OnUnExploreClick()
{
//put the button to right side// ur code
then position = 'right';
}
function OnHover()
{
if (position == 'right')
{
//execute ur code
}
}
I think my problem is fairly simple, however I am unable to figure it out. I want to close a note pop up with an "x" icon/div in the top right corner of the note.
Currently I have this as the code. The only solution to minimize the note is to double click on it, which obviously isn't a viable solution.
$('.note').click(function (event) {
$(this).find('.notepopup').show();
});
$('.note').dblclick(function (event) {
$(this).find('.notepopup').hide();
});
I tried changing the second part to target the '.close' div, like this:
$('.close').click(function (event) {
$(this).find('.notepopup').hide();
});
I am beginning to think it has something to do with the relationship between .close and .notepopup - as in - .close is within the popup, whereas .note is in a sense the parent element of .notepopup
Any help would be great. If you really want to get crazy, you can look at what I'm working on: http://www.scottefloyd.com/notewebapp/demo.php
The problem is that you're looking for '.notepopup' inside '.close'. You need $(this).parents('.notepopup'); and that should get the element.