I have a very simple page I want to be able to show text from a link.
Here is my webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Encyclopedia</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This is our Encyclopedia about animals</h1>
<p>Hello this is our Animal encyclopedia so far were still working hard to make it equal to other websites we do have a very small selection of animals you can learn about right now. It's really vauge but if you click sign up you can get updates straight
to your email for when we have a more updated selection
</p>
<nav id=n av1>
<ul>
<li>Home</li>
<li>Image gallery</li>
<li>SignUp</li>
</ul>
</nav>
<nav id=n av3>
<ul>
<li>Marine life</li>
<li>Mammals</li>
<li>Birds</li>
<li>Reptiles</li>
<li>Amphibians</li>
</ul>
</nav>
</body>
</html>
I want the links about animals to show text I know right now I got it set up to go to the page its already on. But how would I go about doing it so that when I click the link text about the topic appears on the page?
Lots of ways to do it but here's a simple way
You'll need a DIV to fill with text
<div id="uniquename3" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;width:120px;">Content goes here.</div>
On the Href's you'll need something like this.
<a onmouseover="document.getElementById('uniquename3').innerHTML = 'Mammels\,some interesting info about mammels\, more interesting info about mammels';ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')">Mammels</a>
// http://bontragerconnection.com/ and http://willmaster.com/
// Version: July 28, 2007
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
Here's an example of using js to show and hide elements based on which link is clicked.
const app = {
init: function() {
document.querySelectorAll(".link").forEach(link => {
link.addEventListener("click", app.nav);
});
},
nav: function(ev) {
ev.preventDefault();
let currentPage = ev.target.getAttribute("data-target");
let content = document.querySelectorAll('.content')
for(i = 0; i < content.length; i++) {
if(content[i].classList.contains('showing')) {
content[i].classList.remove("showing");
}
}
document.getElementById(currentPage).classList.add("showing");
}
};
document.addEventListener("DOMContentLoaded", app.init);
.content {
display: none;
}
.showing {
display: block;
}
#marine-life {
background: green;
}
#mammals {
background: blue;
}
#birds {
background: yellow;
}
#reptiles {
background: purple;
}
#amphibians {
background: red;
}
<body>
<h1>This is our Encyclopedia about animals</h1>
<p>Hello this is our Animal encyclopedia so far were still working hard to make it equal to other websites we do have a very small selection of animals you can learn about right now. It's really vauge but if you click sign up you can get updates straight
to your email for when we have a more updated selection
</p>
<nav id=n av1>
<ul>
<li>Home</li>
<li>Image gallery</li>
<li>SignUp</li>
</ul>
</nav>
<nav id=n av3>
<ul>
<li><a class="link" data-target="marine-life" href="#">Marine life</a></li>
<li><a class="link" data-target="mammals" href="#">Mammals</a></li>
<li><a class="link" data-target="birds" href="#">Birds</a></li>
<li><a class="link" data-target="reptiles" href="#">Reptiles</a></li>
<li><a class="link" data-target="amphibians" href="#">Amphibians</a></li>
</ul>
</nav>
<div id="contentWrap">
<div id="marine-life" class="content">
<h1>Marine Life</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
</div>
<div id="mammals" class="content">
<h1>Mammals</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
</div>
<div id="birds"class="content">
<h1>Birds</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
</div>
<div id="reptiles" class="content">
<h1>Reptiles</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
</div>
<div id="amphibians" class="content">
<h1>Amphibians</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
</div>
</div>
</body>
Related
It's hard to explain using words, better look at example i made.
https://jsfiddle.net/yoz6pkh0/
<nav>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<div class="filter">FILTER</div>
</div>
</nav>
<div class="hero">
<h1>Hello to Lorem!</h1>
<p>Lorem ipsum dolor sit amet</p>
<div class="filter inhero">FILTER</div>
</div>
<div class="main">
<p>Lorem ipsum ...</p>
...
<p>Lorem ipsum ...</p>
</div>
I have the navbar that i hide on scrolling page down and show on scrolling up.
I need to make an element (lets call it FILTER) that on page load is located in hero-section but become sticky to navbar when scrolling to FILTER position or below and vice versa when scrolling up.
I solved the problem in my way but i wonder if any better solution exists? Is it necessary to clone FILTER element?
I think there is a better solution than cloning the element, you can use this code:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
</nav>
<div class="hero">
<h1>Hello to Lorem!</h1>
<p>Lorem ipsum dolor sit amet</p>
<div class="filter inhero">FILTER</div>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
.container {
margin: 0px 200px;
position: relative;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
nav {
background-color: blue;
color: white;
margin: 0;
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
top: 0px;
transition: top 0.5s;
}
.filter {
background-color: red;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
}
li {
padding: 15px;
}
.main {
padding: 50px 200px;
}
.hero {
padding: 150px 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: bisque;
height: 250px;
}
JS:
let filter = document.getElementsByClassName("filter")[0];
let fixed = false;
let filterTop = filter.getBoundingClientRect().top + window.scrollY;
window.addEventListener("scroll", function() {
if (filter.getBoundingClientRect().top <= 50 && !fixed) {
filter.style.position = 'fixed';
filter.style.top = '50px';
fixed = true;
} else if (window.scrollY <= filterTop - 50 && fixed) {
filter.style.position = 'static';
filter.style.top = '';
fixed = false;
}
});
What I've done here is removing the clone (and the styles related to it ) and making the position of the filter fixed or static according to the scroll.
I have an effect that makes the header become un-fixed when a specified div hits the top of the screen, and scroll with the rest of the content.
This works perfectly and i wrapped the "const targetTopPos = targetEl.getBoundingClientRect().top" in a resize event listener. But its calculations are wrong if the page is already scrolled and i have no idea why.
Another issue is that if the page is refreshed scrolled down, the header will be there until you scroll.
Here is the code:
window.onresize = function(event) {
const targetTopPos = targetEl.getBoundingClientRect().top;
console.log(targetTopPos);
};
const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')
const targetTopPos = targetEl.getBoundingClientRect().top
let isHeaderFixed = true
document.onscroll = () => {
const targetTopOffset = targetEl.getBoundingClientRect().top
if (isHeaderFixed && targetTopOffset < 100) {
headerEl.style.position = 'absolute'
headerEl.style.top = `${targetTopPos - 100}px`
isHeaderFixed = !isHeaderFixed
}
if (!isHeaderFixed && targetTopOffset >= 100) {
headerEl.style.position = 'fixed'
headerEl.style.top = '0px'
isHeaderFixed = !isHeaderFixed
}
}
body {
padding: 0;
margin: 0;
position: relative;
}
header {
position: fixed;
height: 100px;
width: 100%;
background: lightblue;
}
.content {
line-height: 100px;
}
.target {
width: 100%;
background: red;
}
<header>
Custom header
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
I write the "targetTopPos" to the console so you can see the issue
It's because you redefine targetTopPos as a const in your onresize event.
You only have to asign the new value to targetTopPos
see code below
window.onresize = function(event) {
targetTopPos = targetEl.getBoundingClientRect().top;
console.log(targetTopPos);
};
const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')
let targetTopPos = targetEl.getBoundingClientRect().top
let isHeaderFixed = true
document.onscroll = () => {
const targetTopOffset = targetEl.getBoundingClientRect().top
if (isHeaderFixed && targetTopOffset < 100) {
headerEl.style.position = 'absolute'
headerEl.style.top = `${targetTopPos - 100}px`
isHeaderFixed = !isHeaderFixed
}
if (!isHeaderFixed && targetTopOffset >= 100) {
headerEl.style.position = 'fixed'
headerEl.style.top = '0px'
isHeaderFixed = !isHeaderFixed
}
}
body {
padding: 0;
margin: 0;
position: relative;
}
header {
position: fixed;
height: 100px;
width: 100%;
background: lightblue;
}
.content {
line-height: 100px;
}
.target {
width: 100%;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
Custom header
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
I need to show txt nicely sliding from under image after click. When user will click on other image, previous text have to slide out (not be vissible).
I am not good in javascript at all. Now I have something like this:
.html
<img src="image.jpg" width="100%" height="100px;">
<div class="slidingDiv">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div>
</div>
<img src="image.jpg" width="100%" height="100px;">
<div class="slidingDiv">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div>
</div>
.js
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
var isvisible = $(this).next('.slidingDiv').is(':visible');
if ( isvisible ) {
$(this).next('.slidingDiv').hide();
} else{
$(this).next('.slidingDiv').show();
}
});
});
https://jsfiddle.net/Elfiszcze/49vd6d6k/2/
Could someone help me with this one?
When using jquery hide() and show() you can set the parameter duration that will be used in animation duration, see jquery docs. For example, 500 miliseconds:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
//hide all sliding divs
var arrayLikeOfSlidingDivs = $('.slidingDiv');
arrayLikeOfSlidingDivs.each(function(){
if ($(this).is(':visible')){
$(this).hide(500);
}
});
var isvisible = $(this).next('.slidingDiv').is(':visible');
if ( isvisible ) {
$(this).next('.slidingDiv').hide(500);
} else{
$(this).next('.slidingDiv').show(500);
}
});
});
I need to keep track of the page offset on a website.
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var Y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
Using the above code returns the vertical offset for me on all desktop browsers. However, I only get 0 on mobile browsers. How can I get the scroll location on mobile?
I guess this might help you:
Demo : Fiddle
JQuery
$(window).scroll(function (event) {
var scroll = $(window).scrollTop(); // This would give you offsetY while you scroll
$(".scrollY").text(scroll); // This is just to display for instance.
});
Open in Mobile
Update
JavaScript
window.addEventListener('scroll', function(){
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
document.getElementsByClassName("scrollY")[0].innerHTML = scrollTop;
}, true)
.scrollY
{
position:fixed;
top:0px;
left:0px;
padding:10px;
display:block;
width:auto;
height:auto;
background:red;
color:yellow;
}
.title h1
{
text-align:center;
}
div
{
display:block;
width:90%;
background:#2b2937;
color:#eee;
padding:10px;
margin:10px 0px;
border-radius:10px;
}
<div class="scrollY"> </div>
<div class="title">
<h1>Dummy HTML Text</h1>
</div>
<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
Demo : Fiddle
How can I create links that will expand a particular accordion section and then scroll to a particular DIV within that section?
I'm using the latest jQuery UI library as well as jquery.multi-accordion-1.5.3.js, and developing for IE8 or later
I've been able to successfully implement both multiAccordion and by parsing a query string I can manipulate which section to be expanded, and scroll to the first hash anchor.
Strangely, this seems to work only for the first link, for any other link it scrolls past the corresponding hash anchor, and overall it acts erratically.
I came across a few threads mentioning IE having issues recognizing hash anchors in a query string like this index.php?page=page1#section3 , ie...Why does Internet Explorer not support bookmarks with both a querystring and a hash/anchor? Firefox works properly but I have not come across one solution...
Has anyone have a solution for this? Any alternatives?
Here is my code (or if it's more legible for you - the fiddle with the same code http://jsfiddle.net/3QSmq/1/)
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery UI Multi Open Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.9.custom/jquery-ui-1.8.9.custom.css" />
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="jquery.multi-accordion-1.5.3.js"></script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
</style>
</head>
<body>
SOMETHING<br />
SOMETHING1
<div id="multiAccordion">
<h3>tab 1</h3>
<div>Text here
</div>
<h3>tab 2</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
<p id="something" style="color:red">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</div>
<h3>tab 3</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
<p id="something1" style="color:red">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</div>
<h3>tab 4</h3>
<div>Text Here
</div>
</div>
JavaScript
$(function(){
$('#multiAccordion').multiAccordion({
active: [1, 2],
click: function(event, ui) {
//console.log('clicked')
},
init: function(event, ui) {
//console.log('whoooooha')
},
tabShown: function(event, ui) {
//console.log('shown')
},
tabHidden: function(event, ui) {
//console.log('hidden')
}
});
$('#multiAccordion').multiAccordion("option", "active", [y]);
});
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var x = getQueryVariable("page");
switch (x){
case(x = "tab1"):
y = 0;
break;
case(x = "tab2"):
y = 1;
break;
case(x = "tab3"):
y = 2;
break;
case(x = "tab4"):
y = 3;
break;
case(x = false):
y = "";
break;
default:
y ="";
break;
}
Any suggestions?
P.S. Here is THE closest description of my issue elsewhere on the web but no answer...Another thread
Instead of including the tab with the page, just target the ID from the hash. So your links will look like this:
SOMETHING<br />
SOMETHING1
Then you can include this code to find the ID from the hash, find the correct tab and open it. Here is the complete code & demo:
$(function() {
var updateAccordion = function(hash) {
hash = hash || window.location.hash;
var content, tab;
// look for a hash
if (hash && $(hash).length) {
// find accordion content
content = $(hash).closest('.ui-accordion-content');
if (content.length) {
// find "tab#" from <a> inside of accordion header (h3)
tab = parseInt(content.prev('h3').find('a').attr('id').replace('tab',''), 10) - 1;
$('#multiAccordion').multiAccordion("option", "active", [tab]);
}
}
};
// intercept all clicked links and look for a hash
$('a').click(function(){
if (this.hash) {
updateAccordion(this.hash);
}
});
$('#multiAccordion').multiAccordion({
active: [1],
click: function(event, ui) {
//console.log('clicked')
},
init: function(event, ui) {
//console.log('whoooooha')
},
tabShown: function(event, ui) {
//console.log('shown')
},
tabHidden: function(event, ui) {
//console.log('hidden')
}
});
// open up accordion to correct tab after initialization
updateAccordion();
});
Try using document.location.hash to access directly the hash parameters.
In your example :
index.html?page=tab2#something
document.location.search will be ?page=tab2
document.location.hash will be #something
You are trying to parse the wrong value, so I guess the JQuery plugin scroll to the bottom of the page when it's trying to open a tab that doesn't exists.