Not sure what affecting button display - updated - javascript

I have and radio button selection and given each radio button a progress bar, progress bar are display:none but when selected a radio progress bar will show(), same to the button.
Now my problem is sometime when I selected a radio button, the button show like this:
But sometime when I selected a radio button, the button has been push to the bottom and cant even seen:
I not sure where this problem come from, but I guest maybe the progress bar blocked it?
Maybe I have miss something in my code that I don't know. Anyone able to help me check for this problem ?
Click here for jsfiddle
Updated part
I found out how to make the button push to bottom , hover in and hover out the div 4 to 5 times then select one option, then the button will push to bottom. So far haven't found any solution, anyone know how to fixed please help. Thanks a lot.

Remove the margin-top: -22px from .popup_survey_whitebox_percent and replace with
position: relative;
top: -22px;
Fiddle

Finally I found a way to fixed this problem .
$("#popup_survey_whitebox").hover(function () {
$('#popup_survey_whitebox_content').finish().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(orig); // Here put the original text.
}).css('position', 'relative');
}, function () {
$('#popup_survey_whitebox_content').finish().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(newText); // Here put the new text with "..."
}).css('position', 'relative');
});
change $('#popup_survey_whitebox_content').stop() to $('#popup_survey_whitebox_content').finish() for both animate

As you mentioned in your answer, finish works, but introduces some quirkiness for the experience if you hover in/out quickly (it jumps to the end of the animtation immediately, and can "flicker").
This issue can be addressed by reseting the height attribute on the hover 'out' logic. When you hover in/out quickly, the height value is set, which is then used after.
Here's a fiddle with the fix: http://jsfiddle.net/v07vt9gz/5/
And the logic:
$(this).css('height', ''); // reset value

Related

Navbar hover if mouse

I have this Javascript code that i got on another thread on Stackoverflow but there is a small gap of about 1px when the mouse hits this between the navbar header and the actual dropdown then the dropdown will disappear.
I grabbed this code as if there is a mouse I would like it to hover, however if it is on mobile with no mouse then I would like the user to click to open the dropdown.
//NAVBAR HOVER IF MOUSE, IF NOT CLICK
$('body').on('mouseenter mouseleave', '.dropdown', function(e) {
var _d = $(e.target).closest('.dropdown');
_d.addClass('show');
setTimeout(function() {
_d[_d.is(':hover') ? 'addClass' : 'removeClass']('show');
$('[data-toggle="dropdown"]', _d).attr(
'aria-expanded',
_d.is(':hover')
);
}, 300);
});
Is there anyway I can add a delay to this to give the user time to get over this pixel window?
I'm not very experienced with Javascript/JQuery but thought the number towards the end (300) would be a timeout as this seems to be the end of the function so I increased this to 60000 but this did not make any difference.
Any help is appreciated. This is also developed within Bootstrap if that makes a difference.
Thanks for all of your help.
As you pointed to the CSS Kosh Very I had a look and added this code which has fixed my issue:
.dropdown > .dropdown-menu {
margin: 0;
}
This has cleared the issue, thanks for your help.
For delay you can use the [Jquery.delay()][1] Method. It will simply post delay before any event that comes after the call to .delay e.g.
$( "div.first" ).slideUp( 300 ).delay(500).fadeIn(2000)

Can't get slide out menu to display properly

Here is a link to the site in progress -- http://barret.co/resources/testsite12345/
There is almost nothing on the site yet as I am working on the skeleton, so inspecting element should be very easy to pinpoint what's wrong.
I'm working on a slide out menu from scratch but am fairly new to jQuery. Basically, what I have now is working, but not exactly how I'd like it to be. as you can see, when you click the menu button in top left, it slides the panel left and back to the right. I'd like for this panel to initially be hidden upon viewing the page, and then slide out when menu is clicked.
Also, is there an easy way to close this panel if a user clicks onto the main page? The only way it closes now is if the menu button is clicked again.
Any help is very much appreciated.
Thanks in advance!
I think you simply had a mixup with the classes.
Add this to your #left-menu css:
right: 300px;
and then use this:
jQuery(document).ready(function($) {
$('#menu-container #right-menu').click(function(){
var hidden = $('#left-menu');
if (! hidden.hasClass('visible')){
hidden.animate({"right":"0px"}, "slow").addClass('visible');
} else {
hidden.animate({"right":"300px"}, "slow").removeClass('visible');
}
});
}); // end
Add the following: $(".logo").hide() to the $(document).ready(function () {});

