Jump to content


  • Posts

  • Joined

  • Last visited

Jared's Achievements


Newbie (1/7)



  1. 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' 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>
  2. Also, is there a trick to searching with the forum's search bar? when I put in 'cookie' it returned nothing... I've yet for the forum search to return any matches that I type in
  3. Scientist, I see what you're saying with googling. It is how I've found out much of what the deal is. I suppose where I get caught up is as a novice you don't always know what to look for or where... I somehow missed the part on their being 'global functions' all apart of the learning curve I suppose.I guess I just get lazy when there's a 'lesson plan' in front of me and I want there to be an anchor to every question I have within the lesson. :-P
  4. Okay, I understand what it does, but I'm having troubles understanding the process of the set/getCookie functions given as examples in the w3schools tutorial.I'm a jQuery junkie trying to ramp up to serious scripting (eventually with Ajax and PHP as its becoming apparent). While the school lessons have been invaluable I notice they don't always have a comprehensive list of objects, methods, or actions that can be done. For instance in the Cookie examples, how where does 'exdays' get defined, what do escape() and unescape() do, etc. I understand parts but others seem completely unexplained. Are there any more comprehensive explanations of the cookie?Also, another example, they talk about the setTimeout and clearTimeout, but I never saw setInterval anywhere... that seems like an important thing to leave out of the school so I'm assuming there's 'gotta be a site out there where a full list of events and objects is being updated more regularly.Thanks!
  5. Hello All, So you frequently see reductions with commonly used objects such as: var $this = $(this)//Or....var $objectName = $('.className') Is there any places or reason why you would chose to use the $ before the var name to create an object as oppose to just making a normal variable? I'm looking to find and replace the objects with these sorts of variables to reduce file size, make it easier to read, and hopefully speed up load time but to check with experts before I potentially F#$! up my work. Thoughts? Also, any thoughts on how to structure code (in general) to run most efficiently would be helpful. I auditioned a very scant, un-skinned version of my page on the server and it took much longer than I expected to load (on my itty bitty netbook of which I think some cell phones have more processing power). Thanks!
  6. Hello All, Is there any sort of tag that will open a default phone application like Skype. A tag similar to mailto or webcal? if not what sort of web language could access a computer directory to find and open it? Thanks!
  7. UPDATE: I have finally figured it out. It's taken me a bit of time to realize how often you have to redefine a variable within the function for something like that. If anyone else is interested I'll keep following the post and reply with a sample.
  8. Oh crap I forgot about that. I'll figure it out once I get there, haha, maybe some creative selectors or something. We'll see.
  9. You are right about needing to remove active once going through other thumb widgets. I didn't it in my sample, but I intend to .focus the respective widget elements upon becoming '.active' and a function for .blur() to removeClass. That way when you click the next thumb it will automatically toggle the '.active' class appropriately. I read that if you insert the tabindex attribute into the elements it will enable this focus/blur ability on just about any element.This'll also end up being really useful if I decide to add previous/next buttons within the widget to toggle classes in order of the index. Thanks for the help. Realizing how to put variables in the middle of strings was critical and I figured there was some way!
  10. I have a div animated by incremented margin-left when the user clicks a button. I would like to force the animation to stop at a specific margin-left value and callback a different animation. So if the user tries to click too far it prevents them from doing so. Suggestions? I'd like to do it with margin because it'd be easier to edit later, but if I have to use .position.left as a variable, I'll take the code for that just as well. Here's a wacky selector I tried, to no avail, if it helps convey my intention: $('.slidingDiv[style*=margin-left:80px]').stop().animate(.....); I didn't bind it to a .click because I want to be able to stop any-size div at any given point rather than map it out explicitly. Thanks!
  11. If I'm correct, this would accomplish the same task as well, right? $('.slide.thumb').click(function(){ var clickedItemID = $(this).attr('id'); $('widget.thumb'+clickedItemID, '.lrgImage'+clickedItemID).addClass('.active');}); After the slide thumb is clicked the widget z-indexes over the slide element and they are thus irrelevant, so needing to strip the '.slide' class seems unnecessary. There any reason why the above code would be disagreeable?
  12. dsonesku: I don't put spaces between classes because I've been compounding classes to style and select different groups in my style sheet and the script. It's my understanding that a space implies that it would select all thumbs and all gallery items. I use these compound classes to differentiate between thumbs in one menu and thumbs in another.Forgive my ignorance but to be sure, you're using that last line: $('.thumb .widget img.'+clickedItem).show(); to select the appropriate id based off the variable, yes? If so, that's really the part I needed. The rest of the script looks like it's set up for an indexed 'next/previous' type function, am I right?
  • Create New...