How to display an Image after the main page - javascript

I'm trying to display a thumbnail version of a logo in the header after I get past the main page and when the content starts. I'd also like it to disappear again once I go back to the main page. I've attempted some JavaScript but if anyone has any feedback or suggestions on how to fix it. I added some code to a JSFiddle for help.
HTML
<header>
<img src="img.png" id="logo" />
</header>
<div id="mainPage">
<img src="img.png" />
</div>
<div id="main">
This is the content page.
</div>
CSS
header {
background-color: blue;
width: 100%;
height: 20px;
position: fixed;
top: 0;
border-bottom: 1px solid white;
}
#mainPage {
margin: 0;
padding: 0;
background-color: blue;
height: 500px;
}
#mainPage img {
width: auto;
display: block;
margin: 0 auto;
}
#main{
height: 500px;
}
#logo {
visibility: hidden;
}
JS
function showImg() {
var img = document.getElementById('logo');
var h = window.innerHeight;
if(h < 600) {
img.style.visibility = 'hidden';
}
else {
img.style.visibility = 'visible';
}
}
http://jsfiddle.net/nkjqLyfg/2/

As you can see in my fork of your fiddle, you just need to set up your function as a handler for the scroll event. Also, different browsers have different ways of expressing the current scroll position. The following works in Chrome:
function showImg() {
var img = document.getElementById('logo');
var scrollY = window.scrollY;
if(scrollY < 600) {
img.style.visibility = 'hidden';
}
else {
img.style.visibility = 'visible';
}
}
document.addEventListener("scroll", showImg);

Related

How to change css value of an element with Locomotive Scroll

I'm looking for a soultion when a section is out of viewport, Locomotive scroll will change the css attributes on another element and when is in viewport, it reverts that back.
I couldn't find a soulution or a topic. basic knowledge of JS. So, appreaciate if someone can help me out to figure this out.
This function from https://stackoverflow.com/a/57279138/3807365 is pretty simple to incorporate on scroll.
function isInView(el) {
const box = el.getBoundingClientRect();
return box.top < window.innerHeight && box.bottom >= 0;
}
Lets try
function isInView(el) {
const box = el.getBoundingClientRect();
return box.top < window.innerHeight && box.bottom >= 0;
}
var div1 = document.querySelector(".div1")
var div2 = document.querySelector(".div2")
window.onscroll = function() {
if (isInView(div1)) {
div2.classList.add("active");
} else {
div2.classList.remove("active");
}
if (isInView(div2)) {
div1.classList.add("active");
} else {
div1.classList.remove("active");
}
}
body {
height: 1000px;
}
.div {
width: 50px;
height: 50px;
}
.div1 {
margin-top: 100px;
background: aqua;
margin-bottom: 100px;
}
.div2 {
background: magenta;
}
.active {
border: 2px solid red;
}
<body>
<div class="div div1"></div>
<div class="div div2"></div>
</body>

How to make a section sticky for several seconds and then sticky for all time

