I built a very simple website with skrollr using fixed-position based, full-screen panels that I scroll by transform:translating and I want to add a nav bar. Am I right that I cannot use skrollr-menu for this type of setup?
Is it possible to use animateTo on a click event to navigate a certain panel?
For example, to get to page 2, can I just make a button that animates to 100p?
<div id="page1" data-0="transform:translate(0,0%);" data-100p="transform:translate(0,-100%);">
<div id="page2" data-0="transform:translate(0,100%);" data-100p="transform:translate(0,0%);">
Thanks.
Yes you can. With the latest skrollr-menu you can use percentages as well
page 2
Related
I am trying to create mobile responsive web app which has 2 divs side by side. When I switch to mobile browser, I want to display only one div at a time with next button to navigate to second div. Any Idea how it can be done?
I am currently using bootstrap.
Thanks in advance.
You should look at Bootstrap Grid system for this http://getbootstrap.com/css/#grid.
In your particular case, use col-md-6 for each div. It'll display side by side for browser and one after other in mobile.
For displaying one div at a time you can use visible or hidden part of Bootstrap Grid.
You can use something like,
hidden-xs (hidden on mobile)
This will hide the div on mobile. To show it again, remove the class.
Does anybody knows how to implement horizontal scrolling on event? I am trying to replicate this functionality: http://www.spotify-valentines.com/#/home
First, it scrolls fullpage to the right. Then, it scrolls half way to the right. Then it scrolls full page, also to the right, and finally it becomes a normal screen with vertical scrolling.
The site seems to be built with Angular, but I am not sure how this functionality is accomplished.
Thanks!
It can be accomplish by using fullPage.js.
Just create a single section with multiple slides in. Then you can create your custom buttons and associate them with the action $.fn.fullpage.moveTo() or $.fn.fullpage.moveSlideRight() or $.fn.fullpage.moveSlideLeft().
I created a site with a top navigation bar that has hyperlinks to anchors in the same page for different content.
I'm trying to create a hover effect on the navigation bar when a user scrolls past the corresponding anchor in the same page. For example, when I scroll past link1's anchor, I want the top navigation hyperlink for link1 to change to a different color.
I tried searching Google but can't find anything relevant to do this.
Can someone point me in the right direction or provide some code examples for how I might do this using HTML/CSS/Jquery/Javascript, etc?
Sounds like you want a ScrollSpy plugin.
Right, this is not easy to explain... I'm using jquery.fullPage.js for a website. I have a few collapsable panel hosting a big amount of copy which requires scroll. My problem begins when I enable the scroll on this panel because it sends me to the next section. Is there any way for me to scroll within this panel without affecting the full page scroll?
Thanks guys
Yeah, fullpage.js plugin offers an option called normalScrollElements . As detailed in the documentation:
If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2')
If you need more control you can always use the fullpage.js method setAllowScrolling to allow the autoScrolling or disable it. This way you can disable it when opening a popup, for example, and enable it again once you close it.
I am using the Serif WebPlus 6 to make a website, but I cannot seem to find a way to make the navigation bar to move when scrolled up and down; I am using an image on top Hotspot as a mean of navigation due to their limited navigation style options.
What I would like, is, that image to move up and down?
Thanks guys!
Saif
Im guessing you mean having the navigation scroll down with the page making it appear fixed to a position?
Do you have access to edit the HTML and CSS of your website?
if so it is actually very easy to create a floating menu bar. The operative CSS code is
position:fixed;
for example:
#nav{
Position:fixed;
}
Create an ID and put that in with any other styling you want to use.
Assign that to a <div> tag in your HTML
for example:
<div id="nav">
link1
link2
link3
</div>
if you dont have access to the code and Serif doesnt offer this as a feature then I'd say you cant do it.
and indent your code unlike my examples :/
To create a floating navbar on WebPlus X6, you can add a panel (Insert->Panel) and choose the option to 'Align panel to browser window' to make that panel fixed (that is, it will not move when the browser window is scrolled). Then, you can place your navbar within the panel so it too does not move on scroll.