<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><$BlogPageTitle$></title>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
</head>
<body>
<div trbidi="on">
<div style="padding: 0;">
<div id="makingdifferenttimer" style="display: none;">
<div id="notes_url" style="font-family: Electrolize,lolblogger,Tahoma; font-size: 16px; margin-top: 16px;">
<div id="url_qu">
.</div>
</div>
</div>
<div id="mdtimer">
<div style="font-family: Electrolize,lolblogger,Tahoma; text-align: center;">
<b>Please wait...</b>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
!function(a,b,c,d){function g(b,c){this.element=b,this.settings=a.extend({},f,c),this.settings.fontSize||(this.settings.fontSize=this.settings.radius/1.2),this.settings.strokeWidth||(this.settings.strokeWidth=this.settings.radius/4),this._defaults=f,this._name=e,this._init()}var e="countdown360",f={radius:15.5,strokeStyle:"#2E64FE",strokeWidth:d,fillStyle:"#8ac575",fontColor:"#2E64FE",fontFamily:"Electrolize,lolblogger,Tahoma",fontSize:d,fontWeight:700,autostart:!0,seconds:20,label:["second","Seconds"],startOverAfterAdding:!0,onComplete:function(){}};g.prototype={getTimeRemaining:function(){var a=this._secondsLeft(this.getElapsedTime());return a},getElapsedTime:function(){return Math.round(((new Date).getTime()-this.startedAt.getTime())/1e3)},extendTimer:function(a){var b=parseInt(a),c=Math.round(((new Date).getTime()-this.startedAt.getTime())/1e3);this._secondsLeft(c)+b<=this.settings.seconds&&this.startedAt.setSeconds(this.startedAt.getSeconds()+parseInt(a))},addSeconds:function(a){var b=Math.round(((new Date).getTime()-this.startedAt.getTime())/1e3);this.settings.startOverAfterAdding?(this.settings.seconds=this._secondsLeft(b)+parseInt(a),this.start()):this.settings.seconds+=parseInt(a)},start:function(){this.startedAt=new Date,this._drawCountdownShape(3.5*Math.PI,!0),this._drawCountdownLabel(0),this.interval=setInterval(jQuery.proxy(this._draw,this),1e3)},stop:function(a){clearInterval(this.interval),a&&a()},_init:function(){this.settings.width=2*this.settings.radius+2*this.settings.strokeWidth,this.settings.height=this.settings.width,this.settings.arcX=this.settings.radius+this.settings.strokeWidth,this.settings.arcY=this.settings.arcX,this._initPen(this._getCanvas()),this.settings.autostart&&this.start()},_getCanvas:function(){var b=a('<canvas id="countdown360_'+a(this.element).attr("id")+'" width="'+this.settings.width+'" height="'+this.settings.height+'"><span id="countdown-text" role="status" aria-live="assertive"></span></canvas>');return a(this.element).prepend(b[0]),b[0]},_initPen:function(b){this.pen=b.getContext("2d"),this.pen.lineWidth=this.settings.strokeWidth,this.pen.strokeStyle=this.settings.strokeStyle,this.pen.fillStyle=this.settings.fillStyle,this.pen.textAlign="center",this.pen.textBaseline="middle",this.ariaText=a(b).children("#countdown-text"),this._clearRect()},_clearRect:function(){this.pen.clearRect(0,0,this.settings.width,this.settings.height)},_secondsLeft:function(a){return this.settings.seconds-a},_drawCountdownLabel:function(a){this.ariaText.text(b),this.pen.font=this.settings.fontWeight+" "+this.settings.fontSize+"px "+this.settings.fontFamily;var b=this._secondsLeft(a),c=1===b?this.settings.label[0]:this.settings.label[1],d=this.settings.label&&2===this.settings.label.length,e=this.settings.width/2;d?y=this.settings.height/2-this.settings.fontSize/6.2:y=this.settings.height/2,this.pen.fillStyle=this.settings.fillStyle,this.pen.fillText(b+1,e,y),this.pen.fillStyle=this.settings.fontColor,this.pen.fillText(b,e,y),d&&(this.pen.font="normal small-caps "+this.settings.fontSize/3+"px "+this.settings.fontFamily,this.pen.fillText(c,this.settings.width/2,this.settings.height/2+this.settings.fontSize/2.2))},_drawCountdownShape:function(a,b){this.pen.fillStyle=this.settings.fillStyle,this.pen.beginPath(),this.pen.arc(this.settings.arcX,this.settings.arcY,this.settings.radius,1.5*Math.PI,a,!1),this.pen.fill(),b&&this.pen.stroke()},_draw:function(){var a=Math.round(((new Date).getTime()-this.startedAt.getTime())/1e3),b=3.5*Math.PI-2*Math.PI/this.settings.seconds*a;this._clearRect(),this._drawCountdownShape(3.5*Math.PI,!1),a<this.settings.seconds?(this._drawCountdownShape(b,!0),this._drawCountdownLabel(a)):(this._drawCountdownLabel(this.settings.seconds),this.stop(),this.settings.onComplete())}},a.fn[e]=function(b){var c;return this.each(function(){c=a.data(this,"plugin_"+e),c||(c=new g(this,b),a.data(this,"plugin_"+e,c))}),c}}(jQuery,window,document);
//]]>
</script>
<br />
<div class="time_dir" style="text-align: center;">
<div id="container">
<div id="countdown">
</div>
<script charset="utf-8" type="text/javascript">var countdown=$("#countdown").countdown360({radius:90,seconds:3,fontColor:"#ffffff",strokeStyle:"#ff8000",fillStyle:"#ff4000",autostart:!1,onComplete:function(){console.log("done"),$(".download_faster").show(),$(".dowen_bum").show(),$("#container").remove()}});countdown.start();</script>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){var a=2;setInterval(function(){$("#mdtimer span").text(a--),0==a&&($("#makingdifferenttimer").delay(1e3).fadeIn(1e3),$("#mdtimer").hide(1e3).fadeOut(fast))},1e3)});
$(document).ready(function(){$(window).load(function(){var a=window.location.hash.substr(1);$("#url_qu").html("<center><b>👇 Product link ready 👇🏻</b><br><br></center><i class="fa fa-arrow-down" aria-hidden="true"/>Click Here')}),setTimeout(function(){window.location.hash.substr(1)},11010)});
</script>
<div>
<br /></div>
</div>
</div>
<div style="text-align: center;">
<center>
</div>
</div>
</div>
</body>
</html>
How do I get link metadata when shared on social media?
This is a waiting page to redirect visitors to another site link when I type the page link
Then # the link that I want the visitor to go to, waiting for the counter, then clicking on the button, it will go to the other site after the # sign
When I share the link on any social networking site, it shows metadata for the waiting page
How do I get the metadata of the link that the visitor will go to?
They make a request to the link that you provide. You can see that when you use grabify (here you will see the request). Then you can parse the html to get the metadata. You should make the request from the bakend and store the result, so that you dont have to reuqest the information multiple times. Also it is unlikely that the request will be allowed cross domain. You can test it by using fetch for example to get the google homepage like this fetch("https://google.com/") however this will return a CORS policy: No 'Access-Control-Allow-Origin' error.
Actually I have some chat and I want to put it inside a window, I found an example but Not loading the chat inside window.
My chat works perfectly with just the index. Check the images.
Old index.ejs code (just chat):
<html>
<head>
<script src="jquery-3.1.1.js"></script>
<script src="app.js"></script>
<base href="/">
<title>XXXXXXXXXXXXXXXX</title>
<meta ------ />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="view-change-button" class="button" onclick="Payloadxxxxxxx.togglePanel(event, this)">
<img class="option full" src="../img/Chat Button.png">
<img class="option not-full" src="../img/Code Button.png">
</div>
<div id="contentParent" class="responsive-columns-wrapper">
<div id="chat-column-holder" class="responsive-column content-column">
<div class="chat-column">
<div id="scrollingChat"></div>
<label for="textInput" class="inputOutline">
<input id="textInput" class="input responsive-column"
placeholder="Type something" type="text"
onkeydown="xxxxxxxxxxxxxxxxPanel.inputKeyDown(event, this)">
</label>
</div>
</div>
<div id="payload-column" class="fixed-column content-column">
<div id="payload-initial-message">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxOtherDescription.
</div>
<div id="payload-request" class="payload"></div>
<div id="payload-response" class="payload"></div>
</div>
</div>
<script src="js/xxxxx.js"></script>
<script src="js/xxxxxxxx.js"></script>
<script src="js/xxxxxxxxxx.js"></script>
<script src="js/xxxxxxxxxx.js"></script>
<script src="js/xxxxxxxxx.js"></script>
</body>
</html>
Image old (I'm use bootstrap for responsive page):
Web maximize
If I decrease or increase the browser window
And new Index with the button click for open the chat, the all code of chat i put inside chat.ejs:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Web Chat - ITSM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:image" content="conversation.svg" />
<meta property="og:title" content="Conversation Chat Simple" />
<meta property="og:description" content="Sample application that shows how to use the Conversation API to identify user intents" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/app.css">
<meta charset="UTF-8">
<title>Title of the document</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
function open_chatbox() {
$('#chat').fadeOut(500);
$('#chatBox').fadeIn(1000);
}
function closeChat() {
$('#chatBox').fadeOut(500);
$('#chat').fadeIn(1000);
}
</script>
<style>
#chat
{
position:absolute;
width:200px;
height:auto;
padding:10px;
background:#088A68;
color:#EDEDED;
text-align:center;
font-family:Cambria;
font-size:20px;
bottom:0px;
right:15px;
cursor:pointer;
}
#chatBox
{
display:none;
position:absolute;
width:200px;
height:300px;
padding:10px;
background:#EDEDED;
color:#FF7700;
text-align:center;
font-family:Cambria;
font-size:20px;
bottom:0px;
right:15px;
cursor:pointer;
}
#close
{
position:absolute;
width:15px;
height:15px;
padding:6px 5px 10px 5px;
text-align:center;
background:rgba(0,0,0,0.8);
color:#FF7700;
font-family:Cambria;
right:0px;top:0px;
} </style>
</head>
<body>
<div id="chat" onClick="open_chatbox();"> Chat Now </div>
<div id="chatBox"><div onclick="closeChat()" id="close">X</div> <br><br><div id="view-change-button" class="button" onclick="PayloadPanel.togglePanel(event, this)">
<img class="option full" src="../img/Chat Button.png">
<img class="option not-full" src="../img/Code Button.png">
</div>
<div id="contentParent" class="responsive-columns-wrapper">
<div id="chat-column-holder" class="responsive-column content-column">
<div class="chat-column">
<div id="scrollingChat"></div>
<label for="textInput" class="inputOutline">
<input id="textInput" class="input responsive-column"
placeholder="Type something" type="text"
onkeydown="ConversationPanel.inputKeyDown(event, this)">
</label>
</div>
</div>
</div>
</div>
<script src="js/common.js"></script>
<script src="js/api.js"></script>
<script src="js/conversation.js"></script>
<script src="js/global.js"></script>
</body>
</html>
I see that example for it.
And the error is:
Synchronous XMLHttpRequest on the main thread is deprecated because of
its detrimental effects to the end user's experience. For more help,
check https://xhr.spec.whatwg.org/.
Uncaught TypeError: Cannot read property 'classList' of null
at displayPayload (eval at (jquery.min.js:2), :80:23)
at Object.Api.setRequestPayload (eval at (jquery.min.js:2), :52:7)
at Object.sendRequest (eval at (jquery.min.js:2), :55:11)
at geoSuccess (eval at (jquery.min.js:2), :47:9) displayPayload # VM901:80 Api.setRequestPayload #
VM901:52 sendRequest # VM899:55 geoSuccess # VM900:47 VM901:80
Uncaught TypeError: Cannot read property 'classList' of null
at displayPayload (eval at (jquery.min.js:2), :80:23)
Obs.: The old file index.ejs is the new chat.ejs to load the chat inside window if click the button.
I try see other post with same example but None of them are trying the same as me
In the case I put all .css style inside my css repository, and I added the scripts src inside the index. After it, works fine. I did not need chat.ejs and I inserted all the code in the index just with the .css inside my repository public/css/app.css
Check code:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Web Chat - ITSM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:image" content="conversation.svg" />
<meta property="og:title" content="Conversation Chat Simple" />
<meta property="og:description" content="Sample application that shows how to use the Conversation API to identify user intents" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/app.css">
<meta charset="UTF-8">
<title>Title of the document</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
function open_chatbox() {
$('#chat').fadeOut(500);
$('#chatBox').fadeIn(1000);
}
function closeChat() {
$('#chatBox').fadeOut(500);
$('#chat').fadeIn(1000);
}
</script>
</head>
<body>
<div id="chat" onClick="open_chatbox();"> Chat Now </div>
<div id="chatBox"><div onclick="closeChat()" id="close">X</div> <br><br><div id="view-change-button" class="button" onclick="PayloadPanel.togglePanel(event, this)">
<img class="option full" src="../img/Chat Button.png">
<img class="option not-full" src="../img/Code Button.png">
</div>
<div id="contentParent" class="responsive-columns-wrapper">
<div id="chat-column-holder" class="responsive-column content-column">
<div class="chat-column">
<div id="scrollingChat"></div>
<label for="textInput" class="inputOutline">
<input id="textInput" class="input responsive-column"
placeholder="Digite algo" type="text"
onkeydown="ConversationPanel.inputKeyDown(event, this)">
</label>
</div>
</div>
</div>
</div>
<script src="js/common.js"></script>
<script src="js/api.js"></script>
<script src="js/conversation.js"></script>
<script src="js/global.js"></script>
</body>
</html>
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 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"
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.