The following script works locally:
<script>
$(document).ready(function() {
var $container = $('#content');
alert('1');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.box',
columnWidth : 220
});
alert('2');
});
});
</script>
But once I upload the site and run it online it no longer organizes the images. The masonry layout does not execute. http://jennifer2.sonnemann.ca
Thoughts? Alert number 2 does not fire so the imagesloaded event is not firing...
Chris
Related
I'm building a site utilising Bootstrap tabs and AJAX. I've set it up so that when a link with the class of .load is clicked the content of that html document is loaded into the active tab, in this case #tab2.
This is done using the following:
$(function(){
$("#tab2").delegate('.load', 'click', function (e) {
e.preventDefault();
$("#tab2").load($(this).attr("href"));
});
});
I also need some links in #tab2, those with the class of .load-tab1 to load content into #tab1, which I have achieved with the following code.
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
});
});
The problem is I can't work out how to make it so that when .load-tab1 links are clicked the active tab is also switched from #tab2 to #tab1.
Any help would be greatly appreciated!
UPDATE:
I was able to get it working with the following code but still thinking there is a better solution.
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
$(".tab2").removeClass("active");
$(".tab1").addClass("active");
$(".tab-content #tab2").removeClass("active");
$(".tab-content #tab1").addClass("active");
});
});
You should select the tab in the .load() callback:
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"), function(response, status, xhr){
$( theFirstTabAnchorSelector ).tab('show');
});
});
});
I am using the following code for ajax page loading
<script type="text/javascript">
jQuery('.filter-menu a').live('click', function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#gallery-ajax').fadeIn(200, function() {
jQuery('#gallery-ajax').animate({ opacity:0.1 }, 500);
}).load(link + ' #gallery-ajax', function(){
jQuery('#gallery-ajax').fadeIn(200, function() {
jQuery('#gallery-ajax').animate({opacity:1});
});
});
});
</script>
This is working fine but loads newer contents with very low speed. Can anyone please tell me how to improve its speed of loading newer contents or provide me some alternate jQuery AJAX.
You could try to take away some of the additional fade functions:
<script type="text/javascript">
jQuery('.filter-menu a').live('click', function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#gallery-ajax').hide().load(link + ' #gallery-ajax', function(){
jQuery('#gallery-ajax').fadeIn(200);
});
});
</script>
Of course this is not exactly the same behaviour but it will surely appear faster.
I used resources learned on Stack Overflow to find sample script here: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library.
If I use the following, the swipe function fails on android and the user control arrows won't work on android or a pc (I don't have an iphone to test with):
<script type="text/javascript">
$(document).ready(function() {
$('#imagegallery').cycle({
fx: 'fade'
});
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery").cycle("next");
},
wipeRight: function() {
$("#imagegallery").cycle("prev");
}
});
});
</script>
If I use this, then the user control arrows work on a pc and android, but the swipe function still won't work:
<script type="text/javascript">
$(document).ready(function() {
$('#imagegallery').cycle({
fx: 'fade',
prev: '#prev',
next: '#next',
speed: 300
});
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery").cycle("next").alert("left");
},
wipeRight: function() {
$("#imagegallery").cycle("prev").alert("right");
}
});
});
var swipeOptions = {
swipe : swipe,
threshold : 75
}
</script>
I tried everything I could think of to do my own learning and experimenting, but at this point I could really use a push in the right direction. I am using a test page on my son's website: http://zachmcdonald.net/testgallery.php.
Your thoughts are appreciated!
Thanks,
Julie
I found it simpler to do the following
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery .Next").click(); // selector for you 'next' btn
},
wipeRight: function() {
$("#imagegallery .Previous").click() // selector for your 'prev' btn;
}
});
I use the modal window a fair bit in joomla and just found out that it doesn't work with ajax added links. What is the code I need to have the modal window work with those links?
I'm better at jquery than moo tools ...
Thanks,
Mat
I found this code but can't get it to work.
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({
ajaxOptions: {
evalScripts: true
}
});
//SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
window.addEvent('domready', function() {
window.addEvent('load', function(){
//alert('clicked!');
SqueezeBox.fromElement($('a.modal'));
});
});
</script>
I use Rokbox (Mootools) from Rockettheme available for free here : http://www.rockettheme.com/extensions-downloads/club/1005-rokbox
A must have :)
I have a JQuery function/script that I'm using for posts on a blog that upon hover of the post image shows the post title, excerpt, and link.
Additionally, I have an AJAX Fade Out/Fade In pagination script running and when I go to the next set of posts in the pagination, the first JQuery script doesn't run any longer. I know I need to be using the .live function somehow for jQuery, however I can't seem to figure it out. Here are the two scripts.
<script type="text/javascript">
$(function() {
$(".capslide_img").capslide({
caption_color : '#516077',
caption_bgcolor : '#dbe2f0',
overlay_bgcolor : '#dbe2f0',
border : '4px solid #dbe2f0',
showcaption : false
});
});
</script>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
jQuery('#postPagination a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#page-wrap').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#page-wrap').fadeIn(500); });
});
});
</script>
Thanks for your help.
you could put the capslide command into a function and call it after each ajax load:
function addCappslide() {
$(".capslide_img").capslide({
caption_color : '#516077',
caption_bgcolor : '#dbe2f0',
overlay_bgcolor : '#dbe2f0',
border : '4px solid #dbe2f0',
showcaption : false
});
}
$(function() {
addCappslide(); // call it once the page has loaded
$('#postPagination a').live('click', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#page-wrap').fadeOut(500).load(link + ' #contentInner', function(){
jQuery('#page-wrap').fadeIn(500, addCappslide() ); // call it after each ajax load again after it faded in
});
});
});