How to make images fade visible when i'm scrolling - javascript

<div id="smiley">
<div id="star">
<img src="inc/img/heks.png" class="star">
<img src="inc/img/impo.png" class="star">
<img src="inc/img/angst.png" class="star">
</div>
</div>
#smiley{
margin: 50px auto 80px;
width: 1132px;
height: 300px;
}
#smiley #star{
display: none;
float: left;
height: 300px;
width: 1132px;
}
#smiley #star img.star{
display: block;
float: left;
width: 300px;
margin: 50px 38px 0px;
}
I need have the images to fade visible when i'm scrolling down to them.
i hope you understand the question.
This website template, does it http://www.templatemonster.com/demo/51771.html

Demo .. Source code
If you want to show the images only when they become in the window of browser.. without affecting their loading ..
Try this, make the visibility of image hidden, then using JavaScript add class fadeIn to the image when it become in the window of browser ..
So .. in your CSS :
<style>
.star {
visibility: hidden;
}
.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
#-webkit-keyframes animat_show{
0%{opacity:0}
100%{opacity:1}
}
</style>
Then load jQuery library
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
and in your JavaScript:
<script>
function showImages(el) {
var windowHeight = jQuery( window ).height();
$(el).each(function(){
var thisPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (topOfWindow + windowHeight - 200 > thisPos ) {
$(this).addClass("fadeIn");
}
});
}
// if the image in the window of browser when the page is loaded, show that image
$(document).ready(function(){
showImages('.star');
});
// if the image in the window of browser when scrolling the page, show that image
$(window).scroll(function() {
showImages('.star');
});
</script>
Hope this will help you ..

Related

How do I prevent scroll back up with JavaScript or jQuery?

