I have a toggle that is responsible for changing the color palette of the website as well as some key images. The code works well however I notice that if I visit the site from a computer that I have not used before the key images take a long time to change when the toggle is clicked on.
The main issue is the "sun"/"moon" and "click here" image. I wonder if there is a way to run javascript faster? maybe by changing the positioning of the script or some other trick that I am not aware of. I'll post the website below and all the code, if anyone can point me to some documentation I can read on this or another helpful resource I would very much appreciate it. Love you guys.
Website:
mattmoracoding.com
let darkMode = localStorage.getItem('darkMode');
const darkModeToggle = document.querySelector('#dark-mode-toggle');
const enableDarkMode = () => {
document.body.classList.add('darkmode');
localStorage.setItem('darkMode', 'enabled');
darkModeToggle.src = "Images/sun.png"
click.src = "Images/click-here-dark.png"
clock1.src = "Images/clock-dark.png"
clock2.src = "Images/clock-dark.png"
clock3.src = "Images/clock-dark.png"
currency1.src = "Images/currency-dark.png"
currency2.src = "Images/currency-dark.png"
currency3.src = "Images/currency-dark.png"
scrollUp.src = "Images/scroll-dark.png"
}
const disableDarkMode = () => {
document.body.classList.remove('darkmode');
localStorage.setItem('darkMode', null);
darkModeToggle.src = "Images/moon.png"
click.src = "Images/click-here-light.png"
clock1.src = "Images/clock-light-small.png"
clock2.src = "Images/clock-light-medium.png"
clock3.src = "Images/clock-light-large.png"
currency1.src = "Images/currency-light-small.png"
currency2.src = "Images/currency-light-medium.png"
currency3.src = "Images/currency-light-large.png"
scrollUp.src = "Images/scroll-light.png"
}
if (darkMode === 'enabled') {
enableDarkMode();
}
darkModeToggle.addEventListener('click', () => {
darkMode = localStorage.getItem('darkMode');
if (darkMode !== 'enabled') {
enableDarkMode();
} else {
disableDarkMode();
}
});
// ---------------------- Scroll Up ----------------------//
const scrollBtn = document.getElementById("scrollUp");
scrollBtn.addEventListener("click", () => {
document.documentElement.scrollTop= 0;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matt Mora Coding</title>
<link rel="stylesheet" href="CSS/index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#300&family=Playfair+Display:wght#500&family=Roboto+Slab:wght#500&display=swap" rel="stylesheet">
<script src="Scripts/index.js" async></script>
</head>
<!--------------------------------------Wrapper------------------------------------>
<section class="wrapper">
<!-----------------------------------Navigation---------------------------------->
<div class="logo">
MM
</div>
<div class="nav">
Home About Contact
</div>
<div class="click-here">
<img src="Images/click-here-light.png" Id="click" alt="click here">
</div>
<!--------------------------------Dark/Light Mode-------------------------------->
<img src="Images/moon.png" id="dark-mode-toggle" class="dark-mode-toggle">
<!-------------------------------------Hero-------------------------------------->
<div class="hero-title">
<h1>Hey, I'm Matt Mora</h1>
</div>
<div class="hero-body">
<p>I'm a front end developer.</p>
</div>
<div class="hero-social">
TW GH LI
</div>
<div class="hero-image-small">
<img src="Images/me-small.png" alt="Handsome Guy" />
</div>
<div class="hero-image-medium">
<img src="Images/me-medium.png" alt="Handsome Guy" />
</div>
<div class="hero-image-large">
<img src="Images/me-large.png" alt="Handsome Guy" />
</div>
<!--------------------------------Section CTA----------------------------------->
<div class="cta-banner"></div>
<div class="cta-text-small">
<p>Checkout my work!</p>
</div>
<div class="cta-text">
<p>Checkout some of the things I'm working on!</p>
</div>
<!---------------------------------Project1------------------------------------->
<div class="project1-small">
<img src="Images/clock-light-small.png" id="clock1" alt="Clock"/>
</div>
<div class="project1-medium">
<img src="Images/clock-light-medium.png" id="clock2" alt="Clock"/>
</div>
<div class="project1-large">
<img src="Images/clock-light-large.png" id="clock3" alt="Clock"/>
</div>
<div class="project1-title">
<h1>Clock</h1>
</div>
<div class="project1-body">
<p>I built this clock as a warm up project to gain experience using HTML and
more advance css.</p>
<p>This project taught me how to write more advance CSS and to structure
HTML in a simple way.</p>
</div>
<div class="languages1">
<img src="Images/html.png" alt="HTML"/>
<img src="Images/css.png" alt="CSS"/>
</div>
<!---------------------------------Project2------------------------------------->
<div class="project2-small" >
<img src="Images/currency-light-small.png" alt="Currency Converter" id="currency1"/>
</div>
<div class="project2-medium" >
<img src="Images/currency-light-medium.png" alt="Currency Converter" id="currency2"/>
</div>
<div class="project2-large" >
<img src="Images/currency-light-large.png" alt="Currency Converter" id="currency3"/>
</div>
<div class="project2-title">
<h1>Currency Converter</h1>
</div>
<div class="project2-body">
<p>The goal of this project was to expand my understanding of javascript.</p>
<p>By building this project I learned much more javascript than I had before and allowed me
to work on something that I was excited about.</p>
</div>
<div class="languages2">
<img src="Images/html.png" alt="HTML"/>
<img src="Images/css.png" alt="CSS"/>
<img src="Images/java.png" alt="Javascript"/>
</div>
<!---------------------------------Project3------------------------------------->
<div class="project3-small">
<img src="Images/weather-small.png" alt="Weather App"/>
</div>
<div class="project3-medium">
<img src="Images/weather-medium.png" alt="Weather App"/>
</div>
<div class="project3-large">
<img src="Images/weather-large.png" alt="Weather App"/>
</div>
<div class="project3-title">
<h1>Weather App</h1>
</div>
<div class="project3-body">
<p>The goal of this project was to familiarize myself with working with an API.</p>
<p>I learnt how to use my understanding of HTML, CSS and Javascript to build new
project and most importantly I added the ability to work with APIs </p>
</div>
<div class="languages3">
<img src="Images/html.png" alt="HTML"/>
<img src="Images/css.png" alt="CSS"/>
<img src="Images/java.png" alt="Javascript"/>
<a> <img src="Images/api.png" alt="API"/></a>
</div>
<!----------------------------------Footer------------------------------------>
<div class="footer-banner"></div>
<div class="footer-center">
<p>Made by Matt Mora</p>
</div>
<img src="Images/scroll-light.png" id="scrollUp"/>
</section>
</html>
I used your comments to find a resource to preload images only using HTML and CSS. Looks like images are loading faster now without flickering. I will also optimize the images to make them load faster themselves using the sources given but this will take me some time. Let me know what you think of this solution and if there is anything I could do to improve on it.
#preload { display: none; }
<div id="preload">
<img src="Images/click-here-light.png" width="1" height="1" alt="Image 01" />
<img src="Images/click-here-dark.png" width="1" height="1" alt="Image 02" />
<img src="Images/moon.png" width="1" height="1" alt="Image 03" />
<img src="Images/sun.png" width="1" height="1" alt="Image 04" />
</div>
`
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.
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.
I'm trying to use bxslider to slide an entire page's worth of content using the goToSlide function from bxslider with a custom set of buttons. When I load the slider with the .bxSlider function, it loads just fine. But when I click the button to go to a specific slide, it says the method does not exist! Any idea on where I made the mistake?
Here is my code:
<html>
<head>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/grids.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/jquery-1.11.0.min.js"></script>
<script src="js/main-test.js"></script>
<script src="js/vendor/jquery.bxslider.min.js"></script>
</head>
<body>
<section class="section-3" id="lastBlock-wrapper">
<ul id="lastBlockCtrl">
<li class="switch">
<div class="switchbar"></div>
<div class="switchbar"></div>
<div class="switchbar"></div>
</li>
<li class="diamond"><a onClick="jumptoslide(0);" class="active">Performance</a></li>
<li class="diamond"><a onClick="jumptoslide(1);">Durability</a></li>
<li class="diamond"><a onClick="jumptoslide(2);">Transparency</a></li>
</ul>
<ul id="slider">
<li>
<section class="feature">
<div class="grid" style="height: 100%;">
<div class="grid__item two-fifths grid--center slider-bg">
<h1>Test</h1>
</div>
<div class="grid__item three-fifths cont">
<h1>Performance</h1>
<p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
</div>
</div>
</section>
</li>
<li>
<section class="feature">
<div class="grid">
<div class="grid__item two-fifths grid--left">
</div>
<div class="grid__item three-fifths cont">
<h1>Showcase</h1>
<p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
</div>
</div>
</section>
</li>
<li>
<section class="feature">
<div class="grid">
<div class="grid__item two-fifths grid--left">
</div>
<div class="grid__item three-fifths cont">
<h1>Showcase</h1>
<p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
</div>
</div>
</section>
</li>
</ul>
</section>
</body>
$( document ).ready( function () {
//last slider
var bxslider = $('.slider').bxSlider({
controls: false,
easing: 'ease-in-out'
});
jumptoslide = function (slide) {
bxslider.goToSlide(slide);
};
} );
You have no slider class. You only have a slider ID.
Change
var bxslider = $('.slider').bxSlider({
controls: false,
easing: 'ease-in-out'
});
to
var bxslider = $('#slider').bxSlider({
controls: false,
easing: 'ease-in-out'
});
Change the $('.slider') to $('#slider') in your javascript code as slider is id as you mentioned in your html its not class.
. is used to represent class.
# is used to represent id.
Hope it helps.
I don't know anything about jquery so yeah. I just want so that when you click the "image-url" divs they set the "src: component to the img tag and have the image appear upon clicking. Really appreciate the help.
the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CIS 230 Fall 2012</title>
<link rel="stylesheet" type="text/css" href="midterm.css" />
<script type="text/javascript" src="labs/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.image-url').click(function() {
$("#image").attr("src", $(this).attr("val"));
$("#image").attr("hidden", "false");
});
})();
function imageload(ls) {
document.getElementById("image").src = "../images/" + ls;
}
</script>
</head>
<body>
<div id="header"><div style="float:left; width:40%;"></div><div style="float:right;"></div><h1 class="title">CIS 230</h1>
</div>
<div id="content">
<div id="links">
<div id="link-holder">
<h3>Labs:</h3>
<div class="url">xhtml 1</div>
<div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 1</div>
<div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 2</div>
<div class="url">css lab 3</div>
<div class="url">css lab 4</div>
<div class="url">author page</div>
<div class="url">dog fish</div>
<div class="url">rounded corners</div>
<div class="url">div columns</div>
<h3>Images:</h3>
<div id="image-link-holder">
<div class="image-url" val="me.jpg">Beautiful Me</div> //so they click this
<div class="image-url" val="monster.jpg">Godzilla</div>
<div class="image-url" val="bandw.jpg">Black and White</div>
<div class="image-url" val="duocolor.jpg">DuoColor</div>
<div class="image-url" val="washed.jpg">"Washed" Look</div>
<div class="image-url" val="fade.jpg">Faded</div>
</div>
</div>
<div id="image-holder" style="min-width:400px; background-color:#000000;" hidden="true">
<img id="image" src="" alt="No Image Specified" /> //and my mug shot will appear hopefully
</div>
<div id="links-spacer1" style="min-width:400px; min-height:300px"></div>
</div>
<div id="about">
<h1>Web Design and Development:</h1>
<h2>We cover a lot of things:</h2>
<p>We first review basic HTML and cover CSS styles</p>
<p>Labs made:
<ul>
<li>css lab 1</li>
<li>css lab 2</li>
<li>css lab 3</li>
<li>css lab 4</li>
</ul>
</p>
<p>Once we have the basics down we can cover some more advanced styling. Especially using the &<div></div>& tags
</p>
<p>Labs made:
<ul>
<li>sunny.html</li>
<li>dogfish</li>
<li>columns</li>
</ul>
</p>
<p>Then We move onto the graphical component of web design, where we mess around with photoshop</p>
<p>Labs made:
<ul>
<li>monster.jpg</li>
<li>duocolor.jpg</li>
<li>other stuff...</li>
</ul>
</p>
</div>
</div>
<div id="footer">
<p id="disclaimer">This webpage is the work of a student. It is not associated with the SUNY Onondaga Community College. The author of this web page is Jason Dancks, and generated with Dreamweaver. If you think this asshole might have stolen your intellectual property, email him or contact his professor or call him at: (315) 498- 2326</p>
</div>
</body>
</html>
$('.image-url').on('click', function() {...});
You should read up on jQuery selectors.
Edit
Your example already has a valid selector in it. Is it not working? Perhaps it cannot find your jQuery library?
You want to take the value of attribute "val" for the image you click, and replace the 'src' attribute of the img tag with class "image" with the value: here's how you do that.
$('.image-url').on('click', function(){
var img_url = $(this).attr('val');
$('#image').attr('src', '/images/' + img_url).parent().attribute('hidden', false);
});
Happy coding! :)