How to set the distance between content and footer using JavaScript? - javascript

The code below works very well(controls the distance and makes the footer it stick) however I need to edit the distance between footer and content as there is a very big gap! I am using the software visual studio 2014, java script in asp.net.
Masterpage.Master HTML % JavaScript code:
<body>
<form id="form2" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
<div id="footer"></div>
</div>
</form>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(window).bind("load", function () {
var footer = $("#footer");
var pos = footer.position();
var height = $(window).height();
height = height - pos.top;
height = height - footer.height();
if (height > 0) {
footer.css({
'margin-top': height + 'px'
});
}
});
</script>
</html>
CSS
#footer {
width: 100%;
height: 300px;
background-image: url(foot_bg.jpg);
background-size: 100% 100%;
}
I have tried to adjust it but getting no where fast! Any help would be appreciated.

The question is a bit confusing since you are stating that you want it to stick (at the bottom) but you want to reduce the gap between the footer and the content.
One of these ways is possible at a time considering that the footer has a fixed height.
If you want to reduce the gap between the footer and the content, then remove the footer from your main div and add a margin-top to the amount you wish inside your #footer.
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer"></div>
If you want a sticky footer which stays below the content, you can check out the tutorial on the link below:
https://css-tricks.com/snippets/css/sticky-footer/
This will scroll with the content if it extends.
A third option would be to user position:fixed and bottom:0px for your footer so it stays at the bottom of the page and the content scrolls behind it.
N.B: In all these cases, you will not need your JS code.

Related

To Check "user has scrolled to the bottom code" is not working on chrome but it works on Microsoft Edge. WHY?

I use this code to check whether user has scrolled to the bottom code or not but it don't work on Google Chrome but it successfully works on Microsoft Edge.
In Google Chrome when i scroll to bottom and again scroll to top then it works but I don't know why.
Here is the code i am using.
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
</script>
<!decotype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div style="height: 4000px">Scroll down!</div>
</body>
</html>
Assuming you use a div to load some data... (Because of #load_data)
You need to get 3 values on scroll:
The scrolled position
The div height
The div scrollable height
This last one is an element property of the real element height, including its overflow.
Additionnally, you need to define what's near the bottom... In pixels.
So... In the below example, I'm faking an Ajax request. Just look for the code you need.
$(document).ready(function() {
// Function to replace Ajax in this demo.
function createContent(n){
var fakeContent = "";
for(i=0;i<n;i++){
fakeContent += i+"<br>";
}
$("#load_data").append(fakeContent);
}
// Simulate initial content...
createContent(100);
// The code you need
var near = 20; // pixels buffer yet to be scrolled when the Ajax triggers.
$("#load_data").on("scroll",function(){
if( $(this).scrollTop() + $(this).height() + near > this.scrollHeight ){
console.log("Faking Ajax...");
createContent(50);
}
});
}); // END ready
#load_data{
height: 150px;
width: 300px;
border: 1px solid grey;
overflow-y:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
There is 100 (0-99) lines on load.<br>
<div id="load_data"></div>
The problem is when you use margin (top or bottom) you should use .outerHeight(true) instead of .height or the sum of height and margin in this case. If you have padding is the same issue.
$(window).scroll(function(){
if($(window).scrollTop()+$(window).height()>$("h3").outerHeight( true ) ){
alert("bottom!")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h3 style="margin-top:2000px">hello world</h3>
</body>
<html>
About .outerHeight()
Get the current computed outer height (including padding, border, and
optionally margin) for the first element in the set of matched
elements or set the outer height of every matched element
.

How to set Dojo button full width

I would like to add a Dojo/Dijit button widget in a Container ContentPane and have the width take up 100%. I think this should be almost trivial, but have completely failed to get any method to work while not overshooting or messing up the padding. The closest I've got is to set style
fullWidthButton. .dijitButtonNode { width:100%; }
.dijitButton.fullWidthButton {
display: block;
}
.dijitButton.fullWidthButton .dijitButtonNode {
width: 100%;
}
and add the button as
<button class="fullWidthButton" data-dojo-type="dijit/form/Button" type="button">Button</button>
https://jsfiddle.net/Lyox5rwt/4/
but this still produces a non-centered button with no padding on the right.
Any hints to what could fix this would be much appreciated.
You have to notice that the contentPane dijit has padding of 8px in each side (16px both left and right ), which results the non centering button
to solve this , just use the css calc() function , to remove the extra 16px left and right padding from 100% width.
See below snippet
require(["dijit/layout/BorderContainer","dijit/layout/ContentPane", "dijit/form/Button","dojo/parser","dijit/registry", "dojo/dom-style", "dojo/domReady!"], function(BorderContainer,ContentPane, Button,parser,registry,domStyle) {
parser.parse();
});
.fullWidthButton {
width:100%;
}
.fullWidthButton .dijitButtonNode {
width :calc(100% - 16px);
}
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
<div id="appLayout" style="min-height:200px;" data-dojo-type="dijit/layout/BorderContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
<button id="btn" class="fullWidthButton" data-dojo-type="dijit/form/Button" type="button">Button</button>
</div>
</div>
</div>

Missing pixels & body stops centering when resizing jquery

I'm facing some problems with this code. I thought may be you could help me.
First of all, my sections have no padding and no border so the pixels are used only for top, left, right and width properties
and there is no need for outerWidth().
First problem:
In the beginning I set the body 'left' and 'right' property at (window_width - 1100 = 180) so my body width
is 920px.
The thing is it's not. It turns to be 904. I've tested it with chrome and mozilla.
I don't know where the 16 missing pixels are.
Second:
I want my body to be centered when I resize the window and my margins to grow less until body occupies the whole
window.
My body doesn't remain centered, plus only one of the margins grows less.
I found out this is happening because '#content', '#mainContent', 'aside' have a width. I kinda' need that width to be set.
Is there any way I can make my window center itself with jquery and do all the stuff above?
Here is my code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
body{
position:absolute;
}
#content{
background-color: green;
}
#mainContent{
background-color: orange;
}
aside{
background-color: blue;
}
.floatLeft{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<section id="content" class="border">
<section id="mainContent" class="floatLeft" >
mainContent
</section>
<!-- End of main content -->
<aside class="floatLeft">
aside
</aside>
<!-- End of aside -->
<p class="clear"></p>
</section>
<!-- End of content -->
<script type="text/javascript">
$(document).ready(function(){
change_template();
});
change_template = function(){
var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w;
window_h = $(window).height();
window_w = $(window).width();
top = window_h - (window_h - 100);
left_right = window_w - 1100;
content_w = window_w - 2*left_right;
$('#content').css('width', content_w);
mcontent_w = content_w - 300;
$('#mainContent').css('width', mcontent_w);
aside_w = content_w - mcontent_w;
$('aside').css('width', aside_w);
resize_body(top, left_right, left_right);
//next three lines are written only for demonstration purpose
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
alert('body width: '+$('body').css('width'));//it supposed to be 920
alert('left propery value: '+left_right);//it supposed to be 180
$(window).resize(function(){
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
resize_body(top, left_right, left_right);
});
}
resize_body = function(top, left, right){
$('body').css('top', top+'px');
$('body').css('left', left+'px');
$('body').css('right', right+'px');
}
</script>
</body>
</html>
Reset browser style:
html, body {
margin: 0 auto;
padding: 0;
}

Scroll bar in IOS app development UI not working

IOS app development with phone-gap.
Myindex.html code(related) is as follows:-
<script type="application/javascript" src="iscroll.js"></script>
<script>
var myScroll;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('edit');
}, 100);
}
window.addEventListener('load', loaded, false);
..
..
</script>
<style type="text/css">
#toolHome,#toolEdit,#toolSetting,#toolMessage{
position: fixed;
width: 100%;
height: 10%;
display:table;
z-index:20;
}
</style>
</head>
<body id="bd">
<div id="toolEdit" class="toolbar">
<h1 id="pageTitle">Edit</h1>
<a id="preButton" class="button" onclick="home()">Message List</a>
</div>
<div id="edit" title="Edit" ></div>
<div id="bottomButtons" style="position:fixed;top:90%;width:100%;display:table;height:11%;z-index:20;display:none;"><a class="redButton buttomButton" style="width:22%;position:relative;top:4px" align="left" onclick="deleteList()"><img src="iui/t/default/trash.png" > Delete</a></div>
</body>
So here, div 'toolEdit' contains header section. Div 'edit' contains the content part which needs to be vertically scrollable when content exceeds the available space.div 'bottomButtons' is the footer which contains delete button. z-index has been given for both header and footer, so the content slides below both header and footer.
The problem is, the bottom part of the content when it is tried to scroll up(residing below footer) does'nt scroll and if tried takes the footer with it, making it blank.
Tried using iscroll plugin(shown in the code) also, but it is not helping.
Any suggestions will be appreciated.
Thanks in advance.

