Sliding dropdown alert, how can I achieve this? - javascript

Could somebody please give me a few pointers on how to add a sliding dropdown area onto my home page similar to the following website: http://laptop-repair-manchester.co.uk. (Warning, trips for malware)
The thing I would like to imitate is the dropdown area that reads "call for a free quotation", it displays after about 5 seconds of the page loading.
If possible I would also like to add an image to the drop down slide effect.
Thanks in advance.

This can be quite straight-forward since jQuery has a .slideDown function: http://jsfiddle.net/QWqj5/.
setTimeout(function() {
$("#alert").slideDown(2000); // slide duration of 2 seconds
}, 5000); // execute after 5 seconds

To achieve this, you can create a div at the top of your page containing all the information that you want and then apply JQuery's slide down function on this div.

Related

jQuery removechild / hide html element without page refresh

I am trying to customize a Joomla Quiz plugin like this:
a quiz question displays in the description an image / text, but it should disappear after 5 seconds.
I found a solution with Javascript for removechild or timer function to hide after 5 second, and it works properly.
the problem:
this Joomla quiz module is not refreshing the page per questions, because it works with Jquery and I don't have an initial loading point from the timer could count the 5 seconds.
(by the time you reach the question, the time expiries and disappear to early)
I cannot use a page reload, as the whole quiz would restart from first question.
is there any condition or solution with Jquery or Javascript to detect the content load only for that specific question?
(I mean some div or some conditional rule to fulfill before start counting)
I hope it is clear what I want to achieve :)
thanks in advance!
You can check visibility of the element by checking it offset like that in javascript. From the moment element is visible just setTimeout.
Javascript
document.addEventListener("DOMContentLoaded", checkVisibility);
function startCount(){alert('IsVisible')}
function checkVisibility(){
var div = document.getElementById('Element').offsetLeft
if(div >0){
setTimeout(startCount,5000)
}
}
jQuery
if( $("#Element").is(":visible") == true )
{
alert("Div is visible!!");
}

Adding a SetTimeout and transition to jQuery Show / Hide

I am trying to add a SetTimeout and animation type transition to jQuery Show / Hide call. Below is how I currently have it but am wanting to add the a specific amount of time the 'show' div remains displayed before it reverts back to the orginal #bg_dv. I also want to add animated transitions between the effects if possible.
function tilt(){
$("#area1").click(function(){
$("#bg_div").hide();
$("#bg_skew").show(); // I would like to show this Div for about 5 seconds
// and then have original back.
});
}
$("#bg_div").hide(0).delay(5000).show(0);
$("#bg_skew").show(0).delay(5000).hide(0);
If you want animations, you can replace the calls to hide() and show() with something appropriate. For example fadeIn() and fadeOut().
$("#area1").click(function(){
$("#bg_div").fadeOut('fast',function(){
$("#bg_skew").delay(5000).fadeIn('fast');
});
});
In order to prevent caching of multiple clicks and have the animation play many times
you should also take a look at
.stop(true,true)
before any animation.Also take a look at this animation option - property.
{cache:false}
it's so simple. just put milliseconds in show.delay(5000) it will delay it for 5 seconds.
syntax:
$(selector).delay(speed)
speed: time in millsecnds e.g. 5000 for 5 seconds.
$(selector).show(speed,easing,callback)
speed: here put time in milliseconds like 1000 for 1 second.
easing: it defins speed of elements at different points i.e. "linear" "swing".
callback: here you can put your function it will execute after completing show method. For example when you will click button to show image after showing image it will exexcute funxtion e.g. .show(1000,function(){alert("hello")};);
Hope i helped you.

bxslider wont stop

I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.
Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.
Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});

Best way to rotate html on a page

