We Keep Coding

Refresh Page but keep scoll position with countdown timer

So I have this bit of code which refresh the page after the countdown timer has reached 0. The countdown is displayed in a div at the bottom.
<script>
(function countdown(remaining) {
if(remaining === 0)
location.reload(true);
document.getElementById('countdown').innerHTML = remaining;
setTimeout(function(){ countdown(remaining - 1); }, 1000);
})(60);
</script>
<span id="countdown" class="bold"></span>
I would like it to refresh the same way but keep the scroll position on the browser as the page is pretty long. Would this be possible with this code?
Please give example as I don't understand javascript all that much..
Thanks

Have you used localStorage or cookies before? These are handy parts of your user's browsers where you can actually store and save custom bits of data, just for them. See localStorage API for some more info.
Anyways, you could use localStorage, and then when your user scrolls you could just store how far down they were. Then, on page load, if that localStorage key has a value, scroll the user down that far.
I made a snippet but, sadly, their iframe for snippets won't allow me to access localStorage to actually show you how it works in action. But, I did put some lines in there anyways (untested, though) with some comments to try and help illustrate the broad strokes of how you could go about it.
The only other thing you could do on top of this is put in a test to make sure their browser supports localStorage and then, if it doesn't, you could fall back to trying to use cookies or some other method!
function updateScrollStuff() {
// this tells us how far down we've scrolled as a number, like '476'
var scrollPosition = $(document).scrollTop();
// I cant access localStorage from the iframe they're using here, but I think this
// would be what you'd want to do with it to store that scroll position
// localStorage.storedScrollPosition = scrollPosition;
// this line is just illustrative, showing you that the number for the scroll position is updating
// every time you scroll - you don't need this for your final purposes
$("#scroll-position").text(scrollPosition + "px");
}
// when the user scrolls, call that function above
$(window).scroll(function() {
updateScrollStuff();
});
// I can't test it here, but on page load I would check to
// see if a value exists, and then scroll to it if it does!
$(window).load(function() {
// again, with local storage blocked all I can do is show you what
// it would look like
// typeof 'undefined' is just a check you can make to see if a variable exists
// if (typeof localStorage.storedScrollPosition != 'undefined') {
// $("html, body").scrollTop(localStorage.storedScrollPosition);
// }
});
body, html {
margin: 0;
padding: 0;
}
.section {
width: 100%;
height: 200px;
}
#section-1 {
background-color: #333333;
}
#section-2 {
background-color: #666666;
}
#section-3 {
background-color: #999999;
}
#section-4 {
background-color: #aaaaaa;
}
#scroll-position {
background-color: black;
color: white;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section-1" class="section"></div>
<div id="section-2" class="section"></div>
<div id="section-3" class="section"></div>
<div id="section-4" class="section"></div>
<h3 id="scroll-position">Scroll to see this change</h3>

Smooth scroll to id except when user is already at that location

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;
}

How do I make a div (menu) fixed positioned after some scrolling has happened?

I'm making a theme for a website and I was given permission to play with the HTML files. The thing is I'm just familiarised with CSS and HTML, but I'm a complete noob when it comes to Javascript, JQuery, etc. and, sadly, it seems I need those to add some features I want.
I'd like a menu that works like this one: https://www.planetside2.com/news
The HTML is basically this:
<div id="wrap">
<div id="page-header">
<div class="headerbar">
</div>
</div>
And plenty stuff inside, but I hope the containers are enough
This is the CSS:
#wrap {
margin: 0 auto;
width: 1024px;
}
.headerbar {
background: url("{T_THEME_PATH}/images/headerbarbg.png") no-repeat ;
background-position: center;
width: 1054px;
margin:0 -15px;
margin-top:3px;
height: 120px;
position: relative;
padding-top: 70px;
}
I've checked out some other solutions, but, as I said, I'm a complete noob at scripting and when I try to apply such scripts to the theme, they don't work, most likely because there are some things that I should change that I don't know (except classes and IDs, of course).
I hope someone can help me.

