SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    document.getElementById('idname').onclick() is not working in IE

    Hi, i have this code below.

    HTML Code:
    <div id="container">
       <div>Welcome here</div>
      <div>Some content here</div>
    <a href="somepage.html" id="p-overlay" rel="lyteframe" title="My Overlay page">&nbsp;</a>
    </div>
    
    <script type="text/javascript" language="JavaScript">
    		window.onload=overlay;
    		function overlay(){
    		document.getElementById('p-overlay').onclick();
    		}
    </script>
    It works fine in Firefox, chrome and safari but not on IE. I got a run time error Object doesn't support this property or method. I check the line number and the code is this document.getElementById('premiumoverlay').onclick();

    Any idea please on how to fix this? Anyhelp is much appreciated. Thank you

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by codegirl86 View Post
    Hi, i have this code below.

    HTML Code:
    <div id="container">
       <div>Welcome here</div>
      <div>Some content here</div>
    <a href="somepage.html" id="p-overlay" rel="lyteframe" title="My Overlay page">&nbsp;</a>
    </div>
    
    <script type="text/javascript" language="JavaScript">
    		window.onload=overlay;
    		function overlay(){
    		document.getElementById('p-overlay').onclick();
    		}
    </script>
    It works fine in Firefox, chrome and safari but not on IE. I got a run time error Object doesn't support this property or method. I check the line number and the code is this document.getElementById('premiumoverlay').onclick();

    Any idea please on how to fix this? Anyhelp is much appreciated. Thank you
    What exactly are you trying to do there, not real clear

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, once the page is loaded i want the lytebox to show up. Then, Lytebox will only show once href is clicked. So, to trigger href i have that document.getElementById(''p-overlay).onclick()';

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by codegirl86 View Post
    HTML Code:
    <div id="container">
       <div>Welcome here</div>
      <div>Some content here</div>
    <a href="somepage.html" id="p-overlay" rel="lyteframe" title="My Overlay page">&nbsp;</a>
    </div>
    
    <script type="text/javascript" language="JavaScript">
    		window.onload=overlay;
    		function overlay(){
    		document.getElementById('p-overlay').onclick();
    		}
    </script>
    It works fine in Firefox, chrome and safari but not on IE. I got a run time error Object doesn't support this property or method. I check the line number and the code is this document.getElementById('premiumoverlay').onclick();
    The posted code says "p-overlay" while the error says "premiumoverlay"

    It seems that you should search your script code for "premiumoverlay" and rename it to "p-overlay"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    The posted code says "p-overlay" while the error says "premiumoverlay"

    It seems that you should search your script code for "premiumoverlay" and rename it to "p-overlay"
    ahhh sorry, I actually edited my sample. In my actual script it is premiumoverlay.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    May we please then load the problem page into our own web browser, with which to troubleshoot more effectively.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you need a link?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    That is commonly the easiest way.

    While it is possible to attach zipped up files, it can take some time for access to them to be approved by higher-ups.

    So yes, a link is a very good idea.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it is damolog.net/LyteBox/. Sorry I have to cut because the system doesn't allow me to post links.

    It works fine in Firefox, Safari, Chrome but not on IE

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Thank you.

    This is the link:
    Code html4strict:
    <a href="http://www.google.com" id="premiumoverlay" rel="lyteframe" title="Premium Pricing Program" rev="width: 700px; height: 350px; scrolling: no;"></a>

    And this is the non-working script:
    Code javascript:
    document.getElementById('premiumoverlay').onclick();

    There is no onclick event that has been assigned to the link. Use the click event instead to simulate clicking on the link.

    The working script:
    Code javascript:
    document.getElementById('premiumoverlay').click();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It isn't working anymore in FF, chrome and safari

    damolog.net/LyteBox/

    In FF, it gives me this error
    document.getElementById("premiumoverlay").click is not a function

    then in IE it doesn't appear as overlay page/lightbox style. It automatically redirects me to the overlay page link.

  12. #12
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Intresting. Looks like IE will fire event handlers registered via traditional method before it will handlers registered via attachEvent()

    This causes your function to run before the link gets an event handler assigned to it.

    It's kinda lame that your lytebox script automates the initialization. It should leave you in control of that. You can undo it's doings though:

    Code:
    if (window.addEventListener) {
    	window.removeEventListener("load",initLytebox,false);
    } else if (window.attachEvent) {
    	window.detachEvent("onload",initLytebox);
    }
    window.onload = function() {
        initLytebox();
        overlay();
    }
    		function overlay(){
    		document.getElementById('p-overlay').onclick();
    		}

  13. #13
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    huhuhu.. it doesn't work still.

    http://damolog.net/LyteBox/

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Okay, let's go back to the onclick event.

    We'll have to wait for lytebox to complete doing its thing, so we'll perform the onclick from a setTimeout after the page has loaded. Using 0 for the timeout doesn't actually mean that the browser will run it immediately. It will be run whenever the browser is capable and ready, so 0 means "as soon as you're capable".

    Code javascript:
    window.onload=overlay;
    function overlay(){
        setTimeout(function () {
            document.getElementById('premiumoverlay').onclick();
        }, 0);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    specify the correct id.

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by crmalibu View Post
    specify the correct id.
    He mentioned earlier that he changed them before posting them.

    What's happening is an onload conflict between lytebox and the onload script, resolved by asking the onload script to wait for a little bit longer.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thank you very much. It works fine now. Thank you thank you

  18. #18
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was going by what was in the page at that moment in time, not what was posted here. premium-overlay vs premiumoverlay

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by crmalibu View Post
    I was going by what was in the page at that moment in time, not what was posted here. premium-overlay vs premiumoverlay
    Good spotting there.
    That solution script came afterwards when I decided to use <base href="..."> to make sure that the test code would properly on the target page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by crmalibu View Post
    I was going by what was in the page at that moment in time, not what was posted here. premium-overlay vs premiumoverlay
    In my script i made sure that the id is correct.

  21. #21
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by codegirl86 View Post
    In my script i made sure that the id is correct.
    At the moment that you made this post
    http://www.sitepoint.com/forums/show...3&postcount=13

    The id in your javascript did not match the id in the html, on this url
    www.damolog.net/LyteBox/

    That's why it "didn't work".


Bookmarks

Posting Permissions

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