I'm developing a form where some fields hide and show on click. E.g I have an input field called 'Joint Application?' and if 'Yes' is clicked then title, forename, surname etc fields are displayed. If 'No' is clicked then the fields are hidden.
Functionally this all works fine in all browsers, however in IE8 when you click 'NO' the white space remains underneath where the joint applicant fields have been hidden, therefore you have to scroll down the page to find the submit button. In IE7, IE9, Chrome, FF etc the whitespace is removed as expected and the submit button moves back up but IE8 doesn't seem to for some reason.
Below is the html just using the title as an example to keep this short:
<div class="form-row clearfix">
<label for="jointApp"><span class="required">*</span>Joint application</label>
<span class="form-icon"></span>
<div class="form-fields validate-radio">
<span class="radiolabel">Yes<input type="radio" id="jointApp" class="cdq-jointApp-check jointApp" name="jointApp" value="1" ></span>
<span class="radiolabel">No<input type="radio" id="singleApp" class="cdq-jointApp-check jointApp" name="jointApp" value="0" ></span>
</div>
<span class="tooltip_container">
<a href="#" class="tooltip">
<img src="/assets/images/tooltip.jpg" alt="joint application information">
<span>
<img class="callout" src="/assets/images/callout.gif" alt="callout" />
Do you wish to add a second person to your application?
</span>
</a>
</span>
<br /><br />
</div>
<div class="clearfix"></div>
<div id="jointDetails" style="display:none;">
<p class="jointappheader jointDetails" style="display:none">Please enter the joint applicants details below</p>
<div class="jointDetails form-row clearfix" style="display:none">
<label for="joint_title"><span class="required">*</span>Title</label>
<span class="form-icon"></span>
<div class="form-fields joint validate-select">
<select name="joint_title" id="joint_title" class="cdq-joint-title-text validate-select field-select">
<option selected="selected" value="">Please select...</option>
<option value="Mr" >Mr</option>
<option value="Mrs" >Mrs</option>
<option value="Ms" >Ms</option>
<option value="Miss" >Miss</option>
</select>
</div>
</div>
</div>
If it helps my is as follows:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
<!-- CSS concatenated and minified-->
<link rel="stylesheet" href="/assets/css/reset.css">
<link rel="stylesheet" href="/assets/css/styles.css">
<link rel="stylesheet" href="/assets/fancybox/source/jquery.fancybox.css?v=2.1.1" type="text/css" media="screen" />
<!-- end CSS-->
<script src="/assets/js/libs/modernizr-2.0.6.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/assets/fancybox/source/jquery.fancybox.pack.js?v=2.1.1"></script>
<script src="/assets/js/script.js" type="text/javascript"></script>
<script src="/assets/js/slider.js" type="text/javascript"></script>
</head>
Javascript is below
$('#singleApp').click(function(){
$('#jointDetails').hide('slow');
$('.jointDetails').hide('slow');
})
$('#jointApp').click(function(){
$('#jointDetails').show('slow');
$('.jointDetails').show('slow');
})
Let me know if you need any more information.
Thanks
Try the .height() of the element. Try setting height to 0. Try to .remove(). Hopefully this could point you in the right direction; to the actual bug.
Related
I am trying to show an alert when a link is clicked using jQuery like this..
$(document).ready(function() {
$(".nav_link").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
It isn't working for some reason, can anyone spot what I am doing wrong?
You don't have element with class name of nav_link. Use navlink instead:
$(document).ready(function() {
$(".navlink").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">Link 1</a>
<a class="navlink" id="navlink2" href="#">Link 2</a>
<a class="navlink" id="navlink3" href="#">Link 3</a>
try this
$(document).ready(function() {
$(".navlink").click(function(e) {
e.preventDefault();
alert('clicked');
});
});
You are using .nav_link class selector in your jQuery selector while your tags have navlink class. you should change it to navlink like the following :
$(document).ready(function() {
$(".navlink").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
OR you should change your a tags classes from navlink to nav_link like :
$(document).ready(function() {
$(".nav_link").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="nav_link" id="navlink1" href="#">
Link 1
</a>
<a class="nav_link" id="navlink2" href="#">
Link 2
</a>
<a class="nav_link" id="navlink3" href="#">
Link 3
</a>
You are clicking on a link ie the anchor tag, which itself has a native handling whenever a click event is called upon the anchor tag. So, for making your click handling work you have to cancel the default handling by preventing the default behaviour of anchor tag for a click event.
As you need to prevent the default action , so pass the event as a parameter in the callback function of jquery click handler.
As.
(‘anchor-tag-class’).bind( ‘click’, function(event) {
event.preventDefault();
Do your processing
});
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(".navlink").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
</body>
</html>
<script src="" async defer></script>
</body>
</html>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(".navlink").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
</body>
</html>
<script src="" async defer></script>
</body>
</html>
check fiddle:https://jsfiddle.net/e9Ljou4q/
hope that worked
Why don't you do this:
$('a').click(function() {
alert('clicked');
});
I'm trying to consume a bitcoin price history rest web service (https://www.coindesk.com/api/) using the URL https://api.coindesk.com/v1/bpi/historical/close.json.
It works fine when I enter the previous URL in my browser, but when I use Node/Express to get the data and then resend it, with the code below it doesn't work, When I send a GET request to m Node/Express server with Postman I get the HTML result at the bottom of this post which looks like a Captcha:
Node/Express code:
const express = require('express');
const request = require('request');
const router = express.Router();
router.get('/bitcoinPrices', function(req, res) {
request('https://api.coindesk.com/v1/bpi/historical/close.json', function (error, response, body) {
console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
console.log('body:', body); // Print the HTML for the Google homepage.
res.send(body);
});
});
module.exports = router;
Response after a GET request to http://localhost:3000/api/bitcoinPrices:
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js ie6 oldie" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html class="no-js ie7 oldie" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en-US">
<![endif]-->
<!--[if gt IE 8]>
<!-->
<html class="no-js" lang="en-US">
<!--
<![endif]-->
<head>
<title>Attention Required! | Cloudflare</title>
<meta name="captcha-bypass" id="captcha-bypass" />
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" id="cf_styles-css" href="/cdn-cgi/styles/cf.errors.css" type="text/css" media="screen,projection" />
<!--[if lt IE 9]>
<link rel="stylesheet" id='cf_styles-ie-css' href="/cdn-cgi/styles/cf.errors.ie.css" type="text/css" media="screen,projection" />
<![endif]-->
<style type="text/css">body{margin:0;padding:0}</style>
<!--[if lte IE 9]>
<script type="text/javascript" src="/cdn-cgi/scripts/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 10]>
<!-->
<script type="text/javascript" src="/cdn-cgi/scripts/zepto.min.js"></script>
<!--
<![endif]-->
<script type="text/javascript" src="/cdn-cgi/scripts/cf.common.js"></script>
</head>
<body>
<div id="cf-wrapper">
<div class="cf-alert cf-alert-error cf-cookie-error" id="cookie-alert" data-translate="enable_cookies">Please enable cookies.</div>
<div id="cf-error-details" class="cf-error-details-wrapper">
<div class="cf-wrapper cf-header cf-error-overview">
<h1 data-translate="challenge_headline">One more step</h1>
<h2 class="cf-subheadline">
<span data-translate="complete_sec_check">Please complete the security check to access</span> api.coindesk.com
</h2>
</div>
<!-- /.header -->
<div class="cf-section cf-highlight cf-captcha-container">
<div class="cf-wrapper">
<div class="cf-columns two">
<div class="cf-column">
<div class="cf-highlight-inverse cf-form-stacked">
<form class="challenge-form" id="challenge-form" action="/cdn-cgi/l/chk_captcha" method="get">
<script type="text/javascript" src="/cdn-cgi/scripts/cf.challenge.js" data-type="normal" data-ray="3e6fb7629a536938" async data-sitekey="6LfBixYUAAAAABhdHynFUIMA_sa4s-XsJvnjtgB0"></script>
<div class="g-recaptcha"></div>
<noscript id="cf-captcha-bookmark" class="cf-captcha-info">
<div>
<div style="width: 302px">
<div>
<iframe src="https://www.google.com/recaptcha/api/fallback?k=6LfBixYUAAAAABhdHynFUIMA_sa4s-XsJvnjtgB0" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe>
</div>
<div style="width: 300px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;"></textarea>
<input type="submit" value="Submit"></input>
</div>
</div>
</div>
</noscript>
</form>
</div>
</div>
<div class="cf-column">
<div class="cf-screenshot-container">
<span class="cf-no-screenshot"></span>
</div>
</div>
</div>
<!-- /.columns -->
</div>
</div>
<!-- /.captcha-container -->
<div class="cf-section cf-wrapper">
<div class="cf-columns two">
<div class="cf-column">
<h2 data-translate="why_captcha_headline">Why do I have to complete a CAPTCHA?</h2>
<p data-translate="why_captcha_detail">Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.</p>
</div>
<div class="cf-column">
<h2 data-translate="resolve_captcha_headline">What can I do to prevent this in the future?</h2>
<p data-translate="resolve_captcha_antivirus">If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.</p>
<p data-translate="resolve_captcha_network">If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.</p>
</div>
</div>
</div>
<!-- /.section -->
<div class="cf-error-footer cf-wrapper">
<p>
<span class="cf-footer-item">Cloudflare Ray ID:
<strong>3e6fb7629a536938</strong>
</span>
<span class="cf-footer-separator">•</span>
<span class="cf-footer-item">
<span data-translate="your_ip">Your IP</span>: 46.193.1.145
</span>
<span class="cf-footer-separator">•</span>
<span class="cf-footer-item">
<span data-translate="performance_security_by">Performance & security by</span>
<a data-orig-proto="https" data-orig-ref="www.cloudflare.com/5xx-error-landing?utm_source=error_footer" id="brand_link" target="_blank">Cloudflare</a>
</span>
</p>
</div>
<!-- /.error-footer -->
</div>
<!-- /#cf-error-details -->
</div>
<!-- /#cf-wrapper -->
<script type="text/javascript">
window._cf_translation = {};
</script>
</body>
</html>
I think you can get the info using jQuery ajax call and then send it to your express server and process it
$.ajax({
url: "https://api.coindesk.com/v1/bpi/historical/close.json",
})
.done(function( data ) {
alert(data)
});
});
https://jsfiddle.net/egLqh4ja/
This is the code
<!doctype html>
<!--[if lt IE 7]>
<html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="ISO-8859-15">
<meta name="viewport" content="initial-scale=1.0">
<title>NET2GRID Support Portal</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="/slick/slick.min.js"></script>
</head>
<body>
<div class="slider">
<div>
<img src="/images/appliances/freezer.png" />
</div>
<div>
<img src="/images/appliances/electric_shower.png" />
</div>
<div>
<img src="/images/appliances/computer.png" />
</div>
</div>
<script>
$('.slider').slick({});
</script>
With this stylesheet:
.slider {
width: 650px;
margin: 0 auto;
}
img {
width: 200px;
height: 200px;
}
But this is the only thing I see on the page:
Am I using the slick carrousel correctly or am I using it wrong? I tried to follow the example in a jsfiddle but that doens't seem to work on my end.
My code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h2>Hello</h2>
<button type="button" id="example" class="btn btn-danger" data-container="body" data-html="true" data-toggle="popover" data-placement="right" data-content="<form id='myform' class='form-horizontal'>
<input type='radio' id='rb1' name='keys' value='Adult' bind-value='key'>
Adult <br>
<input type='radio' id='rb2' name='keys' value='Child' bind-value='key'>
Child <br>
<input type='radio' id='rb3' name='keys' value='Concession' bind-value='key'>
Concession </form>" data-original-title="Select seat type">Hello
</button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').popover();
$('#myform input').on('change', function() {
alert($('input[name=keys]:checked').val());
});
});
</script>
</body>
</html>
I want to display the value of selected radio button(placed in popover) in an alert. This code somehow doesn't bring up the alert at all. The popover is displayed perfectly and the radio buttons are displayed correctly too. Only the alert doesnt show up on selection of radio button in the popover. Please help!
The problem was with when to initialize the listener. The form does not exist untill the popup is shown. So you need to initialize the event listener after.
Here is the snippet:
$(document).ready(function() {
$('#example').popover();
$('#example').on('shown.bs.popover', function() {
$('#myform input').on('click', function() {
alert($('input[name=keys]:checked').val());
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>
<body>
<h2>Hello</h2>
<button type="button" id="example" class="btn btn-danger" data-container="body" data-html="true" data-toggle="popover" data-placement="right" data-content="<form id='myform' class='form-horizontal'>
<input type='radio' id='rb1' name='keys' value='Adult' bind-value='key'>
Adult <br>
<input type='radio' id='rb2' name='keys' value='Child' bind-value='key'>
Child <br>
<input type='radio' id='rb3' name='keys' value='Concession' bind-value='key'>
Concession </form>" data-original-title="Select seat type">Hello
</button>
</body>
</html>
Something like this;
$("input:radio[name=keys]").click(function() {
var value = $(this).val();
alert(value);
});
Similar answer here;
In jQuery, how do I select an element by its name attribute?
$(document).ready(function(){
$('#example').popover();
$("form").find('input[type="radio"]').on('change', function() {
alert($('input[name=keys]:checked').val());
});
});
Here how i managed to get your goal completed.
above is my code for getting alert the value of the the selected radio button.
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"