In the website - right panel has three ads, what I want - there should be 3 ads top two ads should be fixed for a few seconds and then third ad should be sticky for a long time.
I am using this code, in which third ad i.e. second section of the ad is sticky when scroll reaches to its position,
<div class="right-panel">
<div id="adsection1">
<!--ad1-->
<br/>
<!--ad2-->
</div>
<div id="adsection2" style="width: 300px; height: 600px;">
<div id="abc_ad1">
<!--ad3-->
</div>
</div>
<script>
if (window.innerWidth > 1024) {
var adElem = document.getElementById('adsection2');
window.onscroll = function () {
var rect = adElem.getBoundingClientRect();
adElem.style.width = rect.width + 'px';
adElem.style.height = rect.height + 'px';
document.getElementById('abc_ad1').style.width = rect.width + 'px';
document.getElementById('abc_ad1').style.height = rect.height + 'px';
if (rect.top <= 0) {
document.getElementById('abc_ad1').style.position = "fixed";
document.getElementById('abc_ad1').style.top = "0";
document.getElementById('abc_ad1').style.zIndex = "2147483647";
} else {
document.getElementById('abc_ad1').style.position = "";
document.getElementById('abc_ad1').style.top = "";
document.getElementById('abc_ad1').style.zIndex = "";
}
};
}
</script>
</div>
Consider the right section on this link (I want to design just like it), https://www.tutorialspoint.com/python_blockchain/python_blockchain_client_class.htm
You don't really need JavaScript in order to achieve described effect.
The trick is to properly format your HTML layout - it also means to divide it in appropriate parts, so that you have a right parent for a sticky element.
Side note: I use divs for the sake of simplicity of an example, but in the real life app you should opt for semantic HTML.
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#content {
height:200%;
width: 100%;
}
.col {
height: 100%;
width:50%;
float: left;
}
#main {
background: linear-gradient(#58668b, #ffffff);
}
#ads {
position: sticky;
top: 0px;
background-color:#bdeaee;
}
#header {
height:30px;
background-color: #29a8ab;
}
#footer {
height:100px;
background-color: #651e3e;
color: #ffffff;
}
.top-section {
height: 25%;
}
.top-section div {
height: 45%;
background-color:#ffcc5c;
}
.top-section div:not(:last-child) {
margin-bottom:10%;
}
.bottom-section {
height: 30%;
background-color: #ff6f69;
margin-top: 12%;
}
.sticky-content {
width: 100%;
height: 60%;
position: sticky;
top: 0px;
}
<div id="header">Header</div>
<div id="content">
<div id="main" class="col"><p>Main Content</p></div>
<div id="ads" class="col">
<div class="sticky-content">
<div class="top-section">
<div></div>
<div></div>
</div>
<div class="bottom-section"></div>
</div>
</div>
</div>
<div id="footer">Footer</div>

Position an invisible div element over a photo(onclick)(repl.it)

Visual of element placement
I am trying to make a little “pet the dog game” and I would like to put a div over his head and when you click the DIV it will trigger a JS function to change the photo to a .gif then back again here is my code
JS:
function pet_head(){
var image = getElementById("image");
image.src="DogPet.gif";
setTimeout(function(){
image.src="dog.jpeg";
}, 1000//length of gif
);
};
HTML:
<div class="main">
<img id="image" src="dog.jpeg">
<div class="click></div>
</div>
CSS:
img{
height:100%;
width100%;
position:absolute;
}
If you use absolute in the image it will always be on top of everything else.
Take a look below and see if that is what you looking for.
function pet_head(event) {
/*var image = getElementById("image");
image.src = "DogPet.gif";
setTimeout(function() {
image.src = "dog.jpeg";
}, 1000 //length of gif
);*/
alert('changed');
};
document.getElementById('click').addEventListener('click', pet_head);
img {
height: 100%;
width: 100%;
}
div {
/* This will center the image horizontally */
display: flex;
justify-content: center;
position: absolute;
}
div#click {
color: green;
border: 2px solid red;
top: 14%;
height: 45%;
width: 300px;
position: absolute;
}
<div class="main">
<div id="click"></div>
<img id="image" src="https://i.insider.com/5df126b679d7570ad2044f3e?width=1100&format=jpeg&auto=webp" />
</div>
Here is a working version of your code. Also note that (besides removing code typos) I added object-fit: cover to your img, so that it preserves aspect ratio as the viewport size changes.
function pet_head() {
// var image = document.getElementById("image");
alert("petting the dog");
/* image.src = "DogPet.gif";
setTimeout(function() {
image.src = "dog.jpeg";
}, 1000 //length of gif
); */
};
document.querySelector(".click").addEventListener("click", pet_head);
img {
height: 100%;
width: 100%;
position: absolute;
object-fit: cover;
}
.click {
position: absolute;
left: 49%;
top: 22px;
height: 13vh;
width: 17vw;
cursor: pointer;
}
/* Presentational styles */
.click {
background: yellow;
opacity: .1;
}
html, body {
margin: 0;
}
*, *::before, &::after {
box-sizing: border-box;
}
<div class="main">
<img id="image" src="https://i.stack.imgur.com/FthXz.jpg">
<div class="click"></div>
</div>
jsFiddle

Change the background colour of a div when a certain div is showing

