OK doing a "fixed height design" microsite for a client;
Situation
At present I have built it in HTML with normal hyperlinks as Nav.
Underneath the fixed height content is a scrollbar, as they want to be able to have Carousel slidy through the pages from the homepage.
Obviously on visiting the omepage, I'm going to need to AJAX in the next possible pages. Clicking on a hyperlink nav, will slide the carousel to that page content.
Despite my objections for many reasons they want to proceed with the idea.
Mission
Has anyone tried this idea for a slidy flash site but in HTML?
What jQuery carousel plugins can be bastedised? My experience with Carousel is it needs all the elements in the page to initialise, how will ajaxing in new elements be handled...
I'm not quite as experienced coder to do my own carousel plugin with the complexity of AJAX and error handling.
Anyone got an ideas how they would tackle it or direction as to where to start?!?
P.S. Sorry this is vague, anhd may be more of a discussion than a Q and A.
Cheers, Will
For the carousel, in my experience jQuery Cycle plugin works with AJAX-content. I've used it, liked it. http://jquery.malsup.com/cycle/
With Cycle plugin you have arrows for page-changing. It seems to have a parameters
pager: null, // selector for element to use as pager container
pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement)
pagerEvent: 'click.cycle', // name of event which drives the pager navigation
So it might work for your needs.
I'm not sure I understand your layout exactly, but if you just need to scroll it sideways, just give a container a fixed width & overflow-y: scroll.
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.
As you can see right here: https://www.sequoiacap.com/
I'm trying to mimic its scrolling behavior right here, and its implementation really baffles me. Is it scrolling to another section? Or is it scrolling the background? Is there a name for this specific website style?
I have a one page parallax theme that I would like to auto scroll for user, so that each scroll gives the user a new fullscreen section. I would like to know how many plugins I would need to use. Some basic examples or directions for research would be greatly appreciated.
Thank you.
Here's 2 possible ways out of many, for how you could implement this:
jump.js which is a dependency-free library (meaning it does not require jQuery or similar)
fullPage which is a full page slider plugin for jQuery. This might be more of what you want, because it does not introduce a scrollbar.
For the front-end of one of the eCommerce sites I'm designing, I'd like to simulate an effect shown in the following: Qards Theme
I think I understand how to setup smooth scrolling anchors, but I need someone to show me the code for triggering the event of smooth scrolling to div classes, as a result of the user scrolling up/down.
It would be helpful if someone could identify the name of the effect, shown in the Qards Theme, as there is likely online reference material. In fact, I'd like to hand-code an almost exact replica (hopefully more lightweight) of the Qards theme (with my own text, images), but I guess this is a good place to start.
Disclaimer: New to HTML, CSS, and JS, kindly leave //explanatory comments with any code.
How can a website shift effect be done like this website? http://showmyshift.com/# When you click a link, the content flies by and shifts.
I believe they are either using CSS3 or Jquery to do this, how can it be done?
EDIT: I also have no idea what this effect is called, nor have I seen it before. I'm hoping someone more experienced has seen this effect before and knows what it is.
it's just a slider, simply look for a slider that allows linking to specific slides, like Unslider (tricky if you don't know what are you doing) or Owl Carousel or the millions out there, and simply link each menu item to a slide. You can also use CSS, but for what you say about your knowledge, it's not recommended since it's way more difficult
Im using Fullpage.js and trying to make it work with wordpress, and its going forward. However, I'm trying to figure out how to be able to scroll trough a slide with content higher then the active slide. The plugin comes with a scroll overflow function, but that vill make a scrollbar that scrolls trough your content, and keeps going to the next slide.
Ideally a constant scrollbar that stops at the current slide would be the best option for me, but i dont know if this is possible.
Been fiddling with this for a while, so if anyone has any ideas how to solve this i would be thankful. My site:
http://www.svenssonsbild.se/Fullscreen/
Edit: Realize that what i want should be able to achieve by setting scrolloverflow: true in the plugins setting. Just didnt realize it didnt work for me.
So, if anyone hav any ideas why it wont work for me then it would be great. I suspect it have something with having the scripts hardcoded in the header and not enqueued, which i havent been able to figure out how to, since the supercontainer the script creates duplicates.
anyhow, any pointers will be very appriciated.
I struggled with this myself, then went to read through the documentation again. Here what it states:
scrollOverflow: (default false) defines whether or not to create a
scroll for the section in case its content is bigger than the height
of it. In case of setting it to true, it requieres the vendor plugin
jquery.slimscroll.min and it should be loaded before the fullPaje.js
plugin. For example:
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
Not loading SlimScroll.js was the issue here.
Then set your $.fn.fullpage({ }) config accordingly.
$('#fullpage').fullpage({
scrollOverflow: true
});
Just to add a little info that mighht help out others, I've been using both plugins (fullpage.js and slimscroll.js) but found issues with slimscroll when using it on mobile devices (momentum and lag issues).
It is possible to set scrollOverflow to false and add this next bit to the afterSlideLoad function to get native scrolling if content is too long:
$('.slide .active').css('overflow-y','auto');