How do I achieve 100% [window] height on DIV on iPhone? - javascript

I've been trying to achieve 100% [window] height on a DIV for a project that I am working on. It works great in the desktop but when I try to load it using an iPhone 4 or an Android phone, the first div appears to be 100%; however each subsequent DIV appears to be about 50 pixels (just an estimate) short.
I tried setting it through css by doing the following:
<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
div#container {
width: 100%;
height: 100%;
}
div#section1 {
width: 100%;
height: 100%;
background-color: blue;
}
div#section2 {
width: 100%;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="container>
<div id="section1">
. . .
</div>
<div id="section2">
. . .
</div>
</div>
</body>
</html>
I also tried setting it through javascript with jQuery using something similar to:
var browser_width = $(window).width();
var browser_height = $(window).height();
$(document).ready(function(){
$("#section1, #section2").css("width", browser_width, "height", browser_height);
});
but it behaves the same way as the CSS. Can anyone point me in the right direction?

you have to set the right format to the .css() method in your script
$(document).ready(function(){
$("#section1, #section2").css({
"width" : browser_width,
"height" : browser_height
}); //css
});
UPDATE : also I noticed you forgot to close your first css declaration
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
... the closing bracket } is missing.
Side note : I wouldn't set dimension properties to the html and/or body tags to avoid unexpected results ... unless you know what you are doing

Related

Smoothly scale an img and automatically scrollIntoView

