Hiding the element Using negative left position in chrome. - javascript

When I hide an absolute positioned element by setting the left value in negative(the left will be the negative value of its width).
Its hidden, and it does not impact its successive (next) elements in all the browsers except Chrome. In chrome this negative positioned element occupies some 1 to 2 px of space in its position and pushes the other (successive) elements to 1 or 2 px away.
If i set display none(instead of negative position), It can be resolved. But i do some other manipulations based on its visibility.
If any one know solution for this problem, Kindly help me.
Thanks in advance.

Related

which on is indicated by jQuery.scrollTop?

i have confuse about a value returned from jQuery.scrollTop().
which node indicates jQuery.scrollTop()?
the red one or green?
in short, thats green, but thats not realy the answer
read this from jquery site
The vertical scroll position is the same as the number of pixels that
are hidden from view above the scrollable area. If the scroll bar is
at the very top, or if the element is not scrollable, this number will
be 0.

JavaScript (w/jQuery) - grow an element to fill container on hover, when surrounded by other elements

I have a grid of elements (3 x 3) formation which toggle visibility on hover, easy.
However my next step is to grow said elements to fill their container when hovered upon, I'm assuming I would need to get current (x,y) values and then grow this to the (x,y) values of the parent container and use css positioning, however every approach I take is hitting a brick wall. I have a fiddle here which demonstrates the layout / intended functionality - http://jsfiddle.net/u2w7J/
Any help would be gratefully appreciated!
The way your HTML is set up currently, this is kind of hard to accomplish while having it look smooth. A first try is to use the .toggleClass function and toggle "box" and "miniBox" for the hovered element. See http://jsfiddle.net/u2w7J/6/ for a demo.
Positioning is harder since the miniBoxes are not positioned absolutely. Hence, adding animation is causing weird results (see above demo).
I would suggest to have the miniBoxes positioned absolutely. When hovering, get the parents div left and top values and animate the miniBox using these values. Additionally, raise z-index during or before the animation to prevent other miniBoxes being visible.

Zynga Scroller - Set a starting offset for a scrollable area

Anyone familiar with the Zynga Scroller JS library?
How do I set a default offset for a scrollable region?
I set the CSS for the element using:
-webkit-transform' : 'translate3d(200px, 0px, 0) scale(1)
Assuming I want a 200px offset for the scrollable region, but the code overwrites this upon page load, and snaps back to 0px. When I hard code the 200px offset, it then thinks that 200px is the starting position and bounces back as if it were the edge.
Any help?
I had the same issue in a way and I will describe it below along with the solution.
I work on an "infinite horizontal scroller" with elements equal in size. The idea is that you will only have nrVisibleElements + 2 elements in the DOM. 1 is before your scroll window and the second is after it. The first and last elements swap according to the moving direction. You can find the library here: https://github.com/bedeabza/JS-Infinite-Scroller
Now, I want to use snapping for elements, but if I activate snapping, ZyngaScroller will snap right before I append the swapped element because it thinks my container will end. That's why I reported to it a bigger container (1000 * actualDimension) with the setDimensions() method and offset'ed my dimension processing with 500 * actualDimension.
Basically every time I set the actual transform on the DOM I offset it with the following method:
offset: function (left) {
return left + this.offsetValue;
},
Where left is the left reported by ZyngaScroller.

Limit horizontal range of centered div when resizing window

I have two divs. One should be positioned 5% from the left window border, the other should be to the right of the previously mentioned div and centred relative to window width. If the window is made too narrow it should not overlap the first div, and it should not move below either.
Whatever comes after should be positioned below the tallest of the first two divs.
How can I do this?
The closest I've come is to use a float for the first div. http://jsfiddle.net/7qVLm/
edit: Here's the final result that I'm happy with: http://jsfiddle.net/ATHpg/
Thanks to both #Christopher Smithson and #gmebeh whose answers helped me to get to this solution.
Here's a fiddle to consider for your solution.
http://jsfiddle.net/f2Muj/5/
With percentage-based width's you can make this happen:
jsFiddle
#d1 is 5% from the left, center-aligned content
#d2 is centered relative to the browser window, and will never overlap #d1
Both use fixed heights to accomodate fixed amounts of content
Play around with the percentages to get the exact width you you want.

Fixed position element that... moves?

Just found the link with a visible element with position:fixed behaves kinda strange:
http://www.steadyhealth.com/Do_you_need_to_use_a_back_up_method_for_the_first_week_of_every_month_while_on_birth_control__t267326.html
The element is div with id equals to centerMessages. It appears to be green, visible and ... moving. How come that a fixed element is moving as the page is scrolled? Or, in other words, which part of the spec I need to re-read/re-learn please?
The div does not move when you scroll. It contains no content, so you can't see it.
Fixed position just means that the element doesn't move relative to the scroll position of the page; it can still be given a position relative to the browser window. You can change this position using CSS and Javascript.

Categories