I recently started creating a website with Intel XDK and I found out I couldn't navigate between pages. Is there any way to go about this? I just want to link all the pages on my navigation bar.
You can add id for each navigation section and use the following to navigate as you like,
$("#yournavid").click(function() {
window.location.href = "yournavigationpage.html";
});
or simply add
href="yournavigationpage.html"
on navigation section in HTML itself
You can use the built-in navigation control in templates like the List View or Side-by-Side menu.
Here is an example of list View template. In most of the cases you use the 'Go back' button to the page you are in to go back to where you came from.
http://hodentekmobile.blogspot.com/2014/09/creating-projects-with-intel-xdk.html
If you are working with the Designer, you should have an index_user_script.js file. That file manages all the triggers for changing pages. There, you just place that:
$(document).on("click", "#yourIdname", function(evt)
{
//IF IT IS A PAGE YOU SHOULD USE ACTIVATE_PAGE
activate_page("#mainpage");
//IF IT IS A SUBPAGE YOU SHOULD USE ACTIVATE_PAGE
activate_subpage("#inicio");
});
Related
For navigation in my React App, I am using React Router DOM in combination with the History package.
This is an example of how navigation looks in the app:
navigateToAccount() {
history.push('/account');
}
And in the render:
<Button content='My Account' onClick={this.navigateToAccount}/>
/*Button from Semantic UI React*/
So far this will just navigate the client to the "/account" page. The problem though is that there does not exist an option for right clicking to "Open in new tab". So, I tried fixing it by simply using the href tag like so:
<Button content='My Account' href='/account'/>
On the surface this looks to be working, We get the "Open link in new tab" when right clicking and a left click will navigate to the desired page. The problem with this approach is that it goes against the desired Single Page Application structure. When left-clicking on the button (therefore activating navigation to the href), it loads(reloads) the page from start. This means that the client will request the whole application(bundle.js) from the server again. This creates unnecessary load on the server and longer load times for the client.
My question is: Is there a way to enable "Open link in new tab" for a Link/Button without a page reload when left-clicking said Link/Button.
You can make use of Link component (from react-router-dom) which is essentially a wrapper around anchor tag and handles the reload stuff for you. You can wrap Button like this :-
<Link to='/account'><Button content='My Account'/></Link>
For more details, visit - https://reactrouter.com/web/api/Link
I'm developing an extension page action that works in certain urls, I want to put a bar at the top of the page to appear whenever the user accesses the specific site, how can I do this?
You can do this but it is up to your creativity.
You can make DOM manipulations from the 'content.js' and
style it with content.css. Create your bar with HTML and CSS. Append or prepend the HTML code to the page and add your 'content.css' to 'manifest.json'. It is very easy. You should read and watch the content in these URLs for your aim.
Content
Scripts
Fixed Header
Tutorial
(I'm sorry about my english...).
You can't create real bar with chrome extension. You need do it with content script.
The best way to do this is with iframes - one for your bar and one for the site.
var mySite = "http://www.example.com";
chrome.tabs.onCreated(function(tab) {
if (tab.url === mySite) {
chrome.tabs.executeScript(tab.id, {file:""});
}
});
I begin to develop mobile app using PhoneGap. First I make 2 .html files named index.html and place.html
In index.html I use $.get() method to get json data from web service and then show on HTML tag.
When user click link from index.html page it going to place.html. In place.html I put back button like
Back
for back to index.html page.
A problem is when I click back button to index.html page it run $.get() method when page is loaded.
How to cache index.html page? When I clicking back button, it use same data from the first time.
Thanks!
Have you tried jQuery mobile?
You don't have to actually incorporate the entire library, but only utilize the
<div class="home-page" data-role="page" data-dom-cache="true" >
attributes on the Home page container. Another thing to note is that all your pages need the data-role="page" attribute for jQM to work.
By default, jQM has disabled caching, you can enable it in JavaScript as follows
$.mobile.page.prototype.options.domCache = true;
Reference: jQM Documentation on caching pages
Dreamweaver has spry menu function which lets user creating navigation bar quickly.
Suppose I have multiple pages in a web site, the navigation bar are all same.
Can we borrow the concept of master page from asp.net?
I mean that to create master page by using spry menu?
Thanks
With pure html/css ... No you can't.
With the use of PHP, ASP, or a similar server side technology you could.
On second thought maybe you could use AJAX to load the menu in with the jQuery library.
http://api.jquery.com/load/
$('#menu').load('menu.html');
So add jQuery to your web page. Then add the script above and where currently have the Spry menu put...
<div id="menu"></div>
Put the code for the menu you just removed into a file called menu.html.
I have 2 html files
login.html
splitView.html
In login.html, I have written this code on button click for page navigation
$.mobile.changePage("splitView.html", "slideup");
I am able to navigate to splitView.html page. But the following function is not getting called on page load.
$(document).ready(function() {
}
Please suggest me what I am doing wrong ??
Thanks
You don't use $(document).ready(function(){}) in Jquery Mobile. You use pageInit() instead.
More info at Jquery Mobile Docs