I am using PanZoom.js with jQuery Mobile 1.4.
So I have 2 html pages. 1st one index.html & 2nd one is instruction.html. I have placed two jQuery page on my second html. 1st jQuery page works fine, but the second one doesnt. If I hit refresh, it works find. That means, it's not loading the external script.
What shall I do?
My codes at below:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<html manifest="app.manifest">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PTM 2013</title>
<link href="resources/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="resources/css/ptm.css" rel="stylesheet" type="text/css">
<link href="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="resources/js/respond.min.js"></script>
<script src="jquery.mobile-1.4.0/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<!-- JQuery Mobile Theme -->
<link rel="stylesheet" href="resources/css/themes/ryco.css" />
<link rel="stylesheet" href="resources/css/themes/jquery.mobile.icons.min.css" />
<!-- /JQuery Mobile Theme -->
<!-- apple stuffs -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="resources/icon/icon-144.png">
<link rel="apple-touch-icon" sizes="76x76" href="resources/icon/icon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="resources/icon/icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="resources/icon/icon-152.png">
<!-- /apple stuffs -->
<!-- pinch zoom -->
<link rel="stylesheet" href="resources/pinchzoom/pinch-zoom-style.css" />
<style type="text/css">
div.pinch-zoom, div.pinch-zoom img {
width: 100%;
-webkit-user-drag: none;
}
</style>
<script src="resources/pinchzoom/pinchzoom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {});
});
})
</script>
<!-- /pinch zoom -->
</head>
<body>
<div class="gridContainer clearfix">
<div id="full-wide">
<div data-role="page" id="instruction-page" class="slide">
<!-- Slide Page -->
<script>
$(document).on("pageinit","#instruction-page",function(){
$("test").on("swiperight",function(){ //put 'div' in 'test'
/* $("span").text("Swipe detected!");*/
$.mobile.changePage( "index.html", { transition: "none", changeHash: false });
});
});
</script>
<!-- /Slide Page -->
<div data-role="header" data-position="fixed">
<a class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext" href="index.html">Home</a>
<h1>INTRODUCTION</h1>
Menu </div>
<div data-role="content" >
<span> </span>
<div class="pinch-zoom">
<img src="resources/images/introduction/p-1.jpg"> </div>
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="header"> Icon only
Icon only
<h1> </h1>
</div>
</div>
<!-- Popup menu -->
<div class="ui-popup-container ui-popup-hidden" id="popupMenu-popup">
<div data-role="popup" id="popupMenu" class="ui-popup ui-overlay-shadow ui-corner-all" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin" data-dismissible="true">
<ul data-role="listview">
<li><img class="ui-li-icon" src="resources/images/thumblins/intro-cover.gif">Introduction</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/hoses-cover.gif">Hoses</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/couplings-cover.gif">Couplings</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/adaptors-cover.gif">Adaptors</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/accessories-cover.gif">Accessories</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/filters-cover.gif">Filters</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/technical-cover.gif">Technical</li>
<li><a class="ui-icon-info ui-btn ui-btn-icon-left" href="instruction-app.html">Instruction</a></li>
<li><a class="ui-icon-refresh ui-btn ui-btn-icon-left" href="javascript:refreshPage()">Refresh Page</a></li>
</ul>
</div>
</div>
<!-- /popup menu -->
</div>
<!-- /Page1 -->
<!-- /Page2================================================================= -->
<div data-role="page" id="page2" class="slide">
<div data-role="header" data-position="">
<a class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext" href="index.html">Home</a>
<h1>INTRODUCTION</h1>
Menu </div>
<div data-role="content" >
<span> </span>
<!-- pinch zoom -->
<link rel="stylesheet" href="resources/pinchzoom/pinch-zoom-style.css" />
<style type="text/css">
div.pinch-zoom, div.pinch-zoom img {
width: 100%;
-webkit-user-drag: none;
}
</style>
<script src="resources/pinchzoom/pinchzoom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {});
});
})
</script>
<!-- /pinch zoom -->
<div class="pinch-zoom">
<img src="resources/images/introduction/p-2.jpg"> </div>
</div>
<div data-role="footer" data-position="" data-theme="b">
<div data-role="header"> Icon only
Icon only
<h1> </h1>
</div>
</div>
<!-- Popup menu -->
<div class="ui-popup-container ui-popup-hidden" id="popupMenu-popup">
<div data-role="popup" id="popupMenu" class="ui-popup ui-overlay-shadow ui-corner-all" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin" data-dismissible="true">
<ul data-role="listview">
<li><img class="ui-li-icon" src="resources/images/thumblins/intro-cover.gif">Introduction</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/hoses-cover.gif">Hoses</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/couplings-cover.gif">Couplings</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/adaptors-cover.gif">Adaptors</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/accessories-cover.gif">Accessories</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/filters-cover.gif">Filters</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/technical-cover.gif">Technical</li>
<li><a class="ui-icon-info ui-btn ui-btn-icon-left" href="instruction-app.html">Instruction</a></li>
<li><a class="ui-icon-refresh ui-btn ui-btn-icon-left" href="javascript:refreshPage()">Refresh Page</a></li>
</ul>
</div>
</div>
<!-- /popup menu -->
</div>
<!-- /Page1 -->
</div>
</div>
</body>
</html>
Related
I want to use jquery image annotation plugin with foundation tabs for multiple images. Annotation thing is working fine for the first image, but I can't switch to other tabs. I have jquery no conflict also for addressing the plugin conflict problem but nothing is working. Here is my code
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tabs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="https://annotorious.github.io/latest/annotorious.css" />
<script type="text/javascript" src="https://annotorious.github.io/latest/annotorious.min.js"></script>
</head>
<body>
<h2>Tabs Example</h2>
<ul class="tabs" data-tabs id="tabs_example">
<li class="tabs-title is-active">Player 1</li>
<li class="tabs-title">Player 2</li>
<li class="tabs-title">Player 3</li>
<li class="tabs-title">Player 4</li>
<li class="tabs-title">Player 5</li>
</ul>
<div class="tabs-content" data-tabs-content="tabs_example">
<div class="tabs-panel is-active" id="tab1">
<img id="myImage" class="annotatable" src="pic1.jpg" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" /></div>
<div class="tabs-panel" id="tab2">
<img id="myImage1" class="annotatable" src="pic2.jpg" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" />
</div>
<div class="tabs-panel" id="tab3">
<p>Third Player</p>
<p>Shane Warne</p>
</div>
<div class="tabs-panel" id="tab4">
<p>Fourth Player</p>
<p>Shaun Pollock</p>
</div>
<div class="tabs-panel" id="tab5">
<p>Five Player</p>
<p>Adam Gilchrist</p>
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
<script>
jQuery.noConflict();
jQuery(function() {
jQuery("#tabs-1").tabs({
activate: function(event, ui) {
jQuery('img.annotatable', ui.newPanel).each(function() {
anno.makeAnnotatable(this);
});
}
});
});
</script>
</body>
</html>
Please help me out.
You need to reorganise your scripts - css first then js (for js get jquery first, jquery UI, foundation) - this should work
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<link type="text/css" rel="stylesheet" href="https://annotorious.github.io/latest/annotorious.css" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<script type="text/javascript" src="https://annotorious.github.io/latest/annotorious.min.js"></script>
I have an <input> with type Search and class as SearchBox. I want this input to toggle when I click an img of class Search. I've connected my html page to jQuery 1.11.1 available from ajax.googleapis.com and this is my .js file:
$(document).ready(function () {
$(".Search").click(function () {
$("input.SearchBox").toggle();
});
});
I've hidden the SearchBox using CSS, like this:
.SearchBox {
display: none;
}
But it does not work. Can anyone help? Thanks in advance.
the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Connet, connect, consultation online">
<meta name="description" content="Website of Connet.">
<meta name="author" content="Connet Developement Team">
<meta http-equiv="content-language" content="en-US">
<title> Connet. Connect. Through the internet. </title>
<link rel="favicon" href="favicon.ico" />
<link rel="stylesheet" href="/page_files/css/Main.style.css" type="text/css"/>
<script src="/page_files/js/Default.interactivity.js"></script>
<script src="/page_files/js/Default.proccessing.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script src="/page_files/js/jQuery3.0.0.js"></script>-->
<script src="/page_files/data/Default.data.js" ></script>
<script id="roughScript">
</script>
<noscript>
We're sorry, but looks like we can't
access our scripts. Refreshing might fix it.
Check yor internet connection. If it's our
fault we'll usually have something about it
in our blogs. Contact us if problem persists.
</noscript>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="Wrapper">
<nav>
<img src="bf" alt="tbf"/>
<ul class="NavClass">
<li>
<a class="NavLink" onclick="location.reload();">
<img class="NavImg" src="/page_files/media/home-icon.png" alt="Home" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Contact.html');">
<img class="NavImg" src="/page_files/media/contact-icon.png" alt="Contact" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Careers.html');">
<img class="NavImg" src="/page_files/media/careers-icon.png" alt="Careers" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Conroot.html');">
<img class="NavImg" src="/page_files/media/consult-icon.png" alt="Enter Consulation" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Loginpage.html');">
<img class="NavImg" src="/page_files/media/myspace-icon.png" alt="Login" />
</a>
</li>
<li>
<img class="Search" src="/page_files/media/search-icon.png" alt="Search" />
</li>
<li>
<input class="SearchBox" type="search" />
</li>
</ul>
</nav>
<header>
</header>
<div class="Sections">
<section class="TopSec">
</section>
<section class="MidSec">
</section>
<section class="LowSec">
</section>
<section class="SignIn">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>
It was working fine until a while ago. I did not change anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<header>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">11:00 AM</li>
<li role="presentation">4:00 PM</li>
<li role="presentation">9:00 PM</li>
</ul>
</header>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="elevenam">
<div class="row">
<?php include_once 'elevenam.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="fourpm">
<div class="row">
<?php include_once 'fourpm.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="ninepm">
<div class="row">
<?php include_once 'ninepm.php'; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
Is there something wrong with twitter bootstrap??
my js used to be link
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
from their site but it stopped working so i tried the downloaded one and it still doesn't work.
I notice in their demo, it wasn't working either.
because
`https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css%22%20integri ty=%22sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7`
is no more public. Upload a file on your server and load the css from there.
Hi I am new for jquery mobile.I gt two page in my application. Please c the code below
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<!-- <script src="js/jquery.js"></script>-->
<!-- <script src="js/globalsetting.js"></script>-->
<!-- <script src="js/jquery.mobile-1.4.2.min.js"></script>-->
<!-- <script src="js/cordova.js"></script>
<script src="js/Calendar.js"></script>
<script src="js/Message.js"></script>-->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="landingPage">
<div data-role="content">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<div id="logoCenter">
<img src="images/smartrealtor_logo_large#x2.png" alt="" width="300" height="310" class="scale-with-grid" />
</div>
<div class="ui-grid-a">
<!-- Click here to register page -->
<a href="register.html" class="ui-btn ui-corner-all ui-shadow" >Register</a>
</div>
<div class="ui-grid-a">
Sign in
</div>
</div>
<!-- /login/register -->
</div>
</div>
<!-- Login Screen -->
<!-- /login screen -->
<!-- Forget Password Screen -->
<!-- /forget pass screen -->
<!-- Register Screen -->
<!-- /register screen -->
<!-- Team Leader Register Screen -->
<!-- /register screen -->
</body>
</html>
Register.html
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="loginPage">
<div data-role="content">
<div data-role="tabs" id="tabs" class="transparentBg">
<div data-role="navbar" data-grid="a" class="topNav topfilter">
<ul id="navfilter">
<li>Agent</li>
<li>Team Leader</li>
</ul>
</div>
<div id="nAgent" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="nTeamleader">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
</div>
</div>
My tabpanel in inside the register.html . But it not working nw. The tab panel doesn't refresh the content. anyone gt solution?
I'm working with jQuery Mobile pop ups and for some reason when I load the page one or more of the pop ups is not hidden. I have tried closing the pop ups on page init but this does not seem to work. Can anyone explain what is causing this.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pop Up</title>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css"
/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"
/>
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css"
rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"
rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.js"></script>
</head>
<script>
$(document).bind("pageinit", function () {
$('#popup1').popup('close');
$('#popup2').popup('close');
});
</script>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<div class="ui-grid-a" style="margin:15px 0px">
<div class="ui-block-a">
Pop 1
</div>
<div class="ui-block-b">
Pop 2
</div>
</div>
<!--grid-->
</div>
<!-- /header -->
<div data-role="content">
<div data-role="popup" id="popup1" data-theme="a">
<ul data-role="listview" id="cityList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li name='test value' value="us">11</li>
<li name='test value' value="us">12</li>
<li name='test value' value="us">13</li>
<li name='test value' value="us">14</li>
</ul>
</div>
<div data-role="popup" id="popup2" data-theme="a">
<ul data-role="listview" id="genreList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
<div class="content-primary"></div>
<!--content-primary-->
</div>
<!--content-->
<div data-role="footer" class="footer-docs" data-theme="c" data-position="fixed"></div>
<!--footer-->
</div>
<!-- /page -->
</body>
The Inclusion of the following external libraries fixed the problem:
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/css/themes/default/jquery.mobile-1.2.0-alpha.1.css" />
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/css/jqm-docs.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
I had similar issue and got it solved by initiating the popup after document ready.
$(document).ready(function(){
$( "#popupDialog" ).popup();
});