IE 9 is not rendering images with Raphael JS library - javascript

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(){

Related

Thymeleaf + HTML5 - why can't I access my javascripts?

I have an Spring MCV 4 + HTML5 + Thymeleaf based application I can't seem to use javascript on pages.
The webapp structure is:
webapp
assets
css
img
js
i18n
messages.properties
WEB-INF
html
fragments
common.html
default.html
footer.html
header.html
login.html // exclusively for ../login.html
sidebar.html
home
welcomeSignedIn.html
client
home.html
create.html
In my login page, since it is a single page, with only a picture in the background, I have a piece of JS that works flawlessly:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/login :: loginFragment">
<meta charset="UTF-8" />
<title><th:text="#{app.name}"></label></th:text>
</head>
<body>
<div class="login-container animated fadeInDown">
<div class="loginbox bg-white">
<form th:action="#{/login}" method="post">
<div class="loginbox-title">SIGN IN</div>
<div class="loginbox-textbox">
<input type="text" id="ssoId" name="ssoId" class="form-control" placeholder="Username" />
</div>
<div class="loginbox-textbox">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
<div class="loginbox-forgot">
Forgot Password?
</div>
<div class="loginbox-submit">
<input type="submit" class="btn btn-primary btn-block" value="Login"/>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#ssoId').focus();
});
</script>
</body>
</html>
Login page has its own fragment, because it's a single, no menus, no sidebar page. All other are.
For may default templating, I have a file called fragments/default.html reponsible for pages organization.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<title th:text="#{app.name}"> </title>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div th:replace="fragments/header :: headerFragment"></div>
<div class="main-container container-fluid">
<div class="page-container">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</body>
</html>
So that, for every page, I get included the following links and scripts from fragments/common.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:id="commonFragment" th:fragment="commonFragment">
<link rel="icon" th:href="#{/assets/img/favicon.png}" type="image/x-icon" />
<link rel="stylesheet" th:href="#{/assets/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/font-awesome.min.css}"/>
<link rel="stylesheet" th:href="#{/assets/css/beyond.min.css}"/>
<link rel="stylesheet" th:href="#{/assets/css/demo.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/animate.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/skins/darkred.min.css}" />
<link rel="stylesheet" th:href="#{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}" />
<!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
<script type="text/javascript" src="/assets/js/skins.min.js" th:src="#{/assets/js/skins.min.js}"></script>
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="#{/assets/js/jquery-2.0.3.min.js}"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js" th:src="#{/assets/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="/assets/js/slimscroll/jquery.slimscroll.min.js" th:src="#{/assets/js/slimscroll/jquery.slimscroll.min.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.js" th:src="#{/assets/js/beyond.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.min.js" th:src="#{/assets/js/beyond.min.js}"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="container" />
</body>
</html>
My fragments/header.html is defined as:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/common :: commonFragment">
</head>
<body>
<div th:id="headerFragment" th:fragment="headerFragment">
// content
</div>
</body>
</html>
fragments/sidebar.html is very similar to `fragments/header.html, just different classes and content.
So, on every page I have on my application, I do something like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
// content
</div>
</body
</html>
I'm sure it's something quite stupid, but I'm failing to see why can't I get javascript working on my pages, even for something quite as simple as:
<script type="javascript" >
$(function () {
alert('hello');
});
</script>
And, what's bothering (a lot!) is that if I on the browser something like:
localhost:8080/appName/assets/js/bootstrap.min.js
It will show the contents of the file.
What am I missing here?
Thanks for the input, guys! I got it working. What I did is placing the JavaScript section inside the <div layout:fragment="content">*HERE*</script> area, like on the example bellow.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
<script type="text/javascript" >
*JavaScript area*
</script>
// content
</div>
</body
</html>
Hope this will save someone's precious time!
I think you have problems because there are 2 jquery files included to your fragments/common.html (check it via Firebug or something like that):
<head th:id="commonFragment" th:fragment="commonFragment">
...
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="#{/assets/js/jquery-2.0.3.min.js}"></script>
...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Try to remove one of the definitions.

unveil and lazy load

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"

simple jquery script in inline PrettyPhoto box not working

I've a problem with prettyphoto and a simple jquery script in a PrettyPhoto inline box.
Why I can't hide the div in this prettyphoto box? I don't understand why this is not working...
<!DOCTYPE html>
<html>
<head>
<title>Pretty photo test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje" style="display:block">this is a test</div>
<a onclick="$('#testje').hide(); return false">Close test div</a>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
No need to add [inline] :
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje">this is a test</div>
<a onclick="$('#testje').hide(); return false;">Close test div</a>
</div>

Google maps with JQuery Mobile and jquery-ui-map

I'm using the jQuery UI Map libary (https://code.google.com/p/jquery-ui-map/) to display a map on my html5 mobile website, however i'm only getting a grey square no matter what i try.
My code:
<!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">
<title>test</title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="https://local url/js/jquery-ui.js"></script>
<script type="text/javascript" src="https://local url/js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="content">
<p>
TEST SITE
</p>
<p>
<canvas id="map_canvas" style="width:50%;height:50%"></canvas>
</p>
</div>
</div>
<script>
$(document).ready(function()
{
$('#map_canvas').gmap();
$('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });
$('#map_canvas').gmap({ 'zoom': 8 });
$('#map_canvas').gmap('refresh');
});
</script>
</body>
</html>
The result i get is this:
http://upload.mattie-systems.nl/uploads/28217-knipsel.png
Any help would be greatley appreciated!
Solution
Map can't be shown on canvas element, it must be DIV like this:
<div id="map_canvas"></div>
Also don't use percentages for map height, ether use px, em or use css like in my example to fill working page.
Working HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<style>
#map_canvas {
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
<script>
$(document).on('pageshow', '#main', function() {
$('#map_canvas').gmap();
$('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });
$('#map_canvas').gmap({ 'zoom': 8 });
$('#map_canvas').gmap('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="content">
<p>
TEST SITE
</p>
<p>
<div id="map_canvas"></div>
</p>
</div>
</div>
</body>
</html>
If you want to find more about this topic + examples then take a look at this ARTICLE.

javascript seems disabled on second page while using jquery mobile on android

I am trying to build a Web application using jQuery Mobile.
When testing on my desktop everything works as expected.
On Android (both 3.2 and 4.0.3) seems like JavaScript is disabled after navigating to second page.
My first page looks like:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Jetty experiments:</h3>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Hello World</li>
<li>Sample Form</li>
<li>Test JSP</li>
</ul>
</div>
<div data-role="footer">
<button id="jquery-test">JQuery Test</button>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#jquery-test").click(function(event) {
alert("OK");
});
});
</script>
</html>
My second page (that is sample-form.html):
<!DOCTYPE html>
<html>
<head>
<title>Collects text into a database</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="script/tempo.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Enter some text:</h3>
</div>
<div data-role="content">
<form id="searchForm" method="get" action="SampleForm"
data-ajax="false">
<input type="text" name="text" /> <input type="submit"
value="Submit" />
</form>
<ul id="names" data-role="listview">
<li data-template>{{name}}</li> <!-- the template here does not work on Android -->
<li data-template-fallback>Sorry, JavaScript required!</li>
</ul>
</div>
<div data-role="footer">
<button id="jquery-test">JQuery Test</button>
</div>
</div>
</body>
<script>
var names;
$(document).ready(function() {
$("#jquery-test").click(function(event) {
alert("OK"); // the alert here does not work on Android :(
});
names = Tempo.prepare("names")
});
// this binding does not work on Android
$("#searchForm").submit(function(event) {
event.preventDefault();
$.getJSON("SampleForm", function(data) {
names.render(data);
});
});
</script>
</html>
Any idea what am I doing wrong?
BR,
Adrian.
In jQuery Mobile the document ready event is called once. Linked pages are loaded in same DOM and page init is triggered.
http://jquerymobile.com/test/docs/api/events.html
Here is another question:
jQuery Mobile delegate vs live vs bind

Categories