I am trying out the arrival.js library to detect when an element is injected into the body or is somehow available in the DOM. This is the code I am trying in JS:
setTimeout(function() {
$("body").append("<p class = 'foo'>Yep</p>");
}, 5000);
$(function() {
$(document).arrive(".foo", function() {
alert("hell Yeah");
});
});
Problem is, the element does get appended to the body after 5 seconds, but the alert never comes up. Any idea how to make it work as expected?
This is the fiddle.
Remove arrive.min.js in resource and use this cdn link
https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
fiddle
Related
I am trying to hide a div after certain time once its loaded and its working when I do this in the console but it doesnt work when I put this code in the actual webpage.
(function ($) {
if ($('#insightera_widget_content').length) {
$('#insightera_widget_content').delay(10000).fadeOut('slow');
}
}(jQuery));
The div insightera_widget_content cannot be seen when I view the source code as well, but I can see it on the Inspector. It loads from some external widget.
I have tried using the below to the page too and it doesn't work at all.
<script>
$(document).ready(function() {
if ($('#insightera_widget_content').length) {
$('#insightera_widget_content').delay(10000).fadeOut('slow');}
});
</script>
Any suggestions?
Setup a setInterval() to check for the existence of the element, and once it finds it, run your jquery and clear the interval.
var interval = setInterval(function() {
if ($('#insightera_widget_content').length) {
$('#insightera_widget_content').delay(10000).fadeOut('slow');
clearInterval(interval);
}
}, 1000)
/* you don't need this part - just simulating the widget adding the code to the page */
setTimeout(function() {
$('body').append('<div id="insightera_widget_content">insightera_widget_content</div>');
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
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/
So, I was using the root JS Fiddle of the below URL (part before 761) and I got a nice design that works exactly how I wanted it. Here's the link:
Click here to see whole JSFiddle and here is the Javascript code:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
top: 49
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
top: -150
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
But when I implement it here: http://m.bwpcommunications.com/agency.php it doesn't work.
Anyone know why that might be?
It looks like you may be setting the click handler before the DOM has loaded.
You can see that, by changing your fiddle to load jQuery "in head" (like your live site), your code stops working.
http://jsfiddle.net/tzDjA/764/
You may need to add the following around your click handler.
This will configure your handler after the DOM has loaded.
$(function() {
$('#trigger').click( function() {
[...]
}
});
http://jsfiddle.net/tzDjA/762/
Alternatively, try delegating the handler so that it will be applied to elements that are added to the DOM later.
$(document).on('click','#trigger',function() {
[...]
});
http://jsfiddle.net/tzDjA/763/
You need to load jQuery on this page: http://m.bwpcommunications.com/agency.php
jQuery UI is not the equivalent of jQuery.
https://developers.google.com/speed/libraries/devguide#jquery
Well, I´m not programmer so I can´t handle this at all.
I need to launch a part of a website after index is loaded. I´ve been trying some jquery without any luck, ie this:
$("document").ready(function() {
setTimeout(function() {
$('#tensa-inicio').trigger('click');
},1000);
});
You can see the site in this url: 3w[dot]tensa[dot]es. I need to display the HOME link after index is loaded, but can´t see how to do this.
Any help is really appreciated.
TIA!
Considering that you are trying to fire click event for the Anchor tag, You can make it work with following script too
$("document").ready(function() {
setTimeout(function() {
window.location = $('#tensa-inicio').attr('href');
},1000);
});
Assuming that "tensa-inicio" is the ID of anchor element in the document, you better call the native click() method rather than the jQuery event:
setTimeout(function() {
var oLink = $('#tensa-inicio');
if oLink.length === 1)
oLink[0].click();
},1000);
This was the tweak:
<script type="text/javascript">
$(document).ready(function(){
$("#sliderpromo").easySlider({
//auto: true,
//continuous: true,
speed:500,
pause:6000,
numeric: true
}, window.location="#!/tensa-inicio");
});
</script>
Now, every time index is loaded, that ID is loaded... ; )
Thanks to ALL!
I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.
It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.
I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.
I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>