I used a flowplayer tutorial to make some ajax tabbed content but the it doesn't use any kind of a loading indication in between content load. How can I add that to this script? http://pastebin.com/PebcJspn
<script>
$(function() {
$(".feed-tabs ul").tabs("div.feeds > div", {
effect: 'fade',
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
if (pane.is(":empty")) {
// load it with a page specified in the tab's href attribute
pane.load(this.getTabs().eq(i).attr("href"));
}
}
});
});
</script>
You can try add an element with a loading gif before call the method .load() and it will be removed when .load() inserts the html result.
<script>
$(function() {
$(".feed-tabs ul").tabs("div.feeds > div", {
effect: 'fade',
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
if (pane.is(":empty")) {
//add this
pane.append("<img src='http://mentalized.net/activity-indicators/indicators/ilcu/roller.gif'/>")
// load it with a page specified in the tab's href attribute
pane.load(this.getTabs().eq(i).attr("href"));
}
}
});
});
</script>
Related
I have <a> tag in infoBubble google map content (javascript api) and LoadPages div for load content from server (div fill with jquery.load())
"<a id='hrefShow' href='javascript:void(0);'onClick='markup(\"/Detail/job/" + item.JobId + " \");'>See More</a>"
and I wrote markup function last of initial map function
function markup(e) {
$(function () {
if ($("#map-canvas").height() !== 320) {
$("#map-canvas")
.animate({ height: 320 },
1000,
function() {
});
$("#LoadPages")
.delay(1000)
.queue(function(nxt) {
$(this).load(e);
nxt();
});
} else {
$("#LoadPages").empty();
$("#LoadPages")
.delay(1000)
.queue(function(nxt) {
$(this).load(e);
nxt();
});
}
return false;
});
When I click on the infoBubble content a tag everything is working correctly
get response 200 ok with HTML.
But in LoadPages div response (html content from server) doesn't load. Plus, I have empty div.
Why doesn't it load content, while it is loading content writing code in the click event of a button?
I replaced content from index.htm with content from project.htm. When you click on a#front it is linked on project.htm and it dynamically loads (replaces) the new content. But I have an issue with how to execute javascript that I'm loading with new content. To load script I used function getScript. Here is the function that I'm using to load new content and script:
$(document).ready(function() {
$('a#front').click(function() {
var toLoad = $(this).attr('href')+' #content';
$('#content').hide("drop", { direction: "left" }, "slow", loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad ,'',showNewContent())
}
function showNewContent() {
$('#content').show("drop", { direction: "right" }, "slow");
$.getScript('js/project.js');
}
return false;
});
});
Javascript that I loaded when I loaded new content only worked if I had alert at the top or this way. But when I try to load more complex content (insted just text I put div, headings etc) it doesnt work:
$.ajax({
success: function(data) {
$('a#link').click(function() {
$("p").css("color","white");
});
}
});
Can you help me with this or maybe you have some different solution?
I solve this problem and menaged to load content from new file and also javascript for that. Notice that in new file I need to have content wrapped into div with ID content and I load it into div in native document, with the same name - content.
Here is how I load new content and how I call new javascript files using getScript function:
$('a#front').click(function() {
var toLoad = $(this).attr('href')+' #content';
$('#content').hide("drop", { direction: "left" }, "slow", loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad ,'',showNewContent())
}
function showNewContent() {
$('#content').show("drop", { direction: "right" }, "slow");
$.getScript('js/project.js');
$.getScript('js/section.js');
$.getScript('js/carousel.js');
}
return false;
});
To force loaded javascript execution I used setTimeout function. For example this is how looks code inside carousel.js file which activate carousel:
$(document).ready(function($) {
setTimeout(function(){
//run carousel
$("#owl-example").owlCarousel();
}, 100); });
How it works you can see here
So I'm using the History.js plugin to load pages in my Wordpress theme via AJAX. I've been successful in doing so and have the entire loading feature working fine. However, I have many scripts working in the same file and they of course do not get loaded on the state change.
Here's (a very brief) version of my functions.js file to explain:
(function($){})(window.jQuery);
$(document).ready(function() {
/* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
$projects = $("#projects");
$projects.append($(".contact"));
$projects.isotope({
itemSelector : '.item',
layoutMode : 'masonry'
});
/* END PREVIOUS BLOCK */
/* BEGIN HISTORY.JS IMPLEMENTATION */
var History = window.History,
State = History.getState();
$('.nav a, .leftHold a').on('click', function(event) {
event.preventDefault();
var path = $(this).attr('href');
var title = $(this).text();
History.pushState('ajax', title, path);
});
History.Adapter.bind(window, 'statechange', function() {
load_site_ajax();
});
function load_site_ajax() {
State = History.getState();
$('body, html').animate({ scrollTop : 0 }, 250, function() {
$("#article").animate({ left : -1*$(window).width() }, 250, function() {
$(this).load(State.url + ' #article', function() {
$(".nav li").each(function() {
$(this).removeClass("current_page_item").removeClass("current_page_parent").removeClass("current_page_ancestor");
}).promise().done(function() {
$(".nav a").each(function() {
if(State.title.indexOf($(this).text()) != -1) {
$(this).parent().addClass('current_page_item');
return false;
}
});
});
}).promise().done(function() { $(this).css("left", $(window).width()).animate({ left : 0 }, 250); });
});
});
}
/* END HISTORY.JS */
});
I load this functions.js file at the end of my document, just before the closing body tag. I can tell that whenever I change browser states, the code in $(document).ready(); doesn't run again, therefore Isotope and none of my other Javascripts load again.
QUESTION:
How should I ensure that the code in functions.js runs every time the pushstate is initiated by History.js?
It sounds like you'll need to execute the ready code again. Wrap your initialization code in a function:
$(document).ready(initializePage);
function initializePage() {
/* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
...
}
And then, when "statechange" fires, you can call initializePage() again.
You will also need to make sure the History code only runs once, so put that code in a separate function:
$(document).ready(setupHistory);
function setupHistory() {
/* BEGIN HISTORY.JS IMPLEMENTATION */
var History = window.History,
State = History.getState();
});
....
}
A the end of my index.html file I'm including two script files. One of files handles loading page content with jquery. The other file handles manipulating a tabbed content area on my home page, also jquery. If I put the file for the tabbed content area after the file for the ajax page load file, then tabs work but the ajax for the page load does not work. If I reverse the order of those files, then the page load ajax works but not the tabs. What could be causing this?
Here's the file for the tabbed content:
$(document).ready(function (){
initialize();
});
function initialize() {
//Click on nav to load external content through AJAX
// $('#topnav a').click(function(e){
// e.preventDefault();
// $('#pages').load( e.target.href + ' #loadcontent'); //pages finished loading
// }); //clicked on nav
$(function() {
$("#tabedarea").organicTabs();
$("tabedarea").organicTabs({
"speed": 200
});
});
}
(function($) {
$.organicTabs = function(el, options) {
var base = this;
base.$el = $(el);
base.$navtabs = base.$el.find(".navtabs");
base.init = function() {
base.options = $.extend({},$.organicTabs.defaultOptions, options);
// Accessible hiding fix
$(".hidetabs").css({
"position": "relative",
"top": 0,
"left": 0,
"display": "none"
});
base.$navtabs.delegate("li > a", "click", function() {
// Figure out current list via CSS class
var curList = base.$el.find("a.current").attr("href").substring(1),
// List moving to
$newList = $(this),
// Figure out ID of new list
listID = $newList.attr("href").substring(1),
// Set outer wrapper height to (static) height of current inner list
$allListWrap = base.$el.find(".list-wrap"),
curListHeight = $allListWrap.height();
$allListWrap.height(curListHeight);
if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
// Fade out current list
base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
// Fade in new list on callback
base.$el.find("#"+listID).fadeIn(base.options.speed);
// Adjust outer wrapper to fit new list snuggly
//var newHeight = base.$el.find("#"+listID).height();
//$allListWrap.animate({
// height: newHeight
//});
// Remove highlighting - Add to just-clicked tab
base.$el.find(".navtabs li a").removeClass("current");
$newList.addClass("current");
});
}
// Don't behave like a regular link
// Stop propegation and bubbling
return false;
});
};
base.init();
};
$.organicTabs.defaultOptions = {
"speed": 300
};
$.fn.organicTabs = function(options) {
return this.each(function() {
(new $.organicTabs(this, options));
});
};
})(jQuery);
And here's the file for the page load ajax:
// remap jQuery to $
(function($){})(window.jQuery);
/* trigger when page is ready */
$(document).ready(function (){
initialize();
});
function initialize() {
//Click on nav to load external content through AJAX
$('#topnav a, #bottomnav a').not('#bottomnav #fbcallus a').click(function(e){
e.preventDefault();
$('#pages').load( e.target.href + ' #loadcontent'); //pages finished loading
}); //clicked on nav
//handle AJAX for left nav
}
You're creating global functions with the same name initialize change the names of those or just one. The one that's loaded afterwards overrides the first
The problem is having both the functions the same name. Use two different names for the functions.
Then you don't need to add two page load handlers. Add a single page load handler in the latter script and call the two methods in it.
suppose your two functions are initialize() and init2() then at the latter js file use
$(document).ready(function () {
initialize();
init2();
});
This might be painfully easy, but I haven't found anything while searching,
I need to refresh the parent on close of the overlay.
Any Help is much appreciated.
Thanks Jcolebrand, this works
$("a.help[rel]").overlay({
effect: 'apple',
onClose: function(){
window.location.reload(true);
},
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.attr('src', this.getTrigger().attr("href"));
}
});
Thanks Jcolebrand,
$("a.help[rel]").overlay({
effect: 'apple',
onClose: function(){
window.location.reload(true);
},
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.attr('src', this.getTrigger().attr("href"));
}
});