www.webdeveloper.com
Results 1 to 7 of 7

Thread: trying to rewrite a func using 'this'

  1. #1
    Join Date
    Mar 2010
    Posts
    281

    trying to rewrite a func using 'this'

    I'd like to re-write the following code using 'this', instead of the way it is now which refs the class. Currently the way it's written it accesses several divs at once, even though the user doesn't see them, which i'm sure is not good coding.

    I'm trying to do this non-obtrusively, i.e, not put an event handler in the HTML. so not sure if it's even possible to do, ie, write a function using 'this' non-obtrusively.
    (using jQuery btw)

    to be clear, mousing over one div displays another div. and mousing out, then hides it. have had trouble using jQuery's toggle function in the past so i'm not using here.

    PHP Code:
    $(function() {
        $(
    '.info-bar').mouseover(function(){
                $(
    '.theinfo').css('visibility''visible');
        });
        $(
    '.info-bar').mouseout(function(){
                $(
    '.theinfo').css('visibility''hidden');
                
        });
    }) 
    sorry, can't show an example at the moment. big thanks for any help on this

  2. #2
    Join Date
    Nov 2010
    Posts
    1,084
    it may be more complicated than it seems, as "this" always refers to the element/object/whatever that invokes it, so in this case it will refer to the div with the '.info-bar' class, and the divs with the '.theinfo' class cannot intrinsically be accessed from there.

    but if your html has a reliably consistent structure, you can use "this" to access another element by seeing how the two are related in the DOM. Firebug's DOM inspector is good for this - it's hard to say without seeing your html, but the relevant div might be accessible as this.childNodes[0] or this.firstElementChild or this.nextSibling or this.lastChild, etc (or whatever their equivalents in jQuery are).

    have a look, and if you can't find it, post a sample of your html showing how the two divs relate to each other structure-wise.

  3. #3
    Join Date
    Mar 2010
    Posts
    281
    Yes I know what you mean about referring to a different div when using 'this'.

    The divs in question are siblings. here's the HTML and a link
    PHP Code:
    <div><!-- #4 -->
                
    <div class="AccordionTitle"  id="acchdr4">
                <
    img src="img/sh/acc_hdr_4_sh_off.gif" name="four" border="0"  id="acHdr4" alt="Accordion Header 4 - Hear Now Productions" class="rolloverme"/>
                </
    div>
            </
    div>
            <
    div id="Accordion4Content" class="AccordionContent Acc4">
                <
    img src="img/spacer_trans.gif" height="270" width="471" border="0" alt="Harley Associates Mediation" />
                <
    div id="info_tc" class="theinfo">Excepteur sint occaecat cupidatat non proidentsunt in culpa qui officia deserunt mollit anim id.
                </
    div>
                <
    div class="info-bar" id="infobar_tc">
                </
    div>
            </
    div><!-- --> 
    The div with class 'info-bar' bar, when moused over triggers the function that shows the div w/ class 'theinfo'.
    here's a link to the page
    http://www.tomcarden.net/dev/faux.html

    the info-bar is purple and is located at the bottom of each entry.
    here the js too. thanks for the great help

    PHP Code:
    $(function() {
        $(
    '.info-bar').mouseover(function(){
                $(
    '.theinfo').css('visibility''visible');
        });
        $(
    '.info-bar').mouseout(function(){
                $(
    '.theinfo').css('visibility''hidden');
                });
    }) 

  4. #4
    Join Date
    Nov 2010
    Posts
    1,084
    yup, siblings. this works on the html you gave - like I say, as long as the divs are always related the same way you should be ok...

    Code:
    $(function() {
        $('.info-bar').mouseover(function(){
                $(this.previousElementSibling).css('visibility', 'visible');
        });
        $('.info-bar').mouseout(function(){
                $(this.previousElementSibling).css('visibility', 'hidden');
                });
    })

  5. #5
    Join Date
    Nov 2010
    Posts
    1,084
    or (it appears) as jQuery would have it...

    Code:
    $(function() {
        $('.info-bar').mouseover(function(){
                $(this).prev().css('visibility', 'visible');
        });
        $('.info-bar').mouseout(function(){
                $(this).prev().css('visibility', 'hidden');
                });
    })

  6. #6
    Join Date
    Mar 2010
    Posts
    281
    that is fantastic. thank you so much Xelawho. much appreciated

  7. #7
    Join Date
    Nov 2010
    Posts
    1,084

    Thumbs up

    happy to help. It appears I am learning jQuery by osmosis

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