I am trying to set up a basic functionality to smoothly toggle an img on click from being longer than screen to being on a display (fit to window size) (back and forth). It kinda works already using percentages etc.
My issue is I'd like to have a smooth animated transition between the 2 states but the img is being brutally scaled.
Also whenever I try to work with "transition" or "animation", when the img come back to its original size, it will block the scrolling. Same issue happened after I tried to use keyframes.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
width: 90vw;
box-sizing: border-box;
}
.scaled {
width: auto;
height: 100vh;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
$(this).toggleClass('scaled');
$(this).scrollIntoView();
});
</script>
</html>
Also I'd like to have the window view (by that I mean the location of the scrolling on the page) centered on the img whenever it is scaled. I am currently trying to use scrollIntoView for that purpose but nothing seems to happen.
Thank you in advance. First time posting here. I don't feel like this should be too difficult but will probably be on a different level than what I can figure out for now ଘ(੭ˊᵕˋ)੭ ̀ˋ
Also tried the following, but the img stay stuck at 90vw and 100vh ...
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
width: 90vw;
box-sizing: border-box;
object-fit: contain;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
if ($(this).hasClass('scaled')) {
$(this).animate({
height: "none",
width: "90vw"
}, 1000);
$(this).removeClass('scaled');
}
else {
$(this).animate({
width: "none",
height: "100vh"
}, 1000);
$(this).addClass('scaled');
}
});
</script></html>
To scroll to clicked item, use $(this)[0].scrollIntoView(); because .scrollIntoView() is JavaScript function, not jQuery.
Smooth scale (transition).
CSS does not support from auto width to specific width or the same to height transition. Reference: 1, 2
Option 1. Use one side instead.
You can use max-height or max-width only. The good thing is you write less JavaScript and CSS responsive (media query) also supported without any addition. Bad thing is it just only support one side (width or height).
Full code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
max-width: 100vw;
box-sizing: border-box;
transition: all .3s;
}
.scaled {
max-width: 50vw;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
$(this).toggleClass('scaled');
$(this)[0].scrollIntoView({
behavior: "smooth"
});
});
</script>
</html>
See it in action
Option 2. Use JavaScript.
The code below will be use a lot of JavaScript to make CSS transition work properly from width to height. Good thing: of cause support transition between width and height. Bad thing: CSS media query for responsive image will not work properly. Need more JS for that.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
box-sizing: border-box;
transition: all .3s;
height: auto;
width: 90vw;
}
.scaled {
height: 100vh;
width: auto;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(window).on("load", function() {
// wait until all images loaded.
// loop each <img> that has class `item` and set height.
$('img.item').each((index, item) => {
$(item).attr('data-original-height', $(item)[0].offsetHeight);
$(item).css({
'height': $(item)[0].offsetHeight
});
});
});
$(".item").click(function() {
if ($(this).hasClass('scaled')) {
// if already has class `scaled`
// going to remove that class after this.
if ($(this).attr('data-scaled-width') === undefined) {
// get and set original width to data attribute.
$(this).attr('data-scaled-width', $(this)[0].offsetWidth);
}
$(this).css({
'height': $(this).data('originalHeight'),
'width': ''
});
$(this).removeAttr('data-original-height');
$(this).removeClass('scaled');
} else {
// if going to add `scaled` class.
if ($(this).attr('data-original-height') === undefined) {
// get and set original height to data attribute.
$(this).attr('data-original-height', $(this)[0].offsetHeight);
}
$(this).css({
'height': '',
'width': $(this).data('scaledWidth')
});
$(this).removeAttr('data-scaled-width');
$(this).addClass('scaled');
// check again to make sure that width has been set.
if ($(this)[0].style.width === '') {
setTimeout(() => {
console.log($(this)[0].style.width);
$(this).css({
'width': $(this)[0].offsetWidth
});
console.log('css width for image was set after added class.');
}, 500);// set timeout more than transition duration in CSS.
}
}
$(this)[0].scrollIntoView({
behavior: "smooth"
});
});
</script>
</html>
See it in action

Fix navbar to top of page when scrolling

I'm trying to make a navbar similar to the one on Linus Tech tips (https://linustechtips.com/main/) for a school assignment. I'm at the real basic level of Javascript and I cooked up a pinnable navbar but when I made it there was no banner above it. Now there is a banner above it and I don't know how to make the navbar push to the top when I start scrolling.
Here is my HTML:
<div class="navContainer">
<div class="topBanner">
<img src="images/topbanner.png" id="topBannerimg"/>
</div>
<div id="navbar">
<button onclick="pinfunc()"><i id="pin" class="fa fa-thumb-tack fa-2x navButton" id="pinbtn" aria-hidden="true"></i></button>
</div>
</div>
Here is my Javascript:
var pinned = 1;
console.log(pinned);
function pinfunc() {
if (pinned == 1) {
document.getElementById("navbar").style.position= "relative";
document.getElementById("pin").style.color = "black";
document.getElementById("pin").style.transform = "rotate(0deg)";
pinned=0;
}
else if (pinned == 0) {
document.getElementById("navbar").style.position="fixed";
document.getElementById("pin").style.color = "red";
document.getElementById("pin").style.transform = "rotate(270deg)";
pinned=1;
}
}
And here is my CSS:
body{
margin: 0 auto;
}
.navContainer{
width: 100%;
margin: 0 auto;
}
#topBannerimg{
width: 100%;
margin: 0;
display:block
}
.navButton{
height: 25px;
width: 25px;
}
.fa-thumb-tack{
font-size: 50px;
color: red;
transform: rotate(270deg);
}
.container{
height: 1000px;
width: 90%;
margin: 0 auto;
}
#navbar{
height: 50px;
width: 100%;
position: fixed;
margin: 0 auto;
background-color: #D35300;
}
#nav{
background-color: #D35300;
height: 50px;
}
I'm just looking to create a basic one of the LTT forum - no need for the toggle button to fade out or anything.
This is my first post so I'm not 100% sure how to do stuff.
Thanks in advance.
If you are allowed to use external JS or CSS libraries, then try the Affix plugin for bootstrap. (link: http://www.w3schools.com/bootstrap/bootstrap_affix.asp). It makes what you are trying to accomplish simple.
If you are not allowed to use any external libraries then, I suggest you read this: http://getbootstrap.com/javascript/#affix-examples and try to implement it yourself.
Good Luck!
So I got it working with the following HTML, JS, and CSS files:
HTML
<html>
<head>
<link rel="stylesheet" href="path/to/font-awesome.css/file" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Custom CSS File Below -->
<link href="/path/to/custom/css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="topBanner">
<img src="images/topbanner.png" id="topBannerimg"/>
</div>
<div id="navbar" data-spy="affix" data-offset-top="100">
<button onclick="pinfunc()"><i id="pin" class="fa fa-thumb-tack fa-2x navButton" aria-hidden="true"></i></button>
</div>
<div id="SpaceFiller"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="path/to/custom/js/file"></script>
</body>
</html>
The key things to learn from this HTML are the loading the JS files at the bottom of the body tag so the page can load first, and the order in which the CSS and JS files are loaded. The SpacFiller div is just there to enable scrolling. Also, note that I removed your navbar-container as it didn't seem necessary.
Javascript
var pinned = true;
function pinfunc() {
var $pin = $("#pin");
var $navbar = $("#navbar");
if (pinned) {
$pin.css({
'color': 'black',
'transform': 'rotate(0deg)'
});
console.log("not pinned")
$(window).off('.affix');
$navbar.removeClass('affix affix-top affix-bottom');
$navbar.removeData("bs.affix");
pinned = false;
} else {
$pin.css({
'color': 'red',
'transform': 'rotate(270deg)'
});
$(window).on('.affix');
$navbar.addClass('affix');
$navbar.affix({
offset: 100
});
pinned= true;
}
}
This JS uses jQuery Selectors (which actually uses sizzle.js I believe) to get access to HTML elements via their IDs. Using the returned jQuery object, the function sets the appropriate CSS and then toggles affix using functions you can read about here: http://getbootstrap.com/javascript/#affix, https://api.jquery.com/removeclass/, https://api.jquery.com/jQuery.removeData/, http://api.jquery.com/off/. Also, you were using 0 and 1 for the pinned values but it is good practice to use boolean values (true and false) as shown.
CSS
body{
margin: 0 auto;
}
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
#topBannerimg{
width: 100%;
margin: 0;
display:block;
height: 100px;
top: 0px;
}
.navButton{
height: 25px;
width: 25px;
}
.fa-thumb-tack{
font-size: 50px;
color: red;
transform: rotate(270deg);
}
#navbar{
height: 50px;
width: 100%;
margin: 0 auto;
background-color: #D35300;
}
#SpaceFiller {
height: 10000px;
background-color: darkgreen;
}
I think the CSS is self-explanatory, but if it is unclear go ahead and ask for clarification. Hope this helps! :D
Edit: You can also put the onclick attribute on the i tag itself and get rid of the button wrapper if you want to get rid of the white button background.

