javascript popup is not loading the html form properly - javascript

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.

Related

how to implement custom form (from a demo's css source files) in bootstrap 3 project

apologies if my question has been covered in the past. I consider myself a noob and have been learning javascript on and off for about 18 months or so.
I have used this boostrap template to get started with html and css. i had simple single entry form for a "subscribe here" type input form and I came across these form layouts.
I tried to implement the "isao" form affect (near the bottom the demo page) but it looks an absolute mess once in project. When hovering over the form's label the transition affect works as in the demo and also when selecting the text box. However the formatting is a all wrong, its all bunched up, the text box is adjacent to the left and not above the label where it should be. It is also visible, where the demo shows the text box being transparent.
i downloaded the source files, pasted them to my project's src directory and linked the forms css files and javascript in the index of my project. there is also some inline javascript which i also copied to my project's index file.
Admitedly, I've copied and pasted the code from the source expecting to make tweeks, but i'm at a loss.
Can someone help me unravel my sitaution?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero in Your Own Home</title>
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/demo.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set1.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set2.css">
<link rel="stylesheet" type="text/css" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-queries.css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon_hiyoh.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 subscribe section-description wow fadeIn">
<h2>Be in the <strong>Know</strong></h2>
<div class="divider-1 wow fadeInUp"><span></span></div>
</div>
</div>
<div class="row">
<section class="content bgcolor-8">
<h2>Isao</h2>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-38" />
<label class="input__label input__label--isao" for="input-38" data-content="First Name">
<span class="input__label-content input__label-content--isao">First Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-39" />
<label class="input__label input__label--isao" for="input-39" data-content="Middle Name">
<span class="input__label-content input__label-content--isao">Middle Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-40" />
<label class="input__label input__label--isao" for="input-40" data-content="Last Name">
<span class="input__label-content input__label-content--isao">Last Name</span>
</label>
</span>
</div>
</section>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/retina-1.1.0.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script src="assets/TextInputEffects/js/classie.js"></script>
<script>
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
</body>

How to use Bootstrap Icon Picker in Jquery

Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.

Angular Module Config Breaks When I Add App Name

I'm setting up a config for the 'angular-oauth2' module, and when I run
angular.module('', ['angular-oauth2'])
.config(['OAuthProvider', function(OAuthProvider) {
OAuthProvider.configure({
baseUrl: '/api/v1',
clientId: null,
clientSecret: null // optional
});
}]);
my server runs fine and all is well, when I add the name of the app though ('fuse') it breaks:
angular.module('fuse', ['angular-oauth2'])
.config(['OAuthProvider', function(OAuthProvider) {
OAuthProvider.configure({
baseUrl: '/api/v1',
clientId: null,
clientSecret: null // optional
});
}]);
And I get this error in the console:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=fuse&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.min.js%3A43%3A246)
I've looked in the html and low and behold the name of the app is 'fuse', so what's up with this error?
<html>
<head>
<base href="/app/">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
<link rel="stylesheet" href="build/fuse.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="build/fuse.js"></script>
</head>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<body ng-app="fuse" md-theme="default" md-theme-watch
class="{{state.current.bodyClass || ''}}">
<!-- SPLASH SCREEN -->
<ms-splash-screen id="splash-screen" >
<div class="center">
<div class="logo">
<span></span>
</div>
<!-- Material Design Spinner -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="inner">
<div class="gap"></div>
<div class="left">
<div class="half-circle"></div>
</div>
<div class="right">
<div class="half-circle"></div>
</div>
</div>
</div>
</div>
<!-- / Material Design Spinner -->
</div>
</ms-splash-screen>
<!-- / SPLASH SCREEN -->
<div id="main" class="animate-slide-up scrollable" ui-view="main" layout="column" ></div>
<floating-app-version></floating-app-version>
<!--<link href="build/styles.css" type="text/css" rel="stylesheet" />-->
<script src="build/common.js"></script>
<script src="build/vendor.js"></script>
<script src="/assets/app_config.js"></script>
<link rel="stylesheet" href="build/app.css" lazyload>
<script src="build/app.js"></script>
<script src="build/style.js"></script>
</body>
</html>

Conflicting JS with Popup contact Form

