Here is a jsbin of my code: http://jsbin.com/EKidOyO/1/edit
What I'm trying to achieve (unsuccessfully so far) is that when I you scroll, the red div should stay fixed for a set amount of time then eventually move up and the rest of the page follow.
This works kind of at the moment. However, when you reach the end of the blue div that should be the end of the page and not allow you to see white space below the blue div. Also, on smaller viewports you cannot scroll down to see the bottom of the blue div.
I cannot work out how to fix this.
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!!
First off, just want to thank the author for making this great bit of code available for free, and the community for helping java-illiterate folks such as myself.
Anywho, here is my issue: When I click a thumbnail to enlarge it, it enlarges just fine. However, when it's enlarged, the only way I can shrink it is by placing the cursor on the very thin ~1px border. I do not get the magnifying glass shrink cursor when over the image itself. If you wish to view the problem, the code is live at http://www.coloradocanopyclub.com/photos.html.
*EDIT TO ADD* This issue seems to be affecting the first photo ONLY. (tallison.JPG)
Thanks for any help!
The universal selector at the top of your style.css file causes this problem:
* {margin:0px;padding:0px;top:0px;left: 0}
It’s ok to set margin and padding to 0 for all elements, but the problem starts when you sets top/left position for all relative/absolute positioned elements 0.
You’ve probably noticed the Highslide full-expand button. This button is placed in an overlay on top of the image. Standard position for the full-expand button is bottom right corner: http://screencast.com/t/WPP4iwwCI9dq Your universal selector moves it to upper left corner: http://screencast.com/t/maXl9rzveH When the button is moved like this with CSS, it will result in an overlay that covers the entire image – colored red in this screenshot: http://screencast.com/t/6pdDnxaMRQ - which makes it impossible to close the image.
You need to change your universal selector to this:
* {margin:0px;padding:0px;}
And add top:0px;left:0px; only to the selectors where you need it, which are (as far as I can see) #navlist li a span and #content
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
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)
I don't even know what I want to do would be called
Please take a quick look at this page:
http://www.philsalesses.com/plasma-pong/
You'll see the title Plasma Pong and an image under it, on the left side. When I scroll the article, I'd like it to stay put while the page scrolls. However, you'll notice when you get the bottom of the page, there is a footer and there wouldn't be enough room for the title and image if I just made it completely static.
I'd like that to stay put until the footer hits, then scroll. When you scroll back up the page, it will scroll a little bit, until there is room, then stay put again. The same effect, but in reverse. Any idea what to look up how I could do this?
Set the titles css position to fixed. Then use javascript to detect a scroll event when certain criteria are met reset it to an absolute position so that it stays above the footer. Then when remove the absolute positioning when the page is scrolled away from the footer. To see a working example go to quirksmode.org. In his articles he has the effect you are looking for.