I am using fullpage.js for my website.
I was wondering if I can add a non-sticky menu to all my sections,
I have tried just to put the menu code on all my website section, But it is make my website slowly. Someone have any ideas?
So you want for each individual section to have its own menu?
In that case this might do
html:
<div id="fullpage">
<div class="section">section 1</div>
<div class="section">
<div class="sectionMenue">This is the menue for section 2</div>
section 2
</div>
<div class="section">
<div class="sectionMenue">This is the menue for section 3</div>
section 3
</div>
<div class="section">section 4</div>
css:
.sectionMenue {
position: absolute;
top: 0px;
}
JSFiddle
fullpage will modify all of the sections once it runs, making the positions of all the sections fixed. that means that any absolute positioning inside one of these sections will position it relative to the section itself. Hope that makes sense
Related
I tried to search for this topic with no luck.
I want to display content in my webpage in multiple rows and with each row, I want to have next and back buttons when the contents are more than the page width.
A good example is Youtube
I found good toturials about carousel, but I am not really looking for carousel or at least it doesn't look like what I am looking to implement.
I hope that I was able to explain my question
I did something quite similarly in the past, I will try explain how I did it.
Firstly, here is the js fiddle:
https://jsfiddle.net/VoidZA/fxudjony/
It is something around the lines of:
<div class="container-holder">
<div class="click-prev nav-button">Prev</div>
<div class="outsideViewBefore container">Container Before</div>
<div class="inView1 container">Container 1</div>
<div class="inView2 container">Container 2</div>
<div class="inView3 container">Container 3</div>
<div class="inView4 container">Container 4</div>
<div class="inView5 container">Container 5</div>
<div class="outsideViewAfter container">Container After</div>
<div class="click-next nav-button">Next</div>
</div>
edit final:
Fixed up the code, and put an example into jsFiddle
Example: http://www.hugeinc.com/
I have a portfolio website with a few slides about different projects. After that I'd like the user to continue navigating through other sections, but with normal scrolling (not the fullPage effect).
<div id="fullpage">
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
</div>
After the finish fullpage div it stops scrolling, but the page still has an about and contact sections
You can use pagePiling.js for that purpose. The small brother of fullpage.js.
I created an article about how to create a website like hugeinc using pagePiling.js.
If you are just worried about the scrolling functionality in fullpage.js you should be using scrollOverflow:true as in this example.
I am doing a single page design using a fullpage.js component. the code is something like so..
<div id="fullpage">
<div class="section" id="section1">Some section</div>
<div class="section" id="section2">Some section</div>
<div class="section" id="section3">Some section</div>
<div class="section" id="section4">Some section</div>
</div>
I would like to set up a fixed image - which is the title logo from section 2 onwards.
Section1 will be a photo background - but page 2/3/4 - I want to have an a title div/image to be fixed as the pages/section scroll.
Is that possible ?
codepen : http://codepen.io/anon/pen/OXMgmV
thanks
You can achieve this using a single line of css
.fp-viewing-0 .title.fixed{
visibility: hidden;
}
You can animate it if you want using css-animation to have transition or delay
See the CODEPEN
I have a footer that contains a slideing div as a menu, My purpose is that when I will scroll the page the popup will scroll with the footer and it will be shown at the same position on screen at any time.
<div id="placeholder">
// the pop up will be here
</div>
<div data-role="footer id="adiv">
<div id="slidemenu">
<a></a>
</div>
</div>
From the way I understand your question, all you're really needing is the position: fixed css style:
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning
Suppose I have 4 visible divs:
- 2 on top
- 2 on the bottom, wrapped in a container
and 1 hidden div.
When a mouse hover over a bottom div it changes its color and changes color of one of the top divs.
When user clicks on a bottom div the hidden div appears and stays on the screen until mouse leave the container.
I use if statements to change color of divs, but I'm not sure whether I'm doing this right. Maybe there is a more simple and elegant way to do this.
So there are the questions:
- Do I have to use if statement here? Maybe there is a way to somehow "link" pairs of elements to reduce the amount of code?
- What if I want a top div to stay active while hidden div is visible? Do I need to write additional function with if statements again? Wouldn't that be "do not repeat yourself" rule violation?
Code example here: http://jsfiddle.net/Xq9kr
You can create implicit links through structure.
For example with this HTML:
<div class="top">
<div>Div 1</div>
<div>Div 2</div>
</div>
<div class="bottom">
<div>Div 1</div>
<div>Div 2</div>
</div>
You can then select the respective div in the top via indices:
$('div.bottom > div').hover(function () {
var index = $(this).toggleClass('highlight').index();
$('div.top > div').eq(index).toggleClass('highlight');
});
Or you can create explicit links through data attributes and IDs.
<div class="top">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</div>
<div class="bottom">
<div data-for="div2">Div 2</div>
<div data-for="div1">Div 1</div>
</div>
Then select like this:
$('#' + $(this).attr('data-for')).toggleClass('highlight');
// Or, even better if you're using jquery-1.4.3+
$('#' + $(this).data('for')).toggleClass('highlight');