How does this slider reload new content as the page is resized?
http://www.herschelsupply.com/
I stumbled across this whilst shopping and their slider is a good facsimile of what I want to create for my own site. Their slider loads new content at a certain point when the window is resized. I have had troubles doing that using BxSlider because I am new to JS.
More info
The problems I have had are these:
I can use css media query or jQuery to hide certain slides, but they remain in the DOM so the slider still displays them in the pager and sometimes it just stops rotating/breaks.
If I create two different sliders to be loaded at different widths the change does not occur as the page is resized. Also this seems wasteful.
If I remove and replace elements from the DOM on $(window).resize(), I am not sure how to return them to the DOM if the window is resized back and forth continuously.
Overall I am just asking what approach you would take to do this? Im sorry if this is verging more towards discussion than a specific question, but I'm not sure where else to ask.
The website you showed simply has two completely separate slideshows. One is hidden and another is shown when the window resizes.
<div id="slider-one" class="hide-for-mobile">
/*Slider here*/
</div>
<div id="slider-two" class="show-for-mobile">
/*Slider here*/
</div>
Then in your media query for mobile...
.hide-for-mobile {
display: none;
}
.show-for-mobile {
display: block;
}
Now, as for a solution that's more along the lines of what you were trying to do... What you need to do is get away from HTML <img> tags. Instead, your sliding elements should be <div>'s with a CSS background image. In this way, in your media queries you can change the background image of the <div>'s. I am unsure whether or not the slider you are using can support this, some are dependent on sliding an actual HTML <img> tag. Some can slide whatever you want. You should be able to manage what I've described with Flexslider (a quick google search will get you where you need to be).
Related
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
In my project I have a long scrolling page that has a project grid. when you click on a project, I ajax load that project, then slide open a window pushing the project grid down, displaying the chosen project. Each projects will have different heights based on the content. I need the content that shows below the project grid to always show at the end of the page. Currently when the grid slides open it slides right over the "footer" content (rough example at the bottom).
The skrollr documentation says that if the window resizes, you should call the refresh function.
I run this function on init, on project grid click, and I don't see the window adjusting to the new height of the content. The goal is to have the footer appear always a couple hundred pixels after the project grid whatever it's current height/position.
http://caava.elusiveform.com/example.html
I don't think this is related to skrollr. If you want the footer to appear after the content, then make sure it's there in the document flow. You are using position:fixed and mix it with other stuff. I recommend to first create the page without skrollr and then add animations using relative mode. The skrollr.css file you are using is outdated, it doesn't exist any more.
After you made sure the footer is correctly placed, then you can call refresh to make your animations work (they depend on data-end, which changes and needs to be recalculated). In your case, that would probably be enough:
s.refresh(document.getElementById('footer'));
Btw, the skrollr documentation says
Window resizing is handled by skrollr.
refresh is only needed when you change the DOM and skrollr can't detect that.
After playing with hidden divs (display:none), I've noticed that the browser does not seem to bother downloading any images/flash files that are in that div, until the divs are changed to visible.
The problem with that is, on most users machines, when viewing a hidden div, there seems to be a good couple of seconds in waiting time for the browser to download images or swf files, etc... which == no happy user.
Is there any way to make the browser download the hidden div's content, while it's hidden, and not when it's been set to visible?
In JS or jQuery maybe?
Thanks
Don't use display:none; to hide images.
Try setting the following to hide the content.
height:0;
width:0;
overflow:hidden;
You could also try positioning the content off the screen with absolute positioning.
position:absolute;
left:-1000px;
Here are some options:
Start with the DIV visible, then add the hidden style using jQuery after page load, or after the browser has already fetched the images. This will likely happen so quickly no one will even notice the change.
Position the DIV off screen initially while things load, and fix the dimensions of the DIV (height/width) to be very small so that it doesn't take up visible space.
Use jQuery to load the content of the DIV at the same moment you want to make it visible--fetch the images on demand. i.e. $('#yourDivId').html('[html goes here]');
Use visible:hidden instead of display:none (but beware that it will still occupy space, so this may not work in all situations). You might place a copy of the image at the bottom of the page where layout won't be affected, but will still be fetched and browser-cached for when you make your other location visible.
One way which you can try is, instead of hiding them position absolutely with large negative left position and with minimum dimension may be 1 or 0.
I know what you're thinking, not this again, right?
Here's my site: http://mydesignfeti.sh/
As you will see the browser loads the body & all of its content then the javascript animation loads. All I want is for the animation to load without having to see the content load beforehand. If you're lacking an imagination just refresh the page or click the logo in the top left to see how I want the page to load.
I've tried toggling the container div's class display using javascript, but apparently I was doing it wrong.
Suggestions? Answers? Laughs?
Thanks in advance.
I am not super familiar with how Adobe Edge works, but the basic idea is you will need to either:
Make your initial html/css match the animation base state.
Hide your animated divs initally, using css display: none, and add a second state to your animation to display all of the elements (eg display: block) before sliding them back on the screen.
In the html set the container div property style="display: none;", this will hide the html elements until the javascript animation gets loaded.