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?
Related
I am trying to pull certain item IDs based on if they have an image tag or not. For a given input like the one below:
<div id="ID_1">
<p><img src="image4.png"></p>
</div>
<div id="ID_2">
</div>
<div id="ID_3">
<p><img src="image6.png"></p>
</div>
<div id="ID_4">
<p><img src="image4.png"></p>
</div>
I could get something like:
ID_1: image4.png
ID_2:
ID_3: image6.png
ID_4: image4.png
I am not too familiar with HTML or Javascript, so any help or resources that someone may have or know will be greatly appreciated.
I would recommend using jQuery for something like this
(dont forget to include jquery in the html head)
Html =>
<div id="divContainer" >
<div id="ID_1">
<p><img src="image4.png"></p>
</div>
<div id="ID_2">
</div>
<div id="ID_3">
<p><img src="image6.png"></p>
</div>
<div id="ID_4">
<p><img src="image4.png"></p>
</div>
</div>
Javascript =>
const doesContainImg = [];
$(".divContainer div").each(function() {
// check for an img
if ($(this).find("img").length) {
// store id in array that contains ids that have imgs
doesContainImg.push($(this).attr("id"));
}
});
that should work, if it does not let me know!
Add a class on those div.
Let's say you have the class "image-div".
We can use this class to see if the divs contain an image or not.
JQUERY:
$(".image-div").each(function(){
if($(this).find('img').length){
//if this div contains an image do something.
}
});
You can attach this code to an event and use it
I'm working on a listing page and I am trying to create a "Load More Items" functionality. I'm attempting to use .load() to append all ".vehicleListing" elements from another page url (the second listing page) and add them after the last occurrence of a a div with the class of "vehicleListing".
Page 1:
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
Page 2:
<div class="overview-feature-1">
<div class="vehicleListing">7</div>
<div class="vehicleListing">8</div>
<div class="vehicleListing">9</div>
<div class="vehicleListing">10</div>
<div class="vehicleListing">11</div>
<div class="vehicleListing">12</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
Desired Result:
Page 1 after "Load More" functionality is executed:
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div class="vehicleListing">7</div>
<div class="vehicleListing">8</div>
<div class="vehicleListing">9</div>
<div class="vehicleListing">10</div>
<div class="vehicleListing">11</div>
<div class="vehicleListing">12</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
This is what I have so far, but it keeps adding it inside the last vehicleListing div instead of after it.
$(".vehicleListing").after().last().load('page2url' + ' .vehicleListing');
Can someone point out why it's inserting inside the last div instead of after it, and how I can correct this?
Here is what worked for me:
Add an empty div after the last vehicleListing in your first file
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div id="container"></div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
And change your JS
$("#container").load('http://aba.bbtj.dev/test2.html' + ' .vehicleListing', function(){
$('#container').replaceWith(function() {
return $('.vehicleListing', this);
});
$( '<div id="container"></div>' ).insertAfter( ".vehicleListing:last" );
});
This will load the new vehicles in the empty div, and then remove that div and keep the new vehicles (using the replaceWith function).
Then we re-add the empty div to be able to add more vehicule.
Load documntation:
Description: Load data from the server and place the returned HTML into the matched element.
$(".vehicleListing").after().last()
Targets the last vehicleListing div.
You can try smething like:
$.load('page2url' + ' .vehicleListing').insertAfter(".vehicleListing:last");
Your probably going to have to go about this differently. As mentioned, load() takes the response and loads it into the element it is operating upon. Since it replaces the contents, it doesn't really fit what you are trying to do which is to append additional content to an existing element. Your best bet is to probably use an ajax method instead.
$.get('page2url' + ' .vehicleListing', function(data){
$(".vehicleListing").last().after(data);
});
I have a set of divs, and need to clone the link from the top and insert into the last div (mobile-link). It is either cloning the links from all of the divs, and then inserting all of them at once, or if I use :eq(0), it's putting the first link into all of the divs.
<div class="course">Accounting</div>
<div class="start-date">1-1-2017</div>
<div class="credits">4</div>
<div class="location">Online</div>
<div class="mobile-link"></div>
<div class="course">Business</div>
<div class="start-date">1-1-2017</div>
<div class="credits">3</div>
<div class="location">Online/Campus</div>
<div class="mobile-link"></div>
<script>
$(".course a:eq(0)").clone().appendTo(".mobile-link");
</script>
What do I need to change to make this work properly?
You need to process each anchor separately:
$(".course").each(function() {
var myLink = $(this).find('a').clone();
$(this).nextAll('.mobile-link').first().append(myLink);
});
Demo fiddle
Append method can take a function as argument, and here it is appending to the each .mobile-link first <a> from his previous .course div
$(".mobile-link").append(function(){
return $(this).prevAll('.course:first').find('a:first').clone();
});
Check the below snippet
$(".mobile-link").append(function(i) {
return $(this).prevAll('.course:first').find('a:first').clone();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="course">Accounting
</div>
<div class="start-date">1-1-2017</div>
<div class="credits">4</div>
<div class="location">Online</div>
<div class="mobile-link"></div>
<div class="course">Business
</div>
<div class="start-date">1-1-2017</div>
<div class="credits">3</div>
<div class="location">Online/Campus</div>
<div class="mobile-link"></div>
I beleive that you should use last (If I understood question correctly):
var lastDiv = $(".mobile-link").last();
$(".course a:eq(0)").clone().appendTo(lastDiv);
Here is jsfiddle: fiddle
i am using IPB and i am going to put each category into a new tab the category div is something like this:
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
and my tabs content is like this:
<div class="content">
<div id="content-1" class="content-1">
</div>
</div>
and the categories divs is already showing but i want it to be moved to the content-1 div without duplicate so i want it to move from its div to this div with jjava script how?
<script>
document.getElementById('content-1').appendChild(
document.getElementById('category_100')
);
</script>
this worked for me but how can i add more than id to category_100
i want it to be like this in one script code so i would not repeart the scrip code four times:
<div class="content">
<div id="content-1" class="content-1">
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
</div>
</div>
using my two lines the suggested things here is not working!
Try this code :
$('div[id^="category_"]').appendTo('#content-1')
Have a look to this fiddle : http://jsfiddle.net/lulu3030/sjEPx/2/
"using my two lines the suggested things here is not working!"
You just get a single element with an ID and trying to append it...
Live Demo
If you want to append multiple elements, there are many ways...
Wrap those elements and then append...
<div id="categories">
<div id='category_100'></div>
<div id='category_104'></div>
<!-- etc. -->
</div>
document.getElementById('content-1').appendChild(document.getElementById('categories'));
or add same class to all elements that you want to append...
<div id='category_100' class="myClass"></div>
<div id='category_104' class="myClass"></div>
[].forEach.call(document.getElementsByClassName("myClass"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
or get elements with query selector that match some pattern...
[].forEach.call(document.querySelectorAll("div[id^='category_']"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
and etc.
I have a list of images and I really need to get ID of each image inside my JS, but I don't know how to do that. I've tried this method, but it is returning empty string instead of ID. I tried getting it from DOM elements http://galleria.aino.se/docs/1.2/references/dom/ like $(".galleria-thumbnails img").click(function(){alert((this).id)}); but this method is not working, alert is simply not showing up. Also I did some research here http://galleria.aino.se/docs/1.2/api/methods/ and got this code, but this is showing alert of empty string.
$("#gallery").galleria({
});
myGalleria = Galleria.get(0);
myGalleria.$('thumbnails').click(function(){
alert((this).id);
});
gallery div
<div id="gallery">
<img id="someid" src="http://photoapproaches.files.wordpress.com/2010/03/helen-model-2272.jpg" />
<img id="otherid" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" />
</div>
Console is empty of errors, nothing is showing in console. Also this markup is working fine the gallery plugin is making DOM elements on their own, and that is very frustrating with this situation. DOM structure can be viewed here, but I will link it in here as well http://galleria.aino.se/docs/1.2/references/dom/
<div class="galleria-container">
<div class="galleria-stage">
<div class="galleria-images">
<div class="galleria-image">
<img>
</div>
<div class="galleria-image">
<img>
</div>
</div>
<div class="galleria-loader"></div>
<div class="galleria-counter">
<span class="current"></span>
<span class="total"></span>
</div>
<div class="galleria-image-nav">
<div class="galleria-image-right-nav"></div>
<div class="galleria-image-left-nav"></div>
</div>
</div>
<div class="galleria-thumbnails-container [ carousel ]">
<div class="galleria-thumb-nav-left [ disabled ]"></div>
<div class="galleria-thumbnails-list">
<div class="galleria-thumbnails">
<div class="galleria-image">
<img>
</div>
[...]
</div>
</div>
<div class="galleria-thumb-nav-right [ disabled ]"></div>
</div>
<div class="galleria-info">
<div class="galleria-info-text">
<div class="galleria-info-title"></div>
<div class="galleria-info-description"></div>
<div class="galleria-info-author"></div>
</div>
</div>
<div class="galleria-tooltip"></div>
</div>
Here is a one way to access id of an element:
var currentId = $(this).attr('id');
For your case, you can try this:
myGalleria.$('thumbnails').click(function(){
alert($(this).attr('id'));
});
should it not be alert($(this).id);? (Note the $).