I have a div that serves of container for a css animation that appears over the entire website's home page... a text and background that opens like curtains, revealing the website under it. It's like an intro landing page. The thing is I need it to appear only on first page load. I don't want it to appear on page refresh or if someone navigates thru the site and comes back to home page.
Can someone please show me how I would have to code this because I've search a lot on the web and didn't find any clear explanations for my particular case.
Here is the code for the div:
<div id="landContainer">
<div class="left-half" id="leftP"><article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article></div>
<div class="right-half" id="RightP"><article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article></div>
</div>
So the div I must display only on first page load would be the one with the ID landContainer, that contains a couple of other divs.
Since I'm new to this type of coding, I would need a complete example of the code I need to use with my div.
For Ian... here is the content of my index.html file...
<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
if (localStorage.getItem("pageloadcount")) { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
</body>
</html>
The best way is to use session through which you can determine if its a new request or old.
Server side session will be best here
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
Related
im trying to open a different webpage as a colorbox but i cant seem to figure it out.
Below is the webpage i want to open when a person clicks on the image.
<div class="album py-5">
<div class="container">
<div class="row">
<div id="projects" class="col-md-8 col-lg-6 shadow-sm">
<a href="project1.html" id="yourlink"><img class="img-fluid" src="img/mockup.png" alt="iPhone Mockup">
</a>
</div>
</div>
</div>
</div>
Below is the script i did.
<script>
"use strict";
$(document).ready(function(){
$('#yourlink').colorbox();
});
</script>
This is my first time trying to use colorbox so its a little confusing, thank you.
colorbox has a configuration atrtibute called "html" where you can provide html code for it to show. For example:
var code = $('div.py-5').html();
$('#yourlink').colorbox({html: code});
If you can modify the html to show, you could also check the colorbox examples as they include an inline HTML example.
Edit: Here's a working example:
var button = $("#clickme");
$(document).ready(function() {
var code = $("#myContent").html();
$("#clickme").colorbox({ "html": code })
});
#myContent {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<style rel="https://www.jacklmoore.com/colorbox/example1/colorbox.css"></style>
</head>
<body>
<div id="myContent">
<p>Hello World from the content.</p>
</div>
Click me
</body>
</html>
we have been given an assignment to make a div with a background image and couple of titles underneath and when you hover over a title it changes the background picture in the div ("thumbnail"). I am really new to jQuery and have no idea how to approach this. I tried the following code but it is not working.
<!DOCTYPE html>
<html lang="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<script>
$(function() {
$('ul a')
.mouseover(function() {
$('thumbnail').attr('src', this.getAttribute('data-image-src'));
})
.each(function() {
new Image().src = this.getAttribute('data-image-src');
});
}
</script>
<body class="body">
<!--Header-->
<header class="header">
<div class="logo">
<div class="logoimg"><img src="logo.png" width="80px" width="auto"></div>
</div>
<nav class="navbar">
About
Work
</nav>
</header>
<!--Main1-->
<div class="thumbnail"><img src="back1.jpg" width="auto" height="auto"></div>
<ul class="headlines">
link1
link2
link3
link4
</ul>
<!--Footer-->
<footer class="footer">
<p class="fotext">Copyright Vítek Linhart 2017. Don't steal my shit.</p>
</footer>
</body>
</html>
I appreciate any help :)
I guess this is the thing you're looking for. Not a tested code. You've missed to say that thumbnail is a class and also it can be a hover event from jquery (check api.jquery for examples)
<script>
$(function() {
$('ul a').hover(function() {
$('.thumbnail img').attr('src', $(this).data('imageSrc'));
});
});
</script>
You can make use hover event : https://api.jquery.com/hover/
See this example as well : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover
I solved it with this code. I wanted to ask though, if there is a possibility to make it animated. When the pictures switch make a fade animation.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$('a').on('mouseover', function() {
var iSrc = $(this).attr('data-image-src');
$('.thumbnail img').attr('src', iSrc);
});
});
</script>
I have read through the available links on this topic and they haven't helped.
I'm trying to get the following code to run. The "menu.html" loads the "world.html" in a div on another page, and the HTML comes up, but not the JavaScript.
At first I had the JS in a separate file, but when it wasn't running I moved it into "world.html", but it didn't fix the problem. I have also tried referencing jQuery.
This is menu.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</head>
<body>
<a id="infoButton" class="infoButton" href="info.html"></a>
<a id="bodyButton" class="bodyButton" href="body.html"></a>
<a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
<a id="leaveButton" class="leaveButton" href="leave.html"></a>
<a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
</body>
<footer>
</footer>
</html>
And preparePage.js, which gets rid of the menu and loads world.html:
function preparePage() {
document.getElementById("box").style.backgroundImage = "none";
$("#infoButton").fadeOut("slow");
$("#bodyButton").fadeOut("slow");
$("#leaveButton").fadeOut("slow");
$("#contactButton").fadeOut("slow");
$("#box").load("world.html", function enter() {
$("#enterButton").fadeOut("slow");
});
}
And last but not least, world.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function wut() {
window.alert("owo");
}
</script>
</head>
<body onload="wut(); return false;">
mhfkhgfhtfjhfjj<br><br>
<canvas id="gameBox" width="1000" height="500" style="background-color:#ffffff;"></canvas>
</body>
<footer>
</footer>
</html>
EDIT: Also including launchpad.html, which is the page containing the div in which menu.html and world.html load:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body onload="openGame(); return false;">
<div id="cloud"></div>
<div id="box" class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="openGame.js"></script>
</body>
<footer>
</footer>
</html>
And openGame.js, which changes the shape of #box and loads menu.html:
function openGame() {
$("#cloud").fadeOut("fast");
$("#box").animate({
height: '750px',
width: '1700px',
top: '100px',
left: '100px',
padding: '0px'
});
$("#box").load("menu.html");
document.getElementById("box").style.backgroundImage = "url('Images/menuBackground.png')";
}
I would use JQuery for the on-click events, and also make sure that all of the element id's that you reference in your script are present in the page. Another thing to check is that your scripts are loading properly, the letter casing of the file name is important on Linux servers.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</head>
<body>
<ul id="menu">
<li><a id="infoButton" class="infoButton" href="info.html">test1</a></li>
<li><a id="bodyButton" class="bodyButton" href="body.html">test2</a></li>
<li><a id="enterButton" class="enterButton">test3</a></li>
<li><a id="leaveButton" class="leaveButton" href="">test4</a></li>
<li><a id="contactButton" class="contactButton">test5</a></li>
</ul>
<div id="box" style="width:500px; height:500px; background-color:#FFF; background-image:url(http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a);">
test box
</div>
<footer>
</footer>
</body></html>
Javascript:
$( document ).ready(function() {
$( "#enterButton" ).click(function() {
document.getElementById("box").style.backgroundImage = "none";
$("#infoButton").fadeOut("slow");
$("#bodyButton").fadeOut("slow");
$("#leaveButton").fadeOut("slow");
$("#contactButton").fadeOut("slow");
$("#box").load("/zalun/VkCyH/app.html", function enter() {
$("#enterButton").fadeOut("slow");
})
})
});
Live example: https://jsfiddle.net/ucjs77L8/
Apart from the obvious fact that you don't have an element with the id box, please realise that the jQuery load method will not trigger the onload callback that you have defined in world.html. So you'd need to call that yourself.
So fix two things:
define box, e.g.
<div id="box"></div>
call wut(), from menu.html:
$("#box").load("world.html", function enter() {
wut();
$("#enterButton").fadeOut("slow");
});
The onload= in world.html has no effect when loaded like this, because to the browser there is only one document, which already has loaded. So, there is no second load event triggering.
Alternatively you could just add a script in world.html, near the end just before the closing </body> tag, which will run:
<script>
wut();
</script>
I am a noob at Javascript, and I am trying to change a file link when I click on an anchor. Maybe I am going about this all wrong, but here it is. I want to change the PDF download link based upon the PDF I am displaying.
I have four links that are calling a file to populate the HTML object. The link I am trying to change is outside the object.
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
When I click on those links, I want the following href to change:
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
Here I tried one link in Javascript, but it is not working because I do not know what I am doing.
document.getElementById("ww").onclick = function () {
document.getElementById("pdfLink").href = "/products/HeywoodWhiteWove.pdf";
return false;
};
Complete HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="initial-scale=1.0">
<title>Heywood Envelopes</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<link rel="stylesheet" type="text/css" href="/css/products.css">
<script type="text/javascript" src="/js/popup.js"></script>
<script type="text/javascript" src="/js/merchant.js"></script>
<script type="text/javascript" src="/js/changeLink.js"></script>
</head>
<body>
<div class="include" data-include="/header.html"></div>
<div class="wrapper">
<div class="menu-container">
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
</div>
<div class="object-container">
<div class="download-link">
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
</div>
<object class="pdf" data="/products/HeywoodWhiteWove.pdf" type="application/pdf" id="display" width="100%" height="100%"></object>
</div>
</div>
<div data-include="/footer.html"></div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/load.js"></script>
<script>include();</script>
</body>
</html>
The code you provided should work. There is something else wrong on your page.
document.getElementById("ww").onclick = function () {
document.getElementById("pdfLink").href = "/products/HeywoodWhiteWove.pdf";
return false;
};
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
There is a space in the string you want to set as href. Does that solve the problem?
I have created a VERY simple program on a VERY simple html file. I wish to simply find out how to link javascript to html and css. Here follows my example code:
(index.html)
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="script.js"></script>
</body>
JS:
$(document).ready(function(){
$(".hide_btn").click(function(){
$("p").slideUp();
});
$(".show_btn").click(function(){
$("p").slideDown();
});
});
CSS:
.picture { display: none; }
Now with this code, I am attempting to use two buttons to show and hide a picture of a fish...I can't seem to get it to work however, and I believe it has something to do with how I am linking my files. Please Help!
Based off of your comment in your question it would appear that you are using jQuery but you do not have jQuery as part of your source code.
You will need to include the jQuery source above script.js.
Here is an example of how it should look like using Google CDN for the jQuery library:
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
try this in javascript
<html>
<head>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show();">Show</button>
<button class="hide_btn" onclick="hide();">Hide</button>
<script type="text/javascript" >
function show(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="block";
}
function hide(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="none";
}
</script>
</body>
</html>
I would definitely use jQuery for something like this. Here's a Plunker that shows how you can accomplish this.
http://embed.plnkr.co/DwTwNuF162rfgcQOdT7u/preview
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show()">Show</button>
<button class="hide_btn" onclick="hide()">Hide</button>
</body>
<script>
function show() {
$('#picture').show();
}
function hide() {
$('#picture').hide();
}
</script>
</html>
If you are using jquery you also need to link the jquery source above your .js link,
here is the google cdn (so you dont have to download it):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
First things first:
Include this in your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
If you're on Chrome try using the developer tools; right click on the page then inspect element. On the developer tools pane, select the CONSOLE tab which logs all your errors in your javascript
And try this in your script:
$(document).ready(function() {
$(".show_btn").click(function() {
$(".picture").css('display', 'block');
});
$(".hide_btn").click(function() {
$(".picture").css('display', 'none');
});
});
Also I've noticed that you have div.picture display set to "none".
All that you need to do is the following
<script type="text/javascript"></script>
You can write javascript inside the script tags. (if you want to add javascript in HTML
the following is to link it to another file.
<script src="path to other file" > </script>