I have a page like this:
----------------------
.header
----------------------
.content
.hidden-element (fixed right side)
----------------------
.footer
----------------------
I want to show the hidden element when you only scroll on content section.
For example you start to scroll down from header section. When you come to content section, hidden element will appear. If you scroll down again and come to footer section, hidden element will be hidden again.
How can I do that?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.myDiv').hide(1000);
}
else {
$('.myDiv').show(1000);
}
});
</script>
<br />
<div style="height:400px"></div>
<div class="myDiv">
<ul>
<li>Arunachal Pradesh</li>
<li>Himachal Pradesh</li>
<li>Uttar Pradesh</li>
<li>Madhya Pradesh</li>
<li>Andhra Pradesh</li>
</ul>
</div>
<div style="height:1000px"></div>
</body>
</html>
please check the above code
this sample code is so easy 2 main functionn
$(window).scroll()
is detect scroll event of page
if($(this).scrollTop() > 300)
check the pixel of scrolling from top of page when is more than 300 then hide the div or show the div in else condition.
Related
I have html as
<div id ="div-1>
//some content
</div>
<div id ="div-2>
//some content
</div>
when i set display:none for div-1 is hides immediately , and div-2 comes on top abrubtly.
Is there any way that div-2 slides out to top, instead of coming directly.
PS
I have tried transition with max-height set to zero for div 1 but , it's not working.
EDIT
Hi, i am working on a js lib to swipe out html elements.
I just want a animated scroll for bottom elements , when div on top is set to display:none.
I only have reference for first div.
instead of setting display:none, you could set opacity:0 on div-1 and position div-2 on top of div-1 by using z-index and either css transitions to change the position, or use jquery animate.
You can use the slideUp jQuery method to easily achieve this.
jQuery slideUp() doc
Working example :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideUp demo</title>
<style>
div {
margin: 2px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
<button>Hide One</button>
<input type="text" value="One">
</div>
<div>
<button>Hide Two</button>
<input type="text" value="Two">
</div>
<div>
<button>Hide Three</button>
<input type="text" value="Three">
</div>
<div id="msg"></div>
<script>
$("button").click(function() {
$(this).parent().slideUp("slow", function() {
$("#msg").text($("button", this).text() + " has completed.");
});
});
</script>
</body>
</html>
This question already has answers here:
Scroll to the top of the page using JavaScript?
(49 answers)
Closed 6 years ago.
I want to have a button, and when you click on it, it will get you (the visitor) to the top of the page.
How can this be done?
Thanks
If you have a keyboard attached:
Press the 'Home' button.
The classic operation of hyperlinks is to point to a page different from the one being viewed, to navigate the site. It is also possible to create a link to a specific location on the current page, or to another page in order to position the browser correctly.
Creating an anchor is easy: you just have to assign the element to which you want to be able to point an identifier (with the attribute HTML id) and to associate a link starting with the character #, followed by the name of this Identifier.
Ex:
<div id="top">...</div>
It is then enough to make a link to this anchor:
top of page
Demo:
<!DOCTYPE html>
<html>
<head>
<title>top link</title>
<meta charset="UTF-8">
</head>
<body>
<div id="top">...</div>
<!-- Content -->
<!-- Content -->
<!-- Content -->
top of page
</body>
</html>
On button click, run the Javascript:
window.scrollTo(0, 0);
You can do it like this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Back To Top Button by CodexWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type='text/javascript'>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
<style type="text/css">
/* BackToTop button css */
#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#3498db;
text-indent:-9999px;
display:none;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px
}
#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff
}
#scroll:hover {
background-color:#e74c3c;
opacity:1;filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
</style>
</head>
<body>
<!-- BackToTop Button -->
Top<span></span>
<!-- ++++++++++++ Page Content Goes Here ++++++++++++ -->
</body>
</html>
Just Copy & Paste the script and run
For a link:
Back to top
With button:
<a href="#">
<button>Back to top</button>
</a>
See also:
How to create an HTML button that acts like a link?
HTML Anchors with 'name' or 'id'?
I was wondering how to make the individual menu items fade in with delay on page load.
I would like them to fade in not in a chronological order, so let's say first to appear would be #item 3, then #item 1, then #item 5 and so on...
How would such a jQuery or JavaScript code look and where in the code would I need to paste it?
Thanks a lot for help!
This should do the job. Basically give the elements that you want to fadeIn a class of hidden, or any other class name that you can target. You then set the display of that class to "none". Using jQuery you target each item that you want to fadeIn by its ID and you set a desired delay() before that item will be fadedIn using the fadeIn() function.
So in this example #item2 will fadeIn after 1500ms, #item3 after 2500ms and #item1 after 4000ms.
Hope this helps!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fade In</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li id="item1" class="hidden">First</li>
<li id="item2" class="hidden">Second</li>
<li id="item3" class="hidden">Third</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#item1').delay(4000).fadeIn('slow')
$('#item3').delay(2500).fadeIn('slow')
$('#item2').delay(1500).fadeIn('slow')
})
</script>
</body>
</html>
You can use setTimeout and put it into a closure and work.
$(function () {
var currentTime = 0;
$("#item1, #item2, #item3")
.hide()
.each(function () {
(function (which, currentTime) {
setTimeout(function () {
which.fadeIn(100);
}, currentTime);
})($(this), currentTime);
currentTime += 2500;
});
});
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>
Full Code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8" />
<script>
$(function () {
var currentTime = 0;
$("#item3, #item1, #item2")
.hide()
.each(function () {
(function (which, currentTime) {
setTimeout(function () {
which.fadeIn(100);
}, currentTime);
})($(this), currentTime);
currentTime += 2500;
});
});
</script>
<style>
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
</style>
<title>My Menus</title>
</head>
<body>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>
</body>
</html>
This can be achieved by following these steps:
1. Set the "display" property of the elements to "none" in CSS
2. Put your code in "$(document).ready(function(){ here })" after including the jQuery library
3. Set the delay(value) to the elements as needed for the order you want to show the elements
4. Call the fade function or any other effect or function for the elements
You can make the elements appear in any order you want, you just need to set the delay(value) accordingly. The later you want the elements to appear, the higher should you set this value.
In this example the elements appear in chronological order, just change the delay(value) to suit your needs. You can select the elements according to your needs. For example, here ID isn't used to select the elements, but can be used as well. This method works great too!
Remember to include the jQuery library first!
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: none
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("li:nth-child(1)").fadeIn();
$("li:nth-child(2)").delay("1000").fadeIn();
$("li:nth-child(3)").delay("2000").fadeIn();
$("li:nth-child(4)").delay("3000").fadeIn();
$("li:nth-child(5)").delay("4000").fadeIn();
$("li:nth-child(6)").delay("5000").fadeIn();
$("li:nth-child(7)").delay("6000").fadeIn();
$("li:nth-child(8)").delay("7000").fadeIn();
$("li:nth-child(9)").delay("8000").fadeIn();
$("li:nth-child(10)").delay("9000").fadeIn();
});
</script>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
<li>Tenth</li>
</ul>
</body>
</html>
Assuming a list like this of unknown number of items
<div class="fadein-delay">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
...
</div>
you will a more modular script
$(function () {
$(".fadein-delay > div").each(function(index) {
console.log($(this).text());
$(this).delay(300*index).fadeIn(600);
});
});
and css that hides all items initially
.fadein-delay > div {
display: none;
}
Here is a working example https://codepen.io/giorgosk/pen/aVpXad
Ok the deal is I have a page with a top banner 100% wide and 500px tall and below that a content area, say, 4000px tall. inside that content area there is a box (100 by 100) that I want to have act the way in a certain way. When I scroll down the page to the point were that box touches the top of the screen I want it to be fixed at the top until I scroll up and it becomes unfixed at the top of the parent container (so where it was to start). Anyone have any examples or simple fixes????
Edit:
I found this fix that I think will work but I don't know what I am doing wrong:
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
(code is in the head of the html document)
#contentSide {
background: black;
margin: 10px;
float: right;
width: 300px;
}
#contentSideIner {
width: 280px;
height: 400px;
margin: 0 auto;
background: red;
}
.sticky {
position: fixed;
top: 0;
}
I know this code is meant to add a class to the #contentSideIner div, .sticky {position: fixed; top: 0; }. am I making a kind of brain dead mistake here?
this is the jfiddel that is basicly what i have http://jsfiddle.net/07xe5tLf/
more code i have in use:
<!DOCTYPE HTML>
<html>
<head>
<title>Project Website: full review pages</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
<link rel="stylesheet" href="css/stylesMainReveiw.css" />
<style>
#banner { background-image: url("images/Destiny_Banner.jpg"); }
.playableOn {}
.rateBox { background-image: url("img/rating/rating3-big.png"); background-size: 150px 150px; }
#contentSide { height: 5100px; }
</style>
</head>
<body class="landing">
<!-- Header -->
<header id="header">
<ul>
<li>Home</li>
<li>Monthly Spotlight
<ul>
<li>Destiny</li>
<li>Diablo III</li>
<li>Shadow Of Mordor</li>
<li>The Last Of Us
<li>Bayonetta 2</li>
</ul>
</li>
<li>Older Reviews</li>
</ul>
</header>
<!-- Banner -->
<section id="banner">
<h1>destiny</h1>
<h2>"Same Quote for the game as seen in js-load"</h2>
<div class="playableOn"><p>Playable On:</p></div>
<div class="rateBox"></div>
</section>
<!-- Main -->
<section id="main" class="container">
<div id="contentSide">
<div id="contentSideIner">
</div>
</div>
This is what it seems you want
What you want is a sticky menu which requires javascript to find the current position of the page in the viewport and change the CSS or class to make it fixed. This is a bad example because there is no div that is made visible after you scroll and make the element fixed to prevent the page content below to fill in where the menubar was. This can be done simply by using jQuery to make this hidden div visible. If you need code then just ask.
It is called a sticky menu and I always forget what it is called. :)
How I remember is usually spending some time on Google searching specifically for what I want until I find it. Don't make StackOverflow your default goto for help because that is how you can get banned. You need to be specific and provide code on something like JSFiddle or spend some time making a visual example or find a site that does what you want. Many sites like Facebook use this technique and it is quite common. If this doesn't make sense then you should go to W3Schools and read up on some Javascript and CSS and find some tutorials on jQuery.
For your fiddle, you need to go and include jQuery in your head: http://jsfiddle.net/b2550/07xe5tLf/1/
I JSFiddle it is as simple as making that your framework in the sidebar and in your code you need to include this in your head (as I said above in the comments)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am using a PHP while loop to display all of the rows in my table. Each row has a title and a description. I am trying to make a list of the titles with a link around each one. When the link is opened I am trying to make a div appear that displays the title and the description inside of the div. My problem is the divs are not appearing when links are hit.
EDIT: I am using the answer's JSFiddle as my code now, which utilizes jQuery. This code however still doesn't open up the divs.
Here is my full page code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.light, .fade {
display: none;
}
</style>
<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="noticeboard">
<ul>
<li>title
<div class="light white_content">light<br /><br />descriptionClose</div>
<div class="fade black_overlay">fade</div>
</li>
<li>title
<div class="light white_content">light<br /><br />descriptionClose</div>
<div class="fade black_overlay">fade</div>
</li>
</ul>
<script>
$('.clicklinkshow').click(function() {
$(this.parentNode).find('.light, .fade').show();
});
$('.clicklinkhide').click(function() {
$(this.parentNode.parentNode).find('.light, .fade').hide();
});
</script>
</body>
</html>
Thank you for any help. All help is greatly appreciated.
Javascript:
// show
[].forEach.call(document.getElementsByClassName('light'), function(el) {
el.style.display='block';
});
// hide
[].forEach.call(document.getElementsByClassName('light'), function(el) {
el.style.display='none';
});
Jquery:
$('.light').show();
$('.light').hide();