Javascript code now working in IE

This site is best viewed in a modern browser with JavaScript enabled.

pc_mac

Does anyone know why this code isn't working in IE?:

$("#nav li ul li .menu").click(function(){
    for (var image, src, images = document.getElementsByClassName('link'), l=images.length, i=0; i<l; i++){
    image = images[i];
    src = image.src;
    image.src = "images/large" + src.substring(src.lastIndexOf("/"));
    }
 });

It works in every other browser.

sQu1rr

Your topic says that now it works
which IE
what do you want to accomplish? maybe some examples with html? (simple ones)
why do you mix jQuery and plain javascript?
this particular piece of code works fine in IE10, IE7/8/9 won't support document.getElementsByClassName. User jQuery

pc_mac

1) No way!! Typo! I (obviously) was meant to type "not" ha!
2) My client is viewing in IE7
3) I have a dropdown navigation bar - the "src" in tab2 depends on what link was clicked in tab1.

This is the format of my menu

<ul id="nav">
  <li><a href="#">tab 1</a>
    <ul >
      <li class="active"><img class="menu" src="images/image1.png"/>item 1</li>
      <li><img class="menu2" src="images/image2.png" alt="Luca"  />item 2</li>
    </ul>
  </li>
  <li> <a href="#">tab 2</a>
    <ul>
      <li class="active"><img class="link" src="images/filename1.png" alt=""  />item 1</li>
      <li><img class="link" src="images/filename2.png" >item 2</li>
      <li><img class="link" src="images/filename3.png">item 3</li>
    </ul>
  </li>
</ul>

So if the user clicks item 1 in the first tab, I want to add "large" in the src of tab 2. ie:

<li class="active"><img class="link" src="images/large/filename1.png" alt=""  />item 1</li>
<li><img class="link" src="images/large/filename2.png" >item 2</li>
      <li><img class="link" src="images/large/filename3.png">item 3</li>

If the user click item 2 then I want to add "large2" in the src in tab2.

hope that made sense.

4) Any chance you can help me correct this code? What is the best method to use?
5) I would appreciate if you could guide me in the right direction.

Many thanks!

sQu1rr

If your problem is only in document.getElementsByClassName() which is not supported in IE7/8/9, then this page should help you http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie
Especially the first piece of code after 'update' heading. If it won't help I'll test your code again, ok?

pc_mac

Ok I'll try that and report back. Thank you!!

sQu1rr

Anyway, that's a bad practice to mix jQuery with plain javascript unless you are making some huge optimisations and this case is not it
Here is the cross-browser solution to your problem, of course you will most certainly need to adjust this code to your needs

$('#nav li ul li .menu').click(function(){
	$('.link').each(function(){
		var self = $(this);
		self.attr('src', self.attr('src').replace('images/', 'images/large/'));
	});
});

pc_mac

sQu1rr;1263059 wrote:
If your problem is only in document.getElementsByClassName() which is not supported in IE7/8/9, then this page should help you http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie
Especially the first piece of code after 'update' heading. If it won't help I'll test your code again, ok?

Hi again

The code works in all other browser but still not working in IE

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = getElementsByClassName(document.body,'link');

for (var image, src, images = tabs, l=images.length, i=0; i<l; i++)

Any ideas?

pc_mac

Oh brilliant many thanks for this. I'll try this now.

pc_mac

sQu1rr;1263063 wrote:
Anyway, that's a bad practice to mix jQuery with plain javascript unless you are making some huge optimisations and this case is not it
Here is the cross-browser solution to your problem, of course you will most certainly need to adjust this code to your needs
$('#nav li ul li .menu').click(function(){
	$('.link').each(function(){
		var self = $(this);
		self.attr('src', self.attr('src').replace('images/', 'images/large/'));
	});
});

Sorry another quick question. Say if the user clicks item 1 and the src changes to "images/large/"
how will the code work if the user then clicks on item2? the src will need to change to "images/large/2"
will this then change to "images/large2/large/" ?

sQu1rr

yep one of the ways to make it work the way you want is to save the original url and assign it to src attribute before modification every time. jQuery.fn.data is one way, custom attribute another.

pc_mac

Is there an example you can show me please?

sQu1rr

Common mate, google at least something

ok, custom attribute (I didn't test that code, maybe there is a typo somewhere)

$('.link').each(function(){
    $(this).attr('original_src', $(this).attr('src'));
}
$('#nav li ul li .menu').click(function(){
	$('.link').each(function(){
		var self = $(this);
		self.attr('src', self.attr('original_src').replace('images/', 'images/large/'));
	});
});

jQuery.fn.data
http://api.jquery.com/data/

pc_mac

Many thanks for your help really appreciate it.

Thanks