At the moment I'm trying to keep the footer at the bottom with Javascript. This is the result:
document.getElementsByTagName('body').onload = function() {KeepFoot()};
var element = document.getElementById('container');
var height = element.offsetHeight;
function KeepFoot() {
if (height < screen.height) {
document.getElementById("footer").style.position = "fixed";
document.getElementById("footer").style.bottom = "0";
document.getElementById("footer").style.left = "0";
document.getElementById("footer").style.right = "0";
}
}
My idea was to take the height of the div container and compare it with the height of the resolution of the pc. If the height of the div container is smaller than the height of the resolution of the PC, set to the div footer position: fixed;
But there is a problem in the script because it doesn't work.
Another question, the script that I created would be fine for keep the footer at the bottom?
HTML:
<html>
<head>
...
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
The function is not being called on load. You can attach the function KeepFoot directly to the body tag like this Instead of calling like this:
document.getElementsByTagName('body').onload = function() {KeepFoot()};
or use my code from below:
(function() {
var offsetHeight = document.getElementById('container').offsetHeight;
var screenHeight = screen.height;
if(offsetHeight < screenHeight){
document.getElementById("footer").style.position = "fixed";
document.getElementById("footer").style.bottom = "0";
document.getElementById("footer").style.left = "0";
}
})();
"DOMContentLoaded" event only fires when document is ready similar to jquery's $(document.ready).
and, for styles you can use class instead of setting each style using javascript.
Code
document.addEventListener("DOMContentLoaded", function (event) {
var element = document.getElementById('container');
var height = element.offsetHeight;
if (height < screen.height) {
document.getElementById("footer").classList.add('stikybottom');
}
}, false);
#footer.stikybottom {
position: fixed;
bottom:0;
left: 0;
right:0;
}
<div id="container">
<div id="header">header</div>
<div id="content">Conent</div>
<div id="footer">Something in footer</div>
</div>
I thing your function works very well. maybe what is missing is the function calling.
function KeepFoot() {
if (height < screen.height) {
document.getElementById("footer").style.position = "fixed";
document.getElementById("footer").style.bottom = "0";
document.getElementById("footer").style.left = "0";
document.getElementById("footer").style.right = "0";
}
}
KeepFoot();
see this jsfiddle
If what you want is to maintain the footer on the bottom of the page, you must read this. cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
You can do it without js.
Related
I am attempting to implement a solution where by as you scroll through various sections of my site, marked by the
<section>
</section>
HTML Tags, the:
<meta name="theme-color" content="#535353">
Changes, say for example you had 3 sections, the first had a Black background, second white, and third red- as you scrolled through each section, the theme-colour changed appropriately. So far I have:
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#535353');
However I am unsure where to go from here. I hope you guys will be able to help me out, thanks.
Below code does the trick:
css:
section {
height: 100vh;
display: block;
}
html:
<section data-theme-color="red">
<p>sesction conent</p>
</section>
<section data-theme-color="green">
<p>sesction conent</p>
</section>
<section data-theme-color="blue">
<p>sesction conent</p>
</section>
and js:
var theme = document.querySelector('meta[name="theme-color"]'),
getThemeColor = theme.getAttribute('content'),
sectionElem = document.getElementsByTagName('section'),
sectionHeight = sectionElem[0].clientHeight,
sectionLength = sectionElem.length;
// set color on load
window.onload = () => {
document.body.style.backgroundColor = theme.getAttribute('content');
}
// set color on 'scroll' event
window.addEventListener('scroll', (e) => {
var offset = window.pageYOffset,
sectionIndex = parseInt(offset, "10") % sectionLength,
sectionColor = document.getElementsByTagName('section')[sectionIndex].getAttribute('data-theme-color'),
setSectionColor = theme.setAttribute('content', sectionColor);
document.querySelectorAll('section')[sectionIndex].style.backgroundColor = theme.getAttribute('content');
});
I have a div id="coding" set on height:300px on CSS.
when I click another div id="menu", I want #coding to change it's height to 800px. I managed to do that like this
<script>
function changec() {
document.getElementById('coding').style.height = "800px";
}
</script>
Now, when click the #menu again, I want the height to get back to it's original 300px value. Can someone help? The code is:
HTML
<div id="coding">
<div id="menu" onclick="changec()">≡</div>
...
</div>
CSS
#coding{
...
height:300px;
}
Simple check if the value is set - remove it (then CSS height will take over).
function changec() {
var xDiv = document.getElementById('coding');
if (xDiv.style.height == '')
xDiv.style.height = '800px'
else
xDiv.style.height = ''
}
Demo: http://jsfiddle.net/ygalanter/BLE6N/
one of the solution for your problem is as follows:
First count how many times you click on #menu
now depending on your expectation you can change the javascript as follows
<script type="text/javascript">
var count = 0;
function changec() {
count++;
if(count%2==1)
document.getElementById("coding").style.height = "800px";
else
document.getElementById("coding").style.height = "300px";
}
</script>
Another alternative solution is
<script type="text/javascript">
function changec() {
var currentheight = document.getElementById('coding').clientHeight;
if (currentheight == 300)
document.getElementById('coding').style.height = "800px";
else if (currentheight == 800)
document.getElementById('coding').style.height = "300px";
}
</script>
Not sure why you tagged jQuery since you didn't use it, but still...Considering the possibility that you are willing to use/learn it, I created a jsFiddle for it: http://jsfiddle.net/Tm2Hd/.
CSS:
#coding{
border:1px solid black; /*optional: Keep track of your div's expand*/
height:300px;
}
#coding.larger{
height:800px;
}
JS:
function changeHeight() {
if($('#coding.larger').length>0)
{
$('#coding').removeClass("larger");
}
else
{
$('#coding').addClass("larger");
}
}
HTML
<div id="coding">
<!--<div onclick="changeHeight()">≡</div>
Personally, I don't suggest using divs as clickable objects... Why don't you use buttons instead?
-->
<button onclick="changeHeight()">≡</button>
...
</div>
My solution to your problem is: Create a new class named larger, pointing to your div, and toggle between this and the original whenever you click the button.
I have this code:
...<script>
function handleSize()
{
var setObjectSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setObjectSize + "px";
document.getElementById("spin").style.height=setObjectSize + "px";
}
</script>
</head>
<body>
<section id="spin" onLoad="handleSize()">...
All I am trying to do is to create a function that will set the height and width of the element according to window size using a formula and make sure height and width are the same. I am very new to javascript (almost know nothing about it), so despite there being a ton of example of such questions, and me following them, I can't get this code to work. What am I doing wrong?
The problem that I'm seeing, is that the onload event for the section tag isn't firing. You should add your javascript as a self-executing anonymous function to the end of your body tag and this will work for you.
<body>
<section id="spin" style="border:5px solid black;"></section>
<script>
(function () {
var setWindowSize = window.innerWidth - 600;
document.getElementById("spin").style.width = setWindowSize + "px";
document.getElementById("spin").style.height = setWindowSize + "px";
})();
</script>
</body>
See Here for a demo: http://jsfiddle.net/T7DW6/
You should move onload to the body tag:
<body onLoad="handleSize()">
<section id="spin">...
I would suggest you to use jQuery, that is JavaScript library used world wide. So in order to develop it using jQuery you need to do next
function setElementSize(elId) {
var _w $(window); //to get instance of window
var _el $('#' + elId); //jquery to get instance of element
var _width = _w.width();
var _height = _w.height();
//set width=height
if(_height>_width)
{
_height = _width;
} else { _width = _height; }
_el.css({
width: _width,
height: _height
});
}
//this will execute script when document is loaded.
$(document).ready(function(){
setElementSize('spin');
});
Function above will set width and height of element to match window size. If height > width then it will use width as width & height otherwise it will use height.
I assume that you want to change this automatically if window is resized then do this
$(window).resize(function(){
setElementSize('spin');
});
The onload event occurs when an object has been loaded.
onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
onload is only Supported by the Following HTML Tags:
body, frame, frameset, iframe, img, input type="image", link, script, style
from here: event_onload
then a is may be not the best here (height and weight does not change anything, you should use a div.
In order to know, the one to use, please read this:
what-is-the-difference-between-section-and-div
I try your exam and it works fine. The only thing that i changed was the way that you call the function
function handleSize(){
var setWindowSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setWindowSize + "px";
document.getElementById("spin").style.height=setWindowSize + "px";
}
window.onload = function () {
handleSize();
}
I think that onLoad="handleSize()" have to be onload="handleSize()" but don't use that way because it is not a good practise!
this works for me
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button and watch it grow.</p>
<button id = "myButton" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("myButton");
x.style.width = w + "px";
x.style.height = h + "px";
}
</script>
</body>
</html>
So I have a div with a set width and height, and I want the content inside to slide automatically (without hover or interaction from the user) after like so many seconds to reveal different content. What my actual goal is, I have boxes with an audio player and the notes of the generated content, and I want it to slide up down or left right whatever, to reveal the artist blabhalbalh. You can see what I'm talking about at here.
Oh, silly me. A good example would be Windows Phone 7 live tiles, thats actually what I'm basing it off of.
var swap = false;
var w = 309;
var h = 261;
var i = 0;
var x = 0;
var q = 1;
var t;
window.onload=function(){
i = initPortfolio();
setTimeout("portfolioRotate()",2000);
}
function initPortfolio(){
$('.portfolio-item').each(function(index){i = i+1;});
for(var n=1;n<=i;n=n+1){
lpos = w * n - w;
$('#item-'+n).css('left',lpos);
}
$('.offs').css('display','block');
x = i * w - w;
return i;
}
function portfolioRotate(){
swap = false;
$('.portfolio-item').animate({left:'-='+w},6000,function(){
nn = this.id.split("-")[1];
if(q==nn && swap==false){
$('#item-'+q).css('left',x);
if(q<i){q=q+1}else{q=1};
swap = true;
u=setTimeout("portfolioRotate()",2000);
}
});
}
<div id="portfolio-container">
<div class="portfolio-item" id="item-1"></div>
<div class="portfolio-item" id="item-2"></div>
<div class="portfolio-item" id="item-3"></div>
<div class="portfolio-item offs" id="item-4"></div>
</div>
.offs{
display:none;
}
#portfolio-container{
width:927px;
height:318px;
margin-top:30px;
position:relative;
overflow:hidden;
}
.portfolio-item{
width:309;
padding-top:20px;
position:absolute;
height:100%;
}
This might be terrible, but I just pulled it from something I was working on recently. Let me know if it isn't sliding, or needs explanation. using jQuery. there is probably a way better way to position the components initially with css.
I am setting scrollTop and scrollLeft for a div that I am working with.
The code looks like this:
div.scrollLeft = content.cx*scalar - parseInt(div.style.width)/2;
div.scrollTop = content.cy*scalar - parseInt(div.style.height)/2;
This works just fine in FF, but only scrollLeft works in chrome. As you can see, the two use almost identical equations and as it works in FF I am just wondering if this is a problem with Chrome?
Update:
If I switch the order of the assignments then scrollTop will work and scrollLeft won't.
<div id="container" style = "height:600px; width:600px; overflow:auto;" onscroll = "updateCenter()">
<script>
var div = document.getElementById('container');
function updateCenter()
{
svfdim.cx = (div.scrollLeft + parseFloat(div.style.width)/2)/scalar;
svfdim.cy = (div.scrollTop + parseFloat(div.style.height)/2)/scalar;
}
function updateScroll(svfdim, scalar, div)
{
div.scrollTop = svgdim.cy*scalar - parseFloat(div.style.height)/2;
div.scrollLeft = svgdim.cx*scalar - parseFloat(div.style.width)/2;
}
function resizeSVG(Root)
{
Root.setAttribute("height", svfdim.height*scalar);
Root.setAttribute("width", svfdim.width*scalar);
updateScroll(svgdim, scalar, div);
}
</script>
<body onload="resizeSVG(Root)" background="gray">
<script>
var prescrollLeft = 0;
var prescrollTop = 0;
function updateCenter()
{
if(div.scrollLeft != prescrollLeft)
{
svgdim.cx = (div.scrollLeft + parseFloat(div.style.width)/2)/scalar;
}
if(div.scrollTop != prescrollTop)
{
svgdim.cy = (div.scrollTop + parseFloat(div.style.height)/2)/scalar;
}
prescrollLeft = div.scrollLeft;
prescrollTop = div.scrollTop;
}
function updateScroll(svfdim, scalar, div)
{
div.scrollTop = svfdim.cy*scalar - parseFloat(div.style.height)/2;
div.scrollLeft = svfdim.cx*scalar - parseFloat(div.style.width)/2;
}
function resizeSVG(Root)
{
Root.setAttribute("height", svfdim.height*scalar);
Root.setAttribute("width", svfdim.width*scalar);
updateScroll(svfdim, scalar, div);
}
</script>
<div id="container" style = "height:600px; width:600px; overflow:auto;" onscroll = "updateCenter()" >
//some SVG
</div>
This fixed my problem. The problem was that onscroll is called twice since I am changing scrollLeft and scrollTop. Originally I wrote this with the intent to use scrollTo which would have done both scrolls in one call. I'm not quite sure why my original code worked in FF/Opera now...