$("#left_image1").delay('1000').animate({width:'toggle'}, 1000);
This causes the element to collapse in such a way that it appears to be moving off the LEFT side of the screen. How can I reverse the effect so that the element appears to be moving off the right side of the screen?
Its not quite so simple. The reason it appears to be going to the left is because you element is left aligned. If it was right aligned it would appear to go to the right. You could fix this in a variety of ways, but since you didn't post your html/css I can't give a specific answer. One way you could go about this is by floating your html element to the right, or by absolutely positioning the element to the right of its container element.
Related
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!!
I need to make a dynamic jQuery menu for showing products.
There will be one main picture with text and hyperlink on it, taking 60% of the screen, and on the right of it I need three small pictures (one above the other, horizontally) with 20% width of screen (but all together taking same height as the main one).
I need help for the animation. The animation will be next:
the three pictures on the right are sliding up, and the top most disappears, and a new one is appended to the bottom (at the same time as the top most is disapearing). Now, the one that dissapeared becomes the main one.
I've made an easy solution with .slideUp function, but that doesn't actually made the div go up, instead it is just losing it's height until it becomes invisible. It is not the solution I wanted.
Thanks.
EDIT:
I've managed to get some solution with jQuery.sliedUp function, but still I didn't get the effect that the client was asking for.
Now with a little bit more search, I've found that the jQuery UI hide function extension can do the effect I am looking for.
Here's an example: http://jsfiddle.net/WMPRJ/
My problem now is if you click on the top div, while it is sliding up, the bottom div does not follow it up and take its place. I need to do that. Please provide me with a solution.
Append the current main to the bottom of your thumbnails, slide up the top one and remove() it. Take its src attribute and set it to the main image.
Here's some (sorry, not a self-contained example) code that should get you where you're going. If you actually take the time to read it you'll see it does exactly what I described in the first two sentences.
$('.thumb').first().slideUp(function(){
$('#main').attr('src', $(this).attr('src'));
$(this).remove();
});
if this a homework please append homework tag.
I can't provide you with full HTML and javascript, but an idea. You have two blocks. Float the right block;
Left Block - 60%.
Right Block - 20% (float:right)
Define height for Right & Left block and give overflow:hidden for Right Block.
Now define a click function like this.
var nextAnimateImageId = 1;
$("#my_button").click(function{
jQuery("#my_image"+animateImageId).animate({height:'toggle'});
nextAnimateImageId = nextAnimateImageId + 1;
});
My idea is, if you have 5 images, only 3 will be shown becaue of defined height and overflow:hidden property. When you animate the first image to height=0 (which is what toggle does), the 4th image will come up due to the space freed up, giving you a nice scroll up animation.
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)
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
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.