I have a div section on my .ASPX form. The section just contains a load of links (standard
document.getElementById('Side1').style.display = 'none';
This worked great but was a bit abrupt for what I wanted, so I wrote the little routine below (with a little help from the internet) but although the DIV dection shrinks, and the content below scrolls up .. the links in the div section don't move, until the div section is made invisible .... is there a way round this, or am i going about this all wrong (ps my javascript is rubbish)
var originalSize =0;
var i = 0;
var ts;
function shrink() {
if (i != 28) {
document.getElementById('Side1').style.height = parseInt(document.getElementById('Side1').style.height) - 5 + 'px';
i++;
ts = setTimeout("shrink()", 10);
}
else {
document.getElementById('Side1').style.display = 'none';
i = 0;
clearTimeout(ts);
}
}
You probably just need to add this to your CSS:
#Side1 { overflow: hidden; }
Related
I am trying to emulate A4 page for a given HTML document. Basically I am trying to create very basic version of Google Docs for a custom document format. This document format has also footer,header and page margins. I have found this question which is very similar to what I am trying to achieve. However, no matter how I change the padding, it doesn't leave same space at the bottom as the top one. I attached the screenshot of a layout I am trying to achieve and my current HTML.
As you can see from the JSFIDDLE link, my content doesn't divide to 2 pages. If I change padding size, it leaves a weird spaces on top, but bottom one doesn't have much spaces as the top one.
JAVASCRIPT
<script type="text/javascript">
var max_pages = 100;
var page_count = 0;
function snipMe() {
page_count++;
if (page_count > max_pages) {
return;
}
var long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
console.log('Long: ' + long)
var children = $(this).children().toArray();
var removed = [];
while (long > 0 && children.length > 0) {
var child = children.pop();
$(child).detach();
removed.unshift(child);
long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
}
if (removed.length > 0) {
var a4 = $('<div class="A4"></div>');
a4.append(removed);
$(this).after(a4);
snipMe.call(a4[0]);
}
}
$(document).ready(function() {
$('.A4').each(function() {
snipMe.call(this);
});
});
</script>
JSFIDDLE
https://jsfiddle.net/t2u7v0mq/
i m new to JS and i m trying to create sticky video player like http://www.standard.co.uk/stayingin/tvfilm/jamestown-everything-you-need-to-know-about-the-sky1-drama-a3531796.html. When user scrolls up or down sticky class get added to video player. I have done some work https://jsfiddle.net/oLythd3f/ . but i want to also add function which check the bottom and once i scroll down i want sticky class to be added.
not sure how to do that. any help will be great. Be easy on me
var vid = document.querySelector('#main');
var topOfVid = vid.offsetTop;
function fixVid() {
if (window.scrollY >= topOfVid) {
document.body.style.paddingTop = vid.offsetHeight + 'px';
document.body.classList.add('fixed-vid');
} else {
document.body.classList.remove('fixed-vid');
document.body.style.paddingTop = 0;
}
}
window.addEventListener('scroll', fixVid);
I have a small function the uses a web socket to receive realtime updates. When a new response is received the function prepends a div in the html. I only want the updates to be shown in a window within the page, ie. only ~10 prepended divs should be showing at the most. Ideally I need to pop the oldest div before it overflows out of its parent div.
My question:
How do I pop divs before they overflow the parent? Considering I will receive a response nearly every second or so, what is the most efficient way of doing this?
#HTML
<div class="content">
<p>archienorman-thesis $ realtime_bitcoin</p>
<div id="messages"></div>
<!-- window content -->
</div>
#JS FUNCTION
var total = 0;
var btcs = new WebSocket('wss://ws.blockchain.info/inv');
btcs.onopen = function () {
btcs.send(JSON.stringify({"op": "unconfirmed_sub"}));
};
btcs.onmessage = function (onmsg) {
console.log(response);
var response = JSON.parse(onmsg.data);
var amount = response.x.out[0].value;
var calAmount = amount / 100000000;
var msgs = $('#messages .message');
var count = msgs.length;
if (count == 10) {
msgs.first().remove();
}
$('#messages').prepend("<p class='tx'> Amount: " + calAmount + "</p>");
}
Make the container div overflow: hidden, check if there is overflow using JS scrollHeight and clientHeight.
CSS
#messages {
overflow: hidden;
}
JS
Remove your if statement and add this after your prepend() line:
$('#messages').prepend("<p class='tx'> Amount: " + calAmount + "</p>");
$('#messages').css("overflow", "scroll");
if($('#messages')[0].scrollHeight > $('#messages').height())
msgs.last().remove();
$('#messages').css("overflow", "hidden");
The above quickly makes #messages have the overflow: scroll property in order for the scrollHeight property to work. If there is extra scroll, then it deletes the element.
See Demo.
NOTE
See my comment to your question. You should be removing last(), not first(). See the demo as an example -- try changing last() to first(), and it will not work.
I think something like this should work. This is test code that will basically remove the extra child elements when their combined width exceeds that of the container.
HTML
<div class="container">
<div>1.Test</div>
<div>2.Test</div>
<div>3.Test</div>
<div>4.Test</div>
<div>5.Test</div>
<div>6.Test</div>
<div>7.Test</div>
<div>8.Test</div>
<div>9.Test</div>
<div>10.Test</div>
<div>11.Test</div>
<div>12.Test</div>
<div>13.Test</div>
<div>14.Test</div>
<div>15.Test</div>
</div>
CSS
.container {
width:1000px;
}
.container div {
width: 100px;
display: inline-block;
}
Javascript
function a () {
var containerWidth = $('div.container').width();
var childWidth = $('div.container div').width();
var childCount = $('div.container div').length;
var removeCount = (childWidth * childCount) - containerWidth;
if(removeCount > 0) {
removeCount = Math.floor(removeCount/childWidth);
console.log(removeCount);
for(i = childCount; i > (childCount-removeCount); i--) {
$('div.container div:nth-child('+i+')').remove();
}
}
}
a();
Fiddle: https://jsfiddle.net/L3r2nk6z/5/
I want an image inside div to be moving vertically down whenever a user scrolls. It has to end only at the end of the page. Have used the below script solution from the another post, however it doesn`t help.
HTML
<div id="wrapper">
<img src="images/samp_scroll.png" class="ïmage">
</div>
CSS:
#wrapper {
position: absolute;
}
.image {
width: 560px;
height: 700px;
}
Script:
window.onscroll = function (e) {
var vertical_position = 0;
if (pageYOffset)//usual
vertical_position = pageYOffset;
else if (document.documentElement.clientHeight)//ie
vertical_position = document.documentElement.scrollTop;
else if (document.body)//ie quirks
vertical_position = document.body.scrollTop;
console.log( vertical_position);
var your_div = document.getElementById('wrapper');
your_div.top = (vertical_position + 200) + 'px';//200 is arbitrary.. just to show you could now position it how you want
}
What is that I am doing wrong here?? Verfying this further, though I could get the console value vertical_position I can`t really move the div using the below code.
var your_div = document.getElementById("wrapper");
your_div.top = 400 + 'px';
Is there any other best way to deal with Moving html elements with DIV? Any articles which explains? I am really new to this. Please help me out.
Adding style before the top, worked. However looks like the style applies only once as it moves only once as I scroll. Any ideas.
One small miss, it should be style.top:
your_div.style.top = (vertical_position + 200) + 'px';
Replace
var your_div = document.getElementById('wrapper');
your_div.top = (vertical_position + 200) + 'px';//200 is arbitrary.. just to show you could now position it how you want
with
$("#wrapper").css("top",(vertical_position + 200) + 'px');
I was wonder how one would make a sticky side nav stop scrolling or stop sticking and lock into place after a certain point. The project page in question is located here:
http://www.tcdiggity.com/new-diggity-menu-22/
As you can see, the little nav with the navs on the left of the menu 'sticks' to the actual page. But if you keep scrolling down, it continues to stick. I was wondering if there would be a way to have it only scroll with the main menu page? I think i have it setup in it most basic form right now using the Fixed CSS tag. Any suggestions would be great! Thanks!
This should do what you want. You will have to find a value where you want it hidden after.
$(window).scroll( function() {
var valueOfScroll = $(document).scrollTop().valueOf();
if(valueOfScroll <= ???)
$('#sticker').show();
else
$('#sticker').hide();
});
From testing values on your site, it seems this works good, so it disappears before the end of your main content:
$(window).scroll( function() {
var valueOfScroll = $(document).scrollTop().valueOf();
if(valueOfScroll <= 10500)
$('#sticker').show();
else
$('#sticker').hide();
});
This is better for a fade effect:
var top = true;
var bottom = false;
$(window).scroll( function() {
var valueOfScroll = $(document).scrollTop().valueOf();
if(valueOfScroll <= 10500)
{
if(!top)
{
bottom = false;
top = true;
$('#sticker').fadeToggle(1000);
}
}
else
{
if(!bottom)
{
top = false;
bottom = true;
$('#sticker').fadeToggle(1000);
}
}
});
Hope this helps!
Also just as a side note, in your CSS I recommend adding margin-top:50px so you side bar doesn't go above that paper background you have for the main content. :)
.side-tabs {
margin-left: -135px;
margin-top: 50px;
position: fixed;
z-index: 1 !important;
}
Per your question in the comments:
$(window).scroll( function() {
var valueOfScroll = $(document).scrollTop().valueOf();
if(valueOfScroll <= 10500)
$('#sticker').css({ 'margin-left': "-135px" });
else
$('#sticker').css({ 'margin-left': "20px" });
if(valueOfScroll <= 10800)
$('#sticker').show();
else
$('#sticker').hide();
})
I would say that is "cleaner" because you don't need the second if statement, but looks fine to me.