I'm trying to make an auto slideshow with pics from other .php file and to achieve that i've decided i will use http://responsiveslides.com/ jQuery plugin. The problem is that this plugin doesn't want to work with my photos by "loading" them from other file.
$('.first-option').click(function(){
$('.inner-box').load('file.php .rslides');
});
$(function() {
$("file.php .rslides").responsiveSlides();
});
*CSS/HTML are exactly the same way written like the author wrote in his "Usage".
try this:
$('.first-option').click(function(){
$('.inner-box').load('file.php .rslides', function callback () {
$('.rslides').responsiveSlides();
});
});
I've not used the plugin before, but it appears that you need to apply the bootstrap method to the element that contains the slides you load into your page. So what you're doing in your code is attaching the load method to the click handler, while attaching the responsive slides to an empty selector when the DOM is ready. What I've provided above loads the content, and then using a callback function (when the content has successfully been loaded into the DOM), then calls the bootstrap method onto the original selector.
Edited the code to use the '.rslides' selector.
Related
I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');
use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout
You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/
This is the most persistant and limiting problem I have known of for a while now with my experience with JQuery. My problem is simple....
I am using a line of code to load content from html page B to a class defined space in html page A....
$(".tile-area-main").css({width: "720px"}).load("musability-music-therapy-what.html .slides");
in the class ".slides" (it's a slider) has some associated code to make it run properly....
$(document).ready(function() {
//Store a ref to slides
var $slides = $(".slides");
//Bind event to the contianed that gets animated
$(".slide-container")
.on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){
e.preventDefault();
// Remove classes from all the elements within the active container that starts with the class 'add-anim'
$slides.find(".slide-container [class^='add-anim']").removeClass("animated bounceInLeft bounceInUp");
//Add appropriate classes to the matched elements within the active container
var $radio = $slides.find(":radio[name='radio-btn']:checked");
$radio.next(".slide-container").find(".add-anim-up").addClass("animated bounceInUp");
$radio.next(".slide-container").find(".add-anim-left").addClass("animated bounceInLeft");
});
});
The code works , the page works if you launch it directly on its own from windows explorer... It doesn't when the .load function gets involved...
so the question is , How can I have the script loaded not just on that call above (would be a start) but constantly in the index html page I am loading from , (I have other slider functions I will need to use)
In short .load is great to get content but what about the associated code.
p.s my coding is lame if someone could provide an example of how to do this that would be a-m-a-z-i-n-g ! thanks.
this one is sooooo simple i can't beleive it hit me in the face .... simple home truth for Jquery begginners here ...
if you use .load to be smart and grab content from other pages well done....
if any of that content needs a script to run then you need to include $.getScript("url to js file"); after you have done the .load functions
this allows things to simply work !
I would like to use a custom scrollbar with Colorbox
I am using Wordpress so Colorbox is loaded using this plugin. All the custom scrollbar files have been loaded as per the instructions. I'm guessing that I need to apply to the #cboxLoadedContent div so I've loaded as per this code, however it's not working:
(function(jQuery){
jQuery(window).load(function(){
jQuery("#cboxLoadedContent").mCustomScrollbar();
});
})(jQuery);
Using Firebug there's no alteration to the standard coding i.e. the JavaScript isn't firing. However if I add to the div #cboxContent the JavaScript fires and a class mCustomScrollbar _mCS_1 is added to the #cboxContent div. But this doesn't have a scrollbar so nothing is shown.
The question is why isn't it working on the right div i.e. #cboxLoadedContent?
#cboxLoadedContent is appended and removed dynamically each time a colorbox is opened or closed. Both plugins need to alter the markup and add their own wrappers, so simply calling mCustomScrollbar on either #cboxContent or #cboxLoadedContent won't work (mCustomScrollbar must wrap #cboxLoadedContent within .mCSB_container after #cboxLoadedContent is appended).
The best way is to call mCustomScrollbar function inside colorbox's onComplete callback. This way the scrollbar is added when colorbox has done its work which is append #cboxLoadedContent and load the actual content.
From colorbox examples:
$(".callbacks").colorbox({
onComplete:function(){
$("#cboxContent").mCustomScrollbar();
}
});
Just a quick note about the code in the accepted answer. I couldn't get it to work with $("#cboxContent") as shown; I needed to use $('#cboxLoadedContent').
$(".callbacks").colorbox({
onComplete:function(){
$("#cboxLoadedContent").mCustomScrollbar();
}
});
I'm trying to achieve the following: I have a div on which I use the load() method to fetch new HTML content.
$('#mydiv').load('/newcontent.html');
This new HTML also contains images, and I would like those images to be faded in once loaded.
First I tried using a callback function with the load() method, but this function is triggered as soon as the HTML is fetched, but before the browser has loaded all the new images.
Then I tried applying an on('load') event on all the newly fetched images, but this does not work at all.
$('#mydiv').load('/newcontent.html', function() {
$('#mydiv img').css('visibility','hidden').on('load', function() { $(this).fadeIn(); });
});
The "visibility: hidden" works fine, so that my new HTML content is loaded into #mydiv, and all images are set to invisible. But the fading in does not work. The event I'm trying to bind here does in fact trigger as soon as the new HTML is loaded (which does not make any sense to me), but not when the individual images are loaded.
How can I solve this? Any help appreciated!
Use fadeIn() and fadeOut() out jQuery. And if you want to do on load then use the event for that.
how to display the image at last after loading all the other contents in a webpage.
I've an image on a page which is retrieved from the database when a button is pressed.
I'd like to load entire page first and the image at last after the contents are loaded.
any help?
If by load you mean download the various parts of the page and construct the DOM, then:
$(document).ready(function() {
$('#theimage').show();
});
You can load and add it to your html it in javascript using this function:
$(window).load(function() {
// in 2 steps for clarity, can be optimized
img_html = '<img src="/path/to/image" alt="bla bla" />'; // step 1, generate image html
$("#image_div").append(image_html); // step 2, append image to some div
// optional, see my comment below
$("#image_div img").load(function() {
// triggers when newly added image is completely loaded
});
});
That makes sure loading of the image starts when everything else has finished loading.
Note that the image in the example shows while loading, if you want to load it first and then display it, you'll have to hide it and use the .load event of the image to display it.
$(document).ready(function() {
$('#imageid').attr( "src", "/new/path/to/image.jpg" );
});
In your initial load of the page you can just write a placeholder (div, span, even an image with nothing assigned to it.)
Then attaching to the button click event you can use JQuery + Ajax to callback (not postback, or is there any reason for the postback OTHER than to get the image?) to your server (or a webservice) to get the image path and assign that to the place holder. You can augment that with various jquery animations to "fade in" your image or slide down... what ever you like.
can you use javascript to dynamically set the image url after the dom loaded?
If you have html structure
<image id="image_id"/>
Then use the following jquery code:
$(document).ready(function() {
$("#image_id").attr("src", "link_to_image");
});
Or else, you can use some css trick, hide the image first, so it won't download from server.
Then use the following jquery code to show the image once DOM is ready:
$(document).ready(function() {
$("#image_id").show();
});
At the same time, looks at image preload. this may be useful to you http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317