I have three divs for a Twitter post, a Facebook post and a LinkedIn post and these make up a carousel.
These are then inside of another div called #social-media-feeds.
I am wondering if it is possible to change the background colour of #social-media-feeds based on which div in the carousel is showing.
So when the twitter div shows I would like the background colour of #social-media-feeds to be #00aced, when the facebook div shows I would like the background colour to be #3b5998, and when the linkedin div shows I would like the background colour to be #007bb5.
If this is possible I'd really appreciate a hand. Thanks!
This is terribly formed code, but it works. I can't pretend to know what your code looks like so I hope this helps:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 100%;
padding: 0px;
}
#social-media-feeds {
display: inline-block;
height: 100%;
width: 100%;
}
.post {
display: none;
}
#leftButton {
position: absolute;
top: 50%;
left: 0%;
height: 30px;
width: 60px;
text-align: right;
background-color: gray;
cursor: pointer;
}
#rightButton {
position: absolute;
top: 50%;
right: 0%;
height: 30px;
width: 60px;
background-color: gray;
cursor: pointer;
}
</style>
</head>
<body>
<div id="leftButton"><</div>
<div id="rightButton">></div>
<div id="social-media-feeds">
<div id="facebook" class="post">Facebook</div>
<div id="twitter" class="post">Twitter</div>
<div id="linkedIn" class="post">LinkedIn</div>
</div>
<script>
var socialMediaFeedsDiv = document.getElementById('social-media-feeds');
var backgroundColors = ["#3b5998", "#00aced", "#007bb5"];
var posts = document.getElementsByClassName('post');
var index = 0;
posts[index].style.display = 'inline-block';
socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];
var leftButton = document.getElementById('leftButton');
leftButton.addEventListener('click', function() {
posts[index].style.display = 'none';
index--;
if (index < 0) {
index = posts.length - 1;
}
posts[index].style.display = 'inline-block';
socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];
});
var rightButton = document.getElementById('rightButton');
rightButton.addEventListener('click', function() {
posts[index].style.display = 'none';
index++;
if (index > (posts.length - 1)) {
index = 0;
}
posts[index].style.display = 'inline-block';
socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];
});
</script>
</body>
</html>

multiple pop up div's in the same page

In one of my projects, I have requirement of multiple pop up div's on the same page. That means when user clicks on a link, some content should open in a pop up. There will be many such links with their own pop ups. With little knowledge of javascript, I have tried to write a javascript for it but it works only for one pop up. When I click on second, third... links, only first pop up opens rather than opening second, third... pop ups. Here is my code. Please tell the modifications to it.
<!DOCTYPE html>
<html >
<head>
<script>
window.document.onkeydown = function (e)
{
if (!e)
{
e = event;
}
if (e.keyCode == 27)
{
lightbox_close();
}
}
function lightbox_open()
{
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close()
{
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<style>
#fade
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light
{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
</style>
</head>
<body>
Open 1
<div id="light">div 1</div>
<div id="fade" onClick="lightbox_close();"></div>
Open 2
<div id="light">div 2</div>
<div id="fade" onClick="lightbox_close();"></div>
Open 3
<div id="light">div 3</div>
<div id="fade" onClick="lightbox_close();"></div>
</body>
</html>
Here's a way to achieve what you want. I'm sure it can be improved, but it's up to you then.
First, IDs should be unique across the page. If you want to group elements, give them a shared class instead.
With the changes, your HTML would look like this:
Open 1
<div class="light">div 1</div>
<div class="fade" onClick="lightbox_close()"></div>
Open 2
<div class="light">div 2</div>
<div class="fade" onClick="lightbox_close()"></div>
Open 3
<div class="light">div 3</div>
<div class="fade" onClick="lightbox_close()"></div>
Your CSS:
html, body {
width: 100%;
height: 100%;
}
.fade {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.light {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
And your Javascript:
window.document.onkeydown = function (e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
// Note that the function is receiving the clicked element reference.
function lightbox_open(el) {
window.scrollTo(0,0);
// All the anchors that have a class lightbox.
var anchors = document.querySelectorAll('a.lightbox');
// All the elements with class light.
var light = document.querySelectorAll('.light');
// All the elements with class fade.
var fade = document.querySelectorAll('.fade');
// Iterate over the anchors elements.
for (var i = 0; i < anchors.length; i++) {
// If the anchor matches the clicked one.
if (anchors[i] == el) {
// Look for the light and fade with the same index
// and display them.
light[i].style.display = 'block';
fade[i].style.display = 'block';
}
}
}
function lightbox_close() {
// All the elements with class light or fade.
var els = document.querySelectorAll('.light, .fade');
// Loop through the list.
for (var i = 0; i < els.length; i++) {
// Hide them.
els[i].style.display = 'none';
}
}
Demo

Categories