I am on my way to develop my first jQuery plugin.In which I need an animation to auto play on scroll position.I have tried many ideas but nothing worked out.Finally I put the auto play function inside plugin and called in my HTML like this.
$(document).ready(function () {
$(window).scroll(function () {
jQuery.fn.autoplayAnimation();
});
is there any way that I can put document.ready() or window.scroll() inside my plugin and make it working as it is in HTML.
any help will be great full..
you want to auto assign the event when the page loads right?
why don't you just put this in your plugin file:
(function($){
//your plugin code
$(document).ready(function () {
$(window).scroll(function () {
jQuery.fn.autoplayAnimation();
});
});
})(jQuery);
$(window).scroll(scrollHandler);
function scrollHandler(){
jQuery.fn.autoplayAnimation();
}
Related
Site.js
/* blur on modal open, unblur on close */
$('#aboutsbaims').on('show.bs.modal', function () {
$('#mycontent').addClass('blur');
});
$('#aboutsbaims').on('hide.bs.modal', function () {
$('#mycontent').removeClass('blur');
});
is this code proper ?? it's not working. I have checked the div id names and they are proper. there is not spelling mistake
here is the link to my detailed question. please answer ASAP
Want to blur the background on twitter-bootstrap modal load. The javascript code is not working
Try to wrap your code inside DOM ready handler $(function() { ... }); to make sure all the DOM elements are loaded properly since you've included your Site.js in the <head> section of your page.
$(function() {
/* blur on modal open, unblur on close */
$('#aboutsbaims').on('show.bs.modal', function () {
$('#mycontent').addClass('blur');
});
$('#aboutsbaims').on('hide.bs.modal', function () {
$('#mycontent').removeClass('blur');
});
});
So, I was using the root JS Fiddle of the below URL (part before 761) and I got a nice design that works exactly how I wanted it. Here's the link:
Click here to see whole JSFiddle and here is the Javascript code:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
top: 49
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
top: -150
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
But when I implement it here: http://m.bwpcommunications.com/agency.php it doesn't work.
Anyone know why that might be?
It looks like you may be setting the click handler before the DOM has loaded.
You can see that, by changing your fiddle to load jQuery "in head" (like your live site), your code stops working.
http://jsfiddle.net/tzDjA/764/
You may need to add the following around your click handler.
This will configure your handler after the DOM has loaded.
$(function() {
$('#trigger').click( function() {
[...]
}
});
http://jsfiddle.net/tzDjA/762/
Alternatively, try delegating the handler so that it will be applied to elements that are added to the DOM later.
$(document).on('click','#trigger',function() {
[...]
});
http://jsfiddle.net/tzDjA/763/
You need to load jQuery on this page: http://m.bwpcommunications.com/agency.php
jQuery UI is not the equivalent of jQuery.
https://developers.google.com/speed/libraries/devguide#jquery
I'm trying to build an impression test for a remote usability test using HTML, CSS and jQuery. The user needs to click on a button to start the impression test, which will show the page of the client in an iframe for 5 seconds and then hide itself.
I looked for many codes very similar to this but not exactly what I needed and I can't make it work myself as my jQuery knowledge is yet v poor.
So, what I'm looking for is something like this:
on click show iframe 5000
hide
I tried using this bit of code to show on click with the css iframe {display:none};
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$("#iframe1").show("5000");
});
});
</script>
Thinking "it will show after the click for 5 seconds and then go back to normal display: none.
But no... It shows on click and it stays there.
Can anyone help me?
Here's how you would do it in jQuery:
$(document).ready(function() {
$("#show").click(function() {
$("#iframe1").show().delay(5000).hide(500);
});
});
Fiddle: http://jsfiddle.net/5vC68/
You'll want to use the window.setTimeout event. For example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/
Try this
<script type="text/javascript">
$(function() {
$( "#show" ).click(function() {
$( "#iframe1" ).show().delay(500);
$( "#iframe1" ).show().delay(5000);
});
});
</script>
I need to migrate a working jQuery script - over to Mootools to meet the requirements of my project.
The working jquery code is:
$('#video').bind('ended', function() {
//Functions on end here.
});
I have tried the following with Mootools...
document.id('video').addEvent('ended', function () {
//Functions here
});
and
document.id('video').addEvent('ended', function () {
//Functions here
}.bind(this));
However to no effect :( Can any one point me in the right direction please?
Thanks!
MooTools does not support HTML5 media tags events. After adding block written here You can use:
$('myVideo').addEvent('ended', function(){
//Functions here
});
Here myVideo is an id of tag:
<video id="myVideo"></video>
I'm using this jQuery to render a text box onClick. But, It's not rendering... Also, on a side note I'm using Drupal 7. I have the jQuery in the Head tags of the html.php.
<script type="text/javascript">
$(document).ready(function() {
$("#front-background").hide();
$(window).load(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
});
</script>
This may also be because of how Drupal handles compatibility with other JavaScript libraries.
You can wrap your jQuery function in:
(function ($) {
//your existing code
})(jQuery);
or if you're comfortable theming using the template.php file, you can add the JS through the function drupal_add_js().
See http://drupal.org/node/171213 for more details.
You dont need window load event if you are already using $(document).ready method. Try this.
$(document).ready(function() {
$("#front-background").hide();
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
I didn't see any onClick functionality there. This should work:
CSS:
#front-background {
display:none;
}
JQuery hover replacement. Fade in on hover, fadeout on leave
$(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
},function(){
$('#front-background').fadeOut(2000)
});
});