I have set up photoswipe for mobile device, it's working fine apart from the photos keep Flicker when swipe on the phone, but its working fine on computer. any idea how to fix please? cheers
the example will be:
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test/title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<link href="http://computersforpeople.info/websites/scripts/jquery/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript">
(function(window, $, PhotoSwipe)
{
$(document).ready(function()
{
$("#gallery a").photoSwipe(
{
enableMouseWheel: false,
enableKeyboard: false
});
$("#gallery a:first").click();
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
<script type="text/javascript">
$('a').live('click', function() {
var $this = $(this);
if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
$(document.getElementById( $this.attr('href') )).remove();
});
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1 style="white-space:normal">Apartment Specialists</h1>
</div>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>Feature Apartments</li>
<ul data-role="listview" data-filter="false" id="test-more">
<div id="gallery" >
<a href="http://prod.computersforpeople.info/media/2012/12/03/222204_46921.jpg?m=resize&o[geometry]=350x262&s=732bf1b52c70b0fc" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222204_46921.jpg?m=resize&o[geometry]=120x90&s=e4501ebdfd60d8db" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222208_46921.jpg?m=resize&o[geometry]=350x262&s=293a3a114859a240" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222208_46921.jpg?m=resize&o[geometry]=120x90&s=c599ece1364cfafe" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222213_46921.jpg?m=resize&o[geometry]=350x262&s=da0802cfe1060df4" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222213_46921.jpg?m=resize&o[geometry]=120x90&s=f4b0ffaea30f6a2b" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222218_46921.jpg?m=resize&o[geometry]=350x262&s=a54d15c8570f1d2b" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222218_46921.jpg?m=resize&o[geometry]=120x90&s=767b0330b9cf2f1e" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222223_46921.jpg?m=resize&o[geometry]=350x262&s=9e2db11b4d87f798" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222223_46921.jpg?m=resize&o[geometry]=120x90&s=e9f8871520333fbe" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222227_46921.jpg?m=resize&o[geometry]=350x262&s=2cd999589c41d34d" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222227_46921.jpg?m=resize&o[geometry]=120x90&s=1af459b7ecc85dbe" alt="" /></a>
</div>
<br />
<p align="center">
<font face="Arial, Helvetica, sans-serif">Back</font></p>
</ul>
<br />
<li>All Apartments</li>
</ul>
<div data-role="footer" align="center">
<h6 style="font-size: 55%;font-family:calibri">
RE/MAX Leaders Real Estate (1987) Ltd Licensed Under REAA 2008</h6>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
I just sort it. use code.photoswipe-3.0.5.min.js rather the version of 3.0.4. thanks
Related
I'm working on reverse engineering a User Interface that is functioning minus a few bugs. It was coded in HTML, CSS, and JavaScript and pulls data via a REST API. The UI is set up in a Windows environment.
When I was looking through the index.html home page for the UI, there is quite a bit of Angular.js used in the interface, yet the script that calls angular.js is commented out. I'm confused about how angular.js could run on the server without being called. Is there some way to reference or parse angular.js on a server without referencing it in the HTML without calling it like you normally would?
I'm confused. Any ideas would be helpful. I included the index.html file below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<meta http-equiv="cache-control" content="no-cache, no-store"/>
<meta http-equiv="expires" content="-1"/>
<meta http-equiv="pragma" content="no-cache"/>
<link rel="icon" href="content/images/favicon.png"/>
<!--<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>-->
<!--<script src="/js/app.js"></script>-->
<link rel="stylesheet" type="text/css" href="content/icomoon/style.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css?0.0.0.164">
<link rel="stylesheet" type="text/css"
href="bower_components/bootstrap-dialog/dist/css/bootstrap-dialog.min.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/jquery-ui/themes/base/jquery-ui.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/spectrum/spectrum.css?0.0.0.164">
<link rel="stylesheet" type="text/css"
href="custom_components/eonasdan-bootstrap-datetimepicker/css/bootstrap-datetimepicker.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick-theme.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="custom_components/loader-display/loadDisplay.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/keyboard.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/noty.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="custom_components/ladda-bootstrap/ladda-themeless.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/daikin_mis_hmi.css?0.0.0.164">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- if logged in-->
<button ng-if="!isHideMainControls" type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">ToggleNav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ng-click="goHome()">
<img src="content/images/logo.png">
</a>
<span ng-if="!isHideMainControls" class="visible-xs visible-sm" alarm-indicator></span>
<span ng-if="!isHideMainControls" class="visible-sm" dm-keyboard-widget></span>
<span ng-if="!isHideMainControls" class="visible-xs visible-sm" network-mode></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden-xs hidden-sm"><span
ng-if="!isHideMainControls" network-mode></span></li>
<li class="hidden-xs hidden-sm">
<span ng-if="!isHideMainControls" alarm-indicator></span>
<div dm-keyboard-widget></div>
</li>
<!-- if logged in-->
<li class="divider-vertical hidden-xs hidden-sm"></li>
<li ng-class="{'display-none': !isApplicationLoaded}" class="display-none">
<div ng-cloak class="logged-in-user-info" data-toggle="">
<div class="user-name">
{{sessionUser.firstName}} {{sessionUser.lastName}}
</div>
<div ng-if="!isHideMainControls" ng-hide="sessionUser.isGuest" class="log-out">
<a ng-click="logout();" href="#"><span class="glyphicon glyphicon-log-out"></span>{{generalLabels.genlogout}}</a>
</div>
<div ng-show="sessionUser.isGuest" class="log-out">
<a ui-sref="login" href="#"><span class="glyphicon glyphicon-log-out"></span>{{generalLabels.genlogin}}</a>
</div>
</div>
</li>
<li class="visible-xs visible-sm dropdown">
<ul class="submenu" ng-include src="'views/shared-templates/main-menu-items.html'">
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main-wrapper">
<dm-main-menu class="hidden-block-xs hidden-block-sm"></dm-main-menu>
<div style="display: none" id="appFailedLoadMessage"></div>
<div class="wrap-loader" ng-hide="isApplicationLoaded">
<div id="load-background" class="show-background">
<div class="loading-display">
<img class="ajax-loader" src="custom_components/loader-display/img/ajax-loader.gif">
<br>
<div class="display-none">
<img src="content/images/noty/ErrorMessageBackground.png" width="1" height="1" alt=""/>
<img src="content/images/noty/SuccessBackground.png" width="1" height="1" alt=""/>
<img src="content/images/noty/accept.png" width="1" height="1" alt=""/>
<img src="content/images/noty/error_ico.png" width="1" height="1" alt=""/>
<img src="content/images/noty/wrong.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/on_off1.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/on_off2.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/switcher1.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/switcher2.png" width="1" height="1" alt=""/>
</div>
<span></span>
</div>
</div>
</div>
<!-- BreadCrumbs go here-->
<div ng-if="!isHideMainControls" class="breadcrumbs">
<div class="container">
<div ncy-breadcrumb></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div ui-view></div>
</div>
</div>
</div>
</div>
<i class="icon-arrow-up icon-large"></i> {{generalLabels.gentop}}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4 hidden-xs visible-sm visible-md visible-lg text-center-xxs text-center-xs text-left-sm text-left-md text-left-lg">
<!-- Easter Egg - footer double click show current viewport size and version -->
<span class="js-ui-version" style="display:none"></span>
<span class="js-viewport-size" style="display:none"></span>
</div>
<div ng-class="{'display-none': !isApplicationLoaded}"
class="display-none col-sm-4 hidden-xs visible-sm visible-md visible-lg text-center-sm text-center-md text-center-lg">
<a target="_blank" ng-href="{{daikinAppliedLink.url}}">{{daikinAppliedLink.text}}</a>
</div>
<div ng-class="{'display-none': !isApplicationLoaded}"
class="display-none col-sm-4 visible-xs hidden-sm hidden-md hidden-lg text-center-xxs text-center-xs">
<a target="_blank" ng-href="{{daikinAppliedLink.url}}">{{daikinAppliedLink.text}}</a>
</div>
<div class="col-sm-4 visible-xs hidden-sm hidden-md hidden-lg text-center-xxs text-center-xs">
<!-- Easter Egg - footer double click show current viewport size and version -->
<span class="js-ui-version" style="display:none"></span>
<span class="js-viewport-size" style="display:none"></span>
</div>
</div>
</div>
</div>
<script src="../bower_components/fastclick/lib/fastclick.js?0.0.0.164"></script>
<script src="bower_components/requirejs/require.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
//todo workaround fixes the problem with selecting a date on the calendar
FastClick.prototype._needsClick = FastClick.prototype.needsClick;
FastClick.prototype.needsClick = function (target) {
if ($(target).parents('.bootstrap-datetimepicker-widget').length > 0) {
return true;
}
return FastClick.prototype._needsClick.call(this, target);
};
}, false);
}
var scriptsLoadTimeoutSeconds = 60;
require.config({
waitSeconds: scriptsLoadTimeoutSeconds,
baseUrl: './js',
urlArgs: '0.0.0.164'
});
require(["./main"]);
DisplayAppNotLoadedMessage = function () {
document.getElementById('load-background').style.display = 'none';
var errorMessageBlock = document.getElementById('appFailedLoadMessage');
errorMessageBlock.style.display = 'block';
errorMessageBlock.innerHTML = 'The system may be either busy or not currently running, please verify status locally at the System Manager PC or try again later. If the problem persists, refer to IM 1224 for more detailed troubleshooting procedures.';
};
// show error message in case of any resources are not loaded
LoadTimeoutId = setTimeout(function () {
DisplayAppNotLoadedMessage();
}, (scriptsLoadTimeoutSeconds + 30) * 1000);
</script>
</body>
</html>
I figured it out. The index.html file was calling Require.JS, which allows you to asynchronously load your scripts to the home page, but creates some issues in tracking dependencies. It's a JavaScript framework that basically allows you to load up an entire folder of JavaScript files asynchronously.
i'm becoming mad... I would like to add this bar:
(source: bindtuning.com)
(using seattle.master - view)
in a simple custom page created by me.
In my case, I've "index.aspx" in the same folder of "Home.aspx" (the folder is SitePages),
"index.aspx" is a Html5 page w/ css3 and js pages (I uploaded the code just to have a complete post)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%# Page Language="C#" %>
<%# Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=*" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HomePage | Fabio Test's Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server"/>
<link rel="stylesheet" href="../SiteAssets/SitePages/Home/css/main_style.css" type="text/css"/>
<link rel="stylesheet" href="../SiteAssets/SitePages/Home/css/fractionslider.css" type="text/css"/>
<link rel='stylesheet' href='../SiteAssets/SitePages/Home/css/navigation.css' type="text/css"/>
<link rel="stylesheet" href="../SiteAssets/SitePages/Home/css/slider.css" type="text/css" charset="utf-8" />
<script src='../SiteAssets/SitePages/Home/js/jquery.color-RGBa-patch.js'></script>
<script src="../SiteAssets/SitePages/Home/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src='../SiteAssets/SitePages/Home/js/navigation.js'></script>
<script src="../SiteAssets/SitePages/Home/js/jquery.fractionslider.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../SiteAssets/SitePages/Home/js/main.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../SiteAssets/SitePages/Home/js/mosaic.1.0.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.bar2').mosaic({
animation : 'slide' //fade or slide
});
});
</script>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</head>
<body oncontextmenu="return false" onselectstart="return false">
<div id="site_content">
<noscript>Javascript?</noscript>
<div id="top_bar"><br/><br/>
<img id="logo" alt="Logo" src="../SiteAssets/SitePages/Home/img/logo.jpg" />
</div>
<div id="centralign">
<div class="centralDiv_first mosaic-block bar2" id="first_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>MIS</h4><br/>
<p>Management of Information Systems</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_1.jpg" onclick="window.open('#','_self',false)"/></div>
</div>
<div class="centralDiv_first mosaic-block bar2" id="second_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>Finance</h4><br/>
<p>I hope that there are money for sponsorships.</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_2.jpg" onclick="window.open('#','_self',false)"/></div>
</div>
<div class="centralDiv_first mosaic-block bar2" id="third_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>HR</h4><br/>
<p>Human Resources</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_3.jpg" onclick="window.open('#','_self',false)"/></div>
</div>
<div class="centralDiv_first mosaic-block bar2" id="fourth_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>Forms</h4><br/>
<p>Check it out!</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_4.jpg" onclick="window.open('https://uscri.sharepoint.com/Forms/Forms/AllItems.aspx','_self',false)"/></div>
</div>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_1.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_2.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_3.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_4.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_5.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_undefined.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_undefined.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_undefined.jpg"/>
</div>
</div>
</a>
</div><br/><br/>
<div id="footer">For general inquiries, please email</div>
</div>
</body>
</html>
I tried to modify the seattle.master, trying to leave just the top bar (called SuiteBar) and wrote the code in the had tag and in the body, but javascript doesn't work and also there is an overwriting of tags in css files.
I appreciate any suggestion to solve the problem!
Thank you
most probalbly the JS and the css are not referenced correctly.
the code above is a master page. try to use the following
/SiteAssets/SitePages/Home/css/main_style.css just remove the ../
assuming you have a document library called SiteAssets in the rooSite as / is always referring to the rootsite, and you have a folder called SitePages inside this document library and another one under Sitepages called Home ... etc.
if your SiteAssets document library is not in the rootsite and you want to reference it in the current subsite use the directive <%$ SPUrl: ~site/SiteAssets/SitePages/Home/css/main_style.css %>
I work on application in which i need map i worked in map module and in browser it shows correct result but as it is an mobile application so i run it into emulator and the following error occues
Uncaught TypeError: object is not a function at file:///android_asset/www/nav-map.html:3
my html file Nav-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<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/themes/default/jquery.mobile-1.3.0.css">
<script src="js/hsmain.min.js"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" />
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.mode.datebox.js"></script>
<script src="js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="lib/work-space.js"></script>
<script src="lib/config.js"></script>
<script src="lib/userprofile.js"></script>
<script src="lib/loginlogout.js"></script>
<script src="lib/binder.js"></script>
<script src="lib/newsfeed.js"></script>
<script src="lib/harvestdata.js"></script>
<script src="lib/members.js"></script>
<script src="lib/pictures.js"></script>
<script src="lib/properties.js"></script>
<script src="lib/clubnewsfeeds.js"></script>
<script src="lib/jsutility.js"></script>
<script src="lib/weather.js"></script>
<script src="lib/groups.js"></script>
<script src="lib/groupnewsfeeds.js"></script>
<script src="lib/companies.js"></script>
<script src="lib/companynewsfeeds.js"></script>
<script src="lib/map.js"></script>
<script src="lib/searching.js"></script>
<script src="lib/notitfications.js"></script>
<link href="960/jquery-mobile-fluid960.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
#map-canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="ClubMapPage">
<!--header-->
<script>$('#ClubMapPage').on('pageshow',function(){
UserProfile.loadProfile();
Notifications.getTopNotification();
Properties.getClubNameAndImage();
Map.getMap();
})
</script>
<div id="landing-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="container_12 padding5">
<div class="grid_1">
<span class="inline-button floatleft">Back</span>
</div>
<div class="grid_10">
<div class="hs-icon-wrap">
<span class="dropdown inline-button"><a class="hs-request dropdown-toggle showRequestsBtn" data-toggle="dropdown" data-role="button" href="#messages" data-iconpos="notext" >Requests</a>
</span>
<span class="dropdown inline-button"><a class="hs-notification dropdown-toggle showNotificationsBtn" data-role="button" href="#" data-toggle="dropdown" data-iconpos="notext" >Notifications</a>
</span>
</div>
</div>
<div class="grid_1">
<span class="inline-button floatright">Right</span>
</div>
</div>
</div>
<!--contents-->
<div data-role="content" class="hs-content">
<div class="hs-notifications-menu-contents-wrap feeds-content-header HSnotifications">
<div class="hs-notification-menu-heading">
Notifications
<a title="Remove" class="removebutton hideNotificationsBtn" href="javascript://" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" >
<ul class="hs-notificatin-list notificationul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- End Of Notifications -->
<div class=" hs-notifications-menu-contents-wrap feeds-content-header HSrequests" >
<div class="hs-notification-menu-heading">
Requests
<a title="Remove" class="removebutton hideRequestsBtn" href="#" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" style="">
<ul class="hs-notificatin-list requestul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- end of requests -->
<div class="container_12">
<div class="content-header">
<h4><img class="smallClubImage" alt="" src="images/header-small-image.png" /></h4>
Info
<div data-role="navbar" class="nav-glyphish-example" data-grid="c">
<ul>
<li class="no-border">Members</li>
<li class="active">Map</li>
<li>Harvest</li>
<li><a href="clubpages/albums.html" id="nav-picture" data-icon="custom" >Picture</a></li>
</ul>
</div>
</div>
<div class="content-wrap map-wrap">
<div id="map-canvas" style="height:500px; width:100%; margin:0; padding:0">
</div>
</div>
</div>
</div>
</div>
I had the same error but I solved it two months ago!
I was because a jquery plugin of mine was not ending in ;
You can Try to end your JS lines with ; I can see you don't follow this best practices advice. So, add it to you own js files (at the end) in order to let the files concatenation understand That a new file is really a new single function (or statement)
Sorry If this is not the solution to your problem! Thank you for reading
Hi there is some problem with your class names you put the class names same as some keywords like Image you cannot put Image as a class name also check if other same problem exist i think you should check by using some IDE it will shows the special names in different color.
also change the class name Map
I had the same error once i think it will help you
Thanks
I have a working pinchzoom in html using iscroll but when i build it for phonegap for ios and android it pinch zoom seems to stop to work.
The code below is my working code on html but when i try to port it to an ios and android app it stops working. Viewing it in a browser works.
I am not really good with javascript maybe somebody can help me fix this issue.
Here is my code.
<!DOCTYPE html>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link href="css/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Scripys -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',{
zoom:true, zoomMax: 4
});
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<!-- Start of Page - Map-->
<div id="map" data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div id="logo">
<img src="images/logo-dark.png">
</div>
</div>
<!-- Start of Content - Schedule [Map] -->
<div data-role="content">
<div id="wrapper" style="width:100%">
<img class="mapimage" src="images/leaf_map.jpg"/>
</div>
</div>
<!-- End of Content -->
<!-- Start of Footer -->
<div data-role="footer" data-position="fixed" data-role="footer" data-tap-toggle="false">
<div class="banner">
<div>
<a href="promo.html" data-rel="dialog" data-transition="pop">
<span>This app was created by:</span>
<span><img src="images/iwebxpert-logo.png"></span>
<span>iWebXpert</span>
</a>
</div>
</div>
<!-- Navbar / Main Navigation -->
<div data-role="navbar">
<ul>
<li>
<img src="images/home-icon.png">
</li>
<li>
<img src="images/schedule-icon.png">
</li>
<li>
<img src="images/map-icon.png">
</li>
<li>
<img src="images/design-icon.png">
</li>
<li>
<img src="images/about-icon.png">
</li>
</ul>
</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Page - Map-->
<script>loaded();</script>
Since you are loading scripts from external sources (if you haven't already) make sure you add
<access origin="*" />
to your config.xml file
I am trying to make a simple lightbox gallery, using prettyPhoto and bootstrap. For some reason, when I click on the image thumbnail it just opens it in a blank image page rather than with the js.
Chrome dev tools gives me this:
Uncaught TypeError: undefined is not a function - bootstrap.min.js:6
Uncaught ReferenceError: jQuery is not defined - jquery.prettyPhoto.js:7
Uncaught ReferenceError: $ is not defined - portfolio.html:10
This has been bugging me for hours, any help greatly appreciated!
Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kim Pirring Design</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/bootstrap.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script language="JavaScript" type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel='prettyPhoto']").prettyPhoto();
});
</script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/prettyPhoto.css">
</head>
<body>
<div class="container">
<h1>Kim Pirring Design</h1>
<div class='navbar navbar-inverse'>
<div class='navbar-inner nav-collapse' style="height: auto;">
<ul class="nav">
<li>Home</li>
<li class="active">My Work</li>
<li>About</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div>
</div>
<ul class="thumbnails">
<li class="span3">
<a class="thumbnail" rel="prettyPhoto" href="images/fullscreen/1.jpg"><img class="group1" src="images/fullscreen/1.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/2.jpg"><img class="group1" src="img/pics/2.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/3.jpg"><img class="group1" src="img/pics/3.jpg" title="Image Title" /></a>
</ul><!--end thumbnails -->
<footer>
<p>© Kim Pirring 2013</p>
</footer>
</div><!-- .container -->
</body>
</html>
It appears that jQuery is not loading. Check that your external scripts are pointing to the right place.