I am trying to implement a popup contact form on a HTML site, and I'm running into a js conflict. I'm stuck with how to get everything on the site to work, because removing some of the js calls causes certain functionality to stop working. I'm sure for this community of experts, my error is probably evident and simple; nonetheless I could really use some help figuring it out. I've included my code below.
Thanks in advance!
<!DOCTYPE html>
<html lang="en"><!--<![endif]-->
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Basic -->
<title>iMAR Affiliate</title>
<meta content="DSA79" name="author" />
<meta content="responsive, html5 template, one page, landing, startup, business, company, corporate, creative" name="keywords" />
<meta content="iMAR Affiliate" name="description" /><!-- Mobile Specific Metas -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" /><!-- Libs CSS -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/owl.carousel.css" rel="stylesheet" /><!-- On Scroll Animations -->
<link href="css/animate.css" rel="stylesheet" /><!-- Template CSS -->
<link href="css/style.css" rel="stylesheet" /><!-- Responsive CSS -->
<link href="css/responsive.css" rel="stylesheet" /><!-- Image Slider -->
<link href="js-image-slider.css" rel="stylesheet" type="text/css" /><!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Lato:400,900italic,900,700italic,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="html5ModalContact.css">
<script type="text/javascript" src="jquery.html5ModalContact.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$().html5ModalContact({
// Popup Config
method: "post",
action: "process_form.php",
shadow: "#FFFFFF",
opacity: 70,
advanced_close: false,
// Fields Enabled
firstn_on: true,
lastn_on: false,
email_on: true,
subject_on: true,
phone_on: false,
// Field Labels
firstn_label: 'Your First Name',
lastn_label: 'Your Last Name',
email_label: 'Your Email Address',
subject_label: 'Message Subject',
phone_label: 'Your Phone Number',
message_label: 'Message',
submit_label: 'Submit',
close_label: 'Close',
// Other
subject_values: 'General,Technical,Feedback,Comments,Help and Support'
});
});
</script>
</head>
<body><!-- HEADER
============================================= -->
<header id="header">
<div class="navbar navbar-fixed-top">
<div class="container"><!-- Logo & Responsive Menu -->
<div class="navbar-header"><button class="navbar-toggle" data-target="#navigation-menu" data-toggle="collapse" id="nav-toggle" type="button"><span class="sr-only">Toggle navigation</span></button><a class="navbar-brand" href="#top-page-banner"><img alt="logo" role="banner" src="img/iMAR2014Logo.png" /></a></div>
<!-- /.navbar-header --><!-- Navigation -->
<nav class="collapse navbar-collapse" id="navigation-menu" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a class="selected-nav" href="#intro" id="GoToHome">Home</a></li>
<li>About</li>
<li>Brochure</li>
<li>Benefits</li>
<li>FAQ</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
<!-- /.navbar-collapse --></div>
<!-- /.container --></div>
<!-- /.navbar --></header>
<!-- END HEADER --><!-- CONTENT WRAPPER
============================================= -->
<div id="content-wrapper"><!-- ABOUT-1
============================================= -->
<footer id="footer">
<div class="container">
<div class="row"><!-- Footer Navigation -->
<div class="col-sm-6 col-md-4" id="footer_nav">
<ul class="footer-nav clearfix">
<li>Contact</li>
<li>Help</li>
<li>Privacy</li>
<li>Terms</li>
</ul>
<div id="footer_copy">
<p>© iMAR Entertainment Inc. 2007-2014</p>
</div>
</div>
<!-- End Footer Navigation --><
<div class="col-md-4">
<div class="col-sm-12" id="newsletter_form">
<div class="clearfix">
<form action="newsletter.php" class="subscribe-form pull-right" id="subscribe-form" method="post"><input class="subscribe-input" name="email" placeholder="Enter your e-mail address..." type="email" /><button class="subscribe-submit" type="submit">Subscribe</button></form>
</div>
<p class="pull-right" id="newsletter-paragraph">Join our newsletter subscription, be always informed</p>
</div>
</div>
<!-- End Newsletter Form --></div>
<!-- End row --></div>
<!-- End container --></footer>
<!-- END FOOTER --></div>
<!-- END CONTENT WRAPPER --><!-- EXTERNAL SCRIPTS
============================================= --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script src="js/bootstrap.min.js" type="text/javascript"></script><script src="js/retina.js" type="text/javascript"></script><script src="js/modernizr.custom.js" type="text/javascript"></script><script src="js/jquery.easing.js" type="text/javascript"></script><script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script><script src="js/jquery.validate.min.js" type="text/javascript"></script><script defer src="js/jquery.flexslider.js" type="text/javascript"></script><script src="js/jquery.accordion.source.js" type="text/javascript"></script><script src="js/owl.carousel.js" type="text/javascript"></script><script src="js/waypoints.min.js" type="text/javascript"></script><script src="js/animations.js" type="text/javascript"></script><script src="js/custom.js" type="text/javascript"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]--><!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information. --><!--
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_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>
--></body>
</html>
You are probably loading a jQuery extension before you are loading jQuery.
Change the order of your script tags to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.html5ModalContact.js"></script>
Then the Can't find variable jQuery & TypeError: undefined is not a function (evaluating '$().html5ModalContact') error should be gone.

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"

Categories