How can I change a images margin that is inside of a div

Here is my code
<head>
<style>
/* Spritesheet is 2000 x 400 and has 5 frames horizontally */
.crop {
width: 400px;
height: 400px;
overflow: hidden;
}
.crop img {
width: 2000px;
height: 400px;
margin: 0px;
}
</style>
</head>
<body>
<div class="crop">
<img id="pic" src="spritesheet.png" />
</div>
</body>
</html>
And I want to change the images margin with the id pic to -400px with a function.
you can do it using this function:
function MoveImage() {
// using jQuery
$('.crop img#pic').css({ 'margin-top': -400 });
// using javascript
// document.getElementById('pic').style.marginTop = '-400px';
}
MoveImage();
jsfiddle
#pic { margin: 20px; }
or whichever value you would like, you would target the image itself with the ID you gave it.
when targeting an item via it's ID you will use # and when you target an item via it's class you would use .

jQuery load() function changes the height of an input text

Ok, so I have this html file (sec1_2.html).
<body>
<div id="nameContainer">
<input id="sect1Name">
</div>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div#nameContainer {
background: none repeat scroll 0% 0% #000;
height: 50px;
padding: 0;
margin: 0;
}
input#sect1Name {
width: 330px;
margin: 0;
height: 50px;
padding: 0;
}
</style>
Is a simple div with an input in it.
As you can see, the height on the div and on the input are the same (50px).
So when you display this page you get the input inside the div at the exact same height.
But, now I have this other html (index.html):
<!DOCTYPE html>
<html>
<body>
<div id="section1">
</div>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("#section1").load("sec1_2.html");
</script>
</body>
Now, here, I have an empty div where I load the external html (sec1_2.html).
When I do it like this, the (visible) height on the input increases!
I don't know why the input changes, if a let the input without height, both versions display the same height (default), but if I set a defined height, it will show a different height when loaded with jQuery.
Anyone knows why is this happening?
Hi for some reason your input is been rendered without one default property with the Jquery call, you can add this to your CSS:
input#sect1Name {
box-sizing:border-box;
}
This property is assigned for default in the html but not with Jquery.
http://plnkr.co/edit/6h8U9AQgFaNUb2plPbh6?p=preview

How to use current div width/height as minimum width/height?

How can I use the current width/height (which are both specified in percentage 100%) as the minimum width/height?
Here is a try:
<!doctype html>
<html>
<head>
<title>Layout</title>
<script>
var myDiv = document.body;
var curWidth = myDiv.style.width;
var curHeight = myDiv.style.height;
myDiv.style.minWidth = curWidth;
myDiv.style.minHeight = curHeight;
myDiv = document.getElementById('wrapper1');
var curWidth = myDiv.style.width;
var curHeight = myDiv.style.height;
myDiv.style.minWidth = curWidth;
myDiv.style.minHeight = curHeight;
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#wrapper1 {
width: 100%;
height: 100%;
}
#wrapper2 {
width: 8%;
height: 100%;
float: left;
}
#wrapper3 {
width: 92%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper1">
<div id="wrapper2">
Wrapper
</div>
<div id="wrapper3">
Wrapper
</div>
</div>
</body>
</html>
Trying to set min width/height of all divs to be the current width/height (which are both 100% by css) using Javascript (or using only css if possible)
Be aware of the fact that myDiv.style.height does not return the height of an element if that was set through CSS, but only if the div looked something like <div style="height: 10px"></div>. You should use:
var curHeight = myDiv.offsetHeight;
var curWidth = myDiv.offsetWidth;
Edit: Oh, and you need to move your script tag at the end of your html, or you won't be able to select wrapper1 (or in a different file?).
Here is references on offsetHeight and offsetWidth. Here
That is the only problem I see with your approach assuming you do a document.write to insert the retrieved css values.
As far as I understand, If you dont specify the width and height of a div by default it will always take it from its enclosing div.
example:
<body>
<div id="wrapper1">
<div id="wrapper2">
Wrapper
</div>
<div id="wrapper3">
Wrapper
</div>
</div>
</body>
<style>
#wrapper1 {
width: 100%;
height: 100%;
}
</style>
This will apply width and height both as 100% to all 3 divs in wrapper1, wrapper2, wrapper3

Categories