This is a question regarding matching division widths with jquery. Here is the html code I am working with.
<ul class="thumbs_container">
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
</ul>
I will have multiple list items with the class 'thumbs'. What I want to do is match the widths of the divs with the class 'caption' to the widths of the divs with the class 'thumbs_image_container', but treating each list item separately.
Could someone please give me some pointers on how to do this? I know how to match the widths, but I am having problems figuring out how to treat each list item separately.
Try using $.each()
var $ulWidth = $('thumbs_container').width();
$('li.thumbs').each( function() {
var $divWidth = $(this).find('div.caption').width(); //Width of div inside Current li..
if( parseInt($ulWidth) == parseInt($divWidth) ) {
// Do Something
}
});
Use jQuery's each ( Jquery $.each selector )
This code will get the set of elements with class thumbs, then check if each element contains a class named caption, and if that element does contain caption, then it takes the related width on the element with class = thumbs_image_container and applies it to the iterated element.
$('.thumbs').each(function( location, element ){
if( $(this).find('.caption').length){
var w = $(this).find('.thumbs_image_container')[0].width();
$(this).width(w);
}
});
Thanks Sushanth and Travis, jquery each did the trick, after experimenting this is what I ended up with which does what I was trying to do,
$('li.thumbs').each( function() {
var $divWidth = 0;
$divWidth = $(this).find('img').width();
$(this).find('div.caption').width($divWidth);
});
it turns out it was the width of the image that I needed to match the 'caption' width to.
Thanks for the help
Related
I want to run a generic javascript function with an element, sometimes multiple elements in the same HTML document. It seems to me the easiest way is to call the function from inside a DOM element. OK here's the problem. "this" refers the window element and I have seen how scope works for functions using "this" but I don't see how to get "this" to refer to an element.
I could do getElementById but I want a fairly generic javascript and not have to come up with unique IDs everytime I want to use it. getElementsByClasses may be a workaround but it just seems there should be an easier way to do this without relying on id's or classes.
The HTML
</HEAD>
<BODY>
<div id="content">
<div class="linksbox">
<a href="https://www.corponline.org" target="_blank">
<div class="linkicon">
<img src="asislink.jpg">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
<script>valignimg();</script>
</div>
</div> <!-- End content -->
</BODY>
</HTML>
The javascript. It's dh and ih that I need to pass to the function.
function valignimg() {
dh = /* div element */
ih = /* image (child element) */
topmargin = (dh.offsetHeight - ih.offsetHeight)/2;
return topmargin;
}
If you're not calling it from one of the elements (i.e. via event handler), you're going to have to use a selector of some kind, either ID or class as you highlighted, or name or tag name if that can work, or some combination. Somewhere along the way it will need to be specified. In even though you weren't keen on using class, that's likely your best option so I've highlighted it in this first example.
//warning - this event isn't supported on some older browsers like IE8
document.addEventListener("DOMContentLoaded", function(event) {
valignAll();
});
function valignimg(dh) {
//Only added the IDs for this purpose, not using them to select elements so there's no functional requirement for them.
console.log(dh.id);
//This supposes that you know the image tag you want is always the first img element among dh's children.
ih = dh.getElementsByTagName('img')[0];
console.log(ih.alt);
var topmargin = (dh.offsetHeight - ih.offsetHeight) / 2;
console.log('dh.offsetHeight = ' + dh.offsetHeight);
console.log('ih.offsetHeight = ' + ih.offsetHeight);
console.log('topmargin = ' + topmargin);
ih.style.marginTop = topmargin + "px";
console.log('ih.style.marginTop = ' + ih.style.marginTop);
}
function valignAll(){
var linkIcons = document.getElementsByClassName('linkicon');
for(i = 0;i < linkIcons.length;i++){
valignimg(linkIcons[i]);
}
}
<BODY>
<div id="content">
<div class="linksbox">
<a href="https://www.corponline.org" target="_blank">
<div id="icon1" class="linkicon">
<img alt="img1" src="http://placehold.it/20x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
<a href="https://www.corponline.org" target="_blank">
<div id="icon2" class="linkicon">
<img alt="img2" src="http://placehold.it/21x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
<a href="https://www.corponline.org" target="_blank">
<div id="icon3" class="linkicon">
<img alt="img3" src="http://placehold.it/22x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
</div>
</div>
<!-- End content -->
</BODY>
You can see, although my usage is pretty rudimentary, I've used getElementsByTagName as well, calling from a parent element other than document. The IDs I've added aren't used for locating anything, I'm just using them so that when I log to console you can see which element it really is, the same as with my horrendous misuse of the alt attribute on the images.
If you know that your only image elements on the page are the ones you're acting on, then maybe starting with document.getElementsByTagName('img') is the approach for you, and then get the div with the .parentNode property. This would remove the reliance on classes, but if you add other img tags to the page then you'd need some way to identify from each one whether it's once you want to run your align function against or not. The img tags you want to access have a common ancestor or parent that no other img tags do. I've added another snippet below that shows this. And you could combine these two approaches with a nest loop to get all img tags within multiple divs that all share a class, for example.
//warning - this event isn't supported on some older browsers like IE8
document.addEventListener("DOMContentLoaded", function(event) {
valignAll();
});
function valignimg(ih) {
//Only added the IDs for this purpose, not using them to select elements so there's no functional requirement for them.
console.log(ih.alt);
//This supposes that you know the image tag you want is always the first img element among dh's children.
dh = ih.parentNode;
console.log(dh.id);
var topmargin = (dh.offsetHeight - ih.offsetHeight) / 2;
console.log('dh.offsetHeight = ' + dh.offsetHeight);
console.log('ih.offsetHeight = ' + ih.offsetHeight);
console.log('topmargin = ' + topmargin);
ih.style.marginTop = topmargin + "px";
console.log('ih.style.marginTop = ' + ih.style.marginTop);
}
function valignAll(){
//if they're the only img tags on the page,
//document.getElementsByTagName('img'); will work fine.
//lets assume they aren't.
var images = document.getElementsByClassName('linksbox')[0].getElementsByTagName('img');
//I can grab the comment parent/ancestor by whatever means available, and then grab just its decendants by tag name.
alert(images);
for(i = 0;i < images.length;i++){
valignimg(images[i]);
}
}
<BODY>
<div id="content">
<img src="http://placehold.it/240x20"><< Some sort of header logo
<div class="linksbox">
<a href="https://www.corponline.org" target="_blank">
<div id="icon1" class="linkicon">
<img alt="img1" src="http://placehold.it/20x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
<a href="https://www.corponline.org" target="_blank">
<div id="icon2" class="linkicon">
<img alt="img2" src="http://placehold.it/21x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
<a href="https://www.corponline.org" target="_blank">
<div id="icon3" class="linkicon">
<img alt="img3" src="http://placehold.it/22x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
</div>
</div>
Sponsor Logos or Site Certs in the footer
<img src="http://placehold.it/20x20"><img src="http://placehold.it/20x20"><img src="http://placehold.it/20x20">
<!-- End content -->
</BODY>
Is it possible to change the text "mars-on-newyork" from this links, this is how the links looks like:
<ul>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-red"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-green"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-blue"/>
</a>
</li>
</ul>
This code changes my images only:
function changeIt(objName) {
var obj = document.getElementById(objName);
var objId = new Array();
objId[0] = "newyork";
objId[1] = "paris";
objId[2] = "tokyo";
var i;
var tempObj;
for (i = 0; i < objId.length; i++) {
if (objName == objId[i]) {
obj.style.display = "block";
} else {
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
and here is the rest of the html from which the java script changes only the pictures:
<div id="newyork">
<a href="#">
<img src="newyork.jpg"/>
</a>
</div>
<div id="paris" style="display:none">
<img src="paris.jpg" border="0" alt="one"/>
</div>
<div id="tokyo" style="display:none">
<img src="tokyo.jpg" border="0" alt="two" />
</div>
<div style="display:none;">
<a id="one" href="#" onclick="changeIt('newyork');"><img src="newyork.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="two" href="#" onclick="changeIt('tokyo');"><img src="tokyo.jpg" border="0" alt="two"/></a>
</div>
If i click on
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
i want the text from the links on the ul to change from this:
href="google.com/finder.php?offer=mars-on-newyork
to this:
href="google.com/finder.php?offer=mars-on-paris
and if i click on
<a id="one" href="#" onclick="changeIt('tokyo');"><img src="paris.jpg" border="0" alt="one"/></a>
it changes it to
href="google.com/finder.php?offer=mars-on-tokyo
i want the java script to work like it does, how it changes the images but i also want to take advantage of the click to change the text.
thanks!
I see how it is now, i guess my post wasn't good enough to have piqued you're interest's, i guess i would have to pay a freelancer to help me, thanks anyways guys for your time and help!
Quick answer to "Is it possible to add or change and id from a link?":
$('#link').attr('id', 'yourNewId'); // Change id
Quick solution to "What I also want is not to just change the images but also the id or link"
$('#link').attr('href', 'yourNewUrl'); // Change link
I'm finding it a little hard to understand what you're trying to do, but...
what i also want is not to just change the images but also the id or link from the ul list e.g
OK, to change the link, i.e., the href property of all anchor elements in your ul list, assuming the URL has a fixed format and we can just replace whatever comes after the last "-":
// assume objName = "paris" or whatever
$("ul a").attr("href", function(i, oldVal) {
return oldVal.substr(0, oldVal.lastIndexOf("-") + 1) + objName;
});
If you pass the .attr() method a callback function it will call that function for each element and pass the function the current value - you then return the new value.
The elements in question don't seem to have an id at the moment, so I'm not sure what you mean by wanting to change it.
Ok, lets see if I can explain this clearly enough here.
My HTML looks like
<li>
<div class="info_left" rel="snack">Fries</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
<li>
<div class="info_left" rel="lunch">Burger</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
<li>
<div class="info_left" rel="4thmeal">Taco</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
If you will note you will see a "Remove" and "Favorite" inside a div "info_right". What I need to do when either one of those 2 options is clicked on is get the rel and text values of the same li's "info_left" div. I've tried a few ways but don't think I'm nailing the combo between parent(s), siblings correctly or I dunno. Either way hoping someone can toss me a bone.
It should just be:
$('.info_remove,.info_favorite').on('click', function() {
var $left = $(this).parent().siblings('.info_left');
var rel = $left.attr('rel');
var txt = $left.text();
...
});
jsFiddle example
$(document).ready(function(){
$(".info_right span").click(function(){
$("#msg").html($(this).attr("class")+": "+$(this).parent().prev().attr("rel"));
})
})
try this
$('.info_remove,.info_favorite').click(function() {
var target_elem = $(this).parent().prev();
alert(target_elem.attr('rel'));
alert(target_elem.text());
});
fiddle : http://jsfiddle.net/ss37P/1/
I am using a image gallery in WordPress, images are fetching from database and displaying it into front end.
In my case a big image container, and three image thumbnail,
I want, when when i click on the thumbnail of the image the previous image which in container goes fade out and clicked image set in to image container.
My Html Markup
<!--A container Div which have 1st image from the thumbnail-->
<div class="wl-poster">
<a href=#" id="wl-poster-link">
<img id="poster-main-image" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg">
</a>
</div>
<!--For Thumbnails-->
<div id="wl-poster-thumb">
<ul id="posterlist">
<li class="poster-thumb">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg" rel="http://www.cnn.com/">
</li>
<li class="poster-thumb">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/3047006581_1eec7f647d.jpg" rel="http://yahoo.com">
</li>
<li class="poster-thumb" style="margin-right: 0pt;">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/lush-summer-louisville-kentucky-wallpapers-1024x768.jpg" rel="http://apple.com">
</li>
</ul>
</div>
Used jQuery
if(jQuery('.homepage-poster').length > 0){ // since this will return a empty
var img_src = jQuery("#wl-poster-thumb ul li:first img").attr('src');
var href_path = jQuery("#wl-poster-thumb ul li:first img").attr('rel');
var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
jQuery('.wl-poster img').attr('src',final_src);
jQuery('.wl-poster a').attr('href',href_path );
}
jQuery('#posterlist .poster-thumb img').click(function(){
var href_path = jQuery(this).attr('rel');
var img_src = jQuery(this).attr('src');
var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
jQuery('#poster-main-image').remove(function() {
jQuery('a#wl-poster-link').attr('href',href_path);
jQuery('#poster-main-image').attr('src',final_src)..fadeOut('slow').fadeIn('slow');
// $('#img1').fadeOut('slow').remove();
// $('#img1').fadeOut('slow').fadeIn('slow');
});
});
Please help me to solve this issue.
try it with this code:
jQuery('#wl-poster-link').attr('href', href_path);
jQuery('#poster-main-image').fadeOut('slow').attr('src',final_src);
//wait till image has loaded, you could think about a loading-gif laying above your image-container..
jQuery('#loading').show(); //or fadeIn
jQuery('#poster-main-image').load(function() { jQuery('#loading').hide(); jQuery(this).fadeIn('slow'); });
You added a point too much on your chaining. Also, the remove-function is not needed.
You forgot a beginning " on your a#wl-poster-link for the href. Fix this too.
This seems like it should be easy. I have a html snippet that I wish to locate and modify in place via javascript. But not just the innerHTML; I want to replace the entire element. Example:
<div class="content">
<div class="item">
<img src="images/pic1.jpg" />
<a class="clicker" onclick="javascript:doSomethingUseful(##);">Do ##!</a>
<h3>title</h3>
<p>description</p>
</div>
</div>
After page load, I want to grab the <a class="clicker" ...>Now!</a> and replace it with three instances like:
<div class="content">
<div class="item">
<img src="images/pic1.jpg" />
<a class="clicker" onclick="javascript:doSomethingUseful(1);">Do 1!</a>
<a class="clicker" onclick="javascript:doSomethingUseful(2);">Do 2!</a>
<a class="clicker" onclick="javascript:doSomethingUseful(3);">Do 3!</a>
<h3>title</h3>
<p>description</p>
</div>
</div>
Using prototype.js, I can easily do $$('.clicker') and get an array with the element. I can use .innerHTML and get the 'Do ##!' and change it. But I want, nay, need the entire element to insert it in place. I can go through weird machinations of siblings and parent, and walk back around the nodes to eventually get what I need, and I will do that. It just seems that I am missing something here that would make this easy.
If it is not the only HTML generation you want to run in your page, you may consider a javascript templating engine.
There are several advantages, the main one being a clear cut between the HTML view and the JS logic.
There are plenty of these engines available for every taste.
Here is how it would look with prototype.js and the PURE template engine:
$$('div.content')[0].render([1,2,3], {
'a.clicker':{
'id <-':{
'.':'Do #{id}!',
'#onclick':'javascript:doSomethingUseful(#{id});'
}
}
});
In IE you can set outerHTML. In FF, you can use this:
http://snipplr.com/view/5460/outerhtml-in-firefox/
So the way I would do this is:
Iterate over all the anchors with class clicker that are inside a div with class item which are inside class content
To each one, add a function which will hide that anchor, and then append the 3 anchors you want
So here's what my html chunk looks like:
<div class="content">
<div class="item">
<img src="images/pic1.jpg" />
<a class="clicker" href='#'>Do ##!</a>
<h3>title</h3>
<p>description</p>
</div>
</div>
And I need to include Prototype:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
And a variable to hold your replacement html, and a dummy function so what we insert works:
var myReplacementHtml = '<a class="clicker" onclick="doSomethingUseful(1);" href="#">Do 1!</a>';
myReplacementHtml += ' <a class="clicker" onclick="doSomethingUseful(2);" href="#">Do 2!</a>';
myReplacementHtml += ' <a class="clicker" onclick="doSomethingUseful(3);" href="#">Do 3!</a>';
function doSomethingUseful(n) {
alert(n);
return false;
}
Then here's my code, you may find it useful to get the backstory on how these work: $$, Element.observe, Element.hide, Element.insert, Event.stop:
<script type="text/javascript">
Event.observe(window, 'load', function(){
$$('.content .item a.clicker').each(function(item){
item.observe('click', function(evt){
item.hide();
Element.insert(item, {after: myReplacementHtml});
});
Event.stop(evt);
});
});
</script>
You can add and append elements.
function doSomethingUseful(val) {
var ele = document.getElementById('myDiv');
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
ni.appendChild(newdiv);
}