jQTouch _webapp link - javascript

I have one main page and other sources on other pages. Since I can't use ajax loading because of the server limitation, I have to use target="_webapp" attribute to load on new page
<div id="home">
Link to external page
... content ...
</div>
Since normal back button ( a href="#") doesn't work with external page, I'm using javascript:history.go(-1)
<div id="the-external-page">
<div class="toolbar">
<h1>The External Page</h1>
<a class="back" href="javascript:history.go(-1)">Back</a>
</div>
<ul>
<li>Internal page</li>
<li>Internal page</li>
</ul>
... content ...
</div>
<div id="page1">
<div class="toolbar">
<h1>Page 1</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
<div id="page2">
<div class="toolbar">
<h1>Page 2</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
It works if user navigate #home -> #the-external-page -> #home
but since the other pages have multiple link within it when user visit #page1, #page2 all the history stack and the back button doesn't work until pressed multiple time.
I can't put absolute link in the back button either because the list of original pages are dynamically generated.
Is there way to go back to resolve this ?

Did not test with your code, but I suspect .goBack() in the jQtouch object may be what you're looking for: https://code.google.com/p/jqtouch/wiki/PublicObject
Relevant section:
goBack( to:object )
Forces jQTouch to go back to a certain page in the history. You can pass a specific page ID, a number of pages to go back, or nothing to go back one page. If the specified page can not be found, jQTouch will go back one page by default.

Related

How can I load a separate html page into my main index.html? I imagine it can be done by selecting an element id with jquery

Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.
<!-- This is in my main HTML that I want nav in-->
<div id="nav-placeholder"></div>
<script>
$(function(){
$("#nav-placeholder").load("NavBar.html");
});
</script>
<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
<div class="header-column d-lg-none">
<div class="header-row">
<h1 class="font-weight-semibold text-7 mb-0">
<a href="index.html" class="
text-decoration-none text-color-light
custom-primary-font
">Dynamic</a>
</h1>
</div>
</div>
</div>
</header>
it's not a terrible practice, depending on what components you are going to use inside this method. E.g., Navbars and footers, no problem.
Have a look on this question: How to separate html text file into multiple files?

How can I link to a specific tab?

