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
Related
I am currently working on a simple Modal dialog, that should open on a button press; Figuring I´d use the bootstrap example (https://getbootstrap.com/docs/5.0/components/modal/) as a starter would be the best quick win.
As I am using pug as a view engine, I`ve quickly converted the HTML into Pug and tested it without success.
The Modal Container is not showing / popping up. I don`t get any errors within my console. Bootstrap is functioning perfectly.
The pug code:
include modules/head
// Button trigger modal
button.btn.btn-primary(type='button' data-bs-toggle='modal' data-bs-target='#exampleModal')
| Launch demo modal
// Modal
#exampleModal.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true')
.modal-dialog
.modal-content
.modal-header
h5#exampleModalLabel.modal-title Modal title
button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close')
.modal-body
| This is a test.
.modal-footer
button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
sdsadHead includes both jquery and bootstrap (v4.4).
Does anyone have any ideas why it wouldn`t work?
Suggestions about fade css settings couldnt help.
Thanks in advance.
As proposed by Sean above the issue was an incorrect load of the Bootstrap.js file.
Fail by developer.
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");
});
I have been working with html and css for about 6 months, and a very very little javascript.
I recently saw this site here: http://daegonner.com and i noticed if you click "vote" it opens up this window box, but on the same website.
How is this made?
There are some thing you need to do to have that look.
Firstly you need to create that small windows using css and html, by the way it's called modal (like this one http://getbootstrap.com/javascript/#modals)
Secondly, you need to study javascript onclick events (you can refer here http://www.w3schools.com/jsref/dom_obj_event.asp), which help the small window display when you click to vote link.
Finally, the content inside that box is up to you. The page which you gave embed the content from another page through .
Look for CSS Popup or Lightbox on Google, you will finde something helpfull
You will have to include the jQuery library within the <head> tag:
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
And then download, include and use some of these plugins or whatever else you find.
http://dimsemenov.com/plugins/magnific-popup/ (recommend - very good and easy to use)
http://www.jacklmoore.com/colorbox/
I'm new to Mobile development. I wrote a simple web app for mobile platforms which contains two HTML files: index.html, info.html. In the main page index.html, there is a hyperlink that allows user to navigate to the next HTML page: info.html like this:
Next
Both these two HTML files are located in the same directory. I tested it in my desktop browser and it works fine. But problems occurred when I built and loaded the app to my Android smartphone. If I click "Next" link as given above in index.html, it will go the info.html page without any problems. But when I used the "Back" button on my smartphone, it got stuck there and didn't go back to the previous page index.html as expected. So what is the problem here? I'm using MoSync SDK for HTML web app development tool.
I don't have an android phone myself. Are you deleting the history by accident, if not try placing your own back button in it might not work but it could help.
Insert this code in the head of your HTML document:
<script>
function goBack()
{
window.history.back()
}
</script>
Then insert this code where you want the button to appear:
<input type="button" value="Back" onclick="goBack()">
To find out more about the javascript back button: http://www.w3schools.com/js/js_window_history.asp
I hope this helps.
try this, it worked for me
` //back button (on Android).
document.addEventListener(
"backbutton",
function()
{
window.history.back()
},
true);`
AND this one is to exit the app
`// Close the application when the back key is pressed.
document.addEventListener(
"backbutton",
function()
{
mosync.app.exit();
},
false);`
they are both javascripts files so put them in the script tags
put this script on the fist page of your android app
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