Hide a relative div with Javascript

I am designing a contact form which has a 'Thank you' message pop up on send, I need my thank you message to be positioned relative, other wise if the user happens to scroll while the animation is running the message remains stuck in place and ruins the animation. However positing the div relative keeps it in the position before it loads, what I need is a way to have the div display:none or opacity:0 BEFORE the send button is pressed, is that possible?
Here is an http://jsfiddle.net/gcQ8f/ to explain what I'm trying to achieve a little better
And below is the Javascript I'm using
$(document).ready(function(){
$(".send-button").click(function(){
$("#contact-form") .delay(1000) .animate({ height:'toggle', opacity:'toggle' }, (400));
$("#contact-form") .delay(3000) .animate({ height:'toggle', opacity:'toggle' }, (400));
$(".contact").reset();
});
});
Any help would be really appreciated :)
Thanks guys!
Just assign an ID or class (for example id="myThankYouDIV") to your DIV and hide it with display: none in your CSS. Then when you're ready to show it (when you click the button), just call $('#myThankYouDIV').show() $('#myThankYouDIV').fadeIn().
EDIT: I think I misunderstood your question a bit. You want to show the "Thank you" message after the animation is complete, right? You still need to hide it using CSS, but to show it just do this:
$("#contact-form") .delay(3000) .animate(
{ height:'toggle', opacity:'toggle' },
400,
function(){
// animation is complete
$('#myThankYouDIV').fadeIn();
}
);
;

Animate a div after scrolling away from the top of the webpage

I'm currently trying to make a div appear from behind another div after the user scrolls away from the top of the page.
I'm hoping to do this using animate so that it slides out. Like this...
http://jsfiddle.net/xaYTt/99/
But I can't figure out how to make the red box stay behind the blue box until the user scrolls away from the top of the page.
I also need to reverse this when the user scrolls back up to the top of the page, so the red box slides back under the blue box again.
Can anyone help me out?
This is not the most elegant solution, but it works nonetheless.
http://jsfiddle.net/37LZ5/
Components:
Use $(document).scroll as a trigger to know when scrolling
Use scrollTop() to know how far we're scrolling (0 = top)
Remember state to make sure animation doesn't get triggered a zillion times (var away)
Use .stop() to prevent weird behaviour when halfway through one animation, another animation gets triggered
I think you are looking for this take a look at this demo
Working demo
Code
$(document).ready(function(){
//$('#bottom-box').animate({'margin-top': '200px'}, 1500);
$('body').hover(function(){
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
}, function(){
$('#bottom-box').animate({'margin-top': '50px'}, 1500);
});
});
If my understanding about your question is correct, this is what you are looking for
Since you said, "User scrolls away from the top of the page", I added a div to be at the top of the page.
var isAlreadyOut=false;
$("#divPageTop").mouseover(function(){
if( isAlreadyOut==true)
{
$('#bottom-box').animate({'margin-top': '60px'}, 1500);
isAlreadyOut=false;
}
else
{
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
isAlreadyOut=true;
}
});
Here is the jsfiddle version
http://jsfiddle.net/xaYTt/103/
I did something with jsFiddle that might be what you are after, if I understood your question correctly.
Basically, the red box will animate when you scroll the window more than the distance of the blue box.
Not 100%, just a quick mock up to see if that's what you want.
(When you scroll, click on the scroll bar arrows for more accurate results)
Demo here: http://jsfiddle.net/peduarte/xaYTt/104/