I have a webpage where there is a full height intro image. Underneath this image is the main body of the site with a regular site header at the top, I'm trying to create an effect where once the user scrolls down to the site header, they cannot scroll back up to view the intro image.
CSS Classes:
Main Intro Image: .cq-fullscreen-intro
Site Header: .nav-down
I had a poke around on StackOverflow but I can't find anything that addresses this circumstance, can anyone point me in the right direction to achieve this using jQuery?
you can use JQuery scrollTop function like this
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// set the height in pixels
if (scroll >= 200) {
// after the scroll is greater than height then you can remove it or hide it
$(".intro-image").hide();
}
});
});
So instead of scrolling, I personally think it would be better to have it be actionable. Forcing the user to manually do the transition (and all in between states) is a bad idea. If the user scrolls half way, and see's something actionable (menu, button, input field) is it usable? If it is, what happens if they submit... very awkward. If it isn't usable, how do they know when it is? How do they know it's because they haven't scrolled all the way. It's very poor user experience.
In the following example, I've created a pseudo-screenport for you to see what's actually going on. The .body container in your real site would be the body element.
Code Pen Example
$(document).ready(function(){
$('.splash-screen').on('click', function(){
$('.splash-screen').addClass("is-hidden");
});
})
html, body{
background: #eee;
margin: 0;
padding: 0;
}
.flex-root {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.web-container {
width: 640px;
height: 480px;
background: #fff;
}
.body {
font-size: 0; // this is only to prevent spacing between img placholders
position: relative;
}
.splash-screen{
position: absolute;
transition: transform 1s ease-in-out;
}
.splash-screen .fa {
position: absolute;
z-index: 1;
font-size: 24px;
color: #fff;
left: 50%;
bottom: 15px;
}
.splash-screen.is-hidden {
transform: translateY(-110%);
transition: transform 1s ease-in-out;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-root">
<div class="web-container">
<div class="body">
<div class="splash-screen">
<img src="https://via.placeholder.com/640x480?text=Splash+Screen"/>
<i class="fa fa-chevron-circle-up"></i>
</div>
<img src="https://via.placeholder.com/640x60/cbcbcb?text=Menu"/>
<img src="https://via.placeholder.com/640x420/dddddd?text=Site Body"/>
<div>
</div>
</div>
While its not direclty preventing you from scrolling up and its not jQuery, I would suggest to remove/hide the element once its out of view.
You could get the current scroll position, relative to the top of the page, and check if its greater than the elements height:
const target = document.getElementById('my-target')
const targetHeight = target.getBoundingClientRect().height
const scrollEventListener = () => {
if (
document.body.scrollTop > targetHeight ||
document.documentElement.scrollTop > targetHeight
) {
target.remove()
window.removeEventListener('scroll', scrollEventListener)
document.documentElement.scrollTop = 0
}
}
window.addEventListener('scroll', scrollEventListener)
Here is a codepen https://codepen.io/bluebrown/full/aboagov

HTML - How can I hide a loading div when a new tab loads?

I have a button, when you click it shows a loading div and opens a new tab which loads an html. I want to hide this div when the html in the new tab loads. I've tried so many things to hide this but no one works, can I have some help? I'm new on html, javascript, ajax, jquery development.
<!DOCTYPE html>
<html>
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
00% { transform: rotate(360deg); }
}
#white-background{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox{
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("div").show();
var win = window.open("new2.html");
});
});
</script>
</head>
<body>
<button id="show">Show</button>
<center>
<div id="loadingImage" style="display:none;">
<div id="white-background"></div>
<center>
<div id="dlgbox">
<div class="loader"></div>
<h1>Loading...</h1>
</center>
</div>
</div>
</center>
</body>
</html>
You can not remove the loading if cause your browser IS in loading state. So you might ask google or mozilla to remove it ;) It just is shown cause your new window CAN NOT LOAD THE PAGE.To open a window is like open a new browser. Without "http://whatever" it will show a error 404 or in some case this "logo". So if you use a full qualified URL nothing is shown. Your code has some more issues.
1.) jquery is depriated and overkill
2.) do not use such libs untilyou has understand javascript at its base !
3.) you should use chrome as developement browser - with F12 it opens a nice IDE which can clean up also your messy HTML code ;) Ther was some divs not correctly nested. Will mix up javascript and css.
<!DOCTYPE html>
<html>
<style>
.loader {
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
00% {
transform: rotate(360deg);
}
}
#white-background {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox {
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
}
</style>
<head></head>
<body>
<button id="show" onclick="javascript:winopen('new2.html');">Show</button>
<div id="progress" style="display:none;">
<div id="white-background">
<center>
<div id="dlgbox">
<div class="loader"></div>
<h1>Loading...</h1>
</div>
</center>
</div>
</div>
<script>
//if you load or put scripts at the end the DOM (direct before </body>) the
//page html is already loaded so no need
// for onload tricks The page is already ready here.
var win;
var progress;
var baseurl = ""
baseurl = window.location.href;//current page location
//current url
url = baseurl.split("/");
//remove current filname by split to array
url.pop();
//remove last array element
baseurl = url.join("/");
// join rest of array
console.log(baseurl);
function winopen(page) {
progress = document.getElementById("progress");// get the div by its id
//i have put the file in the same directory. i gues you has to change "/" to "/YOUR_SUBDIRECTORY e.g. /test//"
var href = baseurl + "/" + page; //create new url for the window open thing
progress.style.display = "block";// show the progress info
win = (window.open(href)); // open the window
progress.style.display = "none;"; // it's loaded hide the progress info
}
//bonus trick:
function content_manager(showme_id,hideme_id) {
document.getElementById(hideme_id).style.display="none";
document.getElementById(showme_id).style.display="block";
}
</script>
</body>
</html>
You own me a beer ;) BTW: you might not see you loading stage. Its too fast to see. Comment out the hide part or use the chrome debugger to se whats going on :)
To center things : center a info box you might also read about the z-index css property. You can hide the whole page by a div with is width 100% height 100% , has a frixed position and has a z-index: 2; so you put your loading info over the page and hide the page completely. You might use as background-color: rgba(1,1,1,.5) to make it half transparent ;)
If you are on same domain then try with localStorage:
Add this script:
<script>
localStorage.setItem("ispageloaded",false);
function load(){
var func=setTimeout(function(){
if(localStorage.getItem("ispageloaded")){
clearTimeout(func);
//Then hide loading div here...
}else{
load();
}
},2000);
}
load();
window.open("nav2.html","_blank");
</script>
Add this script to nav2.html:
<script>
localStorage.setItem("ispageloaded",true);
</script>
Hope you are understood this script...
If you are using ajax code to populate that content, you can hide that div with a single line code.

onload event firing before the content is loaded

