Jerky / Flickering Scroll - Using A Table Instead Of A Floated List For The Menu Might Be A Step In The Right Direction
Feb 8, 2010
I'm trying to create a scrolling menu. Example here [URL] I don't think there's an issue with the javascript necessarily. I've tried alternatively using jquery's animate function with scrollLeft and I still get the flickering. I'm thinking it's more to do with the HTML/CSS. For instance I'm wondering if using a table instead of a floated list for the menu might be a step in the right direction.
i have 1 div with scrollbars and another div with a table inside. when user scroll horizontal bar in div1 i want application to scroll the table header from the same amount of pixels and in the same direction. i did not find anything under jQuery about that.. :-(
1. how can i detect in which direction the scroll is done (to the right, or to the left) ? 2. how can i determine how many pixels this scrolling is about ? 3. how to scroll the table header (table tag or th tag) from the same amount of point ?
i found just scrollLeft for now and i'm not successful to use it
1) Script Title: Arrow Side Menu 2) Script URL (on DD): [URL] 3.) My Test Pg. [URL] Describe problem:
After customizing this menu to suit my needs, I find that it flickers (and jumps) between headers ONLY in FF (3.0.15) on the Mac. This is also the case with the Demo on Dynamic Drive. For example, if you hold your mouse on a header item and your mouse moves by a slight hair, it automatically jumps and highlights another menu item without moving your mouse (for some even weirder reason, the item it highlights is always 2up from the one your mouse is positioned over). Sometimes it just flickers between them, other times it moves and completely highlights the other item in its selected state (as if you moved your mouse there).
I'm creating a step by step form using jquery ui tabs andvalidation plugin, the problem is that I've got just one form ( and Ihave to ) so on first step the form is validated but all errors anothers steps are displayed.I'm using an approach ofbut I've got specific messages and validations.Something like
I am running a client side javascript timer to periodically refresh the contents of some tables in the HTML page. The table values are dynmically binded from XML DOM object using the <XML tag in HTML>. The data is getting updated properly. but whenever the value is refreshed, the HTML page flickers. How do i avoid this flickering.. Code:
I've come up with a way (at least in IE7 and Firefox 2 and 3) to create a table that lets you scroll the body contents while the table header row remains fixed in place.
It's mostly a CSS solution, but it does use the IE CSS expression operator and uses some DOM properties to assign some IE heights and widths. The other CSS solutions I've seen to this problem all tend to be pretty inflexible and hard to implement in the real world for tables of varying sizes. They require that you to hard code your table widths and heights in multiple locations in the CSS and involve the use of more than just one class name assignment.
I wanted a solution that could handle tables of different sizes on the same page. Something that allowed you to assign just one class and allowed the you to specify the height in the actual table that you wanted to lock the headings for.
I tried to keep the HTML table mark-up as clean as possible. All you need do is to simply assign a single CSS class name to a DIV that surrounds the table then assign a height you want the table to be as an embedded style. That's it.
This is a weird one. I have a page I'm working on, and I made a simple div that slides up to display some content, then slides down, replaces the content and slides back up again. Basically a showy news ticker.
When I created the div/animation code it ran fine. smooth as silk. However, I then decided to move that part of the html into a templated system, where some php reads a second file and outputs the contents into the webpage. (real simple stuff, it uses file_get_contents and echo to output the file contents).
Using this system, it all displays correctly, but the animation is suddenly slow and jerky. This doesn't make sense to me. Why would the animation suddenly become jerky just because the html that creates the divs is now created via php? Surely the php fires long before jquery gets involved - so why would this occur?
I am using after() to add a div after another floated div. However because the div is floated the added one is not being positioned at the bottom of it. How to get the added div to appear after the floated one.
I am trying to use JS to change the display.style property of a div from �block� to �none� in order to hide and show it. I find that my code works in Firefox but not in IE. Furthermore, I find that the code works fine in IE if the div I�m trying to show/hide is not floated, but when it IS floated then I�m able to hide the div but unable to re-show it once it�s been hidden. Finally, I find that when the div I�m trying to show/hide is floated left and is the left-most element on the page, it works fine, but when I have another element floated left before it, then it fails to re-show once it�s hidden. Here is my code. In order to solve this problem I have removed all other code form my website, so this is the only code. The HTML:
i have the fade effect working but i'm not able to use the slideDown effect instead. and i'd like also to have the effect to appear 1 by 1 and not all at the same time..
I have a bunch of floated divs and I want to increment a variable every time they 'jump' to the next line. When I try using offset() for this I get the same top,left cords for every single element. Is there any way of getting the actual offset? (I get the same result in FF and Chrome)
I just came across this site the other day and fell in love with the simple hidden menu that shows up when scrolling past the header. I took a look at the code but can't really figure out how this is implimented.
[URL]
how to create a similar effect? I'd love to adapt this technique.
Is there a plugin somewhere that will allow a table to horizontally scroll within a set width? I could swear I saw this once but can't find it now. Basically I'm looking for an Excel-like setup. I have a div that's 990px wide and need to constrain a table within that to keep from going off and having the whole thing scroll horizontally. Bonus points for freezing one or more columns on the left.
I've tried a number of the HTML/CSS techniques to get my table to scroll horizontally but none of them work. The table has been wrapped with a DIV and the CSS has included the OVERFLOW code but all to no avail. The code is basically like this:
<div class="Divscroll"> <table> <tr>
[code]....
I've tried using SCROLL instead of AUTO to no avail. When I change the browser to ZOOM to ~150%, which some users will do, the table just wraps, no horizontal scroll bar. Interestingly, the scroll bars appear (grayed out and unselectable) but the <TD><INPUT... elements just continue to wrap.
I have a long table of information with a heading at the top. Is there a script to make the headings always stay at the top of my screen while the table information scrolls by.
I've been beating my head against a wall for a few days trying to get this working. I'm trying to create a dynamic menu where a user selects one item and another select list is shown, then another and another (and so on). Here is my JS, it *should* be taking the ID of the div, comparing it to the selected value and then showing another div by settings it's class property to visible:
I have a verticle dropdown menu, which works nicely. The problem is when the window is resized the menu and submenu stay's in it's fixed position, this means that user has to scroll down the page to access bottom links of large submenus. Is there a way to make the menu's shift up depending on the elements in them and the size of window or even have a scroll bar.
how to improve a simple javascript code on my web site. The left navigation menu slides down as you scroll the page. It works perfect on the computer I'm using now with IE8, Google Chrome and Firefox on Windows 7. However when I try it on any other computer with IE8 or another browser, when you reach the bottom of the age the menu continues to scroll thereby creating white space.
I'm trying to integrate a scroll button that scrolls down an unordered list by a certain amount when clicked. To be more specific, I already have the list in a scrollable box, but I need to know how to make a div or image that when clicked, executes the function that scrolls the list down.
I was wondering if anyone had already built the jQuery equivalent of the menu on Google's livingstories that scrolls with the page to the top then sits at the top until the page is scrolled back down. If you haven't seen it, here's an example [URL}.. It doesn't work in IE, but in other modern browsers, the menu on the right ("Timeline of important events") starts out 450+ pixels down the page, below headers and other page chrome, but when it would otherwise scroll off the screen it switches to "position: fixed; top: 0" If the whole thing does not fit on the page, as you scroll near the bottom it switches again to "position: relative; top: NNNpx" where NNN is presumably the difference between the position of the top of the footer and height of the menu.
It's a nice effect that I haven't seen before, and I was wondering if anyone had already created something like this as a jQuery plug-in.
