Jump to content

Localizing functions to specific element

Recommended Posts

Hello all, I developed pop-out slider menu that builds itself from the CSS rules and HTML content. Unfortunately I designed it around a $('.menuElement .uniqueMenuClass') strategy. Basically I have a handful of menus that do the same thing but with multiple copies of the pop-out menu script plugin with renamed '.uniqueMenuClass' for the respective menus. Example:

$('.sliderMenu .menuOne').ready(function buildSlider(){	 var sliderWidth = $('.sliderMenuElement .menuOne').width();	 // A series of CSS dependent variables...	 $('.sliderMenuElement .menuOne').mouseenter(function animatedStuff(){		  //series of animations triggered	 });}

I'd then go back and copy/paste the whole thing with .menuTwo. Stupid, I know. Now, I'm trying to do something like this...

$('.sliderMenu').ready(function buildSlider(){	 var sliderWidth = $(this).find('.sliderMenuElement').width();	 //Series of CSS dependencies...	 $(this).find('sliderMenuElement').mouseenter(function animatedStuff(){		  //series of animations triggered	 });});

The problem is that .find() runs through ALL of the menuSlider's. Should I assign a unique ID to the menus and all their descendants and store the ID in all the variables and functions? Is there a way to traverse just within the $(this) element? or clear all the variables so the next menu starts clean-slate? Is this why I should have structured with lists instead of nested divs? Children aren't practical because I'm accessing a number of elements at different levels in the tree; the examples above are very simplified. Appreciate the help! Here's a link to a test version... which takes a while to load because of the multiple script references: www.jaredadradtke.com/testersite/index.html And please no comments on the reel labeled 'webdesign' :facepalm: Also... here's an example of the HTML:

<div class="autoSlider">   <div class="slideCont" style="top:0px;">      <div class="sliderName">Reels</div>      <div class="sliderInitial">         <div class="slideEndCap leftCap"></div>         <div class="slideEndCap rightCap"></div>            <div class="thumbCont reels">               <div class="slideThumb reels">                  <span class="thumbCaption">Motion Design</span>               </div>               <div class="slideThumb reels">                  <span class="thumbCaption">Cinematography</span>               </div>               <div class="slideThumb reels">                  <span class="thumbCaption">Web Design</span>               </div>               <div class="slideThumb reels">                  <span class="thumbCaption">Color Grading</span>               </div>            </div>      </div>   </div></div>

Edited by Jared

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...