How do I populate the iframe src attribute with the href attribute from the a element? The iframe can be moved inside the li.feed-item element if needed.
I need this in something like an each function, since there are several li elements with different links.
Closest I got is this, but it fetches the first link to all iframes.
jQuery(document).ready(function () {
jQuery('li.feed-item').each(function () {
var href = jQuery("li.feed-item a.colorbox.cboxElement").attr('href');
jQuery('li.feed-item a.colorbox.cboxElement iframe').attr('src', href);
});
});
HTML
<ul>
<li class="feed-item">
<a class="colorbox cboxElement" href="http://www.youtube.com/embed/Tp-VAe59RyA"><img height="280" src="http://skateflix.se/wp-content/uploads/cache/remote/i1-ytimg-com/1384690600.jpg" width="280">
<iframe allowfullscreen class="video-embed" height="100%" itemprop="video" src="http://www.youtube.com/embed/werwerw4wer" width="100%">
</iframe></a>
</li>
</ul>
<ul>
<li class="feed-item">
<a class="colorbox cboxElement" href="http://www.youtube.com/embed/Tp-VAe59RyA"><img height="280" src="http://skateflix.se/wp-content/uploads/cache/remote/i1-ytimg-com/1384690600.jpg" width="280">
<iframe allowfullscreen class="video-embed" height="100%" itemprop="video" src="http://www.youtube.com/embed/Qq0u6vbzXXoeerer" width="100%">
</iframe></a>
</li>
</ul>
Basically refer always to $(this), the currently iterated li.feed-item
jQuery(function($) { // DOM ready and $ alias secured
$('li.feed-item').each(function() {
var href = $(this).find("a.cboxElement").attr('href');
$(this).find("iframe").attr('src', href);
});
});
Or even simpler, query first for your iframe and than lookup for the a parent:
jQuery(function($) { // DOM ready and $ alias secured
$('li.feed-item iframe').attr("src", function() {
return $(this).closest("a.cboxElement").attr('href');
});
});
Using 'this' should work:
jQuery(document).ready(function () {
jQuery('li.feed-item').each(function () {
var href = jQuery(this).find("a.colorbox.cboxElement").attr('href');
jQuery(this).attr('src', href);
});
});
Related
I'm using a tutorial to create an image gallery and it gives me an error on line 31 of the js file. Not familiar with jQuery language so I thought the code might be out of date. Tried using the migrate plugin and it still doesn't work. On the jQuery site it says .live() was removed and to use .on() instead but not sure how to do that.
html file:
<body>
<header>
<div class="container">
<nav id="navbar"></nav>
</div>
</header>
<section id="main">
<div class="container">
<ul id="gallery">
<li data-tags="Web Design, Logo Design, Print Design"><a class="fancybox" rel="group" href="img/1.jpg"><img src="img/1.jpg"></a></li>
<li data-tags="Logo Design"><a class="fancybox" rel="group" href="img/2.jpg"><img src="img/2.jpg"></a></li>
<li data-tags="Web Design"><a class="fancybox" rel="group" href="img/3.jpg"><img src="img/3.jpg"></a></li>
<li data-tags="Print Design"><a class="fancybox" rel="group" href="img/4.jpg"><img src="img/4.jpg"></a></li>
<li data-tags="Logo Design, Print Design"><a class="fancybox" rel="group" href="img/5.jpg"><img src="img/5.jpg"></a></li>
</ul>
</div>
<hr>
<footer>
<div class="container">
<p></p>
</div>
</footer>
</section>
<script src="js/jquery.js"></script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="js/fancybox/jquery.fancybox-media.js"></script>
<script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="js/script.js"></script>
<script>
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>
</body>
javascript file:
$(document).ready(function(){
var items = $('gallery li'),
itemsByTags = {};
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
elem.attr('data-id',i);
$.each(tags,function(key,value){
value= $.trim(value);
if(!(value in itemsByTags)){
itemsByTags[value] = [];
}
//add image to array
itemsByTags[value].push(elem);
});
});
//create all items option
createList('All Items', items);
$.each(itemsByTags, function(k, v){
createList(k, v);
});
//click handler
$('#navbar a').live('click',function(e){
var link = $(this);
//add active class
link.addClass('active').siblings().removeClass('active');
$('#gallery').quicksand(link.data('list').find('li'));
e.preventDefault();
});
$('#navbar a:first').click();
//create the lists
function createList(text,items){
var ul = $('<ul>',{'class':'hidden'});
$.each(items, function(){
$(this).clone().appendTo(ul);
});
ul.appendTo('#gallery');
var a = $('<a>',{
html:text,
href:'#',
data:{list:ul}
}).appendTo('#navbar');
}
});
Adjusting live() to on() can be done as follows: currently you have a statement like this:
$('#navbar a').live('click',function(e){ ...
and, as you already found out, live() is deprecated as of jQuery version 1.7.
Adjusting this to on() means to let the static navbar delegate the click event to a tags that are children of the navbar, even if they are added later:
$('#navbar').on('click', 'a', function(e){..
The on() is bound to an element that is already in the DOM when the page is loaded and delegates events to child elements even if they are dynamically added later.
For reference: http://api.jquery.com/on/
I'm trying to get the a href of an list item.
HTML
<div class="popup" style="display: none;">
<div class="product">
<div class="photo">
<a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->
<img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69">
</a>
</div>
<a href="" class="sendkleur" id="link69">
<strong>Test kleur</strong>
</a>
<span class="swatchLabel-category">Kleur:</span>
<p class="float-clearer"></p>
<div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
<img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
<img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
</div>
<p class="float-clearer"></p>
</div>
</div>
There are multiple popups on the site and thats what makes it difficult. At first I used this code
var link = jQuery('.photo').find('a')[0].getAttribute("href");
But this ofcourse only returns the href of the first popup. Then I tried this code:
var link = jQuery('.photo').closest('a').attr("href");
But this returned undefined
Then I tried this:
var link = jQuery(this).closest('a').attr("href");
But that also returns undefined
Edit
Here is the whole jQuery code snippet
jQuery(document).ready(function(){
jQuery('.swatch-category-container img').click(function(){
var kleur = jQuery(this).attr('title');
var link = jQuery('.photo').find('a').attr("href");
console.log(link);
link += "?kleur="+kleur;
console.log(link);
jQuery('.photo').find('.sendkleur').attr("href", link);
});
});
Working from the .swatch-category-container img element, you can traverse the DOM to find the required a like this:
$('.swatch-category-container img').click(function() {
var link = $(this).closest('.popup').find('.photo a').prop('href');
// do something with link here...
});
If this is the .swatch-category-container img element then, the anchor is the previous to previous sibling of the ancestor swatch-category-container element
var link = jQuery(this).closest('.swatch-category-container').prev().prev().attr("href");
Since you said multiple popups, the idea would be like this.
1. Get all popups
2. From each popup in all popups
Get the photo href item
$('.popup').each(function() {
var hrefItem = $(this).find('.photo a').attr('href');
//Do your processing with href item
});
i have code like this in a page called list.php when i click a link the video in the iframe was change into the video i selected but in the address bar its still list.php how can i make the url be list.php/Anohana10? or something like that?
<script>
$(document).ready(function(){
$("ul#videos li a").click(function(e) {
e.preventDefault();
$("#video").attr("src", $(this).attr("href"));
})
});
</script>
<div class="videoWrapper">
<IFRAME id="video" SRC="http://upload4free.co/embed-trdcgvsgf0tj-500x300.html" FRAMEBORDER=0
webkitAllowFullScreen ></IFRAME>
</div>
<ul id="videos">
<li><a id="Anohana10" href="http://upload4free.co/embed-ndi71khpdvbf-580x300.html">Anohana Episode 10</a></li>
<li><a id="Anohana9" href="http://upload4free.co/embed-flm2y2648udr-580x300.html">Anohana Episode 9</a></li>
You could, instead of intercepting the <a>'s default behaviour of redirecting the page, let it anchor the information, like <a id="Anohana10" href="#Anohana10">, then your page's url would look like: list.php#Anohana10.
The iframe's link information, you can store on another custom attribute (let's say data-url), and retrieve it with your jquery function:
<script>
$(document).ready(function(){
$("ul#videos li a").click(function(e) {
$("#video").attr("src", $(this).attr("data-url"));
})
});
</script>
<div class="videoWrapper">
<IFRAME id="video" SRC="http://upload4free.co/embed-trdcgvsgf0tj-500x300.html" FRAMEBORDER=0
webkitAllowFullScreen ></IFRAME>
</div>
<ul id="videos">
<li><a id="Anohana10" href="#Anohana10" data-url="http://upload4free.co/embed-ndi71khpdvbf-580x300.html">Anohana Episode 10</a></li>
<li><a id="Anohana9" href="#Anohana9" data-url="http://upload4free.co/embed-flm2y2648udr-580x300.html">Anohana Episode 9</a></li>
EDIT
To get the anchor from the URL when typing it directly, add this to the ready jquery method:
$(document).ready(function(){
var identifier = window.location.hash;
if(identifier != "")
$(identifier).click();
$("ul#videos li a").click(function(e) {
...
});
This will get the #id from the url, and perform the click of the corresponding <a> tag, loading the video...
I am trying to create a page where when you click on any of the three images. It inserts the content into the empty div above the image links.
Here is my javascript code:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append(<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />);
return false;
});
});
</script>
and this is the HTML it is to effect:
<div class="deal_content">
</div>
<div id="imagelink">
<a href="#">
<img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" />
</a>
<a href="#">
<img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />
</a>
<a href="#">
<img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" />
</a>
</div>
I wish the new image to be put in the deal_content class div.
In your append method, if you put double quotes around the HTML and replace the current quotes with single quotes, it should work. Append takes a string or a JQuery selector, not markup.
You need to make the element a string in order to pass it through append
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />');
return false;
});
});
Considerting this is what you want:
I wish the new iamge to be put in the deal_content class div.
You are almost there:
In the Javascript that you have:
$(document).ready(function () {
$('img').click(function () {
$('.deal_content').append();
return false;
});
});
you need a html() instead of append(). And insert a img tag, and grab the srcfrom the image thatw as clicked on.
$('.deal_content').html("Image \"" + $(this).attr("src") +"\" here: <img src=" + $(this).attr("src") + "/>");
See http://jsfiddle.net/nivas/PA63e/
$('#imagelink').on('click', 'img', function(){
$('.deal_content').append( this );
});
or if you want to duplicate the image:
$('#imagelink').on('click', 'img', function(){
$('.deal_content').append( this.cloneNode() );
});
is that what you want? This way it will only move the images that are inside imagelink element
I have generated html content
<a href="/images/img1.jpg" target="_blank">
<img src="/images/img1.jpg" alt="asdsadasdsa" />
</a>
how can I on dom ready use image alt content (in this case asdsadasdsa) and add new attribute title with alt image content, in other words above html should be
<a href="/images/img1.jpg" target="_blank" title="asdsadasdsa">
<img src="/images/img1.jpg" alt="asdsadasdsa" />
</a>
js should target only code which has target="_blank" as part of a href attribute.
Try
$('a[target="_blank"]:has(img[alt])').attr('title', function () {
return $(this).find('img').attr('alt');
});
DEMO - jsfiddle
Reference
:has()
.attr()
.find()
[ ] has-attribute-selector
You can try with this:
var $target = $('a[target="_blank"]');
var $content = $target.find('img').attr('alt');
$target.attr('title', $content);
or this way:
var $target = $('a[target="_blank"]');
$target.each(function(){
$(this).attr('title', $(this).find('img').attr('alt'));
});
Demo Fiddle to try