Well I don't know correct word for this so I wrote three of them, hope you wont mind...
Now, my question.
I have javascript that is running on pageload as it's usual... The script hide specified id's and reveal them on click. Let's call this script "hide on load".
My problem here is, that another javascript, let's call it "news" is running as well on page load and I can see it only 1 second, until another script hide div id's.
Once I click on specified div that should run reveal "news", nothing happends. I can see that "hide on load" running fading (fadein) but nothing is being revealed.
Hide on Load script:
$(window).load(function(){
var activeElement;
function activateElement( eltSuffix ) {
if( activeElement ) {
activeElement.fadeOut( 500, function() {
activeElement = $('#content-reveal-'+eltSuffix);
activeElement.fadeIn( 500 );
} );
} else {
activeElement = $('#content-reveal-'+eltSuffix);
activeElement.fadeIn( 500 );
}
}
$(document).ready( function() {
$('#content div').hide();
$('#info a').click( function() {
activateElement('info');
} );
$('#search a').click( function() {
activateElement('search');
} );
$('#music a').click( function() {
activateElement('music');
} );
$('#socials a').click( function() {
activateElement('socials');
} );
} );
});
News script:
$(document).ready(function () {
$('#newsticker_1').newsticker({
'style': 'fade',
'showControls': false,
'autoStart': true,
'fadeOutSpeed': 'slow',
'fadeInSpeed': 'slow',
'transitionSpeed': '4000',
'pauseOnHover': true
});
})(jQuery);
Thank you!
You can use onclick html on the div so....
<div id="whatyouwanttoclickon" onclick="news()"></div>
But you would have to name the function news like this.
function news(){
$('#newsticker_1').newsticker({
'style': 'fade',
'showControls': false,
'autoStart': true,
'fadeOutSpeed': 'slow',
'fadeInSpeed': 'slow',
'transitionSpeed': '4000',
'pauseOnHover': true
});
Or you could use jquery like this....
$('#divyouwanttoclickon').click(function(){//putyourfunctioninhere});
Related
When I click the burger navigation I am trying to have the menu info drop down after the background fades in. But when I click the nav it doesn't work immediately. Only fading. After successive clicks it works. What am I doing wrong here? How can I get it working on the first click.
https://jsfiddle.net/mo16z57j/
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
$('.navOpen')
.css('opacity', 0).delay(800)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
).toggle();
});
Try the following code
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
$('.navOpen')
.css('opacity', 0).delay(800)
.show()
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
).toggle();
});
I am having an issue with jQuery animate on an iPad Mini (Safari).
I run the following animation when a button is clicked:
$('body').on('click', '#submitBtn', function () {
$('#loadBar').animate({ width: '95%' }, 8000);
});
This button sends a request that makes the page reload. As it is starting to reload I want the loadBar to animate.
This does not happen as no animation is fired.
It works if you add return false; and stop the page reload from occurring.
Are there any ways around this. I have tried CSS3 animations and get the same issue.
The animation must occur at the same time as the submit event.
Thanks!
You can reload the page in js after the animation completes
$('body').on('click', '#submitBtn', function () {
$('#loadBar').animate({ width: '95%' }, 8000, function(){
window.location.reload();
});
return false;
});
Maybe something like this is what you're looking for:
http://plnkr.co/edit/2v0s6oIw8jNn8BmoTemi?p=preview
$(function(){
$('body').on('click', '#submitBtn', function (e) {
e.preventDefault();
$('#loadbar').animate({ width: '95%' }, 8000);
setTimeout(function(){ //remove this line
$("#form").submit();
}, 5000); //simulate slow loading page. remove this line
});
});
The idea here is that you prevent the default behavior of the browser, force it to animate, and then continue the submit.
Assuming its a submit form with id "myform":
$('body').on('click', '#submitBtn', function(e) {
e.preventDefault();
$('#loadBar').animate({ width: '95%' }, 8000, function() {
$( "#myform" ).submit();
});
});
EDIT :
Check beforeunload() in http://www.w3schools.com/jsref/event_onbeforeunload.asp
$(window).on('beforeunload', function(){
$('#loadBar').animate({ width: '95%' }, 8000);
});
I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>
Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.
This is the jQuery code written on the php file of the plugin. IT is working fine now but i want it to close when some one clicks outside of the panel.
Here is the javascript code :
<script type="text/javascript">
jQuery(document).ready(function($) {
/* SideOffer Sidebar Functionality */
$("#sideoffer").toggle(
function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_out'); ?>px" }, "slow"); },
function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow"); }
);
/* SideOffer .hd-sideoffer click function */
$(".sideoffer").click(function(){ $("#sideoffer").click(); });
/* SideOffer aLlow clicks on content box */
$("#sideoffer .box").click(function(event){ event.stopPropagation(); });
});</script>
Kindly help.
What you'll want to do is add this into the ready function
What it does is adding a delegated event on the document to trigger when anything that is not #sideoffer is cclicked and then hide #sideoffer.
$(document).on('click', ':not(#sideoffer)', function(){
$('#sideoffer').hide()
});
You'll need to capture the click event for everything other than your original click, which I guess is #sideoffer?
$('body').click(function(event) {
if (!$(event.target).closest('#sideoffer').length) {
$('#sideoffer').animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow");
};
});
try to use javascript
$('body').click(function(event) {
var target = event.target;
/* do something when getting element you are currently click on*/
}
Here is example, http://api.jquery.com/event.target/
I am trying to create a toggle because for some reason the toggle function is not working.
this works as expected. it basically does the animation an a couple of css call then swaps classes for the next function call.
$(document).ready(function() {
$(".m-menu").click( function(){
if ($('.mobile-menu').hasClass("menu") ) {
$(".mobile-menu").animate({left: '0'}, 500);
$(".mobile-menu-bg").animate({left: '0'}, 500);
$(".menu-close").css('display','inline');
$(".menu-open").css('display','none');
$( '.m-menu' ).removeClass( "m-menu" ).addClass("m-menu2");
}
});
});
The next function looks like this, which is suppose to execute if the class is there, then switch back to the original class. What am I doing wrong here?
$(document).ready(function() {
$(".m-menu2").click( function(event){
event.preventDefault();
if ($('.mobile-menu').hasClass("menu") ) {
$(".mobile-menu").animate({left: '-200'}, 500);
$(".mobile-menu-bg").animate({left: '-2000'}, 500);
$(".menu-close").css('display','none');
$(".menu-open").css('display','inline');
$('.m-menu2').removeClass( "m-menu2" ).addClass("m-menu");
}
});
});