I cant get the plugin to resume normal scroll after the set it is applied to.
I have the plugin applied to main tag:
$("main").fullpage({ sectionSelector: "> *");
after getting to the last section from main i want to be able to scroll the footer sections (normal no full screen ), but I cant get it working.
<body>
<main>
<div class="title fp-auto-height"></div>
<section>1</section>
<section>2</section>
...
</main>
<footer>
<section>1</section>
</footer>
Thanks.
You can not.
The most you can do is simulate that by using the fullpage.js option scrollOverflow and adding all your page content on the last section .
It will create an scrollbar as the one you can see in this example.
Related
Im using the lastest version of fullpage.js(4.0.10).
I cannot suceed to put it on jsfidle license error block me to use CDN
so I put a really simple part of code here give a copy past it locally will reproduce the problem(and of course link back the fullpage.js and the fullpage.css).
so everything work fine until i click to the "button>a href=here" to go to the slide #here
then I can't scroll up at all I have to scroll all the way down and scroll one more time down to then be able to scroll up upper than the slide id "#here"
I want to be able to after I fire a link to an id element to scroll up.
<button type="button">here</button>
<h1>fullPage.js</h1></div>
<div class="section" id="section1">
<div class="slide" id="here"><h1>Simple Demo</h1></div>
<div class="slide"><h1>Only text</h1></div>
<div class="slide"><h1>And text</h1></div>
<div class="slide"><h1>And more text</h1></div>
</div>
<div class="section" id="section2">
<h1>No wraps, no extra markup</h1>
</div>
<div class="section" id="section3">
<h1>Just the simplest demo ever</h1>
</div>
</div>
code to run locally
The question has been answered here.
I paste:
You can use the anchors option to assign a different anchor to each section:
new fullpage('#fullpage', {
anchors: ['one', 'two', 'here', 'four'],
//your other options...
});
This way the #here anchor will be linked to the 3rd section.
https://jsfiddle.net/g26adykw/
The other option is just using the fullPage.js JS methods such as moveTo.
You can read more about anchors on the fullPage.js docs.
I am attempting to follow the instructions on adding a header/footer to a kendo-ui grid here: https://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#template-headers-and-footers
However, I only want the header and footer to be displayed on the last page of the PDF export and I'm not exactly sure how to toggle the visible property when it is the last page.
I was able to resolve my issue by using the following in my kendo-template:
<script type="x/kendo-template" id="pdf-page-template">
<div class="page-template">
# if(pageNum === totalPages) {#
<!-- custom header/footer -->
#}#
</div>
</script>
I'm working on my new portfolio and although it's far from finished, i'm getting close to finishing the design. There's just one problem atm that I don't know how to get rid of. If you go to http://minimalito.be/index.html you'll go to the homepage, then when you click on 'about' you'll notice that the footer very briefly jumps to the top of my page...
When you go from the homepage to the about section, not only the footer moves, but the whole content briefly moves up. Would anyone know why?
The content is loaded with ajax, so that's probably got something to do with it, maybe i'm positioning some divs wrong? I don't really see it.
This is rough layout of my code, for more detailed code + example, you can check the website itself of course.
Thnx!
<div id="content" class="block">
<div id="header">
<nav class="centered">
<h2>minimalito.</h2>
<ul>
<li>about.</li>
<li>work.</li>
<li>contact.</li>
</ul>
</nav>
<h1 id="contact" class="ninja">minimalito#info.be</h1>
</div>
<div id="load">Loading</div>
<div id="page">
</div>
<div id="footer">
</div>
</div>
Your #header has a fixed position so it is not part of the document flow.
#content has a top margin that pushes both #content and #footer down so that they are positioned below #header#.
Now when you click on one of the menu links at the top fadeOut is called on #content which sets display: none; on it. With nothing left to push elements that are part of the document flow down anymore #footer is moved all the way to the top of the page until the new content is asynchronously loaded.
Instead of having fadeOut set display to none consider just changing the opacity and replace the content when the element is invisible.
I've been trying to add some AJAX/jQuery script to my site so that only the main content loads when you navigate through the site, and hence the navigation at the top will not reload.
This is my site structure:
<div id=container>
<div id="header">
<!-- Header + Navigation Buttons, same throughout the site. -->
</div>
<div id="main">
<!-- content of each page, different on each page. -->
</div>
</div>
Also note that each navigation button leads to an index.php file on a different sub-directory, e.g www.mysite.com/contact, www.mysite.com/comments etc.
How can I make the #header stay throughout the site, so when I click a link in the navigation bar that nav bar doesn't reload, however the #main content does?
I eventually would like to add transitions to the #main content aswell, so when you navigate through the site you'll never see a blank white page while the page is loading - instead you'll always see the nav bar etc. and the #main content would fade in and out.
Previously, I used this:
<script type="text/javascript">
$('#main').load('/subdirectory/ #main');
</script>
But it didn't work (note I did write the correct subdirectory) and the whole page would reload as normal.
If you could help me out I'd greatly appreciate it!
Thanks in advance!
mlazim14
<script type="text/javascript">
$(document).ready(function() {
$('#main').load('/subdirectory/ #main');
});
</script>
That should work. Are you sure the address is correct? Maybe the whole page wasn't loaded yet either. Try this, then 'echo' the contents in the index.php file:
$(function() {
$('#main').load('/comments/index.php');
});
Code inside the above function is executed when the page is ready. See jQuery .ready().
I've got a gallery of images, and I'd like users to be able to share those images to their social network.
When a thumbnail is clicked, an lightbox opens using colorbox, and ajax's in the images main view /images/view/<id> rendered as HTML, with an AddThis widget beneath it.
However I'm finding that because I'm loading the widget in using an ajax query there is obviously no event handler for it to catch and load it's bits. It's also, quite rightly, sharing the main url, seeing as it's been loaded in a lightbox.
Is there any way to overwrite this functionality or another sharing widget which will allow this kind of functionality? Or do I need to create my own sharing widget?
I have found a solution to this problem now, although it is more of a hack then anything else.
The basic principle is that you need to reinitialise the widget every time you load it back in.
The simple premise is that you include a ?domready=1 when loading the javascript.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
Then when you complete loading your ajax, you need to run,
window.addthis.ost = 0;
window.addthis.ready();
Which will reinitialise the widget. My code is thus. I cheated, and attached it to the global ajax handler, because of my php framework </aside>
$('.content').ajaxComplete(function(event, request, settings){
// We need to reinitialise the addthis box every time we ajax a lightbox in
// Apologies for using regex to read html when javascript can parse html!
// http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags
if(request.responseText.match(/gallery-lightbox/i)){
window.addthis.ost = 0;
window.addthis.ready();
}
});
Once you've done this, the addThis widget will now load properly. Onto the second problem, of specifying the lightbox content as the sharing item.
This was much simpler, in that you can add the url into the button element. So you end up with widget markup like the following.
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_2" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_3" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_4" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_compact" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
<!-- AddThis Button END -->