Javascript: Weird bug when animating marginLeft? - javascript

So i made sort of a grid-layout in javascript, but it isn't working like it should yet. I have set it up so that it changes the left margin of an elemenent to make it "slide" to the left/right. However, for some reason it refuses to slide to the last slide. No idea why, can't seem to find the bug!
Here's a copy of the whole page:
http://jsbin.com/obivap/3/edit#preview
Click on one of the other "pages" to slide to the next slide.
Any ideas?

You're animating with margins and floats. So once you push the leftmost box out of its container with a margin, the boxes to its right (which until now have moved with it, because of the float) will stop moving. At -600px the box leaves the container entirely, so the next boxes are now up against the container's border. You're not animating their margins, so they won't leave their container.
If you try and solve this by animating their margins, it will get messy. I haven't gone over your code thoroughly, but if the boxes are already position:relative, so you might as well style all of their left amounts. This means two simple changes in the code: remove every :first selector (since you want to animate them all), and change all marginLeft to just left.
http://jsbin.com/obivap/6/edit

Related

How to keep all elements at sticky position until a trigger is called?

I have a page where an image is decreased in size while scrolling. Once it reaches a specific size another image appears. From there on the scroll behavior should be the same as in scrollytelling approaches.
My problem right now is that all the subsequent div's are not "waiting" for this event of image change. I can only tell the first subsequent div to stop until this event occurs and change its position to relative once it occurs. But with this solution, it seems to be more messed up.
Here is a JSFiddle with a sample setup. I would like that none of the text div's move until the red div appears. And then it should start moving from its current position.
I could solve the issue myself (in some way).
I added a container div to all content after the div with the images and made its opacity: hidden. While scrolling, the content is actually scrolling upwards, but it cannot be seen. Once the images change I add a margin-top to the content container with the value of the scrolled distance (+ some buffer) and remove the opacity: hidden class.
Here is a JSFiddle
However, this is not the solution described in the question, where the content should be visible and "wait" at its position, but for my circumstances, it is an acceptable answer. But I will not make this the accepted answer of my question.

Jquery Scrolling background animation like scooby doo

I'm looking for some help with pointers on how to achieve a moving background similar to scooby doo or other another cartoons - eg on the press of a button the background slides right to left, the character animates (starts a GIF animation).
Im creating an animating character who will sit on a left hand side div. On clicking the character the div behind the character (the whole background, and other divs within in it) will slide from right to the left and a new div container will slide in to fill the gap. So essentially will appear like the character is walking but in fact the background behind him is moving from right to left.
I'm sure this must have been achieved before, but looking for some pointers on how best to achieve it. Any help will be appreciated.
My thinking is that on trigger there will be a few actions:
GIF animation starts
Whole div slides from right to left
New div (which was hidden) is now shown
New div slides from right to left, behind the old div
Old div is hidden
The issue I am finding is creating a responsive site, therefore the size of the divs moving will not have a px value but a percentage value.
If anyone has tackled something similar before or has some pointers would be really appreciated.
Thanks,
Nick
Getting myself a little confused here. I've worked this out by using a full sized owl carousel and sitting an absolute image over the top. Get my mind in gear!!

Smooth scroll div horizontally by a pixel amount, no scrollbars

I've got 10 floating DIVs in a container DIV that I want to be able to scroll through using a button.
I'd like to use left/right buttons to make the container DIV scroll 300px horizontally to display the next floating DIV.
I'd like the width of the container to appear as 100% of the window, and I'd also like there to be no horizontal scroll-bar on the bottom. If it could scroll sideways that'd be great but it's not a must have.
Here's what I've got:
http://jsfiddle.net/696je/
I'm just looking for a function and the way to activate the function for left/right buttons.
I've tried Google for hours, I've tried Flesler's ScrollTo but I haven't had any luck, it might be something do to with the way I've got the width set up, anyway, thanks for your help.
It is possible to do with mix of CSS (display:inline-block and white-space:nowrap) and jQuery (scrollLeft)
here is a jsFiddle implementation with minimum possible wrappers.
I was a little confused by your code you posted in the jsFiddle. You said you wanted no horizontal scroll bars, yet your stuff was set up that way. I went with the horizontal scroll bar since that is what you were going with in your code.
I made a working function here jsFiddle. To get it to work in the frame you need to put focus in the "Result" window (just click anywhere), then use your left and right arrows.
I must give the javascript for keypress credit from this post

Make a content visible when mouseover on 1/3 width of container without adding subcontainers

I have div container with width 100%. I need to make a content hide and show according to mouse over in container. But this will need to happen with 30% from left of main container and rest(70%) with no show/hide effect. Can we make this effect without adding any additional sub containers?
An Image representation
How to make this effect?
This Fiddle illustrates a very basic solution; it calls the effect every time the mouse moves inside the 30%, so you might need to add some further logic to prevent that happening.
I've used a container of 500px width, and a subcontainer div, but only for illustrative purposes; the JavaScript will manage a single container of any width. You'll need to add any positioning, margin or padding to the 'widthModifier' variable, but you could get those from the container in JavaScript too, if you wanted.
Daniel's answer doesn't solve the problem showing and hiding the content. Take a look at my solution that does exactly what you want. I used CSS features to achieve the result.
Use Chrome to view the example. For other browsers you just have to add their specific implementations of the css features.

Top and bottom split-screen with jquery, constraining the bottom half to the page

I have a top and a bottom with a line in between to resize(giving more real estate to either the top or the bottom).
Basically a split-screen layout. But I am having a problem getting the bottom portion correct, no matter what I do it always extends beyond the page, and I want the box in the bottom portion to perform exactly as it does in the top portion of the page.
The following demo will show you basically what I am doing as well as my problem:
http://jsfiddle.net/mstefanko/e38bE/67/
I don't have any hard-coded heights(everything is currently set by %'s), but I added them to the fiddle for demonstration of my issue.
Right now the divider that resizes the top and bottom is resizing the top, and I have some code from jQuery UI Resizable alsoResize reverse to reverse resize the bottom. I'm not sure that I even need the extra code, but when I couldn't sort this out, I figured it was worth a shot.
Also, there's a large bottom margin on the top in order to get the jquery ui handle right, this might be causing my problems but playing with it didn't seem to get rid of the issue.
Any help is appreciated, thanks!
Your problem is that you're trying to scrunch several divs of a fixed size into one bigger fixed-size div, but the other divs don't fit. You can't expect the text to resize when you move the resizer handle to make it fit, and the divs have to go somewhere, so they overflow. Here are a few suggestions:
Give the container a css overflow value of auto (so when you resize it and it's too big to fit, it will automatically give you a scrollbar)
Set the overflow value and get rid of the resizer entirely
Give container a css height value of auto or scroll (if size is not an issue)

Categories

Resources