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.
Related
I am creating a web page that contains lots of transitions and animations. I don't like it when things zap from one place to another, I like it to slide over instead. Which is why I have a problem with responsive web apps. Yes, the elements of the page will reposition themselves correctly when you resize the window, but they don't animate, instead they go from point A to point B in, quite literally, no time.
Is there any way I can solve this problem? I am open to any CSS or JS solutions. For an example, go here, make your browser window smaller, and click on the hamburger menu icon in the top left. The buttons in the main section of the page reposition themselves but again, no animation. It makes me sad.
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).
I am having a hard time looking for a modal box that has a similar functionality as the one on Pinterest.
I am currently using simple-modal (jQuery) but the problems are the height is not dynamic (putting height: auto has some problems) and the modal box's position is fixed at the center. Hence, if the content is long, it will just have a scrollbar on its own (inside the modal box) instead of being scrollable using the browser's main scrollbar. When I use the main browser's scrollbar, it's scrolling the content behind the modal (which is the actual web page) which is not what I intend to happen.
Do you have any suggestions on what to use?
If you right click on a object and open it as a new tab/window, you will then see what Pinterest is overlaying on the main page.
That said, you might achieve the same effect by expanding a full viewport iframe with semi-transparent background to see the underlying page.
To be sure, I've not come across any lightbox clones similar to Pinterest's custom jQuery version hidden somewhere in it's .js file.
Status Update:
If your willing to create your own method, I've outlined a process seen in my SO Answer here
So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.
What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.
There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.
You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/
I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.
I was looking at an issue in JIRA (e.g. here, an issue in JIRA 4) and I noticed JIRA 4 has some interesting scrolling behaviour, where when scrolling down with the main browser scrollbar,the jira header scrolls up out of way, then the issue title stays fixed at top, then the rest of the issue continues to scroll. So the issue title is always visible.
There isn't an extra vertical scrollbar. Its all scrolled via the main browser scrollbar. So its either css or javascript magic! Any idea how they do that?
Cheers,
Phil.
It changes dynamically the div #stalker which has position:absolute;top:76px;. When the user scroll, change the position to position:fixed;top:0 and keep it in a fixed place, giving you the ability to scroll the rest content.
Edit
I created an example of this behavoir, because I was curious and here the demo if you want to check it http://jsbin.com/igiji5/3
Atlassian published the source of the Javascript at http://docs.atlassian.com/aui/3.0/jquery.stalker.js.html
That is created using JavaScript.
I can see by using FireBug to inspect the div#stalker that it changes class and style attributes when you are scrolling.