I have the following javascript function which works nicely on a single html file.
jQuery.noConflict();
jQuery(function() {
$('#focus-init').click(function() {
$('#map1').vectorMap('set', 'focus', 1, 0, 0);
});
});
The issue appears when I try to integrate the above function into my wordpress theme. It seems that any other page I browse the above function is always called which I don't expect it to happen.
Since the #focus-init only exist on one page how can I specify that the above function should only be called when the element ID is found ?
UPDATE
I am afraid this wordpress theme does not have a concept of page title, since any other page has the same title tag
jQuery(function() {
if ($('#focus-init').length !== 0) {
$('#focus-init').click(function() {
$('#map1').vectorMap('set', 'focus', 1, 0, 0);
});
}
});
Related
I use a jQuery window libray https://github.com/humaan/Modaal
which triggers events this way $("class of element").modaal({arg1, arg2,...});
--- I updated my question here to make it more general and used an iframe / Html instead of an external svg ---
To trigger an element e.g. in an external Html which is loaded within an iframe, I applied the following code to the iframe:
<iframe src="External.html" id="mainContent" onload="access()"></iframe>
which calls this function:
function access() {
var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
html.addEventListener('click', function() {clicker();});
}
function clicker()
{
// console.log('hooray!');
$("#mainContent").contents().find("IDofDIVelement").modaal({});
//return false;
}
Actually it will only work on every second click. Any idea what I did not consider properly?
Best
You do not need to wait windows loading but iframe only:
$(function() {
$("#mainContent").bind("load",function(){
var myIframeElement = $(this).contents().find(".modaal");
myIframeElement.modaal({
content_source: '#iframe-content',
type: 'inline',
});
});
});
The reason why it did not work was that the iframe was not completely loaded, while jQuery tried to attach the function. As $(document).ready(function(){} did not work, the workaround was to initialize it with
$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});
This worked properly to attach the functionallity to an element within the iframe.
Actually modaal will vanish the envent handler after the overlay was opened and closed again.
So maybe someone wants to trigger an iframe element for modaal, too, here is a setup which would solve this issue.
(It can be optimised by #SvenLiivaks answer):
$(window).on("load", function() {
reload();
});
function reload() {
var length = $("#iframeID").contents().find("#IDofDIVelement").length;
// The following check will return 1, as the iframe exists.
if (length == 0) {
setTimeout(function() { reload() }, 500);
} else {
$("#iframeID").contents().find("#IDofDIVelement").modaal({
content_source: '#modalwrapper',
overlay_close: true,
after_close: function reattach() {
reload();
}
});
}
}
I'm using RequireJS to structure my JS and DJAX (basically PJAX) as a way to dynamically load content without a full page reload.
The issue I have is that after DJAX has finished loading the content I need to rerun my scripts (e.g. a script that adds multiple images into a carousel) so that the new page renders correctly. I thought the best way to do this would be to simply rerun the function I'm running on $(document).ready(); but I'm getting this output in the console:
Uncaught TypeError: Cannot read property 'djaxLoad' of undefined
which is referring to this line in load-posts.js
bootstrap.init();
I'm guessing I'm writing something incorrectly.
Here is bootstrap.js which is my main file which fires on document.ready and initialises all my modules
require(['base/responsive', 'base/main-menu', 'base/social-share', 'base/randomise-colours', 'base/infinite-scroll', 'base/load-posts', 'base/image-fade', 'base/carousel', 'base/misc'],
function(responsive, main_menu, social_share, randomise_colours, infinite_scroll, load_posts, image_fade, carousel, misc) {
var $ = jQuery;
function djaxLoad() {
//If page has JS (detected with Modernizr) then hide content until the
//doc is ready to avoid flash of unstyled content
$('#djax-container').css('display', 'block');
main_menu.init();
social_share.init();
randomise_colours.init();
load_posts.init();
image_fade.init();
infinite_scroll.init();
carousel.init();
misc.init();
responsive.init();
}
$(document).ready(djaxLoad);
}
);
And this is load-posts.js which handles DJAX for me. DJAX works, I just need to get the scripts to fire again.
define(['djax', 'base/bootstrap'], function(djax, bootstrap) {
var $ = jQuery,
$body = $('body');
return {
init: function() {
if($body.length >= 1) {
this.setUp();
} else {
return false;
}
},
setUp: function() {
this.pjaxLinks();
},
pjaxLinks: function() {
//Initialise DJAX, but stop it from running on pagination links (URL is /page...)
$('body').djax('.updateable', ['page']);
//When clicking a djax link
$(window).bind('djaxClick', $.proxy(function() {
this.addLoader();
},this));
//When the new content has loaded in
$(window).bind('djaxLoad', $.proxy(function() {
this.removeLoader();
},this));
},
addLoader: function() {
$body.addClass('loader-visible');
},
removeLoader: function() {
$body.removeClass('menu-visible');
$('html, body').scrollTop(0);
function removeLoaderDelay() {
$body.removeClass('loader-visible');
bootstrap.djaxLoad();
}
setTimeout(removeLoaderDelay, 1000);
}
};
});
The djaxClick function runs on a link click, and the djaxLoad function runs after the content has been loaded in. I'm adding a loader overlay to the page, then removing it after the content has loaded in.
A bit late but for future reference: In the documentation at https://github.com/beezee/djax you'll find the djaxLoad-event. This is specifically made for your usecase. You can use it as follows:
$(window).bind('djaxLoad', function(e, data) {
// your scripts to run on ajax-calls
});
The site further explains: "the data object passed with the event contains the requested url, the page title for the requested page, and the contents of the requested page as a string".
$(window).bind('djaxLoad', function(e, data) {
var responseObj = $('<div>'+data.response+'</div>');
//do stuff here
});
I have this gallery the designer handed to me, and I have to put it on my twig. The thing is the slider is not working. This is the code (the js with the problem):
$(function () {
var demo1 = $("#demo1").slippry({
transition: "fade",
useCSS: true,
speed: 2e3,
pause: 4e3,
auto: true,
preload: "visible"
});
$(".stop").click(function () {
demo1.stopAuto()
});
$(".start").click(function () {
demo1.startAuto()
});
$(".prev").click(function () {
demo1.goToPrevSlide();
return false
});
$(".next").click(function () {
demo1.goToNextSlide();
return false
});
$(".reset").click(function () {
demo1.destroySlider();
return false
});
$(".reload").click(function () {
demo1.reloadSlider();
return false
});
$(".init").click(function () {
demo1 = $("#demo1").slippry();
return false
})
});
The error is in the part where it includes one of my css files, the one called "slippry". The error says: "Undefined function or method". My question is: Do I have to call this css file in another way to make the slider work? Do I have to change the path?
Instead of trying to answer your question directly, I would first recommend that you use Twitter Bootstrap's Carousel (slider), as you won't have to worry about binding your click events to controls. In addition to its robust design/extensibility that includes events.
You can fully customize the css to make the slider look like whatever you want it too... Plus the bootstrap package provides a very nice responsive framework, and you should be using one of these anyways.
After getting a new page with $.get none of the javascript will run on the new page.
Is there a way to make javascript use the new page too?
Many thanks
Dorjan
Edit: Example:
$(function() {
$('.viewPage').click(function() {
$('#mainarticle').fadeOut('slow')
$.get($(this).attr('href'), { js: "1" }, function(data) {
$('#mainarticle').html(data).fadeIn('slow');
});
return false;
});
});
Now this works fine however, the new page's anchor tags won't trigger (lets say it has a .viewPage).
I hope that clarify's the issue.
You need to bind events to your anchors using live:
$('a.something').live("click",function() {
alert('this will still work after a.something has been replaced via ajax');
});
Another way using $.get's callback:
$.get( "page.html", function(data) {
$('#someDiv').html(data);
$('a.something').click(function() {
alert('this will still work after a.something has been replaced via ajax');
});
});
Now that I've seen your code:
$(function() {
$('.viewPage').live("click",(function() {
$('#mainarticle').fadeOut('slow')
$.get($(this).attr('href'), { js: "1" }, function(data) {
$('#mainarticle').html(data).fadeIn('slow');
});
return false;
});
});
Yep; there is another jquery ajax method that will take the returned script from your page and execute it. Check the jquery docs.
I'm using the jquery-tools tabs and carousel in a page I'm working on. The carousel is embedded within a tab, and the tab is loaded in a beforeClick callback.
Normally, the carousel is initialized in the document ready function like so:
$(function() {
// initialize scrollable
$("div.scrollable").scrollable({
size: 3,
clickable: true,
loop: false
}).mousewheel();
This doesn't work when the carousel is loaded via beforeClick, because it when the DOM is ready, this tab hasn't been loaded yet.
$("ul.tabs").tabs("div.panes > div", {
initialIndex: 0,
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
var src = this.getTabs().eq(i).attr("href");
var langPattern = "/^" + getLang() + '/';
var forceReload = false;
if (src.match(langPattern) == null)
{
src = getLang() + "/" + src;
forceReload = true;
}
if (pane.is(":empty") || forceReload) {
// load it with a page specified in the tab's href attribute
pane.load(src);
// initialize scrollable - ONLY SHOULD BE DONE ONCE
$("div.scrollable").scrollable({
size: 3,
clickable: true,
loop: false
}).mousewheel();
}
}
}).history();;
My question is a two-parter:
First, is there an event I can add a handler to to initialize the scrollable when it is first loaded?
Second, if there isn't, is there a way I can find out if the scrollable has been constructed yet?
The idea behind this code is to load localized html fragments based on the user's language selection. This is for a catalog on a CD, not online.
You might want to check out the jQuery live event. This event matches all current and future DOM matches.
EDIT 1
You want to bind to div.scrollable's onload event, correct?
$('div.scrollable').live('load', function() {
// etc.
});
I solved my problem by attaching a callback to the load call:
pane.load(src, "", function(){
$("div.scrollable").scrollable({
size: 3,
clickable: true,
loop: false
}).mousewheel();
});