jquery colorbox and custom scrollbar - javascript

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();
}
});

Related

Bootstrap Popover fail with ajax

i would like use the Bootstrap Popover with ajax templates. The next script running good,...
$('.popover-trigger').bind('click', function(k) {
var e=$(this);
title="Jeepieee"
$.get('/popover/'+e.data('pophtml'),function(d) {
e.popover({
content: d,
container: 'body',
title: title,
html: true
}).popover('show');
});
});
...but, if I open the popover by the first send a ajaxcall, this is right. I open the popover again, it showed me my html, but the html from the popover is old and not ajax-call..
When i use $().popover('destroy'), then i have no click-event on my button and it opens nothing.
if I have multiple, will make matters worse.
Loading a content via AJAX in a Bootstrap popover is a very common pattern and, although it is not supported out of the box by Bootstrap, it is very easy to get this functionality with jQuery.
First we should add a data-poload attribute to the elements you would
like to add a pop over to. The content of this attribute should be the
url to be loaded (absolute or relative):
blabla
And in JavaScript, preferably in a $(document).ready();
$('*[data-poload]').hover(function() {
var e=$(this);
e.off('hover');
$.get(e.data('poload'),function(d) {
e.popover({content: d}).popover('show');
});
});
off('hover') prevents loading data more than once and popover() binds
a new hover event. If you want the data to be refreshed at every hover
event, you should remove the off.
Please see the working JSFiddle of the example.

jQuery slideshow plugin with .load()

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.

loading associated script with content on .load jquery

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 !

Loading content into a div with jQuery.load(), how can I make new images fade in on load?

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.

onload and Jquery ready(). Do they work on any DOM? such as table or div?

I need to put a dynamic content on a div using javascript script. This div is on the top of the page so it will load first before other things below it. And there are really lot's of things down there. So, when I put the script on the ready() or onload, the div will be empty for 2 -3 seconds while other things are displayed. So, I tried putting the onload or ready() to this div.
//example div, which is on the header part of the page
<div id="cont1">
something goes here
</div>
//... and there are a lot of other things going down here.
I tried putting the onload="alert('test')" on the div tag
<div id="cont1" onload="alert('test')">
and also the jquery method
<script>
$("cont1").ready(function(){
alert("test");
});
</script>
Both methods don't work, as the alert is triggered only after the whole page is displayed.
but if I put the alert("test"); script immediately after closing the above div, it works fine (as the other things on the page is not displayed yet when the alert is showing).
<div id="cont1">
something goes here
</div>
<script>
alert("test");
</script>
But this method is kind of a bad design isn't it? So, any other way to achieve this?
If you want a javascript action to fire after a specific DOM element has loaded, simply place it immediately after the element, as you noted:
<div id="cont1">
something goes here
</div>
<script>
alert("test");
</script>
Some may disagree, but this is not bad design. As long at whatever occurs in this script pertains only to elements which occur prior to it in the HTML document, everything should be kosher. The DOM is loaded linearly in the order it appears in the document, so there is no case in which the script coming after #cont1 would occur prior to #cont1. If the script is lengthy, you could put it in a function in a header include then call the function there instead.
onload and the meta-event of "ready" apply the the entire DOM document, not just any DOM node, which is what you are attempting here.
I would stick with jQuery's $(document).ready(...) for code that requires the DOM to be present.
onload is unfortunately on the window only.
However, I have written a jQuery plugin called waitForImages that will fire a callback when images have loaded inside any container.
This is a bit half way but you can have a img of a single pixel same color as the background at the end of the div and have an onload on the img.

Categories