I'm looking for something like in my html file with following code
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="codiqa.ext.css">
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
</head>
<body>
<!-- Home Page-->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content">
<a data-role="button" href="#page2">
page1
</a>
</div>
</div>
<!-- Second Page-->
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<h3>
Header2
</h3>
</div>
<div data-role="content">
<a data-role="button" href="#page1">
page2
</a>
</div>
</div>
</body>
</html>
In this first i can see page1 and when i click button it will move to page2.
I want this like when i "swipe left " i want to saw the page 2 instead of clicking button.
Use swipeleft and swiperight, in addition to $.mobile.changePage() to navigate between pages. Here's a simple code, adapt it to your needs.
$(document).on("pageinit", "#page1", function () {
$(this).on("swipeleft", function () {
$.mobile.changePage("#page2", {
transition: "slide"
});
});
});
$(document).on("pageinit", "#page2", function () {
$(this).on("swiperight", function () {
$.mobile.changePage("#page1", {
transition: "slide",
reverse: true
});
});
});
Demo
Related
I have the following overlay external panel:
<div data-role="panel" id="panel" data-position="left" data-display="overlay" data-theme="a">
<h1 style="background-image: url('img/image.jpeg');width:240px;height:60px;border-radius: 8px;">Options</h1>
<ul data-role="listview">
<li data-role="list-divider" style="font-style: italic;">File</li>
<li>Load file</li>
</ul>
</div>
This panel is activated from a href button in the header of every page and it can also be activated on a right swipe. To close the panel, the user can either click externally from the panel or swipe left. The problem is that when I click on the href button to open the panel and then swipe left to close it, the button remains in a activated highlightend state. It only gets back to its not-clicked state, when I tap on the page.
Here is the definition of the header, where the button for the panel resides:
<div data-role="header" data-position="fixed">
Menu
<h1>Home Page</h1>
Info
</div>
I have tried multiple things including artificially clicking/tapping on a current page, playing with the button attributes, but no luck so far. I would appreciate any help.
You can get the current focused button and remove the focused style ui-focus, like this:
$(element).removeClass($.mobile.focusClass);
or You can simply blur the active document element, whichever it is.
DEMO:
$(document).ready(function() {
$("#panel")
.panel({
theme: "a",
display: "overlay",
position: "right",
positionFixed: false,
dismissible: true
})
.enhanceWithin()
.on("panelbeforeopen", function(e, ui) {
$(document.activeElement).blur();
});
$(document).on("swipeleft", function(e) {
$("#panel").panel("open");
});
$(document).on("swiperight", function(e) {
$("#panel").panel("close");
});
});
.ui-page-active,
.ui-popup-screen,
.ui-popup-container,
.ui-panel-dismiss,
.ui-panel-display-overlay {
touch-action: manipulation;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="header" data-position="fixed">
Menu
<h1>Home Page</h1>
Info
</div>
<div data-role="content">
</div>
</div>
<div data-role="panel" id="panel" data-position="left" data-display="overlay" data-theme="a">
<h1 style="background-color: grey; width:240px; height:60px ;border-radius: 8px;">Options</h1>
<ul data-role="listview">
<li data-role="list-divider" style="font-style: italic;">File</li>
<li>Load file</li>
</ul>
</div>
</body>
</html>
(As a bonus, i added the CSS fix for the Chrome warning: Unable to preventDefault inside passive event listener due to target being treated as passive)
I have 2 pages in jquery mobile html code. I want when the school page is loaded it should display an alert
HEADER PART
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<link href="custom/scripts/new.js" rel="stylesheet" type="text/javascript">
This is the pages code
div data-role="page" id="indexpage" data-theme="e">
<div data-role="header" data-theme="b">
<h1>S-Select</h1>
</div>
<div data-role="content">
<div class="row">
Schools
</div>
</div>
</div>
<div data-role="page" id="schoolpage" data-theme="e">
<div data-role="header" data-theme="e" data-position="fixed">
Back
<h1>Header</h1>
</div>
<div data-role="content">
school page
</div>
I also have a javascript code that should show the alert when schoolpage is loaded after the click of school button(#school) in the index page
The script is saved as new.js
$("#schoolpage").on("pageshow", function(){
alert("hello");
});
I have also tried
$("#school").on("click", function(){
alert("hello");
});
But both don't work
$("#schoolpage").on("tap", function(){
alert("hello");
});
Does the above code solve your problem?
Possible related error from firebug: ... Cannot call methods on listview prior to initialization; attempted to call method 'option'
I am making this app that requires you to type the answer of a certain ´level´ to go to the next one. The answer is in a list and should only display on exact match for the search. Below is my html for the first two pages and my javascript for hiding the answer untill exact match is provided.
However it ONLY works on the first view (page) and doesn´t work on the second, third, fourth and so on! I really spent a loooong time trying to fix this and I am lost. The only thing that worked for me so far was a prefetch-data="true", but it only works to some extent and stops working after page 3. Other then that I´ve tried to implement many solutions I found here and there but none do what I want. I hope there is some simple thing I am doing wrong.
Why does the script only run on the first view and how do I fix it?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>PARestaurant</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="style" href="images">
<style type="text/css"></style>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- Page Index
Home Page
Level Two
Level Three
Level Four
-->
<!-- -----------------------------------------------------------Home Page----------------------------------------------------------- -->
<div data-role="page" id="232114125125124124" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2>Ready when you are!</h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true"
data-filter-reveal="true" data-inset="true"
data-filter-placeholder="">
<li data-filtertext="Green">You are a genius!</li>
</ul>
</div>
</div>
<div id="blue"></div> <h2>+</h2> <div id="yellow"></div>
</div>
<div data-role="footer" align="center">
<h1>Level 1</h1>
</div>
</div>
<!-- -----------------------------------------------------------Level Two----------------------------------------------------------- -->
<div data-role="page" id="32432532462362345325235235" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2> You know what to do! </h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-filter-placeholder="">
<li data-filtertext="Level 1">Click me to go back!</li>
<li data-filtertext="Level 3">Up you go!</li>
<li data-filtertext="Level 4">You have to struggle a bit</li>
<li data-filtertext="Level 5">Not so fast</li>
<li data-filtertext="Level 6">No No NO!</li>
<li data-filtertext="Level 7">Stop it...</li>
</ul>
</div>`enter code here`
<div><p>Where do you wanna go?<p></div>
</div>
</div>
<div data-role="footer" align="center">
<h1>Level 2</h1>
</div>
</div>
JAVASCRIPT BELOW
exactMatch = function( text, searchString ) {
return !( text.toLowerCase() == searchString );
};
$(function () {
$(".whatever").listview('option', 'filterCallback', exactMatch);
});
}
Instead of
$(function () {...
Try something like this:
$(document).on( "pageinit", function( e ) {
$(e.target).find(".whatever").listview('option', 'filterCallback', exactMatch);
});
pageinit runs once as each page you visit is initialized for the first time.
I'm new to this jQM stuff, as well as AJAX.
I have a site that keeps a static header and footer, and replaces #mainContent div with external .html/.php pages.
What I am finding is that when I click one of the nav-bar tabs (included in the header), and the #mainContent is replaced with another page, the jQuery Mobile-styling (of buttons, drop-down menus, etc) does not load right away.
Initially the default-style of buttons appears, then (if AJAX loads) a second later the page does a 'refresh-type blink', and the buttons are replaced with the jQM styled-versions.
Occasionally I get stuck with the AJAX 'loading circle', and the buttons retain their original style until the 'nav-bar link' is pressed again.
I know there's a perfectly good reason for this.
Research indicated that using "$(document).ready(function() { .... });" is not ideal for jQM. I replaced this in my navigation-script with "$(document).bind('pageinit', function() { .... });", which didn't really make a difference (though the navbuttons still work).
Here is my basic script initialization for my index.php
<!DOCTYPE html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="noteVote">
<!-- HEADER -->
<div data-role="header" align="middle" class="header">
<img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- NAVBAR -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
<!-- /NAVBAR -->
</div>
<!-- /HEADER -->
<!--
This is the MAIN This is where the contents will be replaced
-->
<div data-role="content" class="ui-content" id="mainContent">
<div class="main">
<p/>
content here.\
</div>
</div>
<!-- /MAIN -->
<!-- FOOTER -->
<div data-role="footer" class="footer" id="footer">
<?php
require_once('../account.php');
if ($account == "_")
{
echo "Not logged in";
} else {
echo "Logged in as " . $account;
}
?>
</div>
<!-- /FOOTER -->
</div>
<!-- /INDEX -->
<script src="./scripts/navScript.js"></script>
</body>
</html>
My navScript.js:
$(document).bind('pageinit', function() {
$("#coursesButton").on("click", function(e) {
//e.preventDefault();
//alert('courses');
$("#mainContent").load("./pages/courses.html");
});
$("#searchButton").on("click", function(e) {
//e.preventDefault();
//alert('search');
$("#mainContent").load("./pages/search.html");
});
$("#submitButton").on("click", function(e) {
//e.preventDefault();
//alert('submit');
$("#mainContent").load("./pages/submit.html");
});
$("#accountButton").on("click", function(e) {
//e.preventDefault();
//alert('account');
$("#mainContent").load("./pages/accountPage.php");
});
});
And then here is one of my external pages loaded. This is where the button-styling doesn't load properly... (search.html):
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="content" class="ui-content" id="mainContent">
<div class="wrap">
<div class="main">
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<form method="POST" action="./search_result.php">
<legend><h3>Course:</h3></legend>
<select name="course" id="customSelect">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
<option value="COMP2121">COMP-2121</option>
<option value="COMP2510">COMP-2510</option>
<option value="COMP2526">COMP-2526</option>
<option value="COMP2714">COMP-2714</option>
<option value="COMP2721">COMP-2721</option>
</select>
</fieldset>
<p/>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h4>Type:</h4></legend>
<input type="radio" name="type" value="lec" id="lec"/>
<label for="lec">Lecture</label>
<input type="radio" name="type" value="lab" id="lab">
<label for="lab">Lab</label>
<input type="radio" name="type" value="*" id="both" checked="checked">
<label for="both">Both</label>
<p/>
<input type="submit" value="Go">
</fieldset>
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js"></script>
</body>
</html>
If you could give me a pointer as to why it takes a second to 'refresh' before the jQuery-Mobile style over-rides that of the standard HTML5, I'd greatly appreciate it.
I have a feeling it is due to the scripts/styles being loaded twice (ie in the index.php and the search.html ), but if I do not load them in each page, then the buttons do not get stylized...
Though not really affecting basic functionality, it does give the web-app the appearance of really lagging.
Cheers.
The problem is you are not initializing the content you are loading via Ajax. When you load external data dynamically, you need to manually initialize any jQuery Mobile's "widget".
All you need is to call .enhanceWithin() on $("#mainContent") after data is successfully loaded. Hence, you need to use .load()'s callback function to initialize those elements.
$(document).on('pagecreate', "#noteVote", function () {
$("#coursesButton").on("click", function (e) {
e.preventDefault();
$("#mainContent").load("URL", function () {
$(this).enhanceWithin();
});
});
});
Demo (1) - Code
(1) Click "Courses" or "Search" buttons
I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o
Here's my code:
<div id="tabs">
<div id="overview">
Overviews
</div>
<div id="gallery">
Gallery
</div>
</span>
<div id="reviews">
Reviews
</div>
</div>
Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.
How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?
Thank you so much in advance!! :)
P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/
Quick example:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
Update
In regards of your application:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>