I have an index page for a website where I have a lot of images in a masonry gallery. Right now its loading a bit slow and I am trying to use lazyload and unveil. Originally, I tried lazyload, but I need to maintain a width proportion so I opted instead for unveil.js
However, after trying to implement unveil, I find my images do not load at all. Here is a sample of my markup:
<!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="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"></style>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Peter Lum Fluid.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<script src="Snap.svg-0.1.0/dist/snap.svg-min.js"></script>
</style>
<script> window.jQuery || document.write('<script src-"jquery-1.9.1.min.js"><\/script>') </script>
<title>Peter Lum</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="jquery.unveil.js" type="text/javascript"> </script>
<script>
$(document).ready(function() {
$("img").unveil();
});
$(function(){
$("img").unveil();
});
$("img").unveil(200, function() {
$(this).load(function() {
this.style.opacity = 1;
});
});
</script>
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><!--Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported.-->
<header>
<a class="logo" href="mailto:hello#peterlum.co"></a>
<h1> Peter Lum </h1>
<hr>
<ul class=" navigation scaling">
<li class="scaling"><img class="invert" src="images/about.png"></li>
<li class="scaling"><img class="invert" src="images/work.png"></li>
<li class="scaling"><img class="invert" src="images/contact.png"></li>
<li class="scaling"><img class="invert" src="images/blog.png"></li>
<li class="scaling"><a data-pin-do="buttonFollow" href="http://www.pinterest.com/peterlunglum/pins/"><img class="invert" src="images/pinterest nav.png"></a></li>
</ul>
<hr>
</header>
</div>
<div id="LayoutDiv2" class="container">
<div class="box">
<div class="article">
<img alt="Atelier" class= "thumbnail img lazy" src="images/blank.png" data-src="images/Atelier-2.png"><h4>A Shop of Work</h4>
<p> <a class="" href="#">Read more »</a></p>
</div>
</div>
</div>
<!-- /container -->
<div id="backtotop"></div>
<div class="footer">
`enter code here` <p> Work of Peter Lum. Thanks for visiting. Website designed myself using Masonry. ©2014.</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},900);
});
});
</script>
<script src="jquery.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="base.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-1.4.3.min.js"></script>
</body>
</html>
I included just one image div so far. Can anybody tell me why it doesn't load my images in layoutdiv2? The documentation of unveil says that the usage of unveil has syntax like this:
<img src="bg.png" data-src="img1.jpg"/>
Do I have to follow that exact syntax for it to work? Moreover, is that simply the problem or is something else wrong?
First on your css you have to write
img {
opacity: 0;
transition: opacity .3s ease-in;
}
then you can run plugin
$("img").unveil(200, function() {
$(this).load(function() {
this.style.opacity = 1;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unveil/1.3.0/jquery.unveil.min.js"></script>
But because this plugin is jQuery dependencies, you can change this.style.opacity = 1; with $(this).css( { 'opacity': 1} );
Now on your <img> tag, you can use custom attribute like data-src="img2.jpg" data-src-retina="img2-retina.jpg"
Related
I have an already existing site and I want to place a popup window that would let a user enter their name and email if they want to be contacted. There's an option to close the popup if you don't desire to be contacted.
It works well on all other places but when I put it on my remote server it conflicts with the page. Below is the code.
<!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="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="target" content="Primary School">
<meta name="Classification" content="Nursery School">
<meta name="Description" content="academy prides itself as home to up to date modern facilities and a concise learning system that has been created to maximise the learning experience for your ward.">
<meta name="Keywords" content="Primary School In, Primary School, Nursery School In , Nursery School In , Primary School In , Nursery School In ">
<title> - Primary School, Nursery School, Primary School</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="layout.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script type="text/javascript" src="verticalscroller.js"></script>
<link href="css/js-image-slider.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/slider_main.css">
<script src="bootstrap/jhoverstatemob.js"></script>
<script src="bootstrap/facslider.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="bootstrap/searchmarch.js"></script>
<script src="bootstrap/auto_cycle.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<script type="text/javascript" src="flexy-menu.js"></script>
<script type="text/javascript">$(document).ready(function(){$(".flexy-menu").flexymenu({speed: 400,type: "vertical", indicator: true});});</script>
<link href="flexy-menu.css" rel="stylesheet">
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<link href="modal.css.css" rel="stylesheet">
<form action="sendresults1.php" method="post" id="form_pp" >
<div id="Modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-header" style="margin-top:120px;">
<div class="modal-body" >
<div class="form-group">
<input class="form-control" placeholder= "YOUR FULL NAME" name="name" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder= "YOUR EMAIL ADDRESS" name="email" type="Phone number"a>
</div>
<button type="submit" class="btn btn-default " style="color:#c13b01" id="btn_send" >SEND</button>
<button type="button" class="btn btn-default" style="color:#c13b01" id="btn_cancel" data-dismiss="modal" >CANCEL</button>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(window).load(function(){
$('#Modal').modal('show');
});
</script>
<script>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="jquery.bxslider.css" type="text/css" />
<script src="/js/jquery.min.js"></script>
<script src="jquery.bxslider.js"></script>
<script src="rainbow.min.js"></script>
<script src="scripts.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36499930-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body style="background-color:#EEE;">
<div id="general_container">
<div id="header">
</div>
<div id="menu2">
<?php include("menu.php") ?>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>
<div id="container">
<div id="banner">
<ul class="bxslider">
<li><img style="width:100%" src="images/12106739_1690926401119209_2191482622687128165_n.jpg" /></li>
<li><img style="width:100%" src="images/12088542_1690925387785977_5181459114852166975_n.jpg" /></li>
<li><img style="width:100%" src="images/12115497_1690998707778645_8753366621948913051_n.jpg" /></li>
</ul>
</div>
<div class="banner_caption"><p>Welcome to <br>SANG BLEU ACADEMY</p></div>
<div id="text_area">
<div class="text_area_right">
<div class="text_area_about">
<div class="about_content">
<div class="about_content_img"></div>
<p style="margin-top:-4px;">
Sang Bleu academy prides itself as home to up to date modern facilities and a concise learning system that has been created to maximise the learning experience for your ward. It will be a privilege to me and my team of dedicated staff to guide your ward in their journey of learning and development.</p>
Read More
</div>
<div class="about_login">
<img src="images/admission.jpg" />
<h1 style="font-size:18px; background-color:#FF670F; color:#FFF; font-weight:normal; padding-left:15px;">ADMISSION FORMS</h1>
</div>
</div>
<div class="gallery_content">
<div class="gallery_content_div">
<h1>SCHOOL GATEWAY</h1>
<img src="images/line.jpg" style="margin-top:-35px;"/>
<img src="images/payment.fw.png" style="margin-top:-15px;"/>
</div>
<div class="gallery_content_div">
<h1>HEALTHY & STAYING SAFE</h1>
<img src="images/line.jpg" style="margin-top:-35px;"/>
<P>Your child's safety and well being are our first priority. </P>
</div>
<div class="gallery_content_div" style="margin-right:0px;">
<h1>POSITIVE CONTRIBUTION</h1>
<img src="images/line.jpg" style="margin-top:-35px;"/>
<p>We focus on fun and creativity which gets children thinking for themselves.</p>
</div>
</div>
</div>
<div class="text_area_left">
<?php include("login.php") ?>
</div>
</div>
</div>
</div>
<?php include("footer.php") ?>
</body>
</html>
You are using twice Jquery/Css files in your page, please make sure you are using correct sequence and required js/css.
In your above code your are using extra files please remove
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/jquery.min.js"></script>
And check properly all required js/css.
I am writing a jQuery mobile app that contains two HTML pages. When user navigates from index.html page to search.html page, jQuery should load elements into search.html page.
However, things seems to gone wrong. The script doesn't work as expected.
index.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova sh*ts -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from name
<input id="filterBoxList" data-type="search" placeholder="Type here to search from department list">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxList" id="list_dept">
</ul>
</div>
</div>
</body>
search.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta charset="utf-8"></meta>
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova shits -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
<style>
#listie small{
color: #ccc !important;
}
</style>
</head>
<body>
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from dept. list
<input id="filterBoxName" data-type="search" placeholder="Type here to search from name">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxName" id="listie">
</ul>
</div>
</div>
</body>
default.js (loaded the last)
$(document).on("pageshow","search.html",function(){
var chx = 0;
var m="";
var k=[];
$.mobile.loading( "show", {
text: 'Loading',
textVisible: true
});
if(loaded == false) // This will prevent event triggering more then once
{
for (var t in JSON.parse(localStorage.getItem('hr')))
{
m += "<li><a href='#view?id=" + t + "'>" + JSON.parse(localStorage.getItem('hr'))[t].Name + " <small>" + JSON.parse(localStorage.getItem('hr'))[t].Surname + "</small></a></li>";
}
$('#listie').append(m).listview('refresh');
loaded = true;
}
$.mobile.loading( "hide" );
});
Things seems to be nice when the "search" page div is placed inside index.html (and the code is linked in single page, not two). However it does break when I tried splitting up the files into two files.
Anything I can do to fix this?
Well, solved...
Even though the div is on the same file, when using $(document).on("pageshow",src,function(){...}); to point to src, makes sure that src points to the div ID, not the file itself.
In this case, it's $(document).on("pageshow","#search",function(){...});.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I am working on a Web App using Angular, Bootstrap, and templated off of Ace Admin (Responsiveness template). On the PC, in Chrome and FireFox everything works fine. When we shrink the window or use the Responsive Design Review the sidebar navigation changes to a menu button and works appropriately. However when we bring the site up on a table or phone (Chrome or Firefox browswers), the menu button is visible, but doesn't respond. Any ideas? Here is my opening HTML page, the only thing I have left off is the javascript for my app. The rest is here.
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<title>DISCUS Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="resources/ace/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/font-awesome.min.css">
<!-- page specific plugin styles -->
<link rel="stylesheet" href="resources/ace/assets/css/jquery-ui.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/datepicker.css">
<link rel="stylesheet" href="resources/ace/assets/css/ui.jqgrid.css">
<!-- text fonts -->
<link rel="stylesheet" href="resources/ace/assets/css/ace-fonts.css">
<!-- ace styles -->
<link rel="stylesheet" href="resources/ace/assets/css/ace.min.css" id="main-ace-style">
<!-- ngModal styles -->
<link rel="stylesheet" href="resources/ng-modal/ng-modal.css">
<!-- TEST DRIVE STYLES (Determine to keep or throw away) -->
<link rel="stylesheet" href="resources/ng-grid/ng-grid.css">
<!-- DSC styles -->
<link rel="stylesheet" href="styles/ng-style.css">
<!--[if lte IE 9]>
<link rel="stylesheet" href="resources/ace/assets/css/ace-part2.min.css">
<![endif]-->
<link rel="stylesheet" href="resources/ace/assets/css/ace-skins.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/ace-rtl.min.css">
<!--[if lte IE 9]>
<link rel="stylesheet" href="resources/ace/assets/css/ace-ie.min.css">
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="resources/ace/assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="resources/ace/assets/js/html5shiv.min.js"></script>
<script src="resources/ace/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<!--<body class="no-skin">-->
<body class="skin-1" data-ng-controller="MainController">
<ng-include src="'views/navbar.html'"></ng-include>
<div class="main-container" id="main-container">
<div id="sidebar" class="sidebar responsive" data-ng-show="user">
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'fixed')
}
catch (e) {
}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<!-- #section:basics/sidebar.layout.shortcuts -->
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
<!-- /section:basics/sidebar.layout.shortcuts -->
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>
</div>
</div>
<!-- /.sidebar-shortcuts -->
<div ng-include src="'views/sidebar.html'"></div>
<!-- #section:basics/sidebar.layout.minimize -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left"
data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<!-- /section:basics/sidebar.layout.minimize -->
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'collapsed')
}
catch (e) {
}
</script>
</div>
<div class="main-content">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div ng-view></div>
<!-- PAGE CONTENT ENDS -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.page-content -->
</div>
</div>
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='resources/ace/assets/js/jquery.min.js'>" + "<" + "/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='resources/ace/assets/js/jquery1x.min.js'>" + "<" + "/script>");
</script>
<![endif]-->
<script type="text/javascript">
if ('ontouchstart' in document.documentElement) document.write("<script src='resources/ace/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<!-- page specific plugin scripts -->
<!-- ace scripts -->
<script src="resources/ace/assets/js/ace.min.js"></script>
<script src="resources/ace/assets/js/ace-elements.min.js"></script>
<!-- inline scripts related to this page -->
<!-- the following scripts are used in demo only for onpage help and you don't need them -->
<link rel="stylesheet" href="resources/ace/assets/css/ace.onpage-help.css"/>
<link rel="stylesheet" href="resources/ace/docs/assets/js/themes/sunburst.css"/>
<script type="text/javascript"> ace.vars['base'] = '..'; </script>
<script type="text/javascript" src="resources/ace/assets/js/ace/elements.onpage-help.js"></script>
<script type="text/javascript" src="resources/ace/assets/js/ace/ace.onpage-help.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/rainbow.js"></script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/generic.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/html.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/css.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/javascript.js"></script>
<!--<script type="text/javascript" src="resources/ace/assets/js/jquery.min.js"></script>-->
<script type="text/javascript" src="resources/ace/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="resources/angular/angular.js"></script>
<script type="text/javascript" src="resources/angular/angular-route.js"></script>
<script type="text/javascript" src="resources/angular/xeditable.js"></script>
<script type="text/javascript" src="resources/angular/angular-local-storage.js"> </script>
<script type="text/javascript" src="resources/angular/angular-resource.js"></script>
<script type="text/javascript" src="resources/angular/angular-sanitize.js"></script>
<script type="text/javascript" src="resources/angular/angular-translate.js"></script>
<script type="text/javascript" src="resources/angular/angular-touch.js"></script>
<script type="text/javascript" src="resources/angular/angular-animate.js"></script>
<script type="text/javascript" src="resources/Smart-Table.debug.js"></script>
<script type="text/javascript" src="resources/ui-bootstrap-tpls-0.11.0.min.js"> </script>
<script type="text/javascript" src="resources/ng-modal/ng-modal.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/lodash.min.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/highlight.min.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/angular-highlightjs.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/angularjs-dropdown-multiselect.js"></script>
<script type="text/javascript" src="resources/pdfjs-mod/pdf.js"></script>
<script type="text/javascript" src="resources/directives/angular-pdf.js"></script>
<script type="text/javascript" src="resources/directives/partials-css.js"></script>
<script type="text/javascript" src="resources/ui-layout/ui-layout.js"></script>
<script type="text/javascript" src="resources/ui-grid/ui-grid.js"></script>
<!-- The following are for exporting from ui-grid -->
<script type="text/javascript" src="resources/ui-grid/csv.js"></script>
<script type="text/javascript" src="resources/ui-grid/pdfmake.js"></script>
<script type="text/javascript" src="resources/ui-grid/vfs_fonts.js"></script>
<!-- TEST DRIVE SCRIPTS (Determine to keep or throw away) -->
<script type="text/javascript" src="resources/ng-grid/ng-grid-2.0.11.debug.js"></script>
<!-- DISCUS-NG Angular JavaScript -->
Most mobile browsers wait about 300ms after a tap-and-release before sending the click event.
Using the ngTouch module, which provides an ngClick replacement might solve this for you:
https://code.angularjs.org/1.2.25/docs/api/ngTouch/directive/ngClick
In searching Stack Overflow I found a somewhat related issue and did some trial and error. My issue turned out to be a conflict between Angular and the Ace Admin template. I ended up moving two Ace JavaScript calls to after the Angular calls (ace.min.js and ace-elements.min.js) and suddenly the toggled menu button works on PC and mobile device in both Firefox and Chrome.
I am making a Raphael JS animation, and for some reason, I cannot get images to render in internet explorer 9. here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="scripts/raphael-min.js"></script>
<script type="text/javascript" src="scripts/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var layer0 = Raphael("layer0", 980, 650);
var bg = layer0.image("images/landscape_background.jpg", 0, 0, aniWidth, aniHeight);
});
</script>
</head>
<body>
<div class="layer" id="layer0">
</div>
<div class="layer" id="layer1">
</div>
<div class="layer" id="layer2">
</div>
<div class="layer" id="layer3">
</div>
<div class="layer" id="layer4">
</div>
</body>
</html>
It works fine in chrome and firefox, just not ie 9.
You need to put the Raphael Initiator Function around the raphael code to make it work. Eg.
raphael(function(){
So I have a listview in which each component wired to an on click function which looks like this:
function launchNewPage() {
$.mobile.changePage( "newPage.html", { transition: "slide"} );
}
The problem I am encountering has to do with the next page. The page shows up just fine, but none of the resources are loading. When I inspect the page in firebug, none of the necessary JS files are loaded. On top of this, it doesn't seem like the $(document).ready function is ever getting executed. Does anyone have any insight as to what I am doing wrong? Sorry, I am a bit new to JQ... Thanks in advance.
Requested HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="CSS/JqueryMobile.css" />
<link rel="stylesheet" href="CSS/theme.css" />
<link rel="stylesheet" href="CSS/JQM-DatePicker.css" />
<script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
<script type="text/javascript" src="JS/JqueryMobile.js"></script>
<script type="text/javascript" src="JS/JQM-DatePicker.js"></script>
<script type="text/javascript" src="JS/mockjax.js"></script>
<script type="text/javascript" src="JS/soyutils.js"></script>
<script type="text/javascript" src="JS/fields.js"></script>
<script type="text/javascript" src="JS/JSDictionaryObject.js"></script>
<script type="text/javascript" src="JS/AddingForm.js"></script>
</head>
<body>
<div id="page" data-role="page" data-theme="x">
<div class="ui-body-x" data-role="header" data-position="fixed">
<h1 class="ui-header-style" style="text-align:left; margin-left:10px;">Add New Record</h1>
<div data-type="horizontal" class="ui-btn-right ui-button-group">
<a id="cancelButton" href="http://www.google.com" data-role="link" data-ajax="false">Cancel</a>
<a id="submitButton" form="f" class="ui-btn-up-x" onClick="javascript:return submitPressed();"data-role="button" data-icon="" data-ajax="false">Submit</a>
</div>
</div><!-- /header -->
<div data-role="content" data-theme="x">
<form id="f" src="#"></form>
</div><!-- /content -->
</div><!-- /page -->
</body>
You cannot start the jQuery mobile with $(document).ready() you should started like this:
try to work with this in the first HTML
$("div[data-role*='page']").live('pageshow', function(event, ui) {
document.location.href="newPage.html";
});
Geoff, if you are using the Beta 3 version of the JQM framework, read this. It will help shed light on the DOM and $(document).ready(). You may want to consider the "pagecreate" and "pagebeforecreate" events. They are delineated in the doc referenced in the above link.