Html not rendering chart - javascript

I am trying out highcharts using flask. I created two examples. The simpler one is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Title!</title>
</head>
<body>
<div id="chart" style="height: 100px; width: 500px"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(document).ready(function() {
$("#chart").highcharts({
chart: {'renderTo': 'chart', 'type': 'line', 'height': 350},
title: {'text': 'My Title'},
xAxis: {'categories': ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']},
yAxis: {'title': {'text': 'yAxis Label'}},
series: [{'data': [1, 2, 3], 'name': 'Label1'}]
});
});
</script>
</body>
</html>
The second one, which is more complicated, is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type=text/javascript src="/static/js/jquery.js"></script>
<script src="/static/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link href="/static/css/view_doc.css" rel="stylesheet" media="screen">
<script src="/static/js/popover.js"></script>
<script src="/static/js/tooltip.js"></script>
<script src="/static/js/view_doc.js"></script>
<script src="/static/js/plotly-latest.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">Copy Cats</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Detect Plag!</li>
<li>Bulk Analysis!</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<br/>
</p>
</div>
</div>
<!--<br><div id="myDiv" style="width: 1100px; height: 400px;"></div>-->
<br>
<div id='chart' style="height: 100px; width: 500px"></div>
</br>
</div>
<div class="col-md-3">
<div class="panel panel-default" data-spy="affix" id="feature_panel" data-offset-top="400"
data-offset-bottom="200">
<div class="panel-heading">
Passage Details
</div>
<div class="panel-body" id="feature_box" style="font-size:12px">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(document).ready(function() {
$('#chart').highcharts({
chart: {'renderTo': 'chart', 'type': 'line', 'height': 350},
title: {'text': 'My Title'},
xAxis: {'categories': ['0', '264', '720', '1470', '1850', '2057', '3189']},
yAxis: {'title': {'text': 'yAxis Label'}},
series: [{'data': [-372.5, -434.55, -465.33, -334.21, -611.22, -1104.75, -1922.59], 'name': u'coleman_liau_index'}]
});
});
</script>
</body>
</html>
The first one works as expected and the second one doesn't. Can anybody tell me why?


Find Below working code of same Example two given by you
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type=text/javascript src="/static/js/jquery.js"></script>
<script src="/static/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link href="/static/css/view_doc.css" rel="stylesheet" media="screen">
<script src="/static/js/popover.js"></script>
<script src="/static/js/tooltip.js"></script>
<script src="/static/js/view_doc.js"></script>
<script src="/static/js/plotly-latest.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">Copy Cats</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Detect Plag!</li>
<li>Bulk Analysis!</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container">
<h1>Where's the plag?</h1>
<div class="jumbotron">
<small>
<p>Atom Type: paragraph </p>
<p>Cluster Method: kmeans </p>
<p>k: 2 </p>
</small>
<button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#full_table">
Hide/Show Table
</button>
<div class="row collapse in" id="full_table">
<div class="col-md-9">
<div class="table-responsive" style="font-size:12px;">
<table class="table table-condensed table-scrollable table-bordered">
<thead>
<tr>
<th>Start Index</th>
<th>coleman_liau_index</th>
<th>Plag. Conf.</th>
<th>Plag. Span</th>
</tr>
</thead>
<tbody>
<tr class="passage_starting_at_">
<td class="passage_row"> 0</td>
<td class="passage_row"> -372.5000</td>
<td class="passage_row"> 0.0586</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 264</td>
<td class="passage_row"> -434.5500</td>
<td class="passage_row"> 0.0083</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 720</td>
<td class="passage_row"> -465.3300</td>
<td class="passage_row"> 0.0203</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 1470</td>
<td class="passage_row"> -334.2100</td>
<td class="passage_row"> 0.0848</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 1850</td>
<td class="passage_row"> -611.2200</td>
<td class="passage_row"> 0.1567</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 2057</td>
<td class="passage_row"> -1104.7500</td>
<td class="passage_row"> 0.6179</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 3189</td>
<td class="passage_row"> -1922.5900</td>
<td class="passage_row"> 0.7834</td>
<td class="passage_row"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
rowling_and_dickens
</div>
<div class="panel-body" id="document_content">
<p>
<div class="passage" features="<p>Span</p><p>0, 262</p><hr size = "10"<p>Plag. conf.</p><p>0.0586207920596</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-372.5000</p><hr size = "10"" style="font-size:14px;display:inline;">
Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say
that they were perfectly normal, thank you very much. They were the last
people you'd expect to be involved in anything strange or mysterious,
because they just didn't hold with such nonsense.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>264, 718</p><hr size = "10"<p>Plag. conf.</p><p>0.0082820834237</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-434.5500</p><hr size = "10"" style="font-size:14px;display:inline;">
Mr. Dursley was the director of a firm called Grunnings, which made
drills. He was a big, beefy man with hardly any neck, although he did
have a very large mustache. Mrs. Dursley was thin and blonde and had
nearly twice the usual amount of neck, which came in very useful as she
spent so much of her time craning over garden fences, spying on the
neighbors. The Dursleys had a small son called Dudley and in their
opinion there was no finer boy anywhere.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>720, 1468</p><hr size = "10"<p>Plag. conf.</p><p>0.0203418720353</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-465.3300</p><hr size = "10"" style="font-size:14px;display:inline;">
The Dursleys had everything they wanted, but they also had a secret, and
their greatest fear was that somebody would discover it. They didn't
think they could bear it if anyone found out about the Potters. Mrs.
Potter was Mrs. Dursley's sister, but they hadn't met for several years;
in fact, Mrs. Dursley pretended she didn't have a sister, because her
sister and her good-for-nothing husband were as unDursleyish as it was
possible to be. The Dursleys shuddered to think what the neighbors would
say if the Potters arrived in the street. The Dursleys knew that the
Potters had a small son, too, but they had never even seen him. This boy
was another good reason for keeping the Potters away; they didn't want
Dudley mixing with a child like that.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>1470, 1847</p><hr size = "10"<p>Plag. conf.</p><p>0.0848471305357</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-334.2100</p><hr size = "10"" style="font-size:14px;display:inline;">
When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story
starts, there was nothing about the cloudy sky outside to suggest that
strange and mysterious things would soon be happening all over the
country. Mr. Dursley hummed as he picked out his most boring tie for
work, and Mrs. Dursley gossiped away happily as she wrestled a screaming
Dudley into his high chair.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>1850, 2055</p><hr size = "10"<p>Plag. conf.</p><p>0.156673905811</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-611.2200</p><hr size = "10"" style="font-size:14px;display:inline;">
My father's family name being Pirrip, and my Christian name Philip, my infant
tongue could make of both names nothing longer or more explicit than Pip. So, I
called myself Pip, and came to be called Pip.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>2057, 3187</p><hr size = "10"<p>Plag. conf.</p><p>0.617870345797</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-1104.7500</p><hr size = "10"" style="font-size:14px;display:inline;">
I give Pirrip as my father's family name, on the authority of his tombstone and my
sister - Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or
my mother, and never saw any likeness of either of them (for their days were long
before the days of photographs), my first fancies regarding what they were like,
were unreasonably derived from their tombstones. The shape of the letters on my
father's, gave me an odd idea that he was a square, stout, dark man, with curly
black hair. From the character and turn of the inscription, "Also Georgiana Wife of
the Above," I drew a childish conclusion that my mother was freckled and sickly. To
five little stone lozenges, each about a foot and a half long, which were arranged
in a neat row beside their grave, and were sacred to the memory of five little
brothers of mine - who gave up trying to get a living, exceedingly early in that
universal struggle - I am indebted for a belief I religiously entertained that they
had all been born on their backs with their hands in their trousers-pockets, and
had never taken them out in this state of existence.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>3189, 4158</p><hr size = "10"<p>Plag. conf.</p><p>0.78340505141</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-1922.5900</p><hr size = "10"" style="font-size:14px;display:inline;">
Ours was the marsh country, down by the river, within, as the river wound, twenty
miles of the sea. My first most vivid and broad impression of the identity of
things, seems to me to have been gained on a memorable raw afternoon towards
evening. At such a time I found out for certain, that this bleak place overgrown
with nettles was the churchyard; and that Philip Pirrip, late of this parish, and
also Georgiana wife of the above, were dead and buried; and that Alexander,
Bartholomew, Abraham, Tobias, and Roger, infant children of the aforesaid, were
also dead and buried; and that the dark flat wilderness beyond the churchyard,
intersected with dykes and mounds and gates, with scattered cattle feeding on it,
was the marshes; and that the low leaden line beyond, was the river; and that the
distant savage lair from which the wind was rushing, was the sea; and that the
small bundle of shivers growing afraid of it all and beginning to cry, was Pip.
</div>
<br/>
</p>
</div>
</div>
<!--<br><div id="myDiv" style="width: 1100px; height: 400px;"></div>-->
<br>
<div id='chart' style="height: 100px; width: 500px"></div>
</br>
</div>
<div class="col-md-3">
<div class="panel panel-default" data-spy="affix" id="feature_panel" data-offset-top="400"
data-offset-bottom="200">
<div class="panel-heading">
Passage Details
</div>
<div class="panel-body" id="feature_box" style="font-size:12px">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(document).ready(function() {
$('#chart').highcharts({
chart: {'renderTo': 'chart', 'type': 'line', 'height': 350},
title: {'text': 'My Title'},
xAxis: {'categories': ['0', '264', '720', '1470', '1850', '2057', '3189']},
yAxis: {'title': {'text': 'yAxis Label'}},
series: [{'data': [-372.5, -434.55, -465.33, -334.21, -611.22, -1104.75, -1922.59], 'name': 'u\'coleman_liau_index'}]
});
});
</script>
</body>
</html>
Error is on line no.329 String enclosing is not proper, I have added Escape Sequence \' over there.

Related

Change hover to always show (caption)

I have a portfolio website
www.malthestigaard.com
where I am displaying some portfolio cases using the Cube Portfolio JavaScript plugin. Each portfolio case has a caption connected to it that on a desktop shows at mouseover/hover. The problem is of course that when viewing my website on a mobile device there is no mouse to hover over the portfolio case and the caption remains hidden (as far as I can tell it hides the captions for specific screen sizes only, but as I am new to html and css I have a hard time figuring out where to find the right media queries and how to change them, plus I'm thinking it will benefit user experience if it just always shows). So my question is, how can I change the css or javascript so that the caption always shows?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="google-site-verification" content="MUWlt9WTlzFb8HfafpTZqH5IG7Em-w30oBgQQZKX1jc" />
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="7 days" />
<link rel="canonical" href="http://www.malthestigaard.com" />
<meta name="author" content="Malthe Stigaard | www.malthestigaard.com">
<meta name="description" content="Website and Portfolio of Malthe Stigaard | www.malthestigaard.com" />
<meta name="keywords" content="Digital Design, Print Design, Photography, Video Production, Web Design, Portfolio, Malthe Stigaard" />
<meta name="geo.country" content="DK" />
<meta property="og:title" content="Portfolio of Malthe Stigaard" />
<meta property="og:description" content="Website and Portfolio of Malthe Stigaard | www.malthestigaard.com" />
<meta property="og:url" content="http://malthestigaard.com/index.thml" />
<meta property="og:image" content="http://malthestigaard.com/images/image-ogf.jpg" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<title>Malthe Stigaard | Graphic & Web Design | www.malthestigaard.com</title>
</head>
<body>
<div class="wrapper">
<nav>
<div class="content-wrapper">
<div class=textclear>
<div class="alignleft">
<h1 class="firsth1"> MALTHE STIGAARD </h1></div>
<div class="alignright">
<ul>
<h1><li> WORK </li><li> ABOUT </li><li> CONTACT </li></h1></ul>
</div>
</div>
</div>
</nav>
<section id="banner">
<div id="bannercontainer">
<h2>I'M MALTHE STIGAARD</h2>
<div id="bannerlinescontainer">
<div class="grad"></div>
<h1><p>DIGITAL DESIGN<br>PRINT DESIGN<br>VIDEO PRODUCTION<br>PHOTOGRAPHY</p></h1>
<div class="grad"></div>
</div>
<h2>WELCOME TO MY PORTFOLIO</h2> see my work </div>
</section>
<section id="work">
<h1>MY WORK</h1>
<div class="copytext"> Over a 12-year period I have been working on digital and print projects within the creative industry at a strategic, executive and production level. I have managed tasks of branding, UX design, UI design, web development, video production and photography. I have coordinated teams and carried out launches, marketing campaigns and assisted in communication strategies and business development. In brief I am a creative visual storyteller with a broad experience. Below you'll find a small collection of some of my work - take a look and feel free to share your opinion with me.</div>
<div id="js-filters-masonry" class="cbp-l-filters-alignLeft">
<div data-filter="*" class="cbp-filter-item-active cbp-filter-item"> All
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".web-design" class="cbp-filter-item"> Web Design
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".graphic" class="cbp-filter-item"> Graphic
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".direct-response-marketing" class="cbp-filter-item"> Direct Response Marketing
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".construction" class="cbp-filter-item"> Construction
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".spatial-design" class="cbp-filter-item"> Spatial Design
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".photography" class="cbp-filter-item"> Photography
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".editorial" class="cbp-filter-item"> Editorial
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".video" class="cbp-filter-item"> Video
<div class="cbp-filter-counter"></div>
</div>
</div>
<div id="js-grid-masonry" class="cbp">
<div class="cbp-item web-design">
<a href="images/portfolio-case-01.jpg" class="cbp-caption cbp-lightbox" data-title="<p>Mobile and Desktop Website</p><p><a href='http://jonasroberts.dk/' target='_blank'>TAKE ME TO THE WEBSITE</a></p>">
<div class="cbp-caption-defaultWrap"> <img src="images/portfolio-case-01-thumbnail.jpg" alt="portfolio Malthe Stigaard"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">Personal Trainer Jonas Roberts</div>
<div class="cbp-l-caption-desc">Mobile and Desktop Website</div>
</div>
</div>
</div>
</a>
</div>
</section>
<section id="about">
<h1> ABOUT ME</h1>
<h2> WHAT I DO</h2>
<div id="cubepanel">
<div id="js-filters-tabs" class="cbp-l-filters-big">
<div data-filter=".tools" class="cbp-filter-item-active cbp-filter-item"> TOOLS I USE</div>
<div data-filter=".languages" class="cbp-filter-item"> WEB LANGUAGES</div>
<div data-filter=".media" class="cbp-filter-item"> PHOTOGRAPHY & VIDEO</div>
</div>
<div id="js-grid-tabs" class="cbp cbp-l-grid-tabs">
<div class="cbp-item tools"> For the past 10 years I have worked professionally with the Adobe Creative Suite. I am particularly experienced in Photoshop, Indesign, Premiere Pro and Bridge. I also have 5 years of professional experience with Final Cut Pro + extensions.</div>
<div class="cbp-item languages"> I have 2 years of experience in coding HTML 5 and CSS 3. I know JavaScript and jQuery to the extent that I can implement plugins in HTML, and apply basic adjustments.</div>
<div class="cbp-item media"> I have trained as a photographer and as a videographer. Within photography I have covered mostly event photography, product photography, architectural photography and artistic photography. My video productions include documentaries, art house films and company films, contributing as producer, director, camera operator and editor.</div>
</div>
</div>
<h2> CLIENTS & COLLABORATIONS</h2>
<p id="previous" class="copytext">OLYMPUS
<br>DANSK KOMMUNIKATIONSFORENING
<br>TNT ARKITEKTER
<br>GERRIT RIETVELD ACADEMIE
<br>MOTORIOUS
<br>RIETWOOD STICHTING
<br>PERSONLIG TRÆNER JONAS ROBERTS
<br>TRÆSKIBS SAMMENSLUTNING
<br>FATAMORGANA
<br>PLUS 2
<br>MONTH OF PERFORMANCE ART
<br>HOMEBASE LAB
<br>SERENITY
<br>BREAST FRIENDS
<br>DANSK ICYE
<br>M4 GASTATELIER
<br>PIONER
<br>START POINT PRIZE
<br>AIR ANTWERPEN
<br>MONDRIAAN FONDS
<br>ARBOR VITAE FOUNDATION
<br>DANSK KUNSTRÅD
<br>
</p>
</section>
<section id="spare">
<h1> IN MY SPARE TIME</h1>
<p class="copytext"> FITNESS OR SWIMMING AFTER WORK, KEEPING MYSELF UPDATED WITH WHAT'S GOING ON IN THE TECH WORLD. I LOVE A GOOD STORY, AS WELL AS GOOD MOVIES AND ART. I LIKE TO TRAVEL EUROPE TO VISIT FRIENDS WITHIN THE EUROPEAN CREATIVE COMMUNITY. AND I SPEND A CONSIDERABLE AMOUNT OF TIME THINKING ABOUT WORD DEFINITIONS AND LANGUAGES.</p>
</section>
<section id="contact">
<div class="content-wrapper">
<div class="vertical-align"> <img src="images/portrait-malthe-stigaard.jpg" alt="portrait Malthe Stigaard"></div>
<div class="vertical-align">
<h1> CONTACT</h1>
<p class="white"> I would love to hear from you, write me at ms#malthestigaard.com
<br> and find me on Facebook, LinkedIn and Instagram.</p>
</div>
</div>
</section>
<footer>
<p> © 2016 Malthe Stigaard</p>
</footer>
</div>
</body>
</html>
JAVASCRIPT:
<script type="text/javascript" src="cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script>
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if (target.length) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
(function($, window, document, undefined) {
'use strict';
$('#js-grid-tabs').cubeportfolio({
filters: '#js-filters-tabs',
defaultFilter: '.tools',
animationType: 'fadeOut',
gridAdjustment: 'default',
displayType: 'default',
caption: '',
});
})(jQuery, window, document);
(function($, window, document, undefined) {
'use strict';
$('#js-grid-masonry').cubeportfolio({
filters: '#js-filters-masonry',
layoutMode: 'grid',
defaultFilter: '*',
animationType: 'slideDelay',
gapHorizontal: 20,
gapVertical: 20,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 1500,
cols: 4
}, {
width: 1100,
cols: 4
}, {
width: 800,
cols: 3
}, {
width: 480,
cols: 2,
options: {
caption: ''
}
}, {
width: 320,
cols: 1,
options: {
caption: ''
}
}],
caption: 'overlayBottom',
displayType: 'bottomToTop',
displayTypeSpeed: 100,
lightboxDelegate: '.cbp-lightbox',
lightboxGallery: true,
lightboxTitleSrc: 'data-title',
lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
});
})(jQuery, window, document);
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#grid-container').cubeportfolio({});
});
</script>
<!-- Google Analytics tracking code -->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-34485670-1', 'auto');
ga('send', 'pageview');
</script>

The captions are positioned at the bottom of the container with CSS, and the bottom attribute is changed on hover. You can set the bottom to 0(in your media queries) and the captions will always be in view.
Add to the bottom of your css:
.cbp-caption-overlayBottom .cbp-caption-activeWrap { bottom: 0;}

You can do it like this :
.card {
background-color: #3498db;
min-height: 200px;
min-width: 200px;
}
.caption {
visibility: hidden;
}
.card:hover .caption {
visibility: visible;
}
#media (max-width: 768px) {
.caption {
visibility:visible;
}
}
<div class="card">
<div class="caption">
Hello this is a caption
</div>
</div>
The :hover properties are re-write in the media querie that you want without the :hover.

Set opacity 30% for duration of 0.5s

My task is to set thumbnail images to opacity 30% for duration of 0.5s upon hoverover. I am very new to this and not sure if i am doing this right. Can anyone advise to my code in js file?
<!DOCTYPE html>
<html>
<body>
<script>
$(document).ready(function(){
// Add the hover handler to the link
$("#imageCS").hover(
function(){ // When mouse pointer is above the link
// Make the image inside link to be transparent
$(this).find("images/boxImage1").animate(
{opacity:"0.3"},
{duration:500}
);
},
function(){ // When mouse pointer move out of the link
// Return image to its previous state
$(this).find("images/boxImage1").animate(
{opacity:"1"},
{duration:300}
$(document).ready(function(){
// Add the hover handler to the link
$("#imageCS").hover(
function(){ // When mouse pointer is above the link
// Make the image inside link to be transparent
$(this).find("images/boxImage2").animate(
{opacity:"0.3"},
{duration:500}
);
},
function(){ // When mouse pointer move out of the link
// Return image to its previous state
$(this).find("images/boxImage1").animate(
{opacity:"1"},
{duration:300}
$(document).ready(function(){
// Add the hover handler to the link
$("#imageCS").hover(
function(){ // When mouse pointer is above the link
// Make the image inside link to be transparent
$(this).find("images/boxImage1").animate(
{opacity:"0.3"},
{duration:500}
);
},
function(){ // When mouse pointer move out of the link
// Return image to its previous state
$(this).find("images/boxImage3").animate(
{opacity:"1"},
{duration:300}
</html>
</body>
</script>
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>TMA</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="main.css" rel="stylesheet" type="text/css"/>
<link href="myStyle.css" rel="stylesheet" type="text/css"/>
<script src="jquery.js"></script>
<script src="myScript.js"></script>
</head>
<body>
<div id="socialmediafloat">
<img src="images/facebook.png" id="facebook_icon" class="media_icons"/>
<img src="images/twitter.png" id="twitter_icon" class="media_icons"/>
<img src="images/youtube.png" id="youtube_icon" class="media_icons"/>
<img src="images/pinterest.png" id="pinterest_icon" class="media_icons"/>
</div>
<div id="myheader">
<div id="header" class="container">
<div id="logo">
<h1><img src="images/UniSIM.JPG"/></h1>
</div>
</div>
<div id="highlights" class="container">
<div class="title">
<h1>Discover The UniSIM Advantage</h1>
<span class="byline">Are you ready to open your mind to more possibilities, give yourself the opportunities that you've always wanted, and quench your thirst for knowledge? No matter what it is, whether to give yourself a second chance in your career or to provide for a better life for yourself and your loved ones, further education with UniSIM will get you there.</span>
</div>
</div>
</div>
<div id="content">
<div id="myCols" class="container">
<div class="col1">
<img src="images/boxImage1.jpg" class="imageCS"/>
<p>Whatever your goals, background or life stage, we believe in you, and we will equip you with the real-world knowledge and practice-oriented skills to excel, both in life and in your chosen career.</p>
<button id="col1btn" class="button">Discover</button>
</div>
<div class="col2">
<img src="images/boxImage2.png" class="imageCS"/>
<p>With a range of more than 50 degree programmes in various disciplines, we focus on equipping our students with a competitive advantage in their industries. Explore the programmes we offer from our five schools and embark on your learning journey now.</p>
<button id="col2btn" class="button">Programmes</button>
</div>
<div class="col3">
<img src="images/boxImage3.jpg" class="imageCS"/>
<p>SIM University (UniSIM) offers government-funded, full-time direct honours programme for school leavers. A full-time degree can normally be completed in 4 years although the maximum period of candidature is 6 years.</p>
<button id="col3btn" class="button">Education</button>
</div>
</div>
</div>
<div id="details">
<div class="container">
<p>BSc Multimedia Technology and Design</p>
<table id="MTDSchedule">
<tr>
<th></th>
<th>Code</th>
<th>Name</th>
<th>Credit Units</th>
<th>Time Table</th>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>ICT271</td>
<td>Introductory Programming Techniques in C++</td>
<td>5</td>
<td>Thursday/Week 1/Term 1</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD105e</td>
<td>Digital Photography Techniques</td>
<td>5</td>
<td>Friday / Week 2 / Term 1</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD111e</td>
<td>Creative Design Fundamentals</td>
<td>5</td>
<td>Wednesday / Week 1 / Term 1</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD113e</td>
<td>History of Media</td>
<td>5</td>
<td>Wednesday / Week 1 / Term 2</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD201e</td>
<td>Fundamentals of Graphics Design</td>
<td>5</td>
<td>Tuesday / Week 1 / Term 1</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD203e</td>
<td>Advanced Graphics Design</td>
<td>5</td>
<td>Tuesday / Week 2 / Term 2</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD205e</td>
<td>Audio Technology</td>
<td>5</td>
<td>Wednesday / Week 1 / Term 1</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD207e</td>
<td>Video Technology</td>
<td>5</td>
<td>Wednesday / Week 1 / Term 2</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD215</td>
<td>Application of C++ in Multimedia</td>
<td>5</td>
<td>Wednesday / Week 1 / Term 2</td>
</tr>
</table>
<button class="button">Reset</button>
</div>
</div>
<div id="footer" class="container">
<p>© All rights reserved. | SIM University</p>
</div>
</body>
</html>

Haven't tested it, but I think you'll want something like this:
$(".imageCS").mouseover(function(){
$(this).animate({
opacity: 0.3
}, 500 );
});
$(".imageCS").mouseout(function(){
$(this).animate({
opacity: 1
}, 300 );
});
Since imageCS is a class, you want to have your JQuery selector set as .imageCS and not #imageCS (which would be used for a div id as opposed to a class). Additionally, since it is a class this means you can access all of the images with that class at once rather than having to do the mouseover events for each one separately. And you don't have to find the image url, just the image tag itself, so just this without doing the .find is fine.
Also, if you have access to the CSS I would actually do these hover events there using CSS3 transitions (as opposed to the JQuery/JS solution proposed above). It would be simpler and cleaner IMO.

Use the effect on the mouseenter event and then restore opacity to 1 with setTimeout.
Example:
$('#so').mouseenter(function() {
$('#so').animate({opacity: 0.3});
setTimeout(function() {
$('#so').animate({opacity: 1})
}, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- sample image -->
<div id="so-img-div">
<img id="so" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded" style="border:1px solid black">
</div>

Why don't you do this effect with CSS?
$imgWrapper = $('.image--wrapper');
$imgWrapper.hover(
//this function will run when you hover your image
function() {
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
}
);
img {
opacity:0;
transition: all 0.5s ease;
}
.active img {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image--wrapper">
<img src= "https://www.w3schools.com/html/pic_mountain.jpg" />
</div>

Anchor tag within a bootstrap 3 collapse

I am building a forum using bootstrap 3. when you click the forum subheading it uncollapses and reveals content. I wish for it to go to the anchor tag inside that content. I tried using name and #idhere but it does not work.
Here is a snippet of my code and my fiddle https://jsfiddle.net/mattmega4/e6armed5/embedded/result/
...Some more code up top
<a href="#theFirstPost"><h4 class="theBigCollapse" data-
toggle="collapse">Get your work critiqued
<br><small>stuff ere</small></h4></a>
</td>
<td class="text-center hidden-xs hidden-sm">0</td>
<td class="text-center hidden-xs hidden-sm">0</td>
<td class="hidden-xs hidden-sm">by John Doe
<br><small><i class="fa fa-clock-o"></i> Never</small></td>
</tr>
</tbody>
<div class="col-md-8" name="theFirstPost">
<a name="theFirstPost"></a>
<div id="theFirstPost" name="theFirstPost">
<div class="firstPost">
<div class="postHeading">
<h3>My shot, Banff Pano</h3>
</div>
<div class="postBody">
<p>
Here is a shot of Banff Alberta, Canada.
I took a series of photographs in the portrait orientation
and, using Lightroom and Photoshop, I stitched them together and
adjusted the image to bring out more contrast and colors. The settings
are f/11 at 1/500s; ISO 280.
</p>
<p>
I'm wondering if I should have used a wider aperture and
let the background be a little more blurred
</p>
</div>
<div class="postImage">
<img src="assets/pano.jpg" />
</div>
<div class="postFooter">
<p>
Posted on 7/23/15 at 12:05PM
</p>
</div>
</div>
</div>
</div> <!-- end of 8 -->

My teacher solved my problem, instead of using HTML we used jquery to solve it
$('html, body').animate({
scrollTop: $("#theFirstPost").offset().top
}, 1000)

How to display row inside a row in angular js

I am trying to design travel page using angular js where I am stuck in showing seat layout.
Whenever I click in show details I want to show the seat layout under the clicked row. How do I achieve this?
My code:
<html ng-app="searchResults">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<style>
td{text-align:center;}
.animate.ng-enter, .animate.ng-leave {
transition: 500ms ease-in all;
position: relative;
display: block;
}
.animate.ng-enter.ng-enter-active, .animate.ng-leave {
left: 0;
}
.animate.ng-leave.ng-leave-active, .animate.ng-enter {
left: 500px;
}
</style>
</head>
<body>
<div id="busesDiv" ng-controller="busesController">
<input type="text" ng-model="search"/>
<div style="width:100%;">
<table style="width:100%;" id="myT">
<thead>
<tr>
<th ng-repeat="head in busHeaders">{{ busHeaders[$index]}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bus in buses | filter:search" class="animate">
<td>{{bus.operatorName}}</td>
<td>{{bus.vehicleClass}}</td>
<td>{{bus.amenities}}</td>
<td>{{bus.departureTime}}</td>
<td>{{bus.arrivalTime}}</td>
<td>{{bus.availableSeats}}</td>
<td>{{bus.fare}}</br><button ng-click="showSeatDetails(bus,bus.busServiceId)">Show Details</button></td>
</tr>
</tbody>
</table>
<table class"seatLayoutTable">
<tbody>
<tr ng-repeat="row in totalSeatConfiguration.split(';')">
<td ng-repeat="seat in row.split(',') track by $index">
<span ng-if="bookedSeatsArray.indexOf(seat.split('_')[0].trim())==-1 && ladiesSeatsArray.indexOf(seat.split('_')[0])==-1">
<img src="images/available.png" ng-show="seat.split('_')[0] !='NA'" title="{{seat.split('_')[0]}}"/>
</span>
<span ng-if="bookedSeatsArray.indexOf(seat.split('_')[0])!=-1">
<img src="images/booked.png" ng-show="seat.split('_')[0]!='NA'" title="{{seat.split('_')[0]}}"/>
</span>
<span ng-if="ladiesSeatsArray.indexOf(seat.split('_')[0])!=-1">
<img src="images/ladies.png" ng-show="seat.split('_')[0]!='NA'" title="{{seat.split('_')[0]}}"/>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The second table will display seat layout,but I want to add this layout to clicked row.

First off, skip the tables. There's no reason to use them here. Second, make your seats children of the bus
<h1 ng-repeat="head in busHeaders">{{ busHeaders[$index]}} </h1>
<div ng-repeat="bus in buses | filter:search" class="bus animate">
<span>{{bus.operatorName}}</span>
<span>{{bus.vehicleClass}}</span>
<span>{{bus.amenities}}</span>
<span>{{bus.departureTime}}</span>
<span>{{bus.arrivalTime}}</span>
<span>{{bus.availableSeats}}</span>
<span>{{bus.fare}}</br>
<button ng-click="bus.showSeats = !bus.showSeats">Show Details</button></span>
<div class="seatLayout" ng-repeat="seat in bus.seats" ng-show="bus.showSeats">
<span ng-show="!seat.booked" ng-click="seat.book()">
<span ng-show="!seat.ladies"><img src="images/available.png"/></span>
<span ng-show="seat.ladies"><img src="images/ladies.png"/></span>
</span>
<span ng-show="seat.booked"><img src="images/booked.png"/></span>
</div>
</div>
You'll of course have to refactor your data model and style everything appropriately. But you get the gist of how much you're overcomplicating something that's really relatively simple if you're using a straightforward data model.

Prevent browser back button

I have been trying to figure out a way that when a user clicks on the escape button and when the user clicks the browser back button, it just redirects to the webpage that it replace. I found the code that works kinda well:
function getAway() {
// Get away right now
window.open("http://weather.com", "_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
//Prevents back button from going back to website
}
$(function() {
$("#get-away").on("click", function(e) {
getAway();
});
$("#get-away a").on("click", function(e) {
// allow the (?) link to work
e.stopPropagation();
});
});
function checkStorage() {
var myVar = sessionStorage.getItem("myVar");
if (myVar != undefined) {
window.history.forward();
}
}
function check() {
sessionStorage.setItem("myVar", "true");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="Spanish Chat, Child Abuse Chat, Child Abuse Support, Child Abuse Discussion, Suvivor, chat, discussion, support, domestic violence, violencia domestica, abuso infantil, abuso de niño">
<meta name="description" content="Moderated chat rooms for victims and survivors of child abuse and domestic violence.">
<title>Yes ICAN: International Child Advocacy Network</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<!--[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 type="text/javascript">
alert("SAFETY ALERT: If you are in danger, please use a safer computer, or call 911, your local hotline, or the U.S. National Domestic Violence Hotline at 1-800-799-7233 and TTY 1-800-787-3224. See more technology safety tips online.")
</script>-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-27303610-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 onLoad="initialize(); checkStorage();">
<div id="wrapper">
<!--Main Navigation Bar-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img alt="site logo" id="navlogo" src="img/logo_short_sm.png" />
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tooltip" title="Home page" target="_blank" href="index.html">Home</a>
</li>
<li><a data-toggle="tooltip" title="Group Facilitated Chat Room" href="gethelp.html">Get Help</a>
</li>
<li><a data-toggle="tooltip" title="Message Board Community" href="community-rules.html">Community Forums</a>
</li>
<li><a data-toggle="tooltip" title="Learn More About Abuse" href="aboutabuse.html">About Abuse</a>
</li>
<li><a data-toggle="tooltip" title="Learn More About YesICAN" href="about-us.html">About Us</a>
</li>
<li><a data-toggle="tooltip" title="Opportunities to volunteer, donate, and get involved!" href="get-involved.html">Get Involved</a>
</li>
</ul>
<!--Right side of navigation bar-->
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn btn-lg btn-danger donate-nav"><a target="_blank" href="https://donatenow.networkforgood.org/yesican?code=Homepage">Donate <span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!--END NAVIGATION-->
<img id="banner" alt="home page banner" src="img/banner.jpg" />
<div id="content">
<section class="col-md-4">
</section>
<section class="col-md-8">
<!--Left column content goes here-->
<h2>Our Mission<small><br>Working World Wide to Stop the Silence and Cycle of Abuse</small></h2>
<p>The International Child Advocacy Network, Inc. (YesICAN) is a leading global provider of online information for those who have issues around child abuse. It is our mission to work worldwide to break the silence and cycle of abuse. <strong><em>We</em> believe</strong> that
child abuse could cease to exist if everyone had the capability to receive accurate, up-to-date information about abuse and then had the capacity to receive assistance and support to change.</p>
<h2>How We Make a Difference</h2>
<p>Our website provides information, statistics, and definitions of abuse. We also have the <em>Yes</em>ICAN Community where individuals who have questions regarding child abuse and domestic violence can join with
others to discuss various concerns and ideas around these topics.</p>
<p>The premier service of our organization is our facilitated chat groups. <strong>In these groups we offer an opportunity for abused children and adults to speak with others and to get council and support from trained facilitators.</strong> These
facilitators have gone through a 60-hour training lead by a Licensed Therapist. To date, we have had over 44,000 participants in our chat rooms. We run specialized chat groups for teens, adult-survivors, victims of domestic violence, individuals
who are in close relationship with abuse survivors and parents.</p>
<h2>Our Current Focus</h2>
<p>Our focus for now, is the development of an on-line parenting program. In this 6-8 week program, individuals will receive training in non-violent parenting. This training will include dynamics of both physical and emotional development, and appropriate
discipline. In addition, each member of the program will have access to support groups where the topic of each weeks' training session will be discussed. During this time specific issues and concerns that come up for each participant will be
shared in a safe and supportive environment.</p>
<p>It is our hope that in the future, we will provide an international support forum, specifically targeting military personnel and their dependents that are based outside of the United States.</p>
</section>
<section class="col-md-4">
</section>
<section class="col-md-4" style="background-color:#eceef1; border-radius:10px;">
<!--Right column content goes here-->
<h2>Annual Bowling Event</h2>
<a href="files/2015_Bowling%20Flyer_low_res.pdf" target="_blank">
<div style="text-align:center; margin-top:30px;">
<img src="img/2015_Bowling%20Flyer_th.jpg" alt="flyer thumbnail">
</a>
<br>
<a href="https://donatenow.networkforgood.org/yic2015bowling" target="_blank">
<button type="button" class="btn btn-lg btn-primary">Buy Tickets</button>
</a>
<br><small>Click to see event details</small>
</div>
<br>
<p>This Sunday <strong>June 14</strong>, come join your favorite <b>Star Wars</b> characters at the International Child Advocacy Network's <strong>Annual Bowling Fundraiser and Silent Auction!</strong>
</p>
<br>
<h2>In Memorial</h2>
<a href="memorial.html">
<img alt="Memorial List" src="img/memorial_list.jpg" />
</a>
<p>We keep this list in honor of the children who have died from the injuries infliected upon them as a result of child abuse.</p>
<br>
<h2>Missing Children<br><small>Alert Cases</small></h2>
<section style="border: #cfd1d4 solid 1px; border-radius:2%; padding:5px;">
<!-- start feedwind code -->
<script type="text/javascript">
document.write('\x3Cscript type="text/javascript" src="' + ('https:' == document.location.protocol ? 'https://' : 'http://') + 'feed.mikle.com/js/rssmikle.js">\x3C/script>');
</script>
<script type="text/javascript">
(function() {
var params = {
rssmikle_url: "http://www.missingkids.com/missingkids/servlet/XmlServlet?act=rss&LanguageCountry=en_US&orgPrefix=NCMC",
rssmikle_frame_width: "100%",
rssmikle_frame_height: "400",
frame_height_by_article: "0",
rssmikle_target: "_blank",
rssmikle_font: "Arial, Helvetica, sans-serif",
rssmikle_font_size: "12",
rssmikle_border: "off",
responsive: "off",
rssmikle_css_url: "",
text_align: "left",
text_align2: "left",
corner: "off",
scrollbar: "on",
autoscroll: "off",
scrolldirection: "up",
scrollstep: "2",
mcspeed: "20",
sort: "Off",
rssmikle_title: "off",
rssmikle_title_sentence: "",
rssmikle_title_link: "",
rssmikle_title_bgcolor: "#FF0000",
rssmikle_title_color: "#FFFFFF",
rssmikle_title_bgimage: "",
rssmikle_item_bgcolor: "#eceef1",
rssmikle_item_bgimage: "",
rssmikle_item_title_length: "55",
rssmikle_item_title_color: "#0066FF",
rssmikle_item_border_bottom: "on",
rssmikle_item_description: "on",
item_link: "off",
rssmikle_item_description_length: "150",
rssmikle_item_description_color: "#666666",
rssmikle_item_date: "gl1",
rssmikle_timezone: "Etc/GMT",
datetime_format: "%b %e, %Y %l:%M:%S %p",
item_description_style: "text+tn",
item_thumbnail: "full",
item_thumbnail_selection: "auto",
article_num: "15",
rssmikle_item_podcast: "off",
keyword_inc: "",
keyword_exc: ""
};
feedwind_show_widget_iframe(params);
})();
</script>
<div style="font-size:10px; text-align:center; width:300px;">RSS Feed Widget
<!--Please display the above link in your web page according to Terms of Service.-->
</div>
<!-- end feedwind code -->
</section>
<br>
</section>
</div>
<div class="container" style="overflow-y: hidden;">
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:#d3d3d3">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" style="text-align:center">Safety Warning</h3>
</div>
<div class="modal-body">
<p style="text-align:center">Your computer can be monitored by others. For your safety, consider using a public computer or a friend’s computer. If you are in danger, please call 911, your local hotline, or the U.S. National Domestic Violence Hotline at<a href="tel:+1.800.799.7233"
class="call" onClick="return probablyPhone;"> +1-800-799-7233</a> and
<br>TTY +1-800-787-3224.</p>
<p style="text-align:center">To learn more how to computer safety, click the following link:
<br>Internet Safety Tips
<br>
</p>
<!--Wording can be better just for the meantime-->
<p style="text-align:center">If you are not safe, click the following button:
<br><span class="btn btn-lg btn-danger" id="get-away" id="del_cookie">Escape Button</span>
</br>
</p>
</div>
<div class="modal-footer">
<p class="text-center">Close
</p>
</div>
</div>
</div>
</div>
</div>
<!--End of Modal container-->
<!--<div class="container">
<section class="col-md-3">
<div class="list-group" id="sidebar">
<a href="#" class="list-group-item">
Link 1
</a>
</div>
</section>
</div>-->
</div>
<!--End wrapper-->
<footer>
<div id="footer-right">
<ul>
<li>ABOUT US</li>
<li>Contact Us
</li>
<li>FAQ's
</li>
<li>Site Map
</li>
</ul>
<ul>
<li>SUPPORT OUR CAUSE</li>
<li>Donate
</li>
<li>Volunteer
</li>
<li>Fundraising Events
</li>
</ul>
<ul>
<li>FOLLOW US</li>
<li>
<a target="_blank" href="http://ww.facebook.com/yesicanorg">
<img src="img/social/facebook-icon.png" alt="Facebook Logo" class="social-icon">
</a>
<a target="_blank" href="http://www.instagram.com/childadvocacynetwork">
<img src="img/social/instagram-icon.png" alt="Instagram Logo" class="social-icon">
</a>
<a target="_blank" href="http://twitter.com/YesICANorg">
<img src="img/social/twitter-icon.png" alt="Twitter Logo" class="social-icon" />
</a>
<a target="_blank" href="http://www.pinterest.com/Yesicanorg">
<img src="img/social/pinterest-icon.png" alt="Pinterest Logo" class="social-icon" />
</a>
<a target="_blank" href="http://www.youtube.com/childadvocacynetwork">
<img src="img/social/youtube-icon.png" alt="YouTube Logo" class="social-icon" />
</a>
</li>
</ul>
</div>
<div id="footer-left">
<p id="footer-slogan">BREAK THE <strong>SILENCE</strong>
<br>AND <strong>CYCLE</strong> OF ABUSE</p>
<p id="copyright">Copyright© 2015 International Child Advocacy Network</p>
</div>
</footer>
<!-- Bootstrap core JavaScript placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
<script src="js/bootstrap.min.js"></script>
<script src="js/escape-button.js"></script>
<script src="js/checkStorage.js"></script>
<!--Testing to see if it works-->
<!--<script>
$(document).ready(function() {
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '1');
}
});
</script>-->
<!--Works fine-->
<script>
$(function() {
$('#myModal').modal('show');
});
</script>
<script>
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
function initialize() {
(function($) {
$('.call').css("text-decoration", "none");
$('.call').css("color", "black");
$('.call').css("cursor", "default");
})(jQuery);
}
</script>
<script>
function checkStorage() {
var myVar = sessionStorage.getItem("myVar");
if (myVar != undefined) {
window.history.forward();
}
}
function check() {
sessionStorage.setItem("myVar", "true");
}
</script>
</body>
</html>
This is what I am doing and I added the html code and the escape button code and the code you showed me

If after pressing the "Escape" button you want the user to redirect to some other page and don't want him/her to return even if they press "back" in the browser then here is what you can do.
Include onload event in your body tag as,
<body onload="checkStorage()">
<!--You body content-->
</body>
Now use the below script,
<script type="text/javascript">
function checkStorage() {
var myVar = sessionStorage.getItem("myVar");
if (myVar != undefined) {
window.history.forward();
}
}
function check() {
sessionStorage.setItem("myVar", "true");
//the URL you want the user to get redirected to when
//they press "Escape" button
window.location.replace("http://www.saumilsoni.me");
}
</script>
UPDATE: If you already have called some function on onload you can use the concept of callback function because defining multiple functions in onload can have issues in some browser. Here is what you can do,
<body onload="checkStorage()">
<!--You body content-->
</body>
<script>
function checkStorage(){
var myVar = sessionStorage.getItem("myVar");
if (myVar != undefined) {
window.history.forward();
}else{
//call the function here that you previously called onload
yourFunction();
}
}
</script>

I would implore you to not break the back button. We've known it is a bad idea to break the back button since the nineteen-nineties.
Users have an expectation of how their browser will work, when you intentionally break the way something normally works you will frustrate, irritate and even possibly anger them. Many people will refuse to use your site if it behaves in unpredictable or non-standard ways. It is easy enough to accidentally make things hard to use, it is a bad idea to intentionally make your site harder to use.

Categories