Missing pixels & body stops centering when resizing jquery - javascript

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

Related

jQuery - Draggable Div with width and height counter (Demo code included)

All.
I've been messing with this project for a few days, trying different codes, making some progress, then getting stuck.
The below code is the closest I've come to a working example.
This one counts the WIDTH from the LEFT panel.
I need it to count the WIDTH from the RIGHT panel.
--UPDATED--
I've made it drag from the RIGHT, and it calculates its width from the RIGHT. Unfortunately, the HEIGHT is still not working when the div grows in height, but the width counts.
As you will see when you run the demo below, when you drag the bar, the left panel does not stay attached, along with other issues.
Almost as if it was designed to run one way only.
I know I am missing something here, just not sure what?
Best Viewed In Full Screen.
Thank you.
Wayne
Here is the code
var info = document.getElementById('Info');
var left = document.getElementById('drag-left');
var right = document.getElementById('drag-right');
$(function() {
$(right).resizable({
minHeight: 200,
minWidth: 320
});
$(left).resizable({
minHeight: 200,
minWidth: 320
});
});
// Left Panel
$(right).resizable({
handles: 'w',
resize: function(event, ui) {
// var width = $("body").width() - ui.size.width;
// var height = $("body").height() - ui.size.height;
var width = ui.size.width;
var height = ui.size.height;
$(left).width(left);
$(info).text("Width: " + width + "px; & Height: " + height + "px;");
}
});
/*This is to create the BAR in the middle to grab.
To change which one gets it, change the (e) to (w)
E = Left panel
W = Right Panel*/
.ui-resizable-w {
background-color: black;
}
.ui-resizable-w:hover {
cursor: col-resize;
}
* {
box-sizing: border-box;
}
p {
color: darkslategray;
}
.drag-container {
display: flex;
width:1000px;
padding:5px;
}
[class^=panel] {
padding: 60px 24px;
background-color: whitesmoke;
}
.panel-one {
width: 100%;
flex: 1 1 auto;
}
.panel-two {
width: 60%;
}
#drag-right, #drag-left {
min-height:200px;
min-width:320px;
border:1px double green;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Simple JS Dragbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body translate="no" >
<div class="drag-container">
<div class="panel-one" id="drag-left">
<h2>Panel 1</h2>
<p>Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? But I know you in the future. I cleaned your poop. Large bet on myself in round one. Take me to your leader! My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards.</p>
</div>
<div class="panel-two" id="drag-right">
<h2>Panel 2</h2>
<p>So, how 'bout them Knicks? You guys go on without me! I'm going to go… look for more stuff to steal! Guards! Bring me the forms I need to fill out to have her taken away! Do a flip! Calculon is gonna kill us and it's all everybody else's fault!</p>
</div>
</div>
<div style="float:right; height:30px; width:320px; border:1px double green; padding:40px 4px;">Width: 320px;<br />
<span id="Info">Information Goes Here</span>
</div>

Make footer, with variable height, at the bottom