Complete function before starting next (fadeIn/fadeOut)

UPDATED (see notes at bottom)
I have created an image map and when you hover over a specific section of this image map a description will appear in a designated area (the sidebar) of my website.
Each description is of varying length therefore I have not set any maximum height level for my sidebar area so that the display can grow vertically to accomodate each description.
The problem I am having is that when you rapidly hover over areas of the image map the display produces some weird results; showing blocks up content from another hot spot for a split second in full beneath the newly hovered over area and corresponding description (hope that makes sense)
Is there anyway to complete one function in full before displaying the next to avoid this nasty display/animation?
Here is my code:
$(document).ready(function() {
$("#a-hover").hide();
$("#a").hover(function() {
$("#a-hover").fadeIn();
}).mouseleave(function() {
$("#a-hover").fadeOut();
});
$("#b-hover").hide();
$("#b").hover(function() {
$("#b-hover").fadeIn();
}).mouseleave(function() {
$("#b-hover").fadeOut();
});
$("#c-hover").hide();
$("#c").hover(function() {
$("#c-hover").fadeIn();
}).mouseleave(function() {
$("#c-hover").fadeOut();
});
And my CSS;
#a-hover,#b-hover,#c-hover {
z-index: 2;
float: left;
position: relative;
}
#a-hover,#b-hover,#c-hover,{
position: relative;
top: 0px;
left: 0px;
z-index: 1;
width:326px;
min-height:603px;
background-color:#dedddd;
}
I have shortened my code for readability (I have 9 image map hot spots)
I am a novice when it comes to jQuery but I am making a committment to learn so please go easy as my code may not be up to scratch!
I have tried to solve this myself before posting here, but I am out of my depth and need some expert advice
I appreciate any responses.
Thank You,
Wp.
UPDTAE: I tried the majority of what was provided here as answers and whilst I believe these answers are on the right track I couldn't get the problem to stop however I did notice improvement in the animations overall.
I ended up using a combination .stop(true,true); and **resize font automatically.
**Ultimately not getting the desired result is due to my lack of polish with jQuery but being in a rush I managed to find another way to handle this issue (auto resizable font).****
Thanks to all who took the time out to answer and for those reading this for a similar solution at least know the .stop(true,true); properties did in fact work for me to solve one part of this problem.
Try adding .stop before each fadeIn and fadeOut. You should pass true, true to stop to complete the animating instantly rather than leave it half faded in:
$("#a").hover(function() {
$("#a-hover").stop(true, true).fadeIn();
}).mouseleave(function() {
$("#a-hover").stop(true, true).fadeOut();
});
You can also get rid of all of the repetition by binding on a class instead of id's:
$(".imageMapElement").hover(function() {
$("#" + $(this).attr("id") + "-hover").stop(true, true).fadeIn();
}).mouseleave(function() {
$("#" + $(this).attr("id") + "-hover").stop(true, true).fadeOut();
});
May be you can try Jquery Hover Intent plugin.
try stopping the other functions:
$("#a").hover(function() {
$("#b-hover").stop().hide();
$("#c-hover").stop().hide();
$("#a-hover").fadeIn();
}).mouseleave(function() {
$("#a-hover").fadeOut();
});
Try adding .stop() before each .fadeIn and .fadeOut -- that will cancel any previous animations and immediately begin your new one.
You also have a problem with using .hover() -- that actually encapsulates two actions, mouseover and mouseout. When you assign two functions to it, the first is mouseover and the second is mouseout, but when you assign only one function to it, that one function is used for both mouseover and mouseout. So, in effect, your code is causing the element to fadeIn and fadeOut on mouseout.
Incidentally, you can shorten your code a lot using standard jQuery techniques:
$("#a-hover,#b-hover,#c-hover").hide().hover(function() {
$(this).stop().fadeIn();
}, function() {
$(this).stop().fadeOut();
});
...or even better yet, assign a class to each of those three IDs and select it instead.
You have to chain all the jQuery function calls!

Categories

Resources