I'm running the following script when a user clicks on a button, to scroll to a specific div on the page, along with a few other unrelated functions.
The problem is that the button itself is supposed to always remains in view, and thus can be spam-clicked to cause the page to 'lag' while it's busy moving over and over to the same location. I would like to counter this behavior by only executing the scroll when the page is not already at that specific location.
Unfortunately I have no real experience working with JavaScript/jQuery and have not been able to find an example of something like this being used.
Here's my sample code:
HTML
<div id="navButton">Button</div>
<div id="listContent">Content that must be visible after button click goes here</div>
Script
window.onload=function(){
document.getElementById("navButton").onclick = function(){
$("html, body").animate({scrollTop: $("#listContent").offset().top -165}, 400);
}
}
Maybe this Example could help you... Change the hash first then listen to the hashchange Event. When you reload the page it will scroll down to your anchor.
$(document).ready(function() {
// check for hash when page has loaded
if (getHash() != null) {
checkForScrolling();
}
});
// check for hash when hash has changed
window.onhashchange = function() {
checkForScrolling();
};
// return hash if so or null if hash is empty
function getHash() {
var hash = window.location.hash.replace('#', '');
if (hash != '') {
return hash;
} else {
return null;
}
}
// this function handles your scrolling
function checkForScrolling() {
// first get your element by attribute selector
var elem = $('[data-anchor="' + getHash() + '"]');
// cheeck if element exists
if (elem.length > 0) {
$('html, body').stop().animate({
scrollTop: elem.offset().top
}, 300);
}
}
body {
font-family: Helvetica
}
section {
position: relative;
margin-bottom: 10px;
padding: 20px;
height: 300px;
background-color: #eee;
}
section a {
display: block;
position: absolute;
bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h1 data-anchor="start">Smooth Scrolling</h1>
<ul>
<li>Scroll to Anchor 1
</li>
<li>Scroll to Anchor 2
</li>
<li>Scroll to Anchor 3
</li>
</ul>
<section>
<h2 data-anchor="1">First Anchor</h2>
Back to top
</section>
<section>
<h2 data-anchor="2">Second Anchor</h2>
Back to top
</section>
<section>
<h2 data-anchor="3">Third Anchor</h2>
Back to top
</section>
</div>
Try this if worked
<div id="navButton" onclick="moveElement('listContent');">Button</div>
<div id="listContent">Content that must be visible after button click goes here</div>
You will need jquery included for this script code
function moveElement(divId) {
$('html, body').animate({
scrollTop: $("#"+divId).offset().top
}, 2000);
}
And if you see it not working then try by adding below css. It will make gap between button and your div.
#navButton {
height: 300px;
border:1px solid green;
}
#listContent {
height: 900px;
border: 1px solid red;
}
Related
I need to trigger a jQuery function on a div when an anchor reaches the top of the viewport.
There are a lot of posts on StackOverflow based on an element entering the viewport (i.e the bottom of the viewport) see here for example.
Is it possible to trigger jQuery for the .nav-down element when the anchor #trigger hits the top of the view port?
HTML:
<div class="spacer"></div>
ANCHOR
<div class="nav-down"></div>
<div class="spacer"></div>
jS:
function scroll_style() {
var window_top = $(window).scrollTop();
var div_top = $('#trigger').offset().top;
if (window_top > div_top){
$('.nav-down').css("background","green");
}
}
$(function() {
$(window).scroll(scroll_style);
scroll_style();
});
This jS/jSFiddle doesn't work as intended, but it'll give an idea of the thought process I have:
https://jsfiddle.net/vanstone/s643m85b/14/
Can anyone assist me with getting this to work?
You can try using the getBoundingClientRect() to get the position of <a> with respect to the viewport and then implement your logic.
In the below example, I am checking for top < 10 to factor in the height of <a>
function scroll_style() {
if ($('#trigger')[0].getBoundingClientRect().top < 10) {
$('.nav-down').css("background", "green");
} else {
$('.nav-down').css("background", "yellow");
}
}
$(function() {
$(window).scroll(scroll_style);
scroll_style();
});
.spacer {
height: 700px;
background: red;
}
.nav-down {
height: 250px;
width: 100%;
background: blue;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="spacer"></div>
ANCHOR
<div class="nav-down"></div>
<div class="spacer"></div>
I am trying to load a div with different content based on the link I click...
While it seems to work for the first link when I click it, clicking the other links only replaces the content with the same content for 'encodeMe' , yet I have specified different content that I want to replace for 'htmlize-me'
The first run-through of this I did not use jQuery's .bind() function. I simply used .click() , and both had the same result. Looking through the jQuery API I thought using the .bind() function would bind each function within it to that particular page element, but it seems to apply it to all my links.
I've achieved the same effect using .hide and .show to toggle divs but I want to be more elegant about how I do that, and this was my attempted alternative...
here's the relevant html:
<label for="list-root">App Hardening</label>
<input type="checkbox" id="list-root" />
<ol>
<li id="encode-me"><a class="show-popup" href="#">encodeMe()</a></li>
<li id="htmlize-me"><a class="show-popup" href="#">htmlizeMe()</a></li>
</ol>
<div class="overlay-bg">
<div class="overlay-content">
<div class="the-content"></div>
<br><button class="close-button">Close</button>
</div>
</div>
here's the script I made to trigger the content change:
$('#encode-me').bind('click' , function() {
$('div.the-content').replaceWith('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').replaceWith('Hi, Im something different');
});
});
Try something like this:
Use html() instead of replaceWith()
$('#encode-me').bind('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').html("Hi, I'm something different");
});
});
replaceWith does exactly what it sounds like, it replaces the div with the h3, so when you click the second link there is no div.
Try setting the innerHTML instead
$('#encode-me').on('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>Found in <p>[web root]/redacted/redacted.asp</p>');
});
$('#htmlize-me').on('click' , function() {
$('div.the-content').html('Hi, I\'m something different');
});
So I figured out a more clever way to do this! Use the DOM to your advantage - set up a nested list structure and change the content using .find() on parent and child elements the list.
Markup
<span style="font-size:1.4em">Type
<ul class="row">
<li>Blah
<div class="overlay-content">
<p></p>
<p class="changeText">Blah</p>
</div>
</li>
<li>Blah2
<div class="overlay-content">
<p></p>
<p class="changeText">Blah2</p>
</div>
</li>
</ul>
</span><br>
<!-- OVERLAYS -->
<div class="overlay"></div>
CSS
.close {
border-radius: 10px;
background-image: url(../img/close-overlay.png);
position: absolute;
right:-10px;
top:-15px;
z-index:1002;
height: 35px;
width: 35px;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:10;
height:100%;
width:100%;
background:#000;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
display:none;
}
.overlay-content {
position:fixed!important;
width: 60%;
height: 80%;
top: 50%;
left: 50%;
background-color: #f5f5f5;
display:none;
z-index:1002;
padding: 10px;
margin: 0 0 0 -20%;
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
Script
$(document).ready(function(){
$('.show-popup').click(function() {
var ce = this;
$('.overlay').show('slow', function() {
$(ce).parent().find('.overlay-content').fadeIn('slow');
});
});
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height(); //grab the height of the page
var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
$('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+100+'px'}); //set the content 100px from the window top
});
/*
// hides the popup if user clicks anywhere outside the container
$('.overlay').click(function(){
$('.overlay').hide();
})
*/
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
$('.close').click(function() {
$('.overlay-content').hide('slow', function() {
$('.overlay').fadeOut();
});
});
});
I have a question about how I can dynamically change a href="" in a button.
The jsfiddle below shows a button fixed at the bottom of the viewport starting at the landing page:
http://jsfiddle.net/Hm6mA/3/
The html of the button is like so:
<div class="button">
<a href="#first" class="" style="width: 80px; height: 80px; opacity: 1;">
<img src="img/down.png" alt="down">
</a>
</div>
When it is clicked I want it to scroll to the next section and change the href="" to the following section of the page. So, when it is first clicked, the href will change to #second. It would obviously also need to change when the user manually scrolls past a section.
This is for a single page website. How would I go about such a thing?
Use .prop() to change its value
$(".button").on('click', function(){
$('.button').find('a').prop('href', '#services');
});
Demo
You can use fullPage.js plugin to achieve what you want. Maybe it is faster than coding it from cero :)
Demo fullPaje.js
Page
I am not used to jquery. Here is a pure javascript solution. It surely changes the hash value.
<body>
<div id="sections">
<section id="s100">asdfasd</section>
<section id="s101"></section>
<section id="s102"></section>
<section id="s103"></section>
<section id="s104">asdfasdasdfsdf</section>
<section id="s105"></section>
</div>
<div class="nav-bar">
<a id="next-button" class="button" href="#s100">Next</a>
</div>
<script type="text/javascript">
var sections = document.getElementById("sections");
var nextButton = document.getElementById('next-button');
sections.onscroll = function (evt) {
}
var counter = 100;
var limit = 105;
// closure
nextButton.onmouseup = function (evt) {
var incCounter = function () {
// add your custom conditions here
if(counter <= limit)
return counter++;
return 0;
};
var c = incCounter();
if(c != 0)
this.setAttribute('href', "#s" + c);
}
</script>
</body>
CSS
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#sections {
height: 50%;
width: 100%;
overflow: scroll;
}
.nav-bar {
margin: 30px 20px;
}
.button {
text-decoration: none;
border: 1px solid #999;
padding: 10px;
font-size: 120%;
}
I have written a small jQuery plugin for that, just pushed it to GitHub. https://github.com/ferdinandtorggler/scrollstack
What you basically want to do is calling
$('.button').scrollstack({stack: ['#first', '#second', ... ]});
You dont even need the link when you call it on the button. So check it out and let me know if it works for you. ;)
Here you can try it and read more: http://ferdinandtorggler.github.io/scrollstack/
I have a script that has a div with a width larger than its' parent, with the parent being set to overflow: hidden;. I have javascript that is setting the left positioning of the big div to create "pages". You can click a link to move between pages.
All of that works great, but the problem is if you tab from one "page" element to another, it completely messes up all the left positioning to move between the pages.
You can recreate this bug in the fiddle I set up by setting your focus to one of the input boxes on page ONE and tabbing until it takes you to page two.
I've set up a demo here.
The code that is important is as follows:
HTML:
<div class="form">
<div class="pagesContainer">
<div class="page" class="active">
<h2>Page One</h2>
[... Page 1 Content here...]
</div>
<div class="page">
<h2>Page Two</h2>
[... Page Content here...]
</div>
</div>
CSS:
.form {
width: 400px;
position: relative;
overflow: hidden;
border: 1px solid #000;
float: left;
}
.pagesContainer {
position: relative; /*Width set to 10,000 px in js
}
.form .page {
width: 400px;
float: left;
}
JS:
slidePage: function(page, direction, currentPage) {
if (direction == 'next') {
var animationDirection = '-=';
if (page.index() >= this.numPages) {
return false;
}
}
else if (direction == 'previous') {
var animationDirection = '+=';
if (page.index() < 0) {
return false;
}
}
//Get page height
var height = page.height();
this.heightElement.animate({
height: height
}, 600);
//Clear active page
this.page.removeClass('active');
this.page.eq(page.index()).addClass('active');
//Locate the exact page to skip to
var slideWidth = page.outerWidth(true) * this.difference(this.currentPage.index(), page.index());
this.container.animate({
left: animationDirection + slideWidth
}, 600);
this.currentPage = page;
}
The primary problem is that whatever happens when you tab from say, an input box on page one to something on page 2, it takes you there, but css still considers you to be at left: 0px;. I've been looking all over for a solution but so far all google has revealed to me is how to stop scrollbar scrolling.
Any help or suggestions would be appreciated, thanks!
P.S. The html was set up like this so that if javascript is disabled it will still show up all on one page and still function properly.
I updated your fiddle with a fix for the first tab with the form: http://jsfiddle.net/E7u9X/1/
. Basically, what you can do is to focus on the first "tabbable" element in a tab after the last one gets blurred, like so:
$('.form input').last().blur(function(){
$('.form input').first().focus();
});
(This is just an example, the first active element could be any other element)
Elements with overflow: hidden still have scrolling, just no scroll bars. This can be useful at times and annoying at others. This is why your position left is at zero, but your view of the element has changed. Set scrollLeft to zero when you change "pages", should do the trick.
On loading a page I would like it to go to #content without changing the url.
I thought I would be able to use
window.location.hash = "content";
window.location.replace("#content", "");
but #content still exists on the url.
Any better method?
Edit:
Also tried
window.location.hash = "content";
window.location.replace(window.location.toString().replace("#content", ""));
But this sends the browser into a loop.
You could find the vertical position of the anchor with that id, and then scroll to that position.
Go to or Scroll to anchor specified div id without changing url
TRY DEMO
function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({
block: 'start',
behavior: 'smooth'
});
}
#userdiv {
margin-top: 200px;
width: 200px;
height: 400px;
border: 1px solid red;
}
a {
color: #337ab7;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
<a onclick="scrollSmoothTo('userdiv')">
Scroll to userdiv
</a>
<div id="userdiv">
Lorem ipsum this is a random text
</div>
This is a 10 year old question but I came across this issue when using Nextjs and wanted to smoothly navigate to a lower element without effecting the url... Nextjs, Typescript.
const Anchor: React.FC = () => {
const smoothScrollTo = e => {
e.preventDefault();
const element = document.getElementById('search');
element.scrollIntoView({
block: 'start',
behavior: 'smooth' // smooth scroll
})
};
return (
<div>
<a
href=""
onClick={smoothScrollTo}>
Let's go!
</a>
<div id = "search">Take me here!</div>
</div>
)
};
Now, it would probably be a best practice to be using refs here but this did exactly what I needed! I'm sure other improvements can be made too!
This will do it with a nice animation:
Click to scroll
<div id="link" style="margin-top: 1000px; height: 300px; background-color: blue; margin-bottom: 1000px">
Click and scroll to this div without changing url!
</div>
<script>
$('a').on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
if ($(hash).length) {
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 300, function() {
// Do something fun if you want!
});
}
});
</script>
Working JSFiddle