I'm trying to wrap elements except one in a popup. Everything I do doesn't work. For example.
In this div (figure or .leaflet-popup-content div) I want to wrap all text, title image, in fact everything except the figure or iframe in order to easily add some padding, without having to select all the element one by one.
<div class="leaflet-popup-content" style="width: 301px;">
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-
provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp- block-embed__wrapper">
<iframe ...></iframe>
</div>
</figure>
<h2>some title</h2>
<p>som text.</p>
</div>
I tried many ways, like :
jQuery('.leaflet-popup-content').not('.wp-block-embed-youtube
').wrapAll('<div class="inner">
</div>');
But absolutly nothings happens.
I modified the jQuery calls to get the children elements and filter out the figure.
Before:
After:
jQuery(document).ready(function(){
jQuery("#doWrap").click(function(){
jQuery('.leaflet-popup-content').children().filter(":not(figure)").wrapAll('<div class="inner"> </div>');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="leaflet-popup-content" style="width: 301px;">
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-
provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div
class="wp- block-embed__wrapper">
<iframe></iframe>
</div></figure>
<h2>some title</h2>
<p>som text.</p>
</div>
<button id="doWrap">Wrap</button>
Related
I have some listings. At present when page loads listing is showing like
Img 1
Test 1
Img 3
Test 3
img 2
Test 2
When page loads, I need results like
Img 1
Test 1
Img 2
Test 2
Img 3
Test 3
Img is in <a> tag and test content is in <div> tag
How can order the <div> and <a> in ascending order when page loads?
In <div> tag there is data-id. In <a> tag there is data-tag-id.
Html
<figure class="image_container">
<img src="files/maier-energie-umwelt/produkte/phantom-ruehrwerke/Phantom-1400.jpg" alt="" width="738" height="800">
<figcaption class="caption">
<a class="area center-bg hasDescription" href="javascript:void(0)" title="Verschleißfester Propeller aus PA12" data-description-id="areaDesc-1" style="width: 6.775%;height: 18.75%;left: 14.228%;top: 1.25%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="1"></a>
<div id="areaDesc-1" class="description invisible" data-id="1" style="display: block;"><p><strong>Test1</p></div>
<a class="area center-bg hasDescription" href="javascript:void(0)" title="Abgedeckte doppelte Gleitringdichtung" data-description-id="areaDesc-3" style="width: 6.775%;height: 18.75%;left: 25.745%;top: 21.875%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="3"></a>
<div id="areaDesc-3" class="description invisible" data-id="3"><p>Test3</p></div>
<a class="area center-bg hasDescription" href="javascript:void(0)" title="Optimierte Schutzschelle aus Edelstahl" data-description-id="areaDesc-2" style="width: 6.775%;height: 18.75%;left: 27.778%;top: 49.375%;background-image: url(files/maier-energie-umwelt/layout/marker-bottom.png);" data-tag-id="2"></a>
<div id="areaDesc-2" class="description invisible" data-id="2"><p>Test2</p></div>
</figcaption>
</figure>
Script
$('.description').sort(function (a, b) {
return parseInt(a.data-id) > parseInt(b.data-id);
}).each(function(){
var elem = $(this);
elem.remove();
$(elem).appendTo(".description");
});
Your code is close to be working.
You only need to use jQuery .data() to access data attribute value. Note that it returns number, not string, if data attribute stores numeric value, so you don't need to parse it yourself.
You also do not need to .remove() element. You just need to append your item to specific container - if item is already in DOM tree, then it will automatically be detached from its current place and will be moved it to a new location. Just appending items consequently in the right order gives the desired results.
$(".container > div")
.sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
.each(function() { $(this).appendTo(".container"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div data-id="1">1</div>
<div data-id="3">3</div>
<div data-id="2">2</div>
<div data-id="9">9</div>
<div data-id="5">5</div>
<div data-id="4">4</div>
<div data-id="8">8</div>
<div data-id="7">7</div>
<div data-id="6">6</div>
</div>
Update: in order to sort your divs together with related <a/> tags, you can use jQuery .prev() which simply takes the previous DOM element and then you can do the same operation with this link. However, it is a better idea to wrap a and div into single element, so that their relation is described in HTML, but not by their order.
$(".container > div")
.sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
.each(function() {
$(this).prev().appendTo(".container");
$(this).appendTo(".container");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
One
<div data-id="1">1</div>
Three
<div data-id="3">3</div>
Two
<div data-id="2">2</div>
Nine
<div data-id="9">9</div>
Five
<div data-id="5">5</div>
Four
<div data-id="4">4</div>
Eight
<div data-id="8">8</div>
Seven
<div data-id="7">7</div>
Six
<div data-id="6">6</div>
</div>
You can try:
var yourList = $(".description");
yourList.sort(function(x, y){
return $(x).data("id")-$(y).data("id")
});
$(".caption").append(yourList);
Have tested and works now, noticed a small typo. See it working here https://jsfiddle.net/trekmp/pLyw3qg4/5/
I'm trying to remove the src values from all my iframes and then on click load the srcs to the ones matched by a selector.
Right now I have a block of code that empties the src of my iframes and creates a variable with the src info.
After that I'm trying to check if an iframe src is empty and if so, have a function that on click of a link will add the corresponding src values to the returned iframes.
The code is as follows, but the click part is not working.
Naturally I'm not sure about the IF part, as well, since the thing as a whole is not working.
$j=jQuery.noConflict();
var iframesa = $j('iframe');
iframesa.each(function() {
var srca = $j(this).attr('src');
$j(this).data('src', srca).attr('src', '');
});
$j(document).ready(function(){
if($j('iframe').attr('src') == '') {
$j('.evento-more').click(function() {
$j(this).next().children('iframe').attr('src', function() {
return $j(this).data('src');
});
});
}
});
The HTLM structure is something like this
<div class="evento-feed">
<div class="wrapper">
More
<div class="evento-desc">
<div class="slide-text">
<p>
<iframe src="https://www.youtube.com/embed/xxxx"></iframe>
</p>
</div>
<div class="slide-text">
<p>
<iframe src="https://www.soundcloud.com/embed/xxxx"></iframe>
</p>
</div>
</div>
</div>
</div>
<div class="evento-feed">
<div class="wrapper">
More
<div class="evento-desc">
<div class="slide-text">
<p>
<iframe src="https://www.mixcloud.com/embed/xxxx"></iframe>
</p>
</div>
</div>
</div>
</div>
And so on. The whole .evento-feed block gets repeated a few more times, although the content may vary
Is there anyone that can help me?
I'm trying to fade the Movies div of this HTML
<div class="row">
<div id=Movies class="col-md-4">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
and I'm using this jquery code
<script>
$(function(){$("#Movies").show("slow");
});
</script>
I've also tried this:
<script>
$(document).ready(function(){$("#Movies").fadeIn(3000);
});
</script>
But it ain't working. The page loads with no fade in. The div just loads like every other element. What's wrong with this?
Add this CSS to make it hidden, then only it will fadeIn slowly when the page loads
#Movies {
display:none;
}
For that to work; #movie has to be hidden, then show when the document is ready as the jQuery function implies.
$(document).ready(function() {
$("#movies").fadeIn(3000);
});
#movies {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div id=movies class="col-md-4">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
First you have to hide the movies div and then fade in. Also i see that your id "Movies" is not withing quotes in the question code snippet. Hope it helps.
Html
<div class="row">
<div id="Movies" class="col-md-4" style="display:none">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
Javascript
$(document).ready(function(){
$("#Movies").fadeIn(3000);
});
I'm trying to display a div by clicking on an image. the div will contains an image or a video.
I will have several images to click on with content attached.
with my actual JS, all div are displayed when cliking on the image.
I use Custom Fields to enter my images and iframe so my code need to be dynamic.
I don't know how to fix it.
Also in my actual code the div disapear when clicking outside of it, I would like to add a text link over to close it when clicking on it.
here is mu JS :
$(document).ready(function(){
$(".mix").click(function(){
$(".photos_overlay").toggle();
});
});
My Html :
<div class="mix photos" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
and my CSS :
.photo_medias{width:233px;height:133px}
.container .mix.photos{width:233px;height:133px}
.container .mix.videos{width:233px;height:133px}
.photos_overlay{width:967px;height:384px;background-color:black;position:absolute;top:0;left:0;display:none}
.photo_medias_overlay{width:706px;height:364px}
here is JSfidlle to see it in action : http://jsfiddle.net/aaWLJ/12/
can anybody help me with this ?
Thanks a lot for your help,
I have modified your code a little:
HTML
<br />
<div class="mix photos" data-myorder="20140307">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
As you can see I have added a parent div elements for both overlays and a div CloseMe
Also I have changed some CSS (You can change it to what ever you want, I just want to show you the main idea how to resolve your issue):
.photos_overlay{
width:967px;
height:384px;
background-color:black;
position:absolute;
top:20px; /* I have changed top position just to show the div 'CloseMe'*/
left:0;
display:none
}
And the JavaScript Code
$(document).ready(function(){
$(".mix").click(function(){
ShowHide($(this));
});
$(".closeFrame").click(function(){
ShowHide($(this));
});
function ShowHide(elem){
var $mix = $(elem);
$mix.children(".closeFrame").toggle();
$mix.next(".photos_overlay").toggle();
}
});
When i click over the first DIV, the slideToggle effect is done correctly.
When i click over the 2nd one, it seems like it doesn't apply the effect and the content just appear suddenly.
The same occurs with the 3rd element and with any other one but the first.
What's going on?
(demo working here: http://jsfiddle.net/SW5sc/6/ )
I have this HTML structure:
<div class="subcategory">Option 1 </div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
<div class="subcategory">Option 2</div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
And this jQuery code:
$(".subcategory").click(function () {
$(this).next(".subcategoryContent").slideToggle(450).siblings(".subcategoryContent").slideUp(450);
return false;
});
Remove all the "float"-properties from the CSS, and it'll work just fine! :-) The floats ruin the animations..