SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript event problem before window fully loaded

    I have this onmouseover event on some elements, eg:
    <div onmouseover="run_code(this)" id="foo1">Block</div>

    My problems is, as the page is loading, the above block shows up on the page, if my mouse is right over it as the page is rendering, there will be a Javascript error saying that another element required by code is not defined, its there but only its not yet loaded at that point, if I mouseover after the full page loads, no problems.

    How can I get the mouseover event on the element to not trigger before page fully loads? something to do with windows.onload?

    Thanks!

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was gravitating towards unobtrusive way, declare it in window.onload = function () { ... } yes?

    But is there a way to do it inline style like this? Anybody have this problem with inline event trigger?

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi abb

    Read the articles suggested by Kravvitz. I wonder if he spend all day searching for good links to the rest of us :-)

    You could do it this way separating content and behavior:

    HTML Code:
    <div id="foo1">Block</div>
    and put this in a js file that is loaded AFTER the HTML on your page:

    Code:
    var divFoo1 = document.getElementById("foo1");
    divFoo1.onmouseover = function() {...the code that should run when mouse over...};
    and a more modern way (DOM2):
    Code:
    document.getElementById("foo1").addEventListener("mouseover", name_of_function_to_run, true);
    But beware: Old browsers may not understand the DOM2 way.

    You could make a shortcut and use a javascript library instead of create all, lets call it usual, code yourself. I use http://www.cross-browser.com. I started using it after I realised I would be 90 before I had written all the functions I need...

    Or search the web for other libraries.

    Michael

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abb
    I was gravitating towards unobtrusive way, declare it in window.onload = function () { ... } yes?
    That's the simplest way. I recommend using a more robust solution, like this one.

    Quote Originally Posted by abb
    But is there a way to do it inline style like this? Anybody have this problem with inline event trigger?
    I'm not sure what you're asking.

    Quote Originally Posted by hegelund
    put this in a js file that is loaded AFTER the HTML on your page
    It's easier to add event handlers to elements via a window.onload handler.

    Quote Originally Posted by hegelund
    and a more modern way (DOM2)

    But beware: Old browsers may not understand the DOM2 way.
    IE (including IE7) doesn't support DOM2 Events.

    Quote Originally Posted by hegelund
    You could make a shortcut and use a javascript library instead of create all, lets call it usual, code yourself.
    JS Libraries lead to code bloat.

    Quote Originally Posted by hegelund
    Read the articles suggested by Kravvitz. I wonder if he spend all day searching for good links to the rest of us :-)
    I have a text file where I keep the links to articles on various topics in a somewhat-categorized order.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much hegelund, Kravvitz! You guys are gold! (pls but don't quote this part cos i'll feel gay j/k)

    Initially I thought those links on Kravvitz's post there was part of his sig, Kravvitz they are awesome!!

    Originally Posted by abb
    But is there a way to do it inline style like this? Anybody have this problem with inline event trigger?
    I was curious if there was a way to halt events from firing before page fully loads?

    For example:
    <div onmouseover="do_foo(this)"> ... </div>

    Will this always run as soon as it is rendered on the page and there is a mouse hovering over the element? There is no way to defer this until page fully loads?

    (You guys already answered this.)

    Originally Posted by hegelund
    You could make a shortcut and use a javascript library instead of create all, lets call it usual, code yourself. I use http://www.cross-browser.com. I started using it after I realised I would be 90 before I had written all the functions I need...
    This particular project is for intranet, so not much surprises on browser type, I am using Prototype actually, pretty new at it, its all confusing right now, but if its only declaring element events, I'll just straight away code it.

    Originally Posted by Kravvitz
    Originally Posted by hegelund
    and a more modern way (DOM2)

    But beware: Old browsers may not understand the DOM2 way.
    IE (including IE7) doesn't support DOM2 Events.
    IE ... sadness

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Kravvitz
    I have a text file where I keep the links to articles on various topics in a somewhat-categorized order.
    Good way to do it. I have immediately started my own collection of links...

    Michael


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
  •