Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Jared

  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?
  13. Well I finally got to try that - putting the variable in the effect... totally didn't work. Big sadface. The reason I was hoping to do that was so I could use easing plugins with it as well with other effects I'm trying to do.
  14. Thanks, scientist. Since I posted this my chops have gotten back up to specs and while I haven't quite gotten to this part of the site design, that does look like it'd do it. As it turns out, What I think I'll end up doing is something like this: $('.thumb.slide').click(function(){ var clickedItem = $(this).attr('name'); $('.widget').show(500, function(){ $('.thumb.widget [name=clickedItem]').addClass('.active'); };}); At least I hope that'll work. I'm still iffy on whether I can shove a variable within a selector or effect (getting an element's width and using it to, say .animate({left: 'var'}); - Or am I way off the map on this structure here? If there's a generally efficient (i.e. easy-to-type-and-understand) protocol for this, much appreciated!
  15. That would be the same as clicking the 'next' or 'previous' buttons, which I already have. See the prototype here You can see the problem is you can click to your heart's content until the thumbnails are way out of the window of view. I'd like to detect when the current position hits the max allowed position and performs a .stop() and/or pushes it back a couple of pixels to make it clear to the user there's no more content. I could map everything out, make the number of pixels divisible by container size, and stop it on cue after x number of clicks, but I'd like to make it more dynamic so I can add more thumb nails or change their size and not have to update a bunch of javascript each time I do. Ideally, this will end up being a useful widget for future projects too so It'll virtually be a 'drag 'n drop' of my image thumbnails without any need to adjust the script. P.S. I do use the easing plug-in. Looks great.
  16. I've got the simple code to write out the text of the new position of the div: var posTeller = $('.movingDiv').position();$('span').text(posTeller.left) $(".buttonClass").click(function(){ $(".movingDiv").animate({left: '+=20'}, 500,function() { posTeller = $('.movingDiv').position(); $('span').text(posTeller.left); });}); However, I would like to have it update as it's moving. I will need this later so that an 'if' function can catch it at a certain value and stop the animation mid-way and call a new animation. I found the $.throttle plugin but I'm unsure how to implement it based off the examples. The end purpose is preventing a slide of thumbnails from going too far and 'bouncing back'. Throttle Plugin Thanks!
  17. Hey All, I'm jumping back into some web design to update personal site (I usually do camera and computer effects so this is always liking diving back into a 12-foot pool at first).I was wondering how to script a jQuery selector so that it would select all other elements in the document that matched that specific class of the object that was clicked. The purpose is to click on a little mini-thumbnail in a slide that would bring up a "gallery widget" with the appropriate photo enlarged and its respective thumbnail in the widget highlighted, rather than just uploading the first in the set. The elements being selected are in an entirely different div/list so they can't be considered children.Do I need to use a variable? If so how (terrible with that part)?All help is greatly appreciated. Thanks! Jared Also, this wont be an issue with other classes being attached, will it?
  • Create New...