www.webdeveloper.com
Results 1 to 13 of 13

Thread: Javascript code now working in IE

Hybrid View

  1. #1
    Join Date
    Dec 2009
    Posts
    51

    Javascript code now working in IE

    Hi

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

    Code:
    $("#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.
    Last edited by pc_mac; 04-23-2013 at 04:41 AM.

  2. #2
    Join Date
    Apr 2013
    Location
    Bournemouth, UK
    Posts
    15
    1. Your topic says that now it works
    2. which IE
    3. what do you want to accomplish? maybe some examples with html? (simple ones)
    4. why do you mix jQuery and plain javascript?
    5. this particular piece of code works fine in IE10, IE7/8/9 won't support document.getElementsByClassName. User jQuery

  3. #3
    Join Date
    Dec 2009
    Posts
    51
    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

    Code:
    <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:
    Code:
    <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!

  4. #4
    Join Date
    Apr 2013
    Location
    Bournemouth, UK
    Posts
    15
    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/7...bility-with-ie
    Especially the first piece of code after 'update' heading. If it won't help I'll test your code again, ok?

  5. #5
    Join Date
    Dec 2009
    Posts
    51
    Ok I'll try that and report back. Thank you!!

  6. #6
    Join Date
    Dec 2009
    Posts
    51
    Quote Originally Posted by sQu1rr View Post
    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/7...bility-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

    Code:
    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');
    Code:
    for (var image, src, images = tabs, l=images.length, i=0; i<l; i++)
    Any ideas?

  7. #7
    Join Date
    Apr 2013
    Location
    Bournemouth, UK
    Posts
    15
    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
    Code:
    $('#nav li ul li .menu').click(function(){
    	$('.link').each(function(){
    		var self = $(this);
    		self.attr('src', self.attr('src').replace('images/', 'images/large/'));
    	});
    });

  8. #8
    Join Date
    Dec 2009
    Posts
    51
    Oh brilliant many thanks for this. I'll try this now.

  9. #9
    Join Date
    Dec 2009
    Posts
    51
    Quote Originally Posted by sQu1rr View Post
    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
    Code:
    $('#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/" ?

  10. #10
    Join Date
    Apr 2013
    Location
    Bournemouth, UK
    Posts
    15
    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.

  11. #11
    Join Date
    Dec 2009
    Posts
    51
    Is there an example you can show me please?

  12. #12
    Join Date
    Apr 2013
    Location
    Bournemouth, UK
    Posts
    15
    Common mate, google at least something

    ok, custom attribute (I didn't test that code, maybe there is a typo somewhere)
    Code:
    $('.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/

  13. #13
    Join Date
    Dec 2009
    Posts
    51
    Many thanks for your help really appreciate it.

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles