Prevent browser back button - javascript
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.
Related
Electron: Renderer process not rendering navbar
I'm new to electron and I'm trying to display a simple navbar in the renderer process of Electron with the following html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">-->
<link rel="stylesheet" href="../../node_modules/bulma/css/bulma.min.css">
<link rel="stylesheet" href="../../node_modules/#fortawesome/fontawesome-free/css/fontawesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
And it works fine if I open this html file with firefox, but the renderer process only display the logo, not the menu. Here is the main process code:
exports.createWindow = () => {
// TODO only use in dev mode
require('devtron').install();
const primary_display = electron.screen.getPrimaryDisplay();
this.win = new BrowserWindow({
width: primary_display.size.width / 1.5, height: primary_display.size.height / 1.5,
minWidth: primary_display.size.width / 2, minHeight: primary_display.size.height / 2,
title: "Client v" + app.getVersion(),
show: false
});
// Open dev tools
this.win.openDevTools();
// Allow to directly show the app in a native app style
this.win.once("ready-to-show", () => {
this.win.show()
});
// and load the main.html of the app.
this.win.loadURL(`file://${__dirname}/../renderer/main.html`);
// Emitted when the window is closed.
this.win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
this.win = null;
});
// Build menus from template
Menu.setApplicationMenu(Menu.buildFromTemplate(appMenu.getMenuTemplate(this.win)));
const mainSession = this.win.webContents.session;
};
And here are the results.
When opening the html file with firefox:
And in the rederer process of electron:
Any idea why this happens? Thanks a lot!
EDIT: It seems that the electron renderer is rendering my webpage as a mobile webpage, I don't know why this happens.
How to make a function for multiple jQuery actions without writing so much code?
Let me explain,
I'm making a page about everything I'm learning in PHP. I also want to add a great deal of interactivity to this page. For example, I want to add a button displaying more information (Hidden) and have a jQuery slide down do the job. However, I don't want to line a million and one lines of code making the file obsolete.
I'm trying to make a web page that has my buttons performing the same actions in different paragraphs. I want to know if there's a way to implement a function in order to not type 1000 lines of code to keep up with all the buttons and paragraphs. Please help me, thank you in advance.
<?php
$line_break = '<b><span class="bg-light m-0 p-0">/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ </span></b>';
?>
<!doctype html>
<html lang="en">
<head>
<!-- LOGO -->
<link rel="shortcut icon" type="image/x-icon" href="../imgs/logotree.png" />
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="../js/jquery-3.2.1.min.js"></script>
<title>Treehoose</title>
</head>
<body class="bg-secondary">
<div class="jumbotron bg-dark text-light text-center">
<h1 class="display-4 ">5/<span class="text-primary">23</span>/18</h1>
<p class="lead text-success p-0 m-0">PHP Arrays & Control Structures</p>
<hr class="my-4">
<p><b>Loops & Structuring </b></p>
<p class="lead">
<a class="btn btn-outline-success btn-lg" id="information_1" role="button">Show More Information</a>
</p>
<p id="extra_1" style="display: hidden;">extra information that may be less important, yet necesary</p>
</div>
<?php echo $line_break;?>
<div class="jumbotron bg-dark text-light text-center">
<h1 class="display-4 ">5/<span class="text-primary">24</span>/18</h1>
<p class="lead text-success p-0 m-0">PHP Arrays & Control Structures</p>
<hr class="my-4">
<p><b>Loops & Structuring </b></p>
<p class="lead">
<a class="btn btn-outline-success btn-lg" id="information_1" role="button">Show More Information</a>
</p>
<p id="extra_1" style="display: hidden;">extra information that may be less important, yet necesary</p>
</div>
<?php echo $line_break;?>
<!-- jQuery -->
<script>
$(document).ready(function(){
$('#extra_1').hide();
$("#information_1").dblclick(function(){
$("#extra_1").slideUp();
});
$("#information_1").click(function(){
$("#extra_1").slideDown();
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
You could add a data-target attribute to your button that would be the id of the p tag you want to slide up or down.
<p class="lead">
<a data-target="#extra_1" class="btn btn-outline-success btn-lg" id="information_1" role="button">Show More Information</a>
</p>
<p id="extra_1" style="display: none;">extra information that may be less important, yet necesary</p>
But first you need to make sure you do not have duplicate ids, which you currently do... so fix that first. Also, hidden is not a valid value for the css display property... I think you mean display: none; (you are probably confused with visibility: hidden;)
Once you get you ids fix you can implement the following jquery for every section you want to toggle:
$(document).ready(function() {
$('.lead a').on('click', function(e) {
e.preventDefault();
var target = $(this).data('target');
$(target).slideDown();
});
$('.lead a').on('dblclick', function(e) {
e.preventDefault();
var target = $(this).data('target');
$(target).slideUp();
});
});
$(document).ready(function() {
$('.lead a').on('click', function(e) {
e.preventDefault();
var target = $(this).data('target');
$(target).slideDown();
});
$('.lead a').on('dblclick', function(e) {
e.preventDefault();
var target = $(this).data('target');
$(target).slideUp();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="jumbotron bg-dark text-light text-center">
<h1 class="display-4 ">5/<span class="text-primary">23</span>/18</h1>
<p class="lead text-success p-0 m-0">PHP Arrays & Control Structures</p>
<hr class="my-4">
<p><b>Loops & Structuring </b></p>
<p class="lead">
<a class="btn btn-outline-success btn-lg" id="information_1" role="button" data-target="#extra_1">Show More Information</a>
</p>
<p id="extra_1" style="display: none;">extra information that may be less important, yet necesary</p>
</div>
<div class="jumbotron bg-dark text-light text-center">
<h1 class="display-4 ">5/<span class="text-primary">24</span>/18</h1>
<p class="lead text-success p-0 m-0">PHP Arrays & Control Structures</p>
<hr class="my-4">
<p><b>Loops & Structuring </b></p>
<p class="lead">
<a class="btn btn-outline-success btn-lg" id="information_2" role="button" data-target="#extra_2">Show More Information</a>
</p>
<p id="extra_2" style="display: none;">extra information that may be less important, yet necesary</p>
</div>
For starters, you have duplicate id's (for extra_1 and information_1) in your code. Never ever put duplicate ID's on the same page. I suspect you meant them to be unique, like extra_1, extra_2, and you want each of them opened/closed individually with the information button in the same jumbotron.
You could target elements using id attribute that starts with xxx [id^="xxx"]. For each button get the parent then next sibling.
$(document).ready(function(){
$('[id^="extra"]').hide(); // or use css to hide by default?
$('[id^="information"]').dblclick(function(){
$(this).parent().next().slideUp();
});
$('[id^="information"]').click(function(){
$(this).parent().next().slideDown();
});
});
Alternatively you could use class selectors, eg .btn-outline-success for the buttons.
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.
How to show a specific div when a link is clicked and hide others?
I want to show only one div when the user clicks the links on the icon bar and hide others. When the user clicks home link of the icon bar only 'hoediv'is visible and others hidden.
My work is below please help!!
<!doctype HTML>
<head>
<div class="main-header-div">
<a id="home" href="" > Home</a>
<a id="about" href=""> About us</a>
</div>
</head>
<body>
<script>
$(function(){
$("#home").click(function(){
$("#homediv").show();
$("#aboutus").hide();
return false;
});
});
</script>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
</body>
</html>
What you need to fix?
Firstly, <head></head> only includes metadata, the rest should be in the <body></body>.
If you're not going to make use <a> anchor tags for hyperlinking, then pass the value href="JavaScript:Void(0);" (The void operator evaluates the given expression and then returns undefined) or better yet, don't use anchor tags better yet span or button.
You didn't import jquery.js in your html file.
You can make this a lot more effecient, but I'd suggest you learn some basic html from the widely available sources and then CSS, Jquery,etc.
Sources to refer:
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/jquery/default.asp
$(function() {
$("#home").click(function() {
$("#homediv").show();
$("#aboutus").hide();
});
$("#about").click(function() {
$("#homediv").hide();
$("#aboutus").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a id="home" href="JavaScript:Void(0);"> Home</a>
<a id="about" href="JavaScript:Void(0);"> About us</a>
</div>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
If you want to simplify it, you can use classes and data attributes to toggle wanted content:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a class="header-link" id="home" data-toggle="homediv" href="#" > Home</a>
<a class="header-link" id="about" data-toggle="aboutus" href="#"> About us</a>
</div>
<div class="content" id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">
This is my site.
</div>
<div class="content" id="aboutus" style="display:none;">
this is about us page
</div>
<script>
$(document).ready(function() {
$(".header-link").click(function(){
$(".content").hide();
$("#" + $(this).attr("data-toggle")).show();
});
});
</script>
Displaying info from sidebar on the same page
I am a beginner at this stuff, and right now I am working on a project. To keep it simple, my project right now has a sidebar that has four different options. (Schedule, progress, add course, drop course). I want users to be able to click on this options (after expanding the side bar) and display the information from which ever of the four they clicked on. I want this information to display on the same page, not link to another page. I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes, and I'm not sure how to go about this. Any help is appreciated!
Note: I don't have any data for these 4 pages right now - I just want to set it up so they function right now. To keep it short: I'm asking what code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked.
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>
Its really simple all you have to do is create sections and these sections will be linked to your link, let me show you how. <html> <head> <title>Example</title> </head> <body> <!--create the links but add a # sign before you give them the section names--> <div class="side-nav"> About Contact </div> <!--Create an id with the same name as the link href source but leave out the # sign--> <!--this is the about section--> <div id="about"> <h1>Hello</h1> </div> <!--this is the contact section--> <div id="contact"> <p> done</p> </div> </body> </html> the name you give your link should be the same as the div id name, and you will have to disable overflow in CSS if you want to....hope it made sense, if you need more help just ask.