iframe loading in middle of page, instead of top of page

I'm embedding wetransfer through iframe into a website, but the problem I have is when the page loads, it automatically jumps past the header section of the site, instead of having the new page load at the top of the page.
How can I stop this from happening? I tried using jquery scrollto, but doesn't make any difference.
https://jsfiddle.net/dbruning22/c0s6mhkv/1/
HTML
<header>
Some Header information and navigation
</header>
<body>
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
CSS
header {
background: green;
height: 600px;
}
Use this
header {
background: green;
height: 600px;
position:absolute;
left:0;
top:0;
}
header height is 600px so iframe is placed right behind.
If you want iframe to cover the page from the top you should set
iframe{
position: absolute;
top: 0;
left: 0;
}
fiddle
If you want to place iframe right behind header, just remove
height: 600px;
fiddle 2
The green header is 600 px high because of your CSS. Adjust the height: value as needed.
Also, <header> is a regular page content tag and therefore should be placed inside <body>, not before it.
First: put header tag inside body tag. Not outside.
<body>
<header>
Some Header information and navigation
</header>
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
Second:
Remove 600px height from header css.
Profit :)
use following code :
<header>
Some Header information and navigation
</header>
<body>
<div>
<iframe src="#" width="100%" height="400" id="iFrm"></iframe>
</div>
</body>
<script type="text/javascript">
var body = document.body,
html = document.documentElement;
var documentHeight = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var iframeHeight = parseInt(document.getElementById("iFrm").getAttribute("height"))
document.getElementById("iFrm").style.marginTop = (documentHeight - iframeHeight) / 2;
</script>
Its working fine for me. Hopefully works for you
Not really sure if you want it to be like this but try it out
<header>
Some Header information and navigation
</header>
<body>
<iframe class="test" src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
css:
header {
background: green;
height: 600px;
}
.test {
position: fixed;
top: 0;
z-index: 1;
}
But you could use angularjs modal_dialogue to make a pop up window which would display your information from an url.
This worked for me. My iframe html has:
<body class="container-fluid">
<div class="admin-pages" id="top-of-page">
etc...
</div>
</body>
And javascript:
$(window).on('load', function() {
$("#top-of-page").scroll();
etc...
Takes the iframe to the #top-of-page when the page loads.

Categories