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
Related
I have few dropdowns on my page, with buttons opening and closing a dropdown. Everything goes well after initial page load, but after changing to a different page, the dropdown opens with a click, but never closes. It seems that button's aria-expanded is stuck on true and the dropped down div has classes collapse open, which tries to collapse but won't ever do it (clicking the button gives the div collapsing class and then returns).
I have no idea why this happens and and if it's got to do with Liferay, freemarker, css or any of those...
This is my application display template:
<div id="a_language_selector">
<button
aria-controls="a_language_list"
aria-expanded="false"
role="button"
data-toggle="collapse"
data-target="#a_language_list"
>
<!-- CHANGE THIS -->
<#liferay.language key="EN" />
</button>
<ul
id="a_language_list"
class="panel-collapse collapse"
aria-labelledby="a_language_list"
>
<#if entries?has_content>
<#list entries as navigationEntry>
<li aria-label="${navigationEntry.getName()}">
<a href="${navigationEntry.getURL()}">
${navigationEntry.getName()}
</a>
</li>
</#list>
</#if>
</ul>
</div>
The answer was found and has to do with Liferay's own javascript (SennaJS)!
Changing a page in Liferay doesn't update the whole site and leaves old information lying around the session, breaking the collapsing.
I added this line to my portal-ext.properties and while it now loads after all page changes, it works well!
javascript.single.page.application.enabled=false
More information found here (help.liferay.com)
In my project (laravel+vuejs) i want to list the gantt chart of each project so when i click to the link of a specific project it redirect me to his gantt But in my case the the first click it work fine but one i click to choose other project it just change the url and dont refreshing the page (it didnt redirect me) it always work with the just first try.Any help guys?
this is the MainApp.vue:
<ul class="nav nav-treeview" >
<li class="nav-item" v-for="projet in projects.projets" :key="projet.id" v-if="currentUser.role==='admin'">
<router-link :to="`/gantt/${projet.id}`" class="nav-link ">
<i class="fas fa-circle" style="color:#05dfd7"> </i>
<p>Gantt:{{ projet.name }} </p>
</router-link>
</li>
</ul>
You need to add a :key attribute to your <router-view>
<router-view :key="$route.fullPath"></router-view>
Your ${projet.id} will be different each time, hence reload will be triggered.
Edit
$route.fullPath Vue API
type: string
The full resolved URL including query and hash.
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
I have a fully working rhinoslider and lightbox2. The images slide but are also clickable, when there clicked the nice lightbox2 pops up. But for some reason the captions in the slider won't display when the other link is above it.
My code:
<ul id="slider"><li><img src="images/1.jpg" alt="" title="test" /></li> </ul>
Does anyone know why the captions won't display? And is there a solution to this problem?
http://rhinoslider.com/
http://lokeshdhakar.com/projects/lightbox2/
First of all you should fix your markup.
<ul id="slider">
<li>
<a href="images/1big.jpg" rel="lightbox[roadtrip]" title="test">
<img src="images/1.jpg" alt="" title="test" />
</a>
</li>
</ul>
If the caption won't work afterwards, please make sure you enabled them in the settings of Rhinoslider.
If they still won't work try to set the captions manually: http://rhinoslider.com/tricks/html-captions/
I am a little new to this so apologies if I am a little vaugue but I will do my best.
I am attempting to create an iphone friendly version of a site using JQtouch. I understand that normally this would be done all in one HTML file with pages seperated by DIV's. However, I am wanting to load the content from exisitng pages of a website.
The next part to the problem is that my iphone.html page does not sit in the same directory as my current website, so the normal behaviour of JQtouch doesnt seem to work.
So far I have set up a page as follows:
<div id="home">
<div class="toolbar">
<h1>Title</h1></div>
<ul class="rounded">
<li class="arrow"> HOME</li>
<li class="arrow"> ABOUT US</li>
<li class="arrow"> GNWR</li>
<li class="arrow"> GNER</li>
<li class="arrow"> NEWS</li>
<li class="arrow"> FAQS</li>
<li class="arrow"> CONTACT</li>
</ul>
</div>
<div id="content"></div>
<div id="about"></div>
<div id="journal"></div>
<div id="faqs"></div>
<div id="contact"></div>
</body>
</html>
I then have :
<script>
$(document).ready(function(){
$('#content').load('http://www.mysite.co.uk' + ' #content');
$('#about').load('http://www.mysite.co.uk/about' + ' #content');
}
</script>
This loads the content I am after and the page animations work fine. The only problem is that a couple of links exist in the content I am loading and when clicked they obviously dont work.
Is there a way I can check the href of a link when clicked and if it points to www.mysite.co.uk/about change it to point to #about and force it to navigate there?
Hope this makes sense if you need more info let me know.
Regards
Chris.
You are asking quite a few questions inside a single question... You should really break them up into several questions. It's easier for people to answer. Anyways, I'll give it a shot.
First of all, you don't have to have all contents in one html; you can load contents via AJAX. See the AJAX > "GET Example" in this demo, as well as the page content loaded via AJAX.
As far as I know, the pages you want to load do not have to be in the same directory structure. The pages you want to load via AJAX need to contain a valid jQTouch page, i.e. the whole page is enclosed in a <div>.
Is there a way I can check the href of
a link when clicked and if it points
to www.mysite.co.uk/about change it to
point to #about and force it to
navigate there?
If I understand you correctly, you essentially want to replace all the links to www.mysite.co.uk/about with #about. This has to be done with jQuery:
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
You may want to do that when each page loads:
$(document).ready(function(e){
$('body>div').bind('pageAnimationEnd', function(event, info){
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
})
});