JQuery :: Vertical Sliding Navigation - How To Improve Code
Apr 15, 2011
i have been coding on this vertical sliding navigation quite a while. its tested on all relevant browsers and works like a dream. id loved to show you an example of it, but the site is under development, and i, as a little coder, am not allowed to grant access to it, additionally i do not have enough time to create a testcase for everybody to see.
to give you a short insight:
the site is quite long (vertically) and we wanted a small navigation (very subtle) to follow the user when scrolling. the problem was: the footer is quite long too, and we didnt want the sliding navigation to reach into it, when scrolling down the footer. in other words: i had to stop the animation when the sliding nav reached the end of the main content.so far so good, i had NO idea how to tell the animation to stop at certain conditions, other than telling it that from the start.
my solution is totally workaround and completely selfmade. but i am SURE that there is some kind of "stop animation when condition is met"-command i was totally overlooking. so please dear jquery community: tell me what i am doing wrong, and how i could improve this function.
On this link you will see my test site:At the moment I am not too happy with the animation on the navigation menu.As you will see as you click quickly through the various links the animation is very jumpy because of the way I have coded it.Also when you click on the gallery page and then select the various gallery images, the animated ball moves all the way to the left.Here is the JQuery code for the animation:
PHP Code:$(function() {//event object (notice it in the parameter list) contains data about the event handled$(".linkbox").mouseover(function(event){//selectedDiv is the clicked object, so you can do what ever u want on the box clicked ;)var selectedDiv = $(this);var divPosition = selectedDiv.position();var divPositionLeft = divPosition.left;$(".circle").animate( {"left": + divPositionLeft}, "100" );})})function movebacka() {Each page has an include file with the nav menu contents, so every time you click a link in the nav menu, a new page has to load, therefor causing the jumpiness in the animation. What are the best ways to resolve these kind of issues.
I am trying to work out a vertical multilevel sliding menu. I started using the UI accordion but I just discovered this code in an old post that works fine:
What I'm trying to do is create a static nav at the top of the page and when the user clicks a link, they are not brought to a new page but the page slides vertically upwards to the new page. I found this link which kind of helps but need helptrying to make sense of it all.
The link is here [URL] Click on description. Move the scroll bar on the right to the bottom and then click on description again. Instead of the thumbnails scrolling up to hide the description, the main image and header move down. Any tips on addressing this. My brains are a bit frazzled at the moment. Do I need to fix the vertical scroll position somehow. What properties do I need to be looking at? (Note : I'm currently animating the height property of the description box.) Second question. I did have auto margins in the wrapper centering the page. When you click on description it causes the scrollbar on the right to appear, which shifts the page over to the left. I've since fixed the margin, but again is there a way around this so that I can center the page again?
I have an horizontal menu,but the menu items all are in image format.when mouseover on it, it display another color means it is in active state.(this is also an image of another color to differentiate active or not). Now i want to add vertical sub-menu of diff levels to the already existed menu(i.e original menu is of image format). Is it possible to add the sub-menu items to the image menu? if possible, i want the solution for it.
I'm looking for a super-simple sliding gallery plugin that would produce something similar to this: http://labs.paulicio.us/viewport/ .The only thing is I'd like there to be no visible "next" and "previous" type button until the user mouses-over the gallery. I KNOW I've seen this somewhere but it appears I forgot to bookmark it!
After realizing that htc files only work with Internet Explorer, I have needed to have JavaScript code to suit the two lots of css code below. Please help, I need the code pretty urgently. The code must work with most versions of browsers.
I have a sliding vertical menu in my page in the left side and in the right side i have a text say for eg: Home.
So when i click on home, i need the left side vertical menu to slide and open and the home in the left side should get highlighted. How do i do this in javascript?
If slideToggle()'s parameters were expanded to include a separate callback for sliding up and sliding down. Or for backwards compatibility, perhaps include an optional boolean parameter in the callback to more easily discern between a slideUp and slideDown operation.
I recently found a really nice code that centers a page vertically: [URL].. What I like about it, is that when you zoom in with Chrome, nothing gets cut off. Normally other codes for centering will zoom straight into the middle, and cut off content on the left. The only problem I'm having with it, is that when the page loads in Chrome and Safari, it starts to load at the top of the page, and then quickly jumps down to where it's centered. It looks a little choppy when you're navigating through many pages. I'm wondering if there's a way to get it to load in the correct position where it will stay?
I was wondering if there is a javaScript code for a vertical slider. Basically, I'm presenting a menu, that needs to fit in a certain amount of space and it is much taller than the space allotted.
I was going to use an iframe, but I thought that there might be some JavaScript I could use that would be more elegant. I just need to scroll text on a page.
Using the following code example from Scott Robbin, which simply allows for separate html pages to slide in and out of the one screen, I wanted to expand this by sliding in some DHTML.
Here is the page-sliding code used: [url]
DHTML animated code: [url]- [url]
But, at best, only the images show, placed still and next to each other. As you will see the DHTML is a rotating set of imagery. Something in the page-sliding code seems to be preventing that DHTML animation from displaying as it should. Like I said the images will be recognised, but they don't display - I've even tried hard linking to the images.
Here's my page: [url]
Here's the page which I have on my server, the one I would like to have slide in: [url]
To see the sliding animation click the bottom "What cachet does" option that slides the right hand pane in.
View this message in context: [url] Sent from the jQuery General Discussion mailing list archive at [url].
For example, you want to make different all links (a tags), which href attribute is set to external site. So I wrote a small piece of JQuery code, which add class, to all external links.As bonus it's also do shortening of long URLs in link text.
I'm trying to implement a minimal navigation bar using jQuery's toggleClass() function but can't seem to get it working.
It's the .img_selector div at the bottom of the page:[url]
I want to toggle the 'active' class for each <a> when it's selected, to indicate which image is showing, so after calling jQuery, in the <head> I've got:
Then the links, which also include the showPic function:
This code works successfully, however the outputted message looks boring and unprofessional.
This appears with a plain grey border around it: "You cannot upload without first logging in. If you have not already logged in, please do that first." How do you add attributes to those script lines? And the border too?
How to improve the web site loading performance. My current site takes average time 18 sec. to load in first time. and 2nd time refresh it takes 12 sec. through YSlow I am observing the request time it more. how to achieve the better performance. My html code is very much clean and w3c validated.
I have a input date field, I hope that javascript can validate and improve that input date. For example, if I input 5/27 the result will be 2010/05/27, if I input 10/5/27, the same result will be showed, and so on.
<div> </div><div>I did some navigation menu and sub menu using jquery ,</div><div> </div><div>like ;</div><div> </div><div>Menu1 </div><div> Sub menu1(some.php)</div><div> Sub menu2(some1.php)</div><div>
I have 3 images that I would like to display horizontally. I need a default text to appear first when the page loads. When an image is clicked on, the new text should slide down covering the default text. When another image is clicked on that text should slide down and cover the previous image's text.Right now the script only allows a vertical display of the images and I can't put the sliding text in a specific place.Here is the CSS
