<div class="content-book-row-container">
<div id="content-book-container-inject">
<div class="content-book-row-container">when im read im read</div>
<div class="content-book-row-container">when im read im read</div>
<div class="content-book-row-container">when im read im read</div>
<div class="content-book-row-container">when im read im read</div>
</div>
<div id="content-book-row-footer"></div>
</div>
when the footer waypoint fires, even though the passed waypointrows have passed the view, they will all be re-triggered/fired off again.
How is it possible to insert new waypoints without recalling all of the previous waypoints?
This was a reply from the developer of waypoints, i thought I would share it here.
Words can be tricky for visual code problems, but I'm going to take a swing at codifying what you've described:
<div class="wrapper">
<div class="thing-container">
<div class="injected-thing">...</div>
</div>
<div class="footer"></div>
</div>
And your footer waypoint looks something like this:
$('.footer').waypoint(function(direction) {
injectNewThing();
$('.injected-thing').waypoint(function() {
alert('reached');
});
});
For the sake of simplicity, let's say injectNewThing inserts just one more injected-thing:
<div class="wrapper">
<div class="thing-container">
<div class="injected-thing">...</div>
<div class="injected-thing">...</div>
</div>
<div class="footer"></div>
</div>
The problem lies in the next line:
$('.injected-thing').waypoint(function() {
alert('reached');
});
The target, .injected-thing includes all of them. But what you really want is just a waypoint on the new ones. My suggestion is to add a class to the "things" you have already triggered the waypoint function on, and then target items that do not have that class:
$('.footer').waypoint(function(direction) {
injectNewThing();
$('.injected-thing').not('.reached').waypoint(function() {
$(this).addClass('reached');
alert('reached');
});
});
Let me know if that doesn't make sense or if I've mischaracterized the situation.
Related
I want to move a DOM element inside the DOM but whilst still keeping it in its own container.
Take the following HTML:
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>
I want to put the .bit containing A to the end of this list, just below E whilst still keeping it inside the div .contain.
I have tried the following:
$('.contain').find('bit').first().appendTo('.contain');
and:
$('.contain').find('bit').first().insertAfter($('.contain').find('bit').last());
And neither of them work.
I have very little control over the HTML. For example I can't give each .bit its own unique ID.
Can someone explain what I am doing wrong?
Just append it to the same container and A is moved to the end of the list.
Your two attempts works - you have missed the . for the find('.bit') part.
See demo below:
$('.contain').append($('.contain .bit:first-child'));
// the below works too
// $('.contain').find('.bit').first().appendTo('.contain');
// and even this works
// $('.contain').find('.bit').first().insertAfter($('.contain').find('.bit').last());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>
You need to use the class selector ., which you already use for .contain
$('.contain').find('.bit').first().appendTo('.contain');
working snippet:
$('.contain').find('.bit').first().appendTo('.contain');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>
Noob here sorry. I'm trying to remove an ancestor when my WP loop returns an empty message with a specific class. Firefox is displaying as intended, removing the desired DOM, but Chrome is removing the targeted element and no ancestors.
Basic HTML markup:
<div id="content" class="container site-content">
<div id="primary" class="main-content">
<div id="main-box-1" class="main-box border-top">
<div class="main-box-inside">
<p class="no-modules-msg">No posts match your criteria. Please choose different options.</p>
</div>
</div>
<div id="main-box-2" class="main-box border-top ">
<h3 class="main-box-title">More Stuff</h3>
<div class="main-box-inside">
</div>
</div>
</div>
</div>
And my script:
(function($) {
$("document.body").ready(function() {
$("p.no-modules-msg")
.closest(".main-box")
.remove(".main-box")
})
})(jQuery);
It's working correctly in fiddle, but not on the live site...
https://jsfiddle.net/y90gtt6t/
The reason it's not working on your site, is because the documentation is quite clear, only the document has a ready handler
jQuery(document).ready(function($) {
$("p.no-modules-msg").closest(".main-box").remove()
});
Your use of "document.body" actually looks for an element like <document class="body"></document>, which it hopefully never finds.
I'm running an asynchronous 3rd party script that loads an image gallery into my page, but unfortunately their code doesn't provide me with a callback after their image gallery has finished loading.
The modal starts off like this:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
</div>
</div>
After the gallery is loaded, the modal looks like this:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<div id="ze_galleria">
//gallery stuff
</div>
</div>
</div>
So I need some way to display a loading animation until #ze_galleria appears. The loading animation function I can do myself, but is there something in jQuery that will listen for when a certain DOM element is created? Once the DOM element appears, it'll run the callback to remove the animation.
Based on how that script adds the gallery/gallery items you could use the DOMSubtreeModified event and then check if that particular item were added
document.addEventListener("DOMSubtreeModified", function(e) {
if (document.querySelector("#ze_galleria")) {
// exists
}
});
Here is a DOM tree event list, where you can check other possible events that might could be used.
https://developer.mozilla.org/en-US/docs/Web/Events
Update
Make sure you take a look at the MutationObserver as well, as it has very good browser support nowadays.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Also, you can set an interval:
var cincopa = $('#cincopa');
var counter = 0;
var intervalCode = setInterval(function(){
if (cincopa.find('#ze_galleria').length){
clearInterval(intervalCode);
yourCallback();
}
counter++;
console.log(counter + ' seconds past till the event loaded.');
}, 1000);
I think the code is intuitive, but if there is any doubt, just ask :)
Presuming that your "3rd party library" is going to totally overwrite the contents of what ever you point it at (as your example code suggests it does). You can solve your problem simply by adding an img:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<img src="loading.gif"/>
</div>
</div>
When the library has done what it needs to do it will overwrite the contents of the div <div class="container-fluid" id="cincopa"> resulting in:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<div id="ze_galleria">
//gallery stuff
</div>
</div>
</div>
thus removing your loading image.
I am using a Wordpress Theme (Incipiens) that has a show/hide Javascript to show a map on the contact page http://demo.themedev.me/wordpress_themes/incipiens/contact-us/
I want to use this function on a page multiple times to show/hide galleries.
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<a class="show_map" href="javascript:void(0)"></a>
<div class="map_container"><div class="thismap"><iframe>........</iframe></div>
</div>
I have this working but the call to the js opens all divs. I therefore put a unique div id round each gallery and slightly changed the javscript...
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<div id="silestone">
<div class="map_container">
[show_gallery width="124" height="124" galleryid="527"][/show_gallery]
</div>
</div>
</div>
It works but very oddly, sometimes the right one opens, sometimes the wrong one...not sure what i'm doing wrong, should I just have one javascript call that contains the ID's to all divs? If so how do I do this?
Since you have not shown the actual script you use for toggling, I assume you mean something like this (taken from the page) -
function (){
$(this).toggleClass('hide_map');
$('.map_container').slideToggle(400);
}
I would change that to -
function unhide(id){
$(this).toggleClass('hide_map');
$('#' + id).find('.map_container').slideToggle(400);
}
Does that work?
While loading page in mozilla, First DIV code is not loaded
tried to load html using inside
<div id="mainContent"></div>
with below call
if (destinationURL != null) {
$.get(destinationURL, function(data)
{
$("#mainContent").attr("innerHTML",data);
});
}
destinationURL refers below sample html
<div id="A1">
<div id="B1">
<div id="c1">
<span>hi</span>
</div>
<div id="c2"></div>
</div>
<div id="B2">
<div id="D1">
<span>hi2</span>
</div>
<div id="D2"></div>
</div>
<div id="B3">
<div id="E1"></div>
<div id="E2"></div>
</div>
<div id="B4">
<div id="F1"></div>
<div id="F2"></div>
</div>
</div>
but, when html loads
$("#c1") refers null object
if i see
$("#D1") contains html.
if i give alert message on onLoad, i can able to get Html. Its happening only in mozilla
is this right express what you intended?
$("#mainContent").attr("innerHTML",data);
=> I think this expression will give you the answer you want.
$("#mainContent").html(data);
It is a good practice to stick to javascript instead of going for Libraries unless required, the code in javascript for same would be
if (destinationURL != null) {
$.get(destinationURL, function(data)
{
document.getElementById("mainContent").innerHTML = data;
});
}
on another note, I would suggest you to build the entire structure in a string first and then insert it in DOM. Modifying DOM again and again should be avoided.