Okay this is a rather complicated setup/question so I will try to explain it as clear as possible. Right now stellar parallax is working great on my site with no issues whatsoever. this was accomplished by setting the responsive property in stellar.js to true which makes it so that the background image follows the div when you resize the window. Because the issue before was that resizing the window was bad because stellar vertically aligns the background images in a certain way so if you resized the window the div in question might end up in an area where the background is repeating or in an empty spot(if you had no repeat on), it just wouldnt be aligned with the background image anymore. Responsiveness=true fixed this.
However here is the new issue. I have a section on my website where 3 divs are set to display: none by default. 3 buttons, respectively, toggle their display. Toggling their display makes their parent div much longer therefore pushing the rest of the content of the page further down. This pushes the stellar divs out of position with their background images again and i can see areas where the image repeats or are blank(if you have no repeat). However if you resize the window after you toggled the three hidden divs, the stellar divs will automatically fix itself and realign the images as a result of it picking up the responsiveness. I was wondering if there was anyway perhaps I could make toggling the hidden divs trigger this realignment without the user having to resize the window(he/she wouldnt know he/she had to anyway)?
Perhaps a way to refresh a specific part of the page(the stellar divs)? Or perhaps a function to resize the window by like a pixel or even 0 pixels just to trigger the responsiveness?
Thanks in advance, I hope everything makes sense.
Related
The latest vogue seems to be things that move when you scroll.
Now, I have a bunch of square divs containing a background image scattered around a long page of content. My idea is to ever so slightly make these background images slide upwards when you scroll downwards. The background image is as wide as the square, but 1.5 times as tall.
The easy solution is to set the backgroundPosition to a fraction of the current scrollTop, but when I thought about it more, it's not altogether that simple.
Essentially, the background image of a div should be at background-position: 0 0; when the div is just obscured beyond the fold. Once it appears, the top position would decrease relative to scrolling, until reaching the end of the background image's bottom edge once the div has disappeared over the top edge of the window.
The divs are floated within text content, so there's no way to hardcode any position values for them.
Maybe I could manage to do this on my own, but there are several considerations;
Scrolling back and forth at any speed, and never moving the background image to a location where any part of the square div wasn't covered.
Divs which appear in the middle of the page on load. It doesn't matter if the background-position isn't 0 0 for them initially, the important thing is that the background image moves at the same speed as all the others.
Adjusting when the user changes the window size.
Now since this is just an extra little flair, I'm not expecting amazing browser compatibility or that this would work on mobile (although if it does, cool).
But I can't even begin to think how all of this would work out. What would be the best way to achieve this? Since the scrolling sliding thing is so popular, are there any (jQuery) plug-ins that I could utilize to build this?
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
I have a bit of a dilemma in the sense that I can't seem to get a jquery image cycler working with scaling images.
What I basically have is a website with a small navigation list at the top, and then full screen images which can be cycled using a control at the bottom of the page. Previously I've used backstretch to get the desired effect for a background image that stretches with the browser window.
I was also hoping on using Jquery Cycle as the plugin to do the image slider (as I've used this countless times before).
The problem is that I need the effect of backstretch (ie. scaling images) but with a slider. I have tried using other plugins for the stretching but most of them only seem to allow the images to be scaled down (if the window shrinks) rather than upwards. I can't use backstretch because it takes up the entire body tag. I only need a container div to contain the stretched images (so I can have the header/navigation sitting at the top without cropping the images).
However I have no idea how to then get this to work with Jquery Cycle.
Has anyone done this before or have any examples of this working?
Thanks
May be late but take a look at http://jongaulin.com/2011/11/17/fullscreen-image-and-content-slider/. I hope this works for you.
I'm creating a photo gallery website, and there are pages for browsing the photos, with a listing of thumbnails (yes just a regular photo site). The problem is that, I want thumbnails to fill up the available space (I know how to get that one). Actually, what I want to achieve is very similar to this: imagine you have a big number of (more than the screen area allows) thumbnails, and you have set overflow-y to hidden. The thumbs just fill up the space and it goes, off the screen. This would be what I wanted to have if the thumbs in the bottom didn't go off the screen. I need something more, let's say, "dynamic". I've got jQuery, but haven't been able to model the desired effect in my mind.
You should load the images dynamically as needed to improve performance. See the "Reduce the Number of DOM Elements" section in the Yahoo! Best Practices for Speeding Up Your Web Site. Use jQuery to check the size of the div in which you are rendering the images. Load just enough images to fill the div and then load more images on the fly as needed (on window resize or scroll). It is not clear to me exactly what you want to achieve so I can't be more specific than that.
Ok found the way into it anyway. I just load a big number of thumbs, set the overflow-y of the thumbs container to hidden, and by Javascript (actually jQuery), when I resize the window check if the thumbs top + height exceeds window's height. if it does, I simply hide that thumb, if it doesn't I simply show it. It works great!
I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.