Well, I'm using Materializecss framework and I have a issue with the footer. Materialize's footer have a variable height. In small devices, it gets bigger. So I can't use the classics method that use a padding-bottom equal to footer height.
My CSS:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height: 100%;
position: relative
}
#conteudo {
padding-bottom:425px; /* Fail height equal to footer height */
}
#rodape {
width:100%;
position:absolute;
bottom:0;
left:0;
}
My HTML:
<html>
<body>
<div id="wrapper">
<div id="conteudo">
<div class="container">
</div>
</div>
<div id="rodape">
</div>
</div>
</body>
</html>
I tried to add this script, but doesn't work:
JS:
$(document).ready(function fix_layout(){
if($(#rodape).height()<350){
$("#conteudo").css("padding-bottom", "276px");
}
if($(#rodape).height()>350 && $(#rodape).height()<500){
$("#conteudo").css("padding-bottom", "354px");
}
if($(#rodape).height()>500){
$("#conteudo").css("padding-bottom", "506px");
}
$(window).trigger('fix_layout');
});
Help!
If a jQuery solution is fine for you, then you can count the footer height and add it as padding-bottom to #conteudo, either once on DOM ready or on resize:
$(document).ready(function(){
var $conteudo = $('#conteudo'),
$rodape = $('#rodape'),
addPaddingBottom;
addPaddingBottom = function addPaddingBottom(){
var extraPadding = 6,
rodapeHeight = $rodape.height();
$conteudo.css({
'padding-bottom' : (rodapeHeight + extraPadding) + 'px'
});
}
//make it once on DOM ready
addPaddingBottom();
//and recalculate padding when window is resized
$(window).resize(addPaddingBottom);
});

Controlling image height in Bootstrap-Lightbox gallery

I'm working on a website of an artist, so galleries are really important. I'm using Bootstrap for the website, and Lightbox for Bootstrap plugin for the galleries. It works fine adjusting the width of the image to any resolution (I want to make it as responsive as possible). But, as you can observe if you click on any vertical photo (for example, the one in the second row, second column), when it opens, it's bigger than the screen and it can't be seen without scrolling.
So, I want to get rid of this problem, adjusting the maximum height of the image to the height of the screen. But I can't find the way to do this. Any ideas for doing it in a simple way? I've uploaded the website to a server so you can see the problem: http://mural.uv.es/ivape2/es/galeria.html
Thank you.
I had a similar problem and tinny77's answer was the only thing that approached a solution.
Here is a working snippet of what I ended up with
$().ready(function() {
$('[data-toggle="lightbox"]').click(function(event) {
event.preventDefault();
$(this).ekkoLightbox({
type: 'image',
onContentLoaded: function() {
var container = $('.ekko-lightbox-container');
var image = container.find('img');
var windowHeight = $(window).height();
if(image.height() + 200 > windowHeight) {
image.css('height', windowHeight - 150);
var dialog = container.parents('.modal-dialog');
var padding = parseInt(dialog.find('.modal-body').css('padding'));
dialog.css('max-width', image.width() + padding * 2 + 2);
}
}
});
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
</head>
<body>
<p>Click Image</p>
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox">
<img height="200" src="http://lorempixel.com/400/1920"/>
</a>
</body>
</html>
I solved it this way by editing the Javascript:
onContentLoaded: function() {
var imgh = $(".ekko-lightbox-container").find("img").height();
var winh = $(window).height();
if ((imgh+200)>winh)
{
$(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto");
}
}
See the JSFiddle
.container {
height:100%;
width: 100%;
border: 1px solid #000000;
}
.item {
max-height: 90%;
max-width: 90%;
border: 1px solid #000000;
}
Assuming you have a .container width a given width/height. I've put both width and height at 100% for the .container
Then you just create a class and asign it max-width: 80%; which will output the image to be 80% the width of the .container
Try adding this
.ekko-lightbox.modal.fade.in div.modal-dialog{
max-width:27%;
}
This is just simple solution, best it will be to make media-queries for different resolution
This has been solved (commit on github) by calculating the maximum image height (80% of viewport height) in the preload function but currently it is not part of the base branch.

Horizontal scrolling available depending on what's on screen

Let's say I have a webpage like this:
<header>...</header>
<body>
<section id="A">...</section>
<section id="B">...</section>
<section id="B2">...</section>
<section id="C">...</section>
</body>
<footer>...</footer>
When the section B is beeing viewed I would like to be able to do a horizontal scrolling to see section B2 but when the other sections are on screen there would be no horizontal scrolling.
How would you guys do that ? Any hints ?
Thanks
I hope you will understand what I have done reading the comments :)
Result: http://jsfiddle.net/Tymek/8kvk91kz/
My HTML:
<head></head>
<body>
<article>
<header>…</header>
<section id="A">…</section>
<div class="wrap">
<div class="pan">
<section id="B">…</section>
<section id="B2">…</section>
</div>
</div>
<section id="C">…</section>
<footer>…</footer>
</article>
</body>
SCSS:
article.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
}
article {
section {
position: relative;
padding-bottom: 2em;
float: left;
width: 100%;
}
.wrap {
width: 100%;
overflow: hidden;
position: relative;
.pan {
width: 200%; /* <- Space for two sections here */
position: relative;
section {
width: 50%;
}
}
}
footer {
padding-bottom: 1em;
}
}
And finally - 24 lines of js with jquery:
$(document).ready(function(){
var h = $(window).height(),
pan = $(".pan").width()/2,
offset = Math.abs(h - $(".wrap").height()) / 2,
start = $(".wrap").offset().top - offset,
stop = start + pan;
$("body").css("height", $("body").height() + pan + "px");
$("article").addClass("fixed"); // Taking control over scroll
$(window).scroll(function(e){
var scroll = $(this).scrollTop();
if(scroll < start){ // Above horizontal section
$("article").css("margin-top", 0-scroll);
$(".pan").css("margin-left", 0);
} else {
if(scroll <= stop){ // Scrolling horizontally
$("article").css("margin-top", 0-start);
$(".pan").css("margin-left", 0-scroll+start);
} else { // Below horizontal section
$("article").css("margin-top", 0-scroll+pan);
$(".pan").css("margin-left", 0-pan);
}
}
});
});
I re-calculated scroll.
You can use a custom Scrolling Path for the website using Scroll Path Plugin.
Here is a Link : http://joelb.me/scrollpath/
It sounds like what you want to do is lay out your sections in a grid like this:
A (blank)
B B2
C (blank)
If that is the case you should add CSS for B2 so it is relatively positioned to the right and put both B and B2 inside a <div> to keep them together at the same height in the document. You have to reorder the sections a bit to make it flow right. See below.
<section id="A">...</section>
<div>
<section id="B2" style="float:right">...</section>
<section id="B">...</section>
</div>
<section id="C">...</section>
You will also have to set the width of sections A, B, and C so they are the full width of your reading area. This way B2 falls outside the reading area and you can scroll.
Note: The horizontal scroll will always be there. There will just be a blank area to the right if you are near A or C. If this is not good enough you will need to use Javascript to hide and show the B2 section when needed.

jQuery getting the margin-top needed to put element on the top of the screen

I've got a problem in internet explorer 6 and FF with something I'm trying to implement in jQuery. Basically there is an object at the top of the page using floated content that seems to be interfering with the $(window).scrollTop() property.
It was my understanding (and if I'm wrong, please help me by telling me the right way!) that $(window).scrollTop() would return the whitespace hidden by scrolling. I did some tests without the floated content and they seem to support this.
This is my code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) { //is the window scrolled enough to hide the header?
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) { //if mydiv is currently hidden, show it
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); //move mydiv to the top edge of the page... OR SO I THOUGHT!
}
else { //otherwise hide it, since the header is visible
$("#scrollingDiv").hide();
}
});
});
This is the html document that shows the error (you just comment out the "evilFloatomoton" div below to see it working properly)
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) {
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) {
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ });
}
else {
$("#scrollingDiv").hide();
}
});
});
</script>
<style type="text/css">
<!-- Enter any CSS to make objects viewable here -->
#scrollingDiv
{
width: 100%;
position: absolute;
margin-top: 0px;
}
</style>
</HEAD>
<BODY>
<!-- Enter in test elements here -->
<div style="overflow: auto;">
<div id="evilFloatomoton" style="float: left; height: 200px; width: 100%;">
CONTENT<br /><br />
</div>
</div>
<div id="scrollingDiv" style="background-color: #000; color: #FFF;">
Scrolling floating div of doom
</div>
<div style="height: 180px; border: solid 1px #000;">
*Highlight the 180 px scroll area*
</div>
<div style="height: 10000px;">
</div>
</BODY>
</HTML>
So instead of being against the top edge like I thought, it's halfway down the page in my tests. Can anyone help me?
For your scrollingDiv container, set the style to Position:absolute and top: 0px. That should keep your floating div in one spot.

Categories