I am using alvarotrigo full page js for wordpress. It works very fine, but there is only an issue for scroll.
As you may know, the basic structure is like this.
<div id="fullpage">
<div class="section">One</div>
<div class="section">
<div class="slide">Two 1</div>
<div class="slide">Two 2</div>
</div>
<div class="section">Three</div>
<div class="section">Four</div>
</div>
However there are sometimes a temporary (dynamic) div or script or style elementary by user's dynamic setting.
http://jsfiddle.net/97tbk/1477/
As you see there are 2 example elementary by user's dynamic settings and scroll is not working to move "four". because of temp style tags, clear div.
Isn't it possible to work scrolling only for "[div class="section"]..[/div]"?
then scroll doesn't need to care other elementary or html tags.
I have tried "sectionSelector". but it's not working for scrolling.
1 more question. The temp style is created by user's dynamic setting. Isn't it possible to move into <head>..</head> automatically? Maybe by script?
You shouldn't have anything between sections. fullPage.js requires a specific structure and you are not following it.
<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 should be asking yourself, why do you have those style tags in between sections and not directly in the <head> where they belong.
Related
I want to use "semantic-ui" accordion with "rtl" icon in default accordion's icons looks like > and i want my accordions icons looks like this <
please help me to do this.
You can simply change the icon class that you are using to achieve your requirement.
I have used "angle left icon" for rtl. There are many more icon to show rtl, here is the link that contains list of supported icon by default in semantic.
<div class="ui styled accordion">
<div class=" title">
<i class="angle left icon"></i>
Title1
</div>
<div class="content">
<p>Title Content</p>
</div>
</div>
NOTE:
Make sure you are using icons from the correct version. Some of the legacy version icons doesn't work with the latest semantic version.
How can I implement http://alvarotrigo.com/fullPage/ in joomla template (Gantry 5).
I tried to add scripts in "Page settings" Aton custom javascript, add module with
<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>
but nothing happened. Maybe someone already tried.
I like the Inspire Theme particle for one page nav: http://demo.inspiretheme.com/particles/index.php/particles/onepage-nav
You could use that for all the javascript, etc and if you wanted it to work in a traditional Joomla menu, you could just set the items up as external links with the IDs to each section like #g-mainbottom or whatnot.
I try to study a Bootstrap 3 last three months.
All fine, but I would like to put in my navbar the additional image (in right side of it).
In my opinion, to insert a picture directly in HTML code like:
picture
- bad idea, and I created a with a background picture, specified through CSS, but the picture does not appear on the page ...
How can I do it?
And possible whether to do it at all?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Follow this guide
http://getbootstrap.com/components/#navbar-brand-image
To have an additional image on the other side of the menu, you just need to put it as part of the link menu. See example:
http://jsbin.com/mupobo/edit?html,output
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.
Since there are no tabs in jQuery Mobile yet, I'm trying to use the navbar to get a similar effect. Here's my HTML code:
<div data-role="navbar">
<ul>
<li><a data-page="desc" href="#" class="ui-btn-active">Description</a></li>
<li><a data-page="reviews" href="#">Reviews</a></li>
<li><a data-page="qanda" href="#">Q&A</a></li>
<li><a data-page="parts" href="#">Parts&Services</a></li>
</ul>
</div>
<div class="panes">
<div data-page="desc">Howdy desc</div>
<div data-page="reviews">Reviews</div>
<div data-page="qanda">You gots questions?!</div>
<div data-page="parts">Parts n stuff</div>
</div>
The problem is, for the life of me I cannot get any click handler to fire off on the iPad. I've tried attaching $.click() to the navbar li, the a tag.. NOTHING works. It works fine on the desktop and I can detect clicks in order to show/hide pages in the "panes" div. But on the iPad (our target), it does nothing. Totally stumped here. Am I missing something?
Try using the tap event rather than click: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html