Develop Reference

Sliding tiles css sharepoint

I am trying to create a sliding tile structure in Sharepoint.
I have already succeeded in having the tile slide open once when it is clicked on the basis of a parent and child tile. Now I would like it to be able to slide open again, so three-part drop menu
<div class="tile largeTile green" onclick="DropDown(this)" Parent="tegel">
<div class="tileFront" title="S2">
<div class="title">
Tegel
</div>
</div>
</div>
<!--Start Child containers for tegel-->
<div class="tile green DocumentChild" Parent="tegel">
<div class="tileFront" title="test" onclick="window.open('link','_blank')">
<div class="title">
schuif
</div>
</div>
</div>
<div class="tile green DocumentChild" Parent="tegel">
<div class="tileFront" title="test" onclick="window.open('link','_blank')">
<div class="title">
schuif
</div>
</div>
</div>
<div class="tile green DocumentChild" Parent="tegel">
<div class="tileFront" title="test" onclick="window.open('link','_blank')">
<div class="title">
schuif
</div>
</div>
</div>
<!--End of child containers tegel-->
I tried putting a child after a child but it doesn't work, and I have no idea how to use the 'element' code. I read somewhere about an element as 3rd menu but I have no idea how to insert it in the code.
There are still 2 files, 1 .css file containing the layout of the tiles and Javascript for the operation of the tiles. I will probably need to add code to this as well.
Hopefully someone can help me with this

How do I scroll to a specific section with a link using full page.js?

I'm using the fabulous fullpage.js to make a single page website.
Here's the basic code:
<div id="fullpage">
<div class="section" id="section0">
<h1>Page 0</h1>
<p>Some text 0</p>
</div>
<div class="section" id="section1">
<h1>Page 1</h1>
<p>Some text 1</p>
</div>
<div class="section" id="section2">
<h1>Page 2</h1>
<p>Some text 2</p>
</div>
</div>
What I can't figure out is how to include a link in section 0 to section 2 (i.e. just a standard <a href> link). I've been messing around with anchors but can't get it to work.

You only need to use the anchors option and then use normal links:
$('#fullpage').fullpage({
anchors: ['section1', 'section2', 'section3', 'section4']
});
The link should look normally, but prefixed bye #:
Link to section 3
Live example
Your URLs will look like:
http://yoursite.com/#section1
http://yoursite.com/#section2
http://yoursite.com/#section3
http://yoursite.com/#section4
Now it is also possible to use the html attribute data-anchor="section1" in each section in order to define the anchor for it. For example:
<div id="fullpage">
<div class="section" data-anchor="section1">Section 1</div>
<div class="section" data-anchor="section2">Section 1</div>
</div>

Footer on bottom while printing

I'm trying to print content on my html page
the format is
<div class="header">Title of the page</div>
<div class="main">Content of the page</div>
<div class="footer">Footer of the page</div>
<div class="page-break"></div>
<div class="header">Title of the page</div>
<div class="main">Content of the page</div>
<div class="footer">Footer of the page</div>
<div class="page-break"></div>
<div class="header">Title of the page</div>
<div class="main">Content of the page</div>
<div class="footer">Footer of the page</div>
<div class="page-break"></div>
so there are three pages, pages are added dynamically and this css helps me to break the page while printing
.page.break{
page-break-after:always
}
The problem is that the footer comes after the main div, I want it to be at the bottom of page always.
Any help?

Add this CSS in to your footer div, it should solve your problem
style="clear: both;"

Could your solution be something similar as in this thread?
Footer Not Aligning At Bottom Of Content In Print Preview

zurb-foundation sections -> wierd whitespace introduced when navigating sections

I feel like a moron. I'm experimenting with zurb foundation sections. I'm on the latest version 4.3.1.
I'm following the docs they have here: http://foundation.zurb.com/docs/components/section.html and i'm getting wierd behaviour when navigating results. see screenshots below. What am I doing wrong?
Here's my code
<form data-abide action="">
<div class="row">
<div class="small-24 columns">
<div class="section-container auto" data-section>
<section class="section">
<p class="title" data-section-title>Panel 1</p>
<div class="content" data-section-content><p>Content of section 1.</p></div>
</section>
<section class="section">
<p class="title" data-section-title>Panel 2</p>
<div class="content" data-section-content><p>Content of section 2.</p></div>
</section>
<section class="section">
<p class="title" data-section-title>Panel 3</p>
<div class="content" data-section-content><p>Content of section 3.</p></div>
</section>
<section class="section">
<p class="title" data-section-title>Panel 4</p>
<div class="content" data-section-content><p>Content of section 4.</p></div>
</section>
</div>
</div>
</div>
</form>

Use
dysplay:none
for non-active content and
dysplay:block
for active

argh. My bad. I thought I had upgraded foundation, but it turns out something was screwy with my rubygems environment paths.
After really upgrading to 4.3.1 the issue isn't there anymore.

move content to a different div on page resize

I have a design where on mobiles/tablets all the text is in one div but when on 'desktop' the p tags move to the div below it. (All divs have different background images).
Here's the markup -
<main>
<div class="pane">
<h2>A thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>Another thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>A third thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>A fourth thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>The last thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
</main>
Demo: http://codepen.io/sturobson/pen/aCqDc
So, when the page hits 48em (768px) the <p> in .pane needs to drop down into the following .pane-details
How do I do this without duplicating the content and nastily resorting to display: none;.

Use the window resize event:
$(window).on('resize'), function() {
if ($(window).width()<768) {
// move the element
} else {
// move it back
};
}).trigger('resize'); // force it to run on load
However, you can probably solve this with pure CSS if you rethink your HTML layout a little.