First of all you need to detect scrolling and window resize
$(document).ready(function(){
$(window).on("scroll resize", function(e){
var elem = $(".headerbar");
// check if your header is visible by subtracting
// the top offset of your div from the scrolltop distance
if ((elem.offset().top - $(window).scrollTop()) <= 0 && elem.css("position") !== "fixed") {
console.log("not visible");
elem.css({
position:"fixed",
"z-index":"9999",
top:"0px"
});
// check if your header height is greater or equal to the scrolltop distance
} else if (elem.height() >= $(window).scrollTop()) {
console.log("visible");
elem.css({
position:"relative"
});
}
});
})
And here is a simple demo: JSFIDDLE

Some thing i have done previously in fiddle just check this one out will help you to have a scratch.
$(document).ready(function () {
var top_fixed;
if ($('#header-con').length > 0)
{
top_fixed = $('#header-con').offset().top;
}
$(window).scroll(function () {
if ($('#header-con').length > 0)
{
$('#header-con').toggleClass('fixed', $(window).scrollTop() > top_fixed);
}
});
});
DEMO

This short jquery code is what you need.
Tested and was working in a website i had develop lately.
$(window).scroll(function() {
if($(window).scrollTop() != 0) {
$('#fixed-menu-top').css('position', 'fixed').fadeIn();
} else {
$('#fixed-menu-top').css('position', 'absolute').fadeOut();
}
});
Just edit the ids to yours ex #fixed-menu-top to #wrap or any ids in ypur mark up
See website

Scrolling News Ticker Jquery - Issues

Original Source & Example:
http://www.htmldrive.net/items/show/397/Vertical-Scrolling-News-Ticker-With-jQuery-jCarouse
Hello Again!! Scrolling News Ticker Jquery with some issues:
First Issue : Internet Explorer Error Message
" Object doesn't support this property or method " Line: 269: Line 269)
ticker.mouseenter(function() { // <---Line: 269
//stop current animation
ticker.children().stop();
});
Second Issue : The only way of clicking on a news option (to be directed to the link of a page) is through the text title that in the website example is in blue color.
I would like for the user to be able to click on the whole section of the option that
includes the image aswell.
Third Issue : When the news scrolls it looks all in one, is there a way to add a line to separate each section.
Forth Issue: Is there a way to pause the automatic scrolling when a user puts the mouse
over a section?
Is there a way to add more text under the title and category?
Here is the script itself with the IE issue highlighted with an arrow on the right hand side
below:
<script type="text/javascript">
$(function() {
//cache the ticker
var ticker = $("#ticker");
//wrap dt:dd pairs in divs
ticker.children().filter("dt").each(function() {
var dt = $(this),
container = $("<div>");
dt.next().appendTo(container);
dt.prependTo(container);
container.appendTo(ticker);
});
//hide the scrollbar
ticker.css("overflow", "hidden");
//animator function
function animator(currentItem) {
//work out new anim duration
var distance = currentItem.height();
duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.020;
//animate the first child of the ticker
currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
//move current item to the bottom
currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
//recurse
animator(currentItem.parent().children(":first"));
});
};
//start the ticker
animator(ticker.children(":first"));
//set mouseenter
ticker.mouseenter(function() {
ticker.mouseenter(function() { // <---Line: 269
//stop current animation
ticker.children().stop();
});
//set mouseleave
ticker.mouseleave(function() {
//resume animation
animator(ticker.children(":first"));
});
});
</script>
I would deeply appreciate it!!

to add line to separate each items add border-bottom:1px solid black; to the css.
after read your question i would like to show you the javascript method that i used in my site and stops when mouse over.
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<!--YOUR SCROLL CONTENT HERE-->
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div><style type="text/css">
#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
you can view the demo at here

Is there a way for a Content Editor Web Part to query like a Query Web Part?

I have a Content Editor Web Part where I am using scrolling Javascript to display text. I need to query my news section with all its articles while maintaining the scrolling. I know I can hard code the links, but I would like to not have to enter a new link every time a manager adds news. Is it possible to do this? Or on the other end, is it possible to edit the Content Query Web Part to scroll vertically?
Thanks.
My Javascript is:
<style type="text/css">
#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid white;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<!--YOUR SCROLL CONTENT HERE-->
<h4>Your scroller contents</h4>
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>

The output of the Content By Query Web Part can be modified by editing some XSLT, so you should be able to add the required div's and classes to make it autoscroll with your javascript function.
http://msdn.microsoft.com/en-us/library/bb447557.aspx