I'm trying to make my img-wrapper height to be 80 % of its width. The code below fires and works properly when I'm resizing the window, issue is that the function won't get the correct width value. Instead the width is taken to be 100 and thus the height is calculated as 80px.
The site is using bootstrap and I'm trying to make cards that look somewhat like a polaroid picture. The image wrapper needs to have a standard width to height ratio and the image itself needs to be contained within the wrapper but I can't be sure if the images will have the right width:height ratio.
The nearly-working JS:
fixSize = function() {
$('.card-img-wrapper').each(function() {
width = $(this).width();
height = width * 0.8;
$(this).height(height);
// Hiding the loader wheel
$(".loader").hide();
// Showing hidden elements to avoid flickering and resizing
$(this).parent().removeClass("hide");
});
}
$(window).on('load', fixSize);
$(window).resize(fixSize);
HTML
<!-- This is within PHP foreach loop -->
<div class="col-md-4">
<a class="float-left wh100" href="p_info.php?pID=<?php echo($p['ID']); ?>">
<div class="card hide">
<div class="card-img-wrapper">
<img src="<?php echo($p['imagepath']); ?>">
</div>
<h3><?php echo($p['name']); ?></h3>
<p>Price: <?php echo($p['price']); ?> €</p>
</div>
</a>
</div>
CSS
/* Helper Classes */
.float-left {
float: left;
}
.wh100 {
width: 100%;
height: auto;
}
.hide {
visibility: hidden;
}
/* Card */
.card {
width: 100%;
margin-bottom: 30px;
padding: 30px;
overflow: hidden;
}
.card-img-wrapper {
width: 100%;
height: 25vh;
}
.card-img-wrapper img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}
Wrap your fixSize function in the jQuery document ready function.
$( document ).ready(function() {
$(window).resize(fixSize);
});
I think the resize function, and thus your fixSize function might be called immediately at page load, before your content is loaded. Try this instead.
$(window).on('load', function() {
fixSize();
$(window).resize(fixSize);
});
As #mister-positive suggests wrapping your code in a document ready function might be a good idea too.

How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

I've been piecing together code and tweeking it to eventually come together with this. The code itself is fairly simple and basically just saying that once someone visits the page for the first time then drop a cookie and no longer display it for the visitor when he visits the page, well for 365 days. My only issue is that once the div loads and loads out, I can't figure out how to fade in and fade out the background, I can only fade the div itself. I've tried wrapping it in a overlay div but I think I'm approaching it all wrong.
The code looks a bit much on here so I've attached a jsfiddle for a working example: http://jsfiddle.net/newbieturd/F29uv/
** Note: Once you run the fiddle once, you will have to clear your cookie. The DIV only appears once
CSS:
#welcome {
box-sizing:border-box;
padding:34px 18px 18px 18px;
height:120px;
width:300px;
background:Salmon;
color:#f9f9f9;
border-radius:6px;
position:absolute;
top:50%;
left:50%;
margin:-60px 0 0 -150px;
font:300 normal 1.4em/1.2 'Signika', sans-serif;
display:none;
}
#close {
height:30px;
width:30px;
background:url('http://www.omagdigital.com/images/articles/WebArticle-CloseButton.png') no-repeat;
position:absolute;
top:2px;
right:2px;
cursor:pointer;
}
JS:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function(factory){if(typeof define==='function'&&define.amd){define(['jquery'],factory);}else{factory(jQuery);}}(function($){var pluses=/\+/g;function raw(s){return s;}function decoded(s){return decodeURIComponent(s.replace(pluses,' '));}function converted(s){if(s.indexOf('"')===0){s=s.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,'\\');}try{return config.json?JSON.parse(s):s;}catch(er){}}var config=$.cookie=function(key,value,options){if(value!==undefined){options=$.extend({},config.defaults,options);if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}value=config.json?JSON.stringify(value):String(value);return(document.cookie=[config.raw?key:encodeURIComponent(key),'=',config.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}var decode=config.raw?raw:decoded;var cookies=document.cookie.split('; ');var result=key?undefined:{};for(var i=0,l=cookies.length;i<l;i++){var parts=cookies[i].split('=');var name=decode(parts.shift());var cookie=decode(parts.join('='));if(key&&key===name){result=converted(cookie);break;}if(!key){result[name]=converted(cookie);}}return result;};config.defaults={};$.removeCookie=function(key,options){if($.cookie(key)!==undefined){$.cookie(key,'',$.extend({},options,{expires:-1}));return true;}return false;};}));
function setCookie() {
$.cookie("visited", "true", { expires: 365 });
}
if ($.cookie('visited') != 'true') {
$('#welcome').show(1800);
setCookie();
} else {
$('#welcome').remove();
}
$('#close').click(function() {
$('#welcome').hide(1800);
});
// $.cookie("visited", null);
});//]]>
</script>
HTML:
<div id="welcome">
<span id="close"></span>
Interstitial Message. You will only see this message once every 365 days.
</div>
<p> Hello World. </p>
Is this what you are looking for? I gave the popup a parent container that will serve as the overlay.
HTML:
<div class="overlay">
<div id="welcome">
<span id="close"></span>
This is the only time you will see this message :)
</div>
</div>
CSS:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
}
jQuery:
if ($.cookie('visited') != 'true') {
$('#welcome, .overlay').show(100); // If the condiditon is true then show overlay
setCookie();
} else {
$('#welcome').remove();
}
$('#close').click(function() {
$('#welcome').hide(100); // Can also be added to this jQuery selector but the animation was odd
$('.overlay').fadeOut(100); // Fades out on click
});
Finally the fiddle: DEMO
Give your #welcome div a z-index (11 for example) and add css to give your document body full height and width:
html, body {
height: 100%;
width: 100%;
}
You're going to add a glass pane div to the body and it needs a height and width to fill the body of the page which, in your current example, has no height or width set
And then add a background div with a color of your choosing and a z-index less than your #welcome div such as:
<div id="glass_pane" style="width: 100%; height: 100%; z-index: 10; position: absolute: top: 0px; left: 0px; background-color: #000;"></div>
Ans then fade it in or out, remove it when you like, change the transparency

