I'm making a web page for my self. I have a welcome screen with big background wallpaper and just one link that you have to click to get to the index page. I have a sound on welcome page that plays when link is clicked, but as soon as the link is clicked it opens index page so the sound is not even heard. I want to make few seconds delay after the link is clicked so that the sound can play first to the end.
My jsfiddle http://jsfiddle.net/cs6yqawr/.
$('a[href*="/*html"]').each(function() {
$(this).on('click', function(event) {
event.preventDefault();
(function(h) {
setTimeout(function() {
window.location = h;
}, 5000);
})(this.href);
});
});
Tried this code but I can't get it working.
Any suggestions?
Tried and it'll play music before to new page.
$('.big-btn').click(function(e) {
e.preventDefault();
console.log(this);
var embed = $('<embed src="Kalimba.mp3" hidden="true">');
embed.appendTo($('#embed'));
embed.ready(function () {
setTimeout(function() {
window.location = 'index.html';
}, 2000);
});
});
You should replace my test mp3, target location, and delay ms for your usage.
I think it's just the selector on your event handler. Try:
$(document).on('click', 'a', function(event) {
event.preventDefault();
setTimeout(function(h) {
window.location = h;
}, 5000, this.href);
});
Or ideally just give the link an id and bind the handler to that.
Related
I have short HTML5 animations that I want to play and then go to a specific link.
I found code that is similar to what I need, I just don't know how to alter it for an HTML5 animation.
$('#menu a').click(function(event) {
event.preventDefault();
var href = this.href;
$('#whatever').animate({
top: '300px'
}, 500,
function() {
window.location = href;
});
});
Thanks in advance,
Brian
Give this a try:
$('#menu a').click(function(event) {
var href = this.href;
// This will play the video
document.getElementById("videoPlayerID").play();
// This will add an event listener that waits for the video to end.
// Once it does, it calls the goToLink function and feeds it the href
document.getElementById('videoPlayerID').addEventListener('ended', goToLink(href), false);
event.preventDefault();
});
function goToLink(href) {
window.location = href;
}
I can't seem to get this functioning the way that I want. I want a user to click a link, in this case Learn More then open a tab and scroll down the page to where that tab is. I have the functionality of opening the tab working but it will not scroll. The only time I can get it to actually scroll is to copy:
jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
into chrome's console and activate it. Below is the code in its entirety:
jQuery(document).on("click", ".learnMore", function() {
description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
jQuery(".ui-widget").tabs("option", "active", description);
jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
});
Here is a link to a fiddle
It's because when you click the link, it's triggering the hash change. Because there is no anchor to go to, it scrolls to top after you call scrollTop. Adding return false; to the end of your click event or adding e.preventDefault(); for more modern browsers should correct the issue.
http://jsfiddle.net/jmarikle/dL41forj/
jQuery(document).on("click", ".learnMore", function() {
...
return false;
});
or
jQuery(document).on("click", ".learnMore", function(e) {
e.preventDefault();
...
});
Setting a timeout and targeting the body also works: http://jsfiddle.net/o2whkLyu/1/
$(document).on("click", ".learnMore", function() {
description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
jQuery(".ui-widget").tabs("option", "active", description);
setTimeout (function(){
$('body').scrollTop( $("#" + descriptionID).offset().top );}, 20);
});
What I am trying to accomplish is having a menu that will show up when a "button" is clicked (the button and menu are in separate elements so the mouse is not hovering over the menu initially).
The menu should hide itself if it is not hovered over within the duration of the timeout (currently it does this, but only the first time it is clicked).
Also, if the element gets hovered over, I would like hide on mouseout and clear the timer and clicking the button again would reset the timeout (it is not resetting maybe?).
I have tried several incarnations and nothing I have tried has behaved correctly and am looking for advice. This his is what I am currently using:
var mytimer = window.setTimeout(function() {$('.menu-div').slideUp(function() {
window.clearTimeout(this.mytimer);
})
}, 5000);
$().ready(function(){
$('#menu-button').click(function () {
$('.menu-div').slideDown();
$(mytimer);
});
$('.menu-div').mouseenter(function() {
window.clearTimeout(this.mytimer);
});
$('.menu-div').mouseout(function() {
$('.menu-div').slideUp(200);
});
});
I think you want something like this (just a guess, because you didn't give any HTML)
$(function(){
var mytimer=0;
$('#menu-button').click(function () {
$('.menu-div').slideDown();
mytimer = setTimeout(function(){
$('.menu-div').slideUp();
}, 5000);
});
$('.menu-div').mouseenter(function() {
clearTimeout(mytimer);
});
$('.menu-div').mouseleave(function() {
$('.menu-div').slideUp();
});
});
DEMO.
I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this minimal period hover condition while showing up the image ?
The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!
http://jsfiddle.net/sSBxv/
$('a').click(function() {
alert(1); // alert on click
})
.hover(function() { // when mouse is entering
var $this = $(this);
// set timeout, save timeout id on element to clear later
$this.data('timeout', setTimeout(function() {
$this.click(); // click after 1500ms
}, 1500));
}, function() { // when mouse is leaving
clearTimeout($(this).data('timeout')); // stop the timeout
});
Try this
var hoverTimer;
$("linkSelector").hover(function() {
hoverTimer = setTimeout(function() {
$("imgSelector").show();
}, 1500);
}, function(){
clearTimeout(hoverTimer);
}).click(function(){
clearTimeout(hoverTimer);
$("imgSelector").show();
});
Something to the effect of...
$("#MyLinkSelectorId").hover(function() {
//Do anything you need to do here when it is clicked/hovered
setTimeout(function() {
//Do all of the other things here
}, 1500);
});
Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.
$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
$("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
setTimeout( function(){
$("img").hide();
}, 1500);
}).click( function() { //on click, hide the image right away.
$("img").hide();
});
Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):
$("#idOfDiv").mouseover(function() {
setTimeout("alertMsg()",1500);
});
function alertMsg()
{
alert('Ive been entered for 1500ms')
}
Also if you're serious about software development you should've been able to come up with this yourself.
I have a spash screen on a website that has a div with the ID of "splash" i'm trying to make the div fade in then if the user clicks on the div it fades out and redircts to the main site. If the user dosen't click it just fades out and redirects after 10 seconds.
The timed redirect is working but not the click function.
<script type="text/javascript">
$(document).ready(function() {
$('#splash').hide();
$('#splash').fadeIn(1000, function() {
$(this).delay(10000).fadeOut(1000, function() {
window.location = 'http://www.examle.com'; });
$(this).click().fadeOut(1000,function() {
window.location = 'http://www.example.com'; });
});
});
</script>
Any help would be great
Try this:
$(document).ready(function() {
$('#splash').hide();
$('#splash').click(function(){
$(this).fadeOut(1000,function() {
window.location = 'http://www.example.com'; });
});
$('#splash').fadeIn(1000, function() {
window.setTimeout ( function() {
$('#splash').fadeOut(1000, function() {
window.location = 'http://www.example.com'; }) }
, 10000);
});
});
Changes that I've made to the example:
I've moved setting the click handler outside the fadeOut function (better practice, IMHO) and I've changed your call to delay() to a setTimeout().
The difference is, delay() will not allow other jQuery code to be executed in the background, while setTimeout() will.