I am using a theme that has tabs (list items) that are only displayed when the class is "active". By clicking on a tab, it changes the tab's class to 'active' (li class="active"), and only displays the content in the 'active' tab.
If I wanted to link to a specific tab from a different page, how can I create a link (presumably via javascript) that will send you to the page, and change an elements class?
Here's the HTML for reference
<div class="q_tabs horizontal center" style="visibility: visible;">
<ul class="tabs-nav"><li class="active">First Tab</li><li class="">Second tab</li><li class="">Third tab</li></ul>
<div class="tabs-container">
<div id="tab-1428877498-1-88" class="tab-content" style="display: block;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>First tab text</p>
</div>
</div>
</div>
<div id="tab-1428877498-2-39" class="tab-content" style="display: none;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Second tab text</p>
</div>
</div>
</div>
<div id="tab-1428877529303-2-2" class="tab-content" style="display: none;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Third tab text</p>
</div>
</div>
</div> </div>
</div>`
As far as I know, sadly, there is no way with only Javascript to open up a tab in a new page. Fortunately, there are a few way to transfer information within the URL.
1. Using the # symbol
Send info within the URL without reloading the page.
For instance, yoursite.com/yoursecondpage#yourtabselection If you are to add the # plus the tab number, your page would not reload. With javascript, you could find the number using the .hash property. This is the easier way to do it.
2. Using the ? symbol
Send info within the URL with reloading the page.
For instance, yoursite.com/yoursecondpage?tab=2 If you are to add ?tab=tabnum to the end of the URL, your page would reload. With javascript, this method is a little bit harder to find. This is the harder way to do it.
I hope this helps!
how about you create a function that recive a tab id(as an argument) and it will show only that tab (as it also hides the others).
then if you want to link it from another page make sure to pass the id(of the tab) via the url so you'll be able to make a simple JS check if there is any request for a specific tab and then use the function (as I described before).
use jQuery it shouldn't take more then 5min'
good luck.

How to remember and keep the active nav tab using bootstrap 3? (Asp Mvc 5 if this matters)

Using bootstrap 3 I am trying this exameple. It works fine as expected, the first tab is active when page is shown. However when I navigate to an other page in my app, then back to this page, it forget the active tab, always the first tab is the active.
I would like to the page remember what was the active tab.
What I was tried so far:
I've tried to leave the class="active" from the li element and the class="in active" part from the div element. Unfortunately this case no tabs displayed at all, the user must explicitly click on the nav to show any tab, so this does not seems to be the solution.
Thanks in advance.
<ul class="nav nav-tabs">
<li class="active">graduation</li>
<li>graduate</li>
<li>extension</li>
</ul>
<div class="tab-content" id="TabContent">
<div class="tab-pane fade" id="graduation">
<p>
anything
</p>
</div>
<div class="tab-pane fade in active" id="graduate">
<p>
graduate
</p>
</div>
<div class="tab-pane fade" id="extension">
<p>
extension
</p>
</div>
</div>
You actually store this information in your url.
If your original url to this page is "//foo.bar/example", then you can extended to these three urls
//foo.bar/example#graduation
//foo.bar/example#graduate
//foo.bar/example#textension
When user clicks on a tab, you can update the url, and when your page loads, you can use window.location.hash to get the hash fragment and use the hash fragment to activate the corresponding tab.
If you are using some frontend framework like backbone or angular, they have builtin routing support that makes things easier for you.
Advantage of this over cookies/localStorage is that you can send these urls to other people, and they will be taken to the exact tab indicated.

JQuery Mobile Showing Blank

I am building a JQuery Mobile web-app, and am running into an interesting problem. I have a listview, and when I click on one of the menu rows, page 2 loads as expected. However, when I click the back button, the page 1 page loads for a half a second, then page 2 comes back (without a transition).
Here is the code for the 2 pages:
<section id="more" data-role="page">
<header data-role="header" data-position="fixed" class="AppHeader">
<h1>More</h1>
</header>
<div data-role="content">
<ul data-role="listview" data-filter="false" id="moreList">
<li><h1>History of Boston Landmarks</h1></li>
</ul>
</div>
</section>
<section id="historyOfLandmarks" data-role="page">
<header data-role="header" data-position="fixed" class="AppHeader">
Back
<h1>History of Boston Landmarks</h1>
</header>
<div data-role="content">
<p>This is a list of National Historic Landmarks in Boston, Massachusetts.</p>
</div>
</section>
JS Fiddle Does Not Illustrate the Problem: http://jsfiddle.net/jakechasan/66vbS/
Everywhere else, the problem appears: http://jakeserver.com/Apps/BostonLandmarks/B5/landmarks.html
I don't understand why JSFiddle does not illustrate the problem, however, the same file on my computer/server has this problem?
Any ideas?
Thanks.
Your own CSS is responsible for this problem.
Edit this file: http://jakeserver.com/Apps/BostonLandmarks/B5/css/styles.css
And remove from the bottom:
.ui-page{
display: block !important;
}
I have tested it successfully.

keep link active after clicked using same page anchors

Bascally I have a fixed navbar with same page anchors and I'd like to keep the link active after the link has been clicked and taken to that section of the page. This is simple if the links to another page but I can't figure out how to here.
Here's what I've got. I'll just show you guys the first link and section since the solution will most likely be the same for the following links. I haven't written any CSS because I'm not sure how to go about this.
<nav id="navbar" class="navbar">
<div id="navContent" class="areaMargin navContent row">
Scheduling
</div>
</nav>
<section id="schedWrapper" class="bgWrapper ">
<img class="bgImg" src="images/bg/scheduling-bg.jpg">
<article id="schedContent" class="areaMargin fittext">
<header class="top">
<div class="col1"><h1>A New Way<br />To Schedule<br />Everything</h1></div>
<div class="col2"><img src="images/scheduling-client-group-event.png"></div>
</header>
<div class="clearfix"></div>
<div id="schedBottom">
<p>One calendar that lets you manage schedules for your team<br />
and your spots, all in one calendar, with options of sharing your<br />
own personal schedule, and you can accept and decline<br />
appointments with any device.</p>
</div>
</article>
Using jQuery you can simply toggle an active class on links:
$('#navContent a').click(function(){
/* remove class from prior active link*/
$('.activeLinkClass').removeClass('activeLinkClass');
/* "this" is current link clicked*/
$(this).addClass('activeLinkClass');
});

Categories