I need to be able to rotate between five distinct pieces of html in my webpage every 8 seconds.
What's the best way to do this? JQuery or native JS is fine.
There are definitely a lot of plugins for that.
But here's some basic structure you could use if you want to do it yourself:
// assuming all your divs have the class `rotating-content`:
$(document).ready(function() {
var divs = $('.rotating-content').hide();
var curr_div = divs.first().show();
function nextcontent() {
// hide current div, then move the next one or the first div, and show it
curr_div = curr_div.hide().next().add(divs.first()).first().show();
setTimeout(nextcontent, 5000); // 5 seconds
}
setTimeout(nextcontent, 5000);
});
You mean like a slideshow? You can use jQuery Cycle plugin from malsup,
here's an example: http://jsfiddle.net/JKirchartz/zLekb/ (none of this extra stuff is necessary, this is just an example I've been recycling)
if you want it to change every 8 seconds change timeout to 8000 (it's measured in milliseconds)

How can I reveal content and maintain its visibility when mousing to a child element?

I'm asking a question very similar to this one—dare I say identical?
An example is currently in the bottom navigation on this page.
I'm looking to display the name and link of the next and previous page when a user hovers over their respective icons. I'm pretty sure my solution will entail binding or timers, neither of which I'm seeming to understand very well at the moment.
Currently, I have:
$(document).ready(function() {
var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');
dropdown.hide();
$(navigator).hover(function(){
$(this).siblings(dropdown).fadeIn();
}, function(){
setTimeout(function(){
dropdown.fadeOut();
}, 3000);
});
});
with its respective HTML (some ExpressionEngine code included—apologies):
<p class="older_entry">Older<span class="hide_me">Older entry:
<br />
{title}</span></p>
{/exp:weblog:next_entry}
<p class="blog_home">Blog Main<span class="hide_me">Back to the blog</span></p>
{exp:weblog:prev_entry weblog="blog"}
<p class="newer_entry">Newer<span class="hide_me">Newer entry:
<br />
{title}</span></p>
This is behaving pretty strangely at the moment. Sometimes it waits three seconds, sometimes it waits one second, sometimes it doesn't fade out altogether.
Essentially, I'm looking to fade in 'span.hide_me' on hover of the icons ('a.paginate_link'), and I'd like it to remain visible when users mouse over the span.
Think anyone could help walk me through this process and understand exactly how the timers and clearing of the timers is working?
Thanks so much, Stack Overflow. You guys have been incredible as I walk down this road of learning to make the internet.
If you just want to get it working, you can try to use a tooltip plugin like this one.
If you want to understand how this should be done: first, get rid of the timeout, and make it work without it. The difference (from the user's point of view) is very small, and it simplifies stuff (developing and debugging). After you get it working like you want, put the timeout back in.
Now, the problem is you don't really want to hide the shown element on the navigator mouse-out event. You want to hide it in its own mouse out event. So I think you can just pass the first argument to the navigator hover function, and add another hover to dropdowns, that will have an empty function as a first argument, and the hiding code in its second argument.
EDIT (according to your response to stefpet's answer)
I understand that you DO want the dropdown to disappear if the mouse moves out of the navigator, UNLESS its moved to the dropdown itself. This complicates a little, but here is how it can be done: on both types of items mouse-out event, you set a timer that calls a function that hides the dropdown. lets say the timer is 1 second. on both kind of item mouse-in even, you clear this timer (see the w3school page on timing for syntax, etc). plus, in the navigator's mouse-in you have to show the dropdown.
Another issue with the timer in your code is that it will always execute when mouse-out. Due to the 3 seconds delay you might very well trigger it again when mouse-over but since the timer still exist it will fade out despite you actually have the mouse over the element.
Moving the mouse back and forth quickly will trigger multiple timers.
Try to get it to work without the timer first, then (if really needed) add the additional complexity with the delay (which you must keep track of and remove/reset depending on state).
Here was the final working code, for anyone who comes across this again. Feel free to let me know if I could have improved it in any ways:
$(document).ready(function() {
var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');
dropdown.hide();
$(navigator).hover(function(){
clearTimeout(emptyTimer);
$(this).siblings(dropdown).fadeIn();
}, function(){
emptyTimer = setTimeout(function(){
dropdown.fadeOut();
}, 500);
});
$(dropdown).hover(function(){
clearTimeout(emptyTimer);
}, function(){
emptyTimer = setTimeout(function(){
dropdown.fadeOut();
}, 500);
});
});

Categories