modifying an enlargement image from thumbnail script to dynamically display image based on their size property

I'm trying to modify this simple js script that enlarges the image from thumbnail whenever it is clicked. The problem is , the enlarged image is displayed according to an define fixed width. I want the enlarged image displayed according to it's size property.For example of an image size is 200 width and 300 height , I want that image to be display according to that size instead of an fixed 300 height and width.
I'm been trying solutions such as removing the width but instead the image is enlarged to the full screen size.
How can I modify this script so the enlarged image is displayed according to it's original size property.
The script belongs to roXon and I give full credit to him
How to enlarge image from thumbnail in jQuery?
This is the jquery http://jsbin.com/egevij/3/edit
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/forms.css">
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
<div id="jQ_popup_window">
<div id="jQ_popup" class="shadow radius">
<div id="jQ_popup_close"></div>
</div>
</div>
<img src="http://placehold.it/250x150/cf5" data-full="1.jpg" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
<script type = "text/javascript" src ="trouble.js"></script>
</body>
</html>
jQuery:
// POPUP WINDOW:
var scrT = $(window).scrollTop();
$(window).scroll(function(){
scrT = $(window).scrollTop();
});
// GET and use WINDOW HEIGHT //
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
// POPUP WINDOW (lightbox for video and other)
// GET WINDOW SCROLLtop OFFSET
$('[data-full]').on('click', function(e){
e.preventDefault();
$('#jQ_popup').css({
top: scrT+15
}).find('img').remove();
$('#jQ_popup_window').height($.getDocHeight).fadeTo(0,0).css({
marginLeft:0
}).fadeTo(600,1);
var imgToLoad = $(this).data('full');
$('<img>', {src:imgToLoad, width:'100%'}).appendTo('#jQ_popup');
});
// close popup
$('#jQ_popup_close, #jQ_popup_window').on('click', function(){
$('#jQ_popup_window').fadeTo(600,0,function(){
$(this).hide();
});
});
$('#jQ_popup').on('click', function(ev){
ev.stopPropagation();
});
// end POPUP WINDOW
CSS:
/* === POPUP WINDOW === */
#jQ_popup_window{
background: rgba(0,0,0,0.6);
left: 0;
margin-left: -9000px;
position: absolute;
top: 0;
width: 100%;
z-index:999999;
}
#jQ_popup {
background: #000;
border: 1px solid #BDB9B8;
margin: 30px auto;
padding: 25px;
position: relative;
width: 600px; /* SET HERE DESIRED W .*/
}
#jQ_popup_close {
background:#fff;
cursor: pointer;
height: 28px;
width: 28px;
position: absolute;
z-index:999999;
right: 10px;
top: 10px;
-webkit-border-radius:30px;
border-radius:30px;
border:2px solid #fff;
border-color: rgba(255,255,255,0.2);
}
#jQ_popup_close:hover{
background:#f00;
}
/* #POPUP WINDOW */
Something like this should probably work
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" data-width="860px" data-height="590px" alt="" />
$('<img>', {src:imgToLoad, width: $(this).data('width'),height: $(this).data('height')}).appendTo('#jQ_popup');
or this one takes the size from the path /860x590/
var dimensions=$(this).data('full').match(/(\d+)x(\d+)/);
$('<img>', {src:imgToLoad, width: dimensions[1]+'px',height: dimensions[2]+'px'}).appendTo('#jQ_popup');

Categories