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.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,994
    Thanks
    120
    Thanked 76 Times in 76 Posts

    css java script extension --> event selectors

    googled to this site:

    http://encytemedia.com/event-selectors

    excelent idea, unfortunately doest't work wery well + if it works (in some cases) on FF, does not on IE. Didn't go into depth of it, anyway.

    1.it realy works, but I can't figure it out ....
    example that don't work(gets applied only to first div):
    Code:
     <DIV id="features">
       a
     </DIV>  
     
     <DIV id="features">
       b
     </DIV> 
    
    var Rules = {
       ........   
     
       '#features': function(element) {
        //MC TEST 
        element.style.background = 'red';
      },
    
      .......
    2. looking for javascript source with same functionality .....

    thanks for tips.

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeň, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    An id attribute MUST be unique within a page - having two elements with the same id attribute value is invalid, and behaviour of anything that operates on id attributes is undefined if there is more than one in the document. In other words, the script works perfectly fine on this point, it's the document that is broken.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,994
    Thanks
    120
    Thanked 76 Times in 76 Posts
    well, I was having this in mind:

    Code:
      <style type="text/css">
      #tralala
      { 
        background:red;
      }
      </style>
    
    
     <DIV id="tralala">
       a
     </DIV>  
     
     <DIV id="tralala">
       b
     </DIV>
    this works for both DIV-s. Which is then wrong ?
    I presumed that java script from given link is trying to do that.

    Regards

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeň, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by BubikolRamios View Post
    /snip/
    this works for both DIV-s.
    No. It works in *the browsers you have tried* for both divs. A browser would not be doing anything wrong if it worked only for one of them, and it could be either one.
    Which is then wrong?
    The HTML for that page is, as I explained invalid. Because of how the CSS engine works, it makes sense to deal with it that way. But it's not the ONLY way to do it.
    I presumed that java script from given link is trying to do that.
    Well, JavaScript (or more exactly, the DOM) deals with it in a different way than CSS, for reasons way too technical for me to talk about in a forum post. And browsers do NOT behave the same with regards to ids and the DOM.


    Anyway, the point I was making is: Fix the page, and the script will work. The page is broken but the script doesn't do anything wrong. It assumes that since it's an id attribute, there won't be more than one matching element. And that is an assumption it's entirely correct in making.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,994
    Thanks
    120
    Thanked 76 Times in 76 Posts
    thanks for pointing that out. Learned the stuff wrong from many wrong examples (-:

    Linked the stuff to class. Works like a charm, for now (-:

    before
    Code:
    '#features': function(element) {....
    after
    Code:
    '.features': function(element) { ...
    Regards


  •  

    Posting Permissions

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