My page code looks like this:
<div id="wrap">
<div id="panel">
<div id="answerData">
<div id="bodyData">
----some contents here ----
</div>
</div>
</div>
</div>
The data got wrapped between bodyData are populated automatically, so I want to make these data scrollable when they are overflowed.
And I added
<script>
$(document).ready(function () {
$('#wrap').fullpage();
})
</script>
below div section, but nothing happened, anyone can help me? I followed a tutorial video, don't know how to initialize fullpage.
Check the fullPage.js docs where everything is explained in detail and with plenty of examples.
You are not following the required HTML structure which is the following:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
You can also check this video tutorial.
Related
So i finished my parallax and i would like to add a white empty section between each 2 sections that on scroll will get passed automaticaly like in here.
On scroll, theres a white section that comes in and out fast. how can i do that?
Note: I am using fullpage.js for the parallax effect, Check here.
HTML:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
And Linking my header to the fullpage.js library make its work as a parallax so I cant really show the Javascript in place
I have been trying to implement a solution for this for a while and I have not come to a clean one yet.
Please, help me.
I have 2 routes:
/login
/register
They have very similar templates:
login.html
<div class="main-container">
<section class="fullwidth-split">
<div class="container-fluid">
<div class="row">
<div class="col-12">
[...more similar html to both views...]
<h2>Login</h2>
</div>
<!--end of col-->
<div class="col-12">
Login form HTML
</div>
</div>
</div>
</section>
</div>
register.html
<div class="main-container">
<section class="fullwidth-split">
<div class="container-fluid">
<div class="row">
<div class="col-12">
[...more similar html to both views...]
<h2>Registration</h2>
</div>
<!--end of col-->
<div class="col-12">
Registration form HTML
</div>
</div>
</div>
</section>
</div>
As you can see, most of the HTML is the same, including the section and container div. I would like to reuse this template and I have tried using child routes and using on the dynamic HTML part, but as you can see the h2 changes its content as well, so unless I duplicate this template it's not possible. The best I've got is using the router-outlet, but then I have a STATIC title h2 and can't change it on the child component because it's on the parent component template.
Any suggestions?
Here is one possible solution.
Create a component (my-component) that uses the shared html and add content projection to it. The html should look something like this:
<div class="main-container">
<ng-content></ng-content>
</div>
You project the different content like this:
register.html:
<my-component>
<h2> Registration </h2>
</my-component>
login.html:
<my-component>
<h2> Login </h2>
</my-component>
You could also have multiple content projections.
This is done by adding a select attribute to the ng-content in my-component:
<div class="main-container">
<ng-content select=".heading-content"></ng-content>
<ng-content select=".form-content"></ng-content>
</div>
And use like this:
<my-component>
<h2 class="heading-content"> Login </h2>
<div class="form-content">
.....
</div>
</my-component>
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
Please see below example of HTML structure
<div data-role="page" id="p1">
<div data-role="header"><h1>Header</h1></div>
<div data-role="content">
Click Me
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<div data-role="page" id="p2">
<div data-role="header"><h1>Header 1</h1></div>
<div data-role="content">
Page Two
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
jquery for same
$('#p1').live('pagecreate', function(e){
$("#add").click(function(e) {
$.mobile.changePage('#p2', { transition: "flip"} );
});
});
The above example is working fine but header part is repeating.
So how to avoid this issue because I am using same header as well as footer part for each data-role="page"?
There seems to be no nice "built-in" method to do it. You can find some workarounds here: jQuery Mobile: Use same header footer for all pages
I'm working on a responsive tumblr-theme based on the 1140GRID. To make the static videos fit the column, I used the jquery fitvids plugin.
My setup code looks like this:
$(document).ready(function(){
$("#post_{PostID}").fitVids();
});
and the accompanying html like this:
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
How do I trigger fitVids for multiple, dynamically generated ids on a page?
Thank you!
You may want to put that closing DIV inside the video block.
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
Then, you could target all the subdivs of ninecol.
<script>
$(document).ready(function(){
$('.ninecol > div').fitVids();
});
</script>