Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Function does not work in IE

    The below works in Firefox and Google Chrome but not IE and I'm not sure why. How it's supposed to work is you click on of the Month, Year links and it loads the corresponding powerpoint into the object. What's causing the browser-compatibility issue?

    Code:
    <style> #pdf {overflow: auto; padding-left:20px; color:black;} table#pdftable{font-size:12pt;text-align:center; width:50%;}#pdfobject { display: block; float: right; margin-right: 20px; background-color: lightgray; }</style> 
    
    <script> function changeObject(path) { 
    var element = document.getElementById("pdfobject"); element.setAttribute("data", path); 
    } 
    </script> 
    
    <div id="pdf"> 
    
    <object id="pdfobject" data="/Portals/0/pdfs/aug2013.pdf" width="440" height="330" type="application/pdf"> </object> 
    
    <table id="pdftable"align="center" cellspacing="20px">
    <tr><td colspan="2"><b style="font-size:13pt;">2013 PowerPoints</b></td></tr>
    <tr><td> 
    <p> <a href='javascript:changeObject("/Portals/0/pdfs/jan2013.pdf")'>January, 2013</a> </p>
    <p> <a href='javascript:changeObject("/Portals/0/pdfs/feb2013.pdf")'>February, 2013</a> </p><p> <a href='javascript:changeObject("/Portals/0/pdfs/mar2013.pdf")'>March, 2013</a> </p><p> <a href='javascript:changeObject("/Portals/0/pdfs/apr2013.pdf")'>April, 2013</a> </p><p> <a href='javascript:changeObject("/Portals/0/pdfs/may2013.pdf")'>May, 2013</a> </p><p> <a href='javascript:changeObject("/Portals/0/pdfs/jun2013.pdf")'>June, 2013</a> </p></td>
    
    <td><p>July, 2013</p><p><a href='javascript:changeObject("/Portals/0/pdfs/aug2013.pdf")'>August, 2013</a></p><p>September, 2013</p><p>October 2013</p><p>November, 2013</p><p>December 2013</p>
    </td></tr>
    </table>
    </div>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,760
    Thanks
    55
    Thanked 516 Times in 513 Posts
    setAttribute only works with later versions of IE. You could try setting it directly, but this may get you into more trouble:
    Code:
    element.data= path;

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Is there a way to maybe use that only if the browser is IE? Meaning..check to see if the browser being used is IE or just earlier versions of it and then use what you just suggested?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Internet Explorer 8 and earlier does not support this method. You can detect IE<=8 with

    Code:
    var IE = !+"\v1" // true only in IE<=8
    alert (IE);
    Last edited by Philip M; 09-06-2013 at 07:17 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Ok, how do I use that...cause it's not a boolean variable correct? so I can't just do
    Code:
    if(IE){code here};
    ..... Sorry, really not a Javascript person...

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Yes, it is a boolean.

    The value of !+"\v1" will be either true or false.

    The ! there is the boolean operator "not", so the result of using it has to be a boolean value.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    hunter1611 (09-06-2013)

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    18
    Thanked 0 Times in 0 Posts
    OK, that's working so I can detect if there's an IE version less than 8 being used. However, the links to the powerpoint still aren't working. Is there another way I can be doing this?
    Here's where I'm at:

    Code:
    <style> #pdf {overflow: auto; padding-left:20px; color:black;} table#pdftable{font-size:12pt;text-align:center; width:45%;}#pdfobject { display: block; float: right; margin-right: 20px; background-color: lightgray; }</style> 
    
    <script> function changeObject(path) { 
    var element = document.getElementById("pdfobject"); 
    var IE = !+"\v1"; 
    if(IE){ 
    element.data= path; 
    alert(IE); 
    } 
    else{ 
    element.setAttribute("data", path); 
    } 
    } 
    </script> 
    
    <div id="pdf"> <object id="pdfobject" data="/Portals/0/pdfs/aug2013.pdf" width="440" height="330" type="application/pdf"> </object> <table id="pdftable"align="center" cellspacing="20px"><tr><td colspan="2"><b style="font-size:13pt;">2013 PowerPoints</b></td></tr><tr><td> <p> <a href='javascript:changeObject("/Portals/0/pdfs/jan2013.pdf")'>January, 2013</a> </p><p> <a href='javascript:changeObject("/Portals/0/pdfs/feb2013.pdf")'>February, 2013</a> </p><p> <a href='javascript:changeObject("/Portals/0/pdfs/mar2013.pdf")'>March, 2013</a> </p><p> <a href='javascript:changeObject("/Portals/0/pdfs/apr2013.pdf")'>April, 2013</a> </p><p> <a href='javascript:changeObject("/Portals/0/pdfs/may2013.pdf")'>May, 2013</a> </p><p> <a href='javascript:changeObject("/Portals/0/pdfs/jun2013.pdf")'>June, 2013</a> </p></td><td><p>July, 2013</p><p><a href='javascript:changeObject("/Portals/0/pdfs/aug2013.pdf")'>August, 2013</a></p><p>September, 2013</p><p>October 2013</p><p>November, 2013</p><p>December 2013</p></td></tr></table></div>

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Does the link to the *first* powerpoint--the one that is hard-coded in the <object> (august2013.pdf) work??

    If it doesn't work, then it's not surprising the others don't.
    If it does, then we get to investigate more. Maybe IE doesn't "see" a change in the data attribute as meaning that the element needs to be reloaded.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Yes, the one that is hard coded in does work. But when you click on one of the links, nothing happens...The browser does list 3 errors... I am getting the alert so it is recognizing that I'm using IE 8, but just not changing the data value.

    Message: 'null' is null or not an object
    Line: 554
    Char: 14398
    Code: 0

    Message: Object required
    Line: 10
    Char: 3
    Code: 0

    Message: Object required
    Line: 10
    Char: 3
    Code: 0

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Those error messages do me no good without knowing the code on the line numbers they refer to.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    0x3
    0x3 is offline
    New Coder
    Join Date
    Sep 2013
    Location
    Somewhere on a map
    Posts
    37
    Thanks
    0
    Thanked 5 Times in 5 Posts
    PHP Code:
    function changeObject(path) { 
    var 
    element document.getElementById("pdfobject"); 
    element.parentNode.removeChild(element); // why not remove the previous object?
    var newObj document.createElement('object'); // new object.

    var IE = !+"\v1"
    if(
    IE){ 
    newObj.id 'pdfobject';
    newObj.data path;
    newObj.width 440;
    newObj.height 330;
    newObj.type 'application/pdf';
    //element.data= path; 
    //alert(IE); 

    else{ 
    // redo the following with setAttribute.
    //element.setAttribute("data", path); 


    Why not remove the previous object, than create a new object? seems more simplistic in the long run.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    New object is a good suggestion. More likely to make IE work, I would think. Certainly worth trying.

    Nice first post 0x3
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Ok, did that but it's not loading anything when I click on the links. The object gets removed (I can tell cause that block of space disappears...) but it's never replaced.

    Code:
    function changeObject(path) { 
    var element = document.getElementById("pdfobject"); 
    element.parentNode.removeChild(element); 
    var newObj = document.createElement('object'); 
    
    var IE = !+"\v1"; 
    if(IE){ 
    newObj.id = 'pdfobject';
    newObj.data = path;
    newObj.width = 440;
    newObj.height = 330;
    newObj.type = 'application/pdf';
    } 
    else{ 
    newObj.setAttribute("id", "pdfobject"); 
    newObj.setAttribute("data", path); 
    newObj.setAttribute("width", "440"); 
    newObj.setAttribute("height", "330"); 
    newObj.setAttribute("type", "application/pdf"); 
    } 
    }

  • #14
    0x3
    0x3 is offline
    New Coder
    Join Date
    Sep 2013
    Location
    Somewhere on a map
    Posts
    37
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by hunter1611 View Post
    Ok, did that but it's not loading anything when I click on the links. The object gets removed (I can tell cause that block of space disappears...) but it's never replaced.

    Code:
    function changeObject(path) { 
    var element = document.getElementById("pdfobject"); 
    element.parentNode.removeChild(element); 
    var newObj = document.createElement('object'); 
    
    var IE = !+"\v1"; 
    if(IE){ 
    newObj.id = 'pdfobject';
    newObj.data = path;
    newObj.width = 440;
    newObj.height = 330;
    newObj.type = 'application/pdf';
    } 
    else{ 
    newObj.setAttribute("id", "pdfobject"); 
    newObj.setAttribute("data", path); 
    newObj.setAttribute("width", "440"); 
    newObj.setAttribute("height", "330"); 
    newObj.setAttribute("type", "application/pdf"); 
    } 
    }
    Ok, so try
    Code:
    console.log(newObj);
    after creation. if FALSE the dom is failing to create the new object.

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,760
    Thanks
    55
    Thanked 516 Times in 513 Posts
    I would think that you would want to append the new object once it has been created...

    Code:
    function changeObject(path) { 
    var element = document.getElementById("pdfobject"); 
    var thenode = element.parentNode;
    thenode.removeChild(element); 
    var newObj = document.createElement('object'); 
    
    var IE = !+"\v1"; 
    if(IE){ 
    newObj.id = 'pdfobject';
    newObj.data = path;
    newObj.width = 440;
    newObj.height = 330;
    newObj.type = 'application/pdf';
    } 
    else{ 
    newObj.setAttribute("id", "pdfobject"); 
    newObj.setAttribute("data", path); 
    newObj.setAttribute("width", "440"); 
    newObj.setAttribute("height", "330"); 
    newObj.setAttribute("type", "application/pdf"); 
    } 
    thenode.appendChild(newObj);
    }

  • Users who have thanked xelawho for this post:

    hunter1611 (09-09-2013)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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