I'm new and learning to code a website!
I'm trying to do this hover header that when the user scroll down, it will remain on the screen and when the user reaches Sub-Header 1, it will hover it too and changes if the user reaches Sub-Header 2(Sub-Header 1 will then disappear)
This is what I'm working on http://goo.gl/KqAM2R
Thanks in advance!
http://i.imgur.com/flT3oJ1.jpg
You need to use JavaScript to achieve this effect. SSCCE:
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="NewFile.js"></script>
<link rel="stylesheet" type="text/css" href="NewFile.css"></head>
<body>
<header class="fixed-top">Europe</header>
<div class="much-text">doge</div>
<header class="whatever1 doge">Heatwave</header>
<div class="much-text">doge</div>
<header class="whatever2 doge">2k15</header>
<div class="much-text">doge</div>
</body>
</html>
NewFile.js:
function isElementInViewport (el, topOrBottom) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
if(topOrBottom == "top"){
return rect.top >= 0;
}else{
return rect.bottom <= $(window).height();
}
}
function onVisibilityChange () {
var headers = document.getElementsByClassName("doge");
var headerAbove = null;
for(i = 0; i<headers.length; i++){
$( headers[i]).css("position","");
$( headers[i]).css("top","");
if(!isElementInViewport(headers[i], "top")){
headerAbove = headers[i];
}
}
if(headerAbove != null){
$( headerAbove).css("position","fixed");
$( headerAbove).css("top","30px");
}
}
$(window).on('DOMContentLoaded load resize scroll', onVisibilityChange);
And NewFile.css
#CHARSET "UTF-8";
.fixed-top{
width:100%;
position:fixed;
top:0px;
background-color: red;
}
.whatever1{
width:100%;
background-color: green;
}
.whatever2{
width:100%;
background-color: blue;
}
.much-text{
height: 2000px;
}
.doge {
}
Thanks to authors of answers in How to tell if a DOM element is visible in the current viewport? for an inspiration. Also, I am aware that this code doesn't meet all good practices writing in js & css but OP clearly can find the idea from this one. Notice that you may need to sort headers (from the top header to the bottom header) in your own way before iterating on them in function onVisibilityChange
Try this...
HTML
<div id="page" class="page">
<div class="container">
<div class="contentheadercontainer">
<div class="fsh"><div class="firstheader">Sub header 1</div></div>
<div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 0px; margin: 0px;
}
.container{
height: 1000px;
}
.fsh{
position: absolute; width: 100%;
}
.firstheader{
height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}
Javascript
document.addEventListener("scroll", function(){
scrollDetect();
});
function scrollDetect(){
var html = document.documentElement;
var top = (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
if(top > 235){
document.getElementById('secondheader').style.position = 'fixed';
document.getElementById('secondheader').style.marginTop = '60px';
document.getElementById('secondheader').style.width='100%';
}else{
document.getElementById('secondheader').style.position = 'inherit';
document.getElementById('secondheader').style.marginTop = '300px';
}
}
Check out this JSFiddle
Related
I have a search bar which would like to display onto the header on scroll, a great example is like the one on this site: https://www.indiamart.com/
Approach 1 - A simple way to do this would be to detect a scroll & add and remove a class that contains display: none;
You can have an event listener -
window.addEventListener('scroll', function() {
if( window.scrollY !== 0) {
document.getElementById('searchBar').classList.add('scrolled');
} else {
document.getElementById('searchBar').classList.remove('scrolled');
}
});
With the CSS -
.noScroll
{
background: yellow;
position:fixed;
height: 50px; /*Whatever you want*/
width: 100%; /*Whatever you want*/
top:0;
left:0;
display:none;
}
/*Use this class when you want your content to be shown after some scroll*/
.scrolled
{
display: block !important;
}
.parent {
/* something to ensure that the parent container is scrollable */
height: 200vh;
}
And the html would be -
<div class="parent">
<div class ='noScroll' id='searchBar'>Content you want to show on scroll</div>
</div>
Here's a JSFiddle of the same - https://jsfiddle.net/kecnrh3g/
Approach 2 -
Another simple approach would be
<script>
let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById('searchBar').style.top = '-50px';
} else {
document.getElementById('searchBar').style.top = '0';
}
prevScrollpos = currentScrollPos;
}
</script>
with the html -
<div class="parent">
<div id ='searchBar'>Content you want to show on scroll</div>
</div>
and css
#searchBar {
background: yellow;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
display: block;
transition: top 0.3s;
}
.parent {
height: 200vh;
}
Here's a JSFiddle of the same - https://jsfiddle.net/0tkedcns/1/
From the same example, the idea is only to show/hide once user scroll the page using inline css display property, you can do the same or at least provide a code sample so we can help you!
HTML
<div class="search-bar">
<div class="sticky-search">
Sticky Search: <input type="text" value="search" />
</div>
</div>
CSS
.sticky-search {
display:none;
position:fixed;
top:0px;
left:0px;
right:0px;
background:blue;
padding:10px;
}
JS
var searchHeight = $(".search-bar").outerHeight();
var offset = $(".search-bar").offset().top;
var totalHeight = searchHeight + offset;
console.log(totalHeight);
$(window).scroll(function(){
if($(document).scrollTop() >= totalHeight) {
$('.sticky-search').show();
} else {
$('.sticky-search').hide();
}
});
Looking for a good JavaScript to help me hide/show multiple divs with a button click not an a href click so I can use it in blogger.
I've been looking for an answer for a while now and have been unable to find a good one that uses JavaScript and/or CSS. I am a bit of a novice so bear with me.
Following is my code that works but I would like to simplify it and make it work so that it will close the div when I click the appropriate button again.
css
<head>
<style>
#myDIV1 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV2 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV3 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV4 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
</style>
</head>
I know there is an easier way but this is the only way that I can find that works for what I want it to do for the most part
html
<body>
<p>Click button to see div.</p>
<button onclick="myFunction1()">One</button>
<button onclick="myFunction2()">Two</button>
<button onclick="myFunction3()">Three</button>
<button onclick="myFunction4()">Four</button>
<div id="myDIV1">
This is the div1 element.
</div>
<div id="myDIV2">
This is the div2 element.
</div>
<div id="myDIV3">
This is the div3 element.
</div>
<div id="myDIV4">
This is the div4 element.
</div>
Javascript
<script>
function myFunction1() {
document.getElementById("myDIV1").style.display = "block";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction2() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "block";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction3() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "block";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction4() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "block";
}
</script>
Any help would be appreciated thanks in advance.
I would suggest to separate your code first - it would be then more clean and reusable - like myStyle.css, myScript.js, index.html
Add the css and js file in the html file like -
<link rel="stylesheet" type="text/css" href="myStyle.css">
<script type="text/javascript" src="myScript.js"></script>
src -> indicates the source path of the file. Here I assume that all our css, js, 'html' file in same place.
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor:pointer;
font-size: 16px;
}
<div class="main_div">
<div class="buttons">
Div1 |
Div2 |
Div3 |
Div4
</div>
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
</div>
if you want to hide/show all divs simultaneously than you have to give all divs same class for ex: .toggle and than you can do this:
function myFunction1(){
$(".toggle").slideToggle();
}
if you want to hide/show one div at a time than you can do this with id :
function myFunction1(){
$("#myDIV1").slideToggle();
}
with different buttons :
function myFunction1(id){
$("#"+id).slideToggle();
}
pass id here :
<button onclick="myFunction1('myDIV1')">One</button>
<button onclick="myFunction1('myDIV2')">Two</button>
<button onclick="myFunction1('myDIV3')">Three</button>
<button onclick="myFunction1('myDIV4')">Four</button>
I found the answer to what I wanted with the .toggle function thanks for the help. The answer I found here: radomsnippets.com
We can easily add an unlimited amount of buttons using reusable code.
here is a full example! Enjoy
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.generalclass {
width: 100%;
color: #ffffff;
text-align: center;
background-color: #000000;
margin: 10px;
padding: 10px;
display: none;
}
.button{
background: red;
padding: 10px;
border-radius: 5px;
color: #FFFFFF;
font-size: 16px;
border: none;
}
.button:hover{
background: black;
}
</style>
</head>
<body>
<button class="button" onclick="myFunction('button1')">Button 1</button>
<button class="button" onclick="myFunction('button2')">Button 2</button>
<div id="button1" class="generalclass">
<p>I can show anything here</p>
</div>
<div id="button2" class="generalclass">
<p>I can show anything here too and different from button 1</p>
</div>
<script>
function myFunction(divid) {
var x = document.getElementById(divid);
if (x.style.display == "none")
{
x.style.display = "block";
}
else {
x.style.display = "none";
}
}
</script>
</body>
</html>
I have a very simple CSS 100% example, that logically as I understand it, should work, but doesn't. Can someone please explain why?
HTML:
<div id="header">header</div>
<div id="nav">Nav</div>
<div id="title">title</div>
<div id="content">
Content
</div>
CSS:
html {
height:100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
#header {
background-color:red;
padding: 0;
margin: 0;
}
#nav {
background-color:gray;
padding: 0;
margin: 0;
}
#title {
background-color:azure;
padding: 0;
margin: 0;
}
#content {
background-color:antiquewhite;
height:100%;
padding: 0;
margin: 0;
}
To my understanding, there should be no vertical scroll bar. Yet one appears.
Here is a fiddle to demonstrate: http://jsfiddle.net/codeowl/9wABW/
Thank you for your time,
Regards,
Scott
UPDATE:
Here is what I ended up doing:
I developed a stack and fill approach as follows. Unfortunately fiddle has an issue with me trying to access the window in java script, so I can only paste the code:
CSS:
#header {
background-color:red;
}
#nav {
background-color:gray;
}
#title {
background-color:azure;
}
#content {
background:green;
}
HTML:
<div id="header" class="stack-y">header</div>
<div id="nav" class="stack-y">Nav</div>
<div id="title" class="stack-y">title</div>
<div id="content" class="fill-y">
<div data-role="splitter"
data-panes="[
{ scrollable: false, collapsible: true, size: '300px' },
{ scrollable: false, collapsible: true }
]"
class="fill-y">
<div>
Left Pane
</div>
<div>
Right Pane
</div>
</div>
<div class="stack-y">Test Content</div>
</div>
Java Script:
$(document).ready(function () {
var fResizeLayout = null;
fResizeLayout = function() {
var aFillElements = $('.fill-y');
$.each(aFillElements, function (i, e) {
var p = null,
iPY = 0,
iY = 0,
iH = 0;
e = $(e);
p = e.parent();
if (p.prop('tagName') === 'body') { iPY = $(window).height(); }
else { iPY = p.innerHeight(); }
e.siblings('.stack-y').each(function () {
iY += $(this).outerHeight(true);
});
iH = (iPY - iY - parseInt(e.css('border-top-width'), 10) - parseInt(e.css('border-bottom-width'), 10));
e.height(iH);
});
kendo.resize($('#content'));
};
kendo.init($('#content'));
fResizeLayout();
$(window).on('resize', function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
$(this).trigger('resizeEnd');
}, 200);
});
$(window).on('resizeEnd', function () {
fResizeLayout();
});
});
Of course you will need to include the kendo libraries for the kendo part to work.
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
Without the keno libraries:
HTML:
<div id="header" class="stack-y">header</div>
<div id="nav" class="stack-y">Nav</div>
<div id="title" class="stack-y">title</div>
<div id="content" class="fill-y">
Test Fill Content
</div>
<div class="stack-y">Test Stacked Content</div>
Java Script:
$(document).ready(function () {
var fResizeLayout = null;
fResizeLayout = function() {
var aFillElements = $('.fill-y');
$.each(aFillElements, function (i, e) {
var p = null,
iPY = 0,
iY = 0,
iH = 0;
e = $(e);
p = e.parent();
if (p.prop('tagName') === 'body') { iPY = $(window).height(); }
else { iPY = p.innerHeight(); }
e.siblings('.stack-y').each(function () {
iY += $(this).outerHeight(true);
});
iH = (iPY - iY - parseInt(e.css('border-top-width'), 10) - parseInt(e.css('border-bottom-width'), 10));
e.height(iH);
});
};
fResizeLayout();
$(window).on('resize', function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
$(this).trigger('resizeEnd');
}, 200);
});
$(window).on('resizeEnd', function () {
fResizeLayout();
});
});
Credit to Carlos for the resizeEnd part: https://stackoverflow.com/a/12692647/2109254
Thanks to all those that contributed.
Hopefully this can help someone else.
Regards,
Scott
Edit
This will give exactly the layout you are looking for, using display:table-row in the wrapped content.
html {
height:100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
#header {
background-color:red;
padding: 0;
margin: 0;
display: table-row;
height:1px;
}
#nav {
background-color:gray;
padding: 0;
margin: 0;
display:table-row;
height:1px;
}
#title {
background-color:azure;
padding: 0;
margin: 0;
display:table-row;
height:1px;
}
#content {
background:green;
padding: 0;
margin: 0;
display:table-row;
}
#wrapper {height:100%;width:100%;margin:0;padding:0;display:table}
<div id="wrapper">
<div id="header">header</div>
<div id="nav">Nav</div>
<div id="title">title</div>
<div id="content">
Content
</div>
</div>
Check your updated fiddle
You need a wrapper for the elements, depending on your specific layout you might want to play with table css attributes (display: table-row etc).
<div id="wrapper">
<div id="header">header</div>
<div id="nav">Nav</div>
<div id="title">title</div>
<div id="content">
Content
</div>
</div>
html {
height:100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
#header {
background-color:red;
padding: 0;
margin: 0;
}
#nav {
background-color:gray;
padding: 0;
margin: 0;
}
#title {
background-color:azure;
padding: 0;
margin: 0;
}
#content {
padding: 0;
margin: 0;
}
#wrapper {height:100%;margin:0;padding:0;background-color:antiquewhite;}
instead of using height:100% use height:auto..and it will work..:)
Think about what you are doing. you are telling content to be 100% of it's containing element. This would be body.
Thus, content will take up the size of the window, but you still have three other divs with height, thus total content size will = 100% (body size) + header + nav + title
If you want to fix this, you could simply make the inner contents add up to 100% and adjust the percentages to what you need. Take a look:
http://jsfiddle.net/9wABW/3/
I want to design the dialog in html5. This dialog should accept the freetext and image as parameters. I tried to open dialog as below.. Now I want to pass the parameters so that I can use that dialog everywhere..
<!DOCTYPE html>
<html>
<head>
<style>
#overlay
{
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 200;
background-image: url(maskBG.png);
}
#overlay div
{
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #400;
padding: 15px;
text-align: center;
}
.close
{
text-decoration: underline;
}
</style>
<script>
function overlay() {
var el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function overlayTest(arg) {
//alert(arg);
var el = document.getElementById("overlay").click(moveImages('Testing123'));
//alert(arg);
// el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function close() {
document.getElementById("overlay").style.visibility = 'hidden';
}
function moveImages(arg) {
alert('in Move Images');
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center">
<button type="button" onclick="overlay()" id="btnEffluentTreatment">EFFLUENT TREATMENT</button>
<button type="button" onclick="overlayTest('My MyTesting')" id="btnTry">Try1</button>
</p>
<div id="overlay" >
<div>
<p>
<img src="010.png" />
Content/Images whatever we want the user to see goes here.
</p>
<button type="button" onclick="overlay()" id="btnEffluentTreatment">Close</button>
</div>
</div>
</body>
</html>
Is there a way to place a div inside body, centered, with given left-right margins equal to x and top-bottom margins, equal to y? Nothing except of the div (and its children) is presented in the document.
UPDATE. I want the following:
Also, I'd be glad to have a more common solution for the case, when x1 != x2, y1 != y2 (though a solution for my particular case x1==x2, y1==y2 is appreciated).
Better solution(?):
Set margin-left and margin-right for the div to "auto"
You can use fixed positioning. It won’t work in IE6, though.
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' lang='de'>
<head>
<meta charset='utf-8' />
<title>Test</title>
<style>
#bla {
position: fixed;
top: 30px;
left: 60px;
right: 60px;
bottom: 30px;
background: yellow;
}
</style>
</head>
<body>
<div id='blah'>
</div>
</body>
</html>
See it in action: http://obda.net/stackoverflow/position-fixed.html
The best I can do without CSS3 is to use two divs.
html {
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div.parent {
display: inline-block;
position: relative;
left: 50%;
top: 50%;
}
div.child {
width: 100px;
margin-left: -50%;
margin-top: -50%;
border: 1px solid #000;
}
You can see it here: http://jsfiddle.net/CatChen/VGpdv/4/
Update: If CSS3 implementation is acceptable, it's a lot easier:
http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
You will have to use javascript if you want the margins to be the same in all browzers.
<body>
<div id="the_div" style="margin: 20 auto;margin-bottom:0;width:300px;">
</div>
<script type="text/javascript">
var dim = (function () {
var _pW, _pH;
if (document.body && document.body.offsetWidth) {
_pW = document.body.offsetWidth;
_pH = document.body.offsetHeight;
}
if (document.compatMode == 'CSS1Compat' &&
document.documentElement && document.documentElement.offsetWidth) {
_pW = document.documentElement.offsetWidth;
_pH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
_pW = window.innerWidth;
_pH = window.innerHeight;
}
return { width : _pW, height : _pH };
})();
var div = document.getElementById( "the_div" );
div.style.height = dim.height - 20 + "px";
</script>
<body>