Fullpage.js wont scroll up after clicking on link href - fullpage.js

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.

Related

Photoset layout not working on tumblr

I am content with my current theme but the photosets are not laying out properly, they are the same width with my photos but say for instance i reblog a photoset with the photos side by side, it wont show up that way on my blog it will show up underneath each other and that is very frustrating since it makes the images blury.
This is my photoset html code. Is there anyway to correct this?
</div>
{/block:Photo}
{block:Photoset}
<div class="entry">
<div class="photosetbox">
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
{block:IndexPage}
<div class="photosett">
{block:Date}
{block:NoteCount}{NoteCountWithLabel} • {/block:NoteCount}{12Hour}:{Minutes} {CapitalAmPm}
{/block:Date}
</div>
<div class="photoset_a">
</div>
{/block:IndexPage}
</div>
Photoset Photos
Your current code specifies that you want each photo from photoset to rendered in the html as an img tag:
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
To render a photoset, you have two options. Either use the built in feature / theme operator. This will give you an iframe with a photoset prebuilt inside it:
{Photoset-700}
Or use a plugin to take your current code and turn it into a photoset.
References
Tumblr Theme Operators - Photosets
Photoset Grid jQuery Plugin

Loading content with ajax, footer and content briefly move up

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.

How do you align items neatly in Oracle Apex?

I am having the hardest time aligning things in Oracle Apex...basically some pages look ok, but some look like this:
This is considering that all of my pages have the same template/region/col settings:
What am I doing wrong?!
EDIT:
I did get the positioning to become a little better:
Here's the template info:
It might be your page template. I've imported the Green Spring theme and tried it out. Since you're using tabs and only using the apex templates, you might've chosen the One level tabs - Left sidebar (fixed width / DIV based). That would explain why your 'Add New User' region is being 'pushed' to the right. When you add another region, it will probably too get pushed.
Your menu region, which is not being set off, might be placed in another position in the template, before the sidebar.
Check both regions' display point: are they the same?
Has your page template a fixed width sidebar?
So here is the code for the body template of the One Level Tabs - Left Sidebar (fixed-width / DIV based) template:
<div id="header">
<div id="logo">#LOGO##REGION_POSITION_06#</div>
#REGION_POSITION_07#
<div id="navbar">
#NAVIGATION_BAR#
<div class="app-user">#WELCOME_USER#</div>
#REGION_POSITION_08#
</div>
</div>
<div id="tabs">
<div class="frame">
<div class="bg">
<div class="tab-holder">
#TAB_CELLS#
</div>
</div>
</div>
</div>
<div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
<div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div id="body">
<div id="two-col-sb-left">
<div id="left-sidebar">#REGION_POSITION_02#</div>
<div id="main-sb-left">
#BOX_BODY##REGION_POSITION_03#
</div>
</div>
</div>
So what you did after your edit, was probably putting the 'Add new user' region to Page Template Region Position 1, just like the Menu region, stacking them up.
The default place would have been in <div id="main-sb-left">
I'd say that your actual problem still lies with the page template. You should try this: go to shared components > templates, and make a copy of the One Level Tabs - Left Sidebar (fixed-width / DIV based) template (done by clicking the 2 page icon next to it). Then edit this copy (just call it one level template test), and change the body div like this.
<div id="body">
#REGION_POSITION_02##BOX_BODY##REGION_POSITION_03#
</div>
Then alter your page template, and set your 2 regions to position #03, and set the template to Reports Region. Your regions will be aligned all the way left, under eachother, and no whitespace to the left.
Honestly, that'd be the easiest way to solve the empty sidebar space. There are no other regions in the body that omit the sidebar. At least in this theme!

IE8 z-index glitch - cant seem to find a working solution

I have tried all the suggestions on here I just can't seem to get mine to pop-up in front of my stylesheet in IE. Works in firefox and chrome. Here is a very basic example of my layout.
the website is gulfstreamdata dot com . If you add anything to the cart and then in the top-right click on "expand" it drops down whats in your cart, but in IE it pops-under the template. :(
<div class="vmCartModule" style="position:relative; z-index:900; ">
<div id="dropdown" style="position:absolute; z-index:901;">
</div>
</div>
I tried making both z-index values the same and i tried making the outer div higher. Tried about everything I could think of in IE developer tools to no avail.
Anyway since it is positioned in a position you know, maybe you could detach it from the parent div, and move it after its actual parent div, so it will be drawn on front (also removing the z-index values).
<div class="vmCartModule">
</div>
<div id="dropdown" style="position:absolute; z-index:1;">
</div>
you shouldn't have problems in positioning it relative to the body, since it's on top right of the site.
EDIT
If it pops under your template, move that div to the bottom of your website, maybe right before </body>. I had the same issue with many menu and sub menus and it always worked perfectly.
Do this:
<div id="dropdown" style="position:absolute; z-index:901;">
//your content
</div>
<div class="vmCartModule" style="position:relative; z-index:900; ">
//your content
</div>
See demo in IE8 : http://jsfiddle.net/WtWqX/8/

Pull DIV from separate page and update DIV in current page

I've got a simple one but haven't been able to find an example of a solution that fits exactly what I'm asking. Sorry in advance if this is a repeat.
From my navigation menu, I want each link to reference a specific DIV in a separate page and then pull that DIV and replace the content in the current page.
<ul>
<li>About</li>
<li>Contact</li>
..and so on
</ul>
Elsewhere in the page:
<div id="displayContent">Content refreshes onClick. Previous content fades out, fresh content fades in.</div>
Separate page (content.php):
<div id="about">About content</div>
<div id="contact">Contact content</div>
Agree with brhea, a question is a bit unclear.
If I understood well you're looking for something like this?
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
(click car names to see it in action)
OR with jQuery like this:
http://api.jquery.com/load/

Resources