I want to used popup to show signup form. For that purpose I have used jQuery mobile's popup.
So when I added jQuery mobile CSS and JavaScript they have affected the whole page. All the text, menus, links and everything is changed by it.
How I can restrict the jQuery Mobile styles and JavaScript to work on that popup only?
I have completed the whole design so I can't change the styles one by one again.
Here is my code
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
and here is my HTML
Delete page...
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Signup</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to Signup</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
</div>
Change the Pattern. Please bring the mobile CSS file before your custom CSS file. Will change it completly.
Cheers!
Related
I'm trying to apply Fancybox 2.1.5 to a website and am only able to get it to partly work. The navigation buttons and close button will not show up at all. This is the coding for the html page that contains the website's images:
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<div class="imgHolder"><a class="fancybox" rel="group" href="img/gallery/set1/look1_lg.jpg"><img id="look 1: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look1_thumbnail.jpg" data-href="img/gallery/set1/look1.jpg" src="img/galleryPrototype3/semiPixel.png" alt="look 1" width="1060" height="800"></a></div>
<div class="imgHolder"><a class="fancybox" rel="group" href="img/gallery/set1/look2_lg.jpg"><img id="look 2: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look2_thumbnail.jpg" data-href="img/gallery/set1/look2.jpg" src="img/galleryPrototype3/semiPixel.png" alt="" width="578" height="800"></a></div>
</body>
And this is the basic Fancybox jQuery script that I want to use:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
When the Fancybox jQuery script is inserted into the HTML document and I click on look1.jpg, a grey translucent overlay appears, but no image.
When the Fancybox jQuery script is completely removed from the HTML document and I click on look1.jpg, the browser window turns an opaque dark grey with look1_lg.jpg displayed in the center, but no navigation arrows or close button.
There are some other posts on the same issue that I have used to try and problem solve my issue. From those posts I've double checked the following and everything seems to be set up correctly: The Fancybox sprite and overlay png files are located in the same folder as the Fancybox CSS document, the Fancybox jQuery source code and stylesheet are linked up correctly, and the anchor tags for the 2 images both have "rel=group" applied to them.
I am wondering if the way the site is coded overall has something to do with it? The site is also built with AJAX and bootstrap. The HTML page referenced above that contains the website's images is loaded into the website index page via AJAX. As a test I put the coding for that page in a standalone HTML file and fancybox worked perfectly, which makes me think that my guess is correct. If this is the case though, I have no idea how to fix the problem. For reference, this is the code for the website index page:
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/galleryPrototype3.css">
<link rel="stylesheet" href="css/photoswipe.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/device.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="webSiteLoader"></div>
<div id="glob-wrap">
<!--menu: This is the main navigation. It's been simplified here to include only the piece of navigation that refers to the html page referenced above-->
<nav id="mainNav" data-follow="location" data-type="navigation">
<ul>
<li>people</li>
</ul>
</nav>
<div class="_cover"></div>
<!-- gallery holder: this holds the website's image gallery -->
<section id="galleryPrototype3"></section>
<!-- content holder -->
<div id="content_pages" data-follow="location" data-type="switcher" data-flags="ajax"></div>
<!-- category pages: This has been simplified to include only the line that refers to the html page referenced above -->
<div id="category_pages" data-follow="location" data-type="switcher">
<div data-id="people" data-source="peopleCategory.html"></div>
</div>
</div>
</body>
</html>
I also tried placing the Fancybox jQuery script in the website index page rather than in the html page that contains the website's images. In that case as well when I click on an image the browser window turns an opaque dark grey with look1_lg.jpg displayed in the center, but no navigation arrows or close button.
I'm at a loss, so any help will be appreciated!
I am working on jquery mobile page navigation and facing with strange behaviour of JQM functions.I have two files main.html,home.html1.Main.html
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.2/jquery.mobile-enter code here1.4.2.min.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="page1">
<div data-role="header" data-position="fixed" id="firstHeader">
<a href="#" onclick="$.mobile.pageContainer.pagecontainer('home.html'{transition:'slide',reverse:true});" class="ui-btn ui-corner-all
ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
<h1>Customer Reg. 1</h1>
Next
</div>
</div>
</body>
</html>
home.html
<html>
<head>
</head>
<body>
<div data-role="page" id="page1">
<link rel="stylesheet" type="text/css" href="../css/cust_reg.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
Go To Page 2
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
Go Back To Page 1
</div>
</div>
</body>
</html>
After clicking on "Home" of main.html it redirecting to home.html as
expected. but after clicking on "Go To Page 2" of home.html(redirected page) it is not redirecting
to "page 2" though it is already in home.html. I have tried to use
"$.mobile.pageContainer.pagecontainer" and "$mobile.changePage" but it
is not working
Any solution?
When using Single Page Model, you need to understand that jQuery Mobile loads ONLY first data-role=page in each file.html. It neglects everything else outside that div.
If you want to mix between Single Page and Multi-Page Models, you need to navigate to other pages that contain multi-pages without Ajax.
For example, navigating from main.html to home.html with Ajax enabled, jQM will load page1 div only. If you want to load all pages within home.html, you have to disable ajax this way.
Home
Note that you will lose transition effect when Ajax is disabled.
My overall intention is to over-ride the .click function of an element with a certain id, so that a button will replace only the contents of a specific element (not the whole page).
I am under the impression that I am running into trouble when embedding the script file, or in some of the coding in the script file.
I have come to this conclusion due to the fact that when my HTML and JS files are pasted into their respective windows on JSFiddle.net, that it works.
However, when I try to run the file from localhost, it is as though my .js file is not over-riding the .click function.
Any help is appreciated.
<!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="./scripts/navScript.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- COURSES page -->
<div data-role="page" id="noteVote">
<div data-role="header" align="middle" class="header">
<img src="./images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- This is the 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>
</div>
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="coursesContent">
Main section
</div>
<!-- FOOTER -->
<div data-role="footer" class="footer">
SomeText
</div>
</div>
<!-- /COURSES -->
<!-- SEARCH -->
<div data-role="page" id="search">
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="searchContent">
<h1>Search Section</h1>
</div>
</div>
</body>
</html>
I believe I have linked the scripts in the correct order: JQuery, my_custom, JQuery Mobile.
So is it in my custom script that there is the error?
$("#searchButton").click( function() {
$('#coursesContent').html( $('#searchContent').html() )
});
If there is a better/easier way to do this, please let me know.
I have searched the internet for solutions, and I found that the order in which the scripts are loaded is important. I also tried inserting my script code inside a "$(document).bind("mobileinit", function(){ " function, which did not yield the results I'd hoped for.
I'm obviously quite new to JavaScript, and JQuery.
Thanks for your help, people.
You're right - order of the script is important (all lib's have to be loaded before you can refer to them).
You may use alternative javascript for this purpouse:
$(document).ready(function()
{
$(document).on("click","#searchButton",function(e)
{
e.preventDefault();
alert('And now what? Click will not take me anywhere...');
$('#coursesContent').html($('#searchContent').html());
});
});
Try to put this code at the bottom of the page (before </body>) and check browsers console for any other JS errors.
This is working example: http://jsfiddle.net/3Qaq7/1/
My problem is with Jquery mobile's changePage(), let me start out by saying i know there's a bunch of other post about this issue, but i have tried all the solutions without any luck so that's why i'm now asking for help.
I've build a Phonegap project, where each screen is = a .html file. i got my index.html that loads all the scripts needed for the entire app. Then my index.html loads a new page with $.mobile.changePage(). but when this happens the next page do'sent have any script's or css's attached to it why?
This if my index.html
<!--index page used to find out if the user should see the login or welcome page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-2.0-original.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-fa.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--Used to make sure theres as little delay on old devises as possible-->
<script src="buttonTapDelayJS.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="loginJS.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<script src="javaIndex.js" type="text/javascript"></script>
<script src="myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<!--Loads the css for the menu-->
<link href="menuStyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
var checkUser="admin";
function onDeviceReady() {
/*if the stored username is = the correctusername, it loads the welcome page if not it loads the login*/
if(window.localStorage.getItem("user") === checkUser){
$.mobile.changePage("welcome.html",{transition:"slide"});
//window.open("welcome.html", "_self");
} else {
//window.open("login.html", "_self");
$.mobile.changePage("login.html",{transition:"slide"});
}
}
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>
This is my login page
<!--Login page-->
<!DOCTYPE html>
<html>
<body onload="loadLogin();">
<!--Creates all content you see on the screen-->
<div data-role="page" id="login">
<div data-role="content">
<ul data-role="listview">
<div align="center" data-role="content">
<img src="icon.png" alt="">
</div>
<div data-role="content">
<label for="textinput">Indtast brugernavn</label>
<input type="text" name="textinput" id="textinput" value=""/>
</div>
<div data-role="content">
<label for="passwordinput">Indtast adgangskode</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</span> </div>
<div data-role="content">
<div>Login</div>
</div>
<div data-role="content">
<div></div>
</div>
</ul>
</div>
</div>
</body>
</html>
As stated in the start, my problem is that non of my functions on my login page works to give an example of that i got my infoButton that runs onClick="infoPopup(); and this function makes a popup navigator.notification.alert("Message", null, "Info", "OK"); But it do'sent show anything when i press it.
Am i loading my scripts wrong or whats wrong, any help would be really much appreciated?
EDIT 1:
If i copy all my index.html to all other pages what happens is this. my index.html links to my login.html correct. On the login page my onClick="infoPopup(); dosent work, but my onClick="saveLogin();myFunction();" works sort of. my login info does get saved but in my saveLogin(); i got a navigator.notification.alert(); but the alert aint popping up. i know that all of my functions work because they did when i used window.open(); instead of changePage. And the reason why i changed was because with window.open(); i cant get the jquery page transitions Any ideas?
EDIT 2:
Don't really know what i did but works now:) thanks for the reply's.
Even though i tired this alrdy what worked for me was to move all javascripts and css's to the index.html.
jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page" element and its descendants and pulls that into the current dom.
So any scripts in the of the document will not be included.
I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.
Also, you can place JavaScript code inside the data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.
Repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will recreate head section.
simple change like -
$.mobile.changePage("welcome.html",
{transition:"slide"}
);
I have a project with two html pages (bmi.html and 7min.html) and some javascript... I use footer to navigate between the pages.
1st issue: first time run the 7min.html, navigates to bmi.html using footer and the javascript in bmi doesn't work!
2nd issue: first time run the bmi.html, navigates to 7min.html and again back to bmi. Javascript works fine but after closing the popup dialog returns to 7min page.
Below is my code.
7min: http://jsfiddle.net/Rwf5G/
bmi: http://jsfiddle.net/snKyK/
<html>
<head>
<meta charset="utf-8">
<title>Body Trainer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"></script>
</head>
<body>
<div data-role="page" id="7min-page" class="type-interior" >
<div data-role="header" data-position="fixed" data-id="appHeader" >
<h1>Workout</h1>
</div><!-- /header -->
<div data-role="content" >
<h4>Brief</h4>
<p>
Some bla bla...
</p>
</div>
<div data-role="footer" data-id="appFooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
BMI
</li>
<li>
7min
</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
(I am sorry that I use jsfiddle, I had some problems to add the code here.)
First issue:
jQuery Mobile uses Ajax Navigation system to load pages and change views/pages. When you start with bmi.html, all HTML tags are loaded. When you navigate from bmi.html to 7min.html, jQuery Mobile loads ONLY <div data-role="page"></div> and contents inside it. It neglects other HTML tags outside data-role=page div.
Solution: Place JS code inside <div data-role="page"></div>.
Option: To navigate without AJAX, add rel="external" or data-ajax="false" to anchor tag. Doing this, will load pages normally, however, you will lose page transition effect.
Second issue:
Add this attribute data-history="false" to <div data-role="popup"> div.