Safari: Works
Firefox: Weird floating issue on initial page load, works after browser resize
Chrome: End boxes jump around quickly when making window smaller
(have not tested other browsers)
Video displaying browser issues: http://tinypic.com/r/2gxo8w3/6
Full script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<style>
.box {
height: 250px;
background-color: #999;
float: left;
margin-right: 10px;
margin-top: 10px;
}
#boxes {
width: 100%;
overflow: auto;
}
.end-box {
margin-right: 0;
}
.top-box {
margin-top: 0;
}
</style>
<body>
<div id='boxes'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box'>7</div>
<div class='box'>8</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
columns = Math.floor($('#boxes').width()/225); //min box/column size (before spacing)
var spacing = ((columns - 1) * 10/$('#boxes').width())*100; //10px spacing between boxes
$('.box').width(100/columns-spacing/columns+'%');
$('.box:nth-child('+columns+'n+0)').addClass('end-box');//removes margins
$('.box:nth-child(-n'+columns+')').addClass('top-box');
$(window).resize(function() {
columnsCheck = Math.floor($('#boxes').width()/225);
if(columns != columnsCheck) {
$('.end-box').removeClass('end-box');
$('.top-box').removeClass('top-box');
$('.box:nth-child('+columnsCheck+'n+0)').addClass('end-box');
}
columns = columnsCheck;
var spacing = ((columns - 1) * 10/$('#boxes').width())*100;
$('.box').width(100/columns-spacing/columns+'%');
$('.box:nth-child('+columns+'n+0)').addClass('end-box');
$('.box:nth-child(-n'+columns+')').addClass('top-box');
});
</script>
</body>
</html>
How can I solve this issue (while maintaining 10px margins). I am also open to alternative methods of creating this effects via JavaScript/jQuery (trying to avoid pure CSS3).
Related
i use scrollLeft to scroll to the right 50px
but then i log the value of scrollLeft, it is 49.599998474121094px not 50px
how to make it scroll 50px
here is what it shows
thanks for your support
function myFunction() {
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
document.getElementById ("demo").innerHTML = "Horizontally: " + elmnt.scrollLeft + "px<br>Vertically: " + elmnt.scrollTop + "px";
}
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 800px;
width: 2000px;
background-color: coral;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>Click the button to scroll the contents of div by 50px horizontally and 10px vertically.</p>
<p><strong>Tip:</strong> Click the button many times to scroll the same amount each time.</p>
<button onclick="myFunction()">Scroll contents of div</button><br><br>
<div id="myDIV">
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
</div>
<p id="demo"></p>
</body>
</html>
Your Chrome browser window is most probably set to a zoom of 125% - which leads to this awkward result:
49.599998474121094px
Set the Zoom to 100% and there it is:
50px
I have a question that was half answered by other posts like this:
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
or that:
Does overflow:hidden applied to <body> work on iPhone Safari?
The Question is about that overflow:hidden in iOS Safari and mobile Chrome is not working like I expected it.
overflow:hidden on the body works for Firefox. And if you try the code below that way in Firefox it is exactly how it should work.
So I already see, overflow:hidden is not working on the body for iOS Safari and the mobile Chrome – you have to wrap everything in a div below the body and give that an overflow:hidden. But this way unfortunately is not doing what I want, because it will ignore the JavaScript function scrollLeft.
Here is a quick description of what is supposed to happen:
You open the site. The body or wrapper will be seen half, cause it has a width:180%.
A jQuery code is scrolling the whole thing to {scrollLeft:(right)} where it supposed to stay. (at least on the x-axis)
Clicking the button should move the site to the left where also the site should stay. (on the x-axis / y-axis should be possible to scroll)
Maybe it is a bit complicated; feel free to copy the code if you want to try it yourself.
What I think the problem might be is that overflow:hidden gets overwritten or overwrites the JavaScript function.
Do anyone have an idea how to solve this problem?
Maybe another way to tell the browser to not scroll in the x-axis...
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Scroll test</title>
<style>
#charset "UTF-8";
:root {
--blue: #127296;
}
html {
height: 100%;
font-size: 20px
}
body {
margin: 0px;
overflow-x: hidden;
}
.wrapper {
/* overflow-x: hidden; */
}
.textfeld {
color: var(--blue);
padding: 30px 35px 150vh 35px;
}
.white {
color: white;
}
button {
border: none;
background: none;
font-size: 1em;
padding: 2px 5px 15px 5px;
align-self: center;
}
.eins {
grid-column: 1/ span 6;
}
.zwei {
grid-column: 7 / -1;
background-color: var(--blue);
}
#content {
width: 180%;
grid-template-columns: repeat(12, 1fr);
margin: 0px;
height: auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
</style>
</head>
<body>
<div class="wrapper">
<div id="content">
<div class="spalte eins fr">
<div class="textfeld content">
<button type="button" name="button" class="button_2">Click</button>
</div>
</div>
<div class="spalte zwei">
<div class="textfeld content de white">
<button type="button" name="button" class="button">Click</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var left = $(document).outerWidth() - $(window).width();
var right = $(window).width() - $(document).outerWidth();
$('body, html').scrollLeft(left);
$(".button").click(function() {
$('body, html').animate({
scrollLeft: (right)
}, 200);
console.log("click");
});
$(".button_2").click(function() {
$('body, html').animate({
scrollLeft: (left)
}, 200);
});
});
</script>
</html>
Why does the animations slowly stops when I am in a different tab or when window is minimized?
It's this codepen link - http://codepen.io/heyjules/pen/LVoEOw
It works fine at first. But then once you tab out or minimize (for about 5- 10 sec), The "particles" have lessened.
Why does it do this? How do I stop this from happening?
<html>
<head>
<meta charset="utf-8">
<title>Particles</title>
<style type="text/css">
html,body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
#canvas {
cursor: none;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type = "text/javascript" src="particles.js"></script>
</body>
In modern browsers the timers (setTimeout, setInterval, setImmediate and requestAnimationFrame) are set to not fire more often than once per second in inactive tabs.
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Inactive_tabs
I have the following HTML file that currently has nothing in it except some div class objects that are specified by CSS styles. If I open this web page and inspect the elements in Chrome they are the sizes that I want them to be. What I am wondering is if I can access those sizes via javascript.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.camp_cont {
float: left;
width: 45%;
height: 50%;
position: relative;
}
.camp_cont_select {
float: left;
width: 45%;
height: 50%;
position: relative;
fill: #800;
}
.sub_camp_cont {
float: left;
width: 15%;
height: 50%;
position: relative;
margin: 10px 25px;
fill: #800;
}
</style>
</head>
<body>
<div class="camp_cont", id="cpa_perf"></div>
<div class="camp_cont", id="ctr_perf"></div>
<div class="sub_camp_cont", id="as_perf"></div>
<div class="sub_camp_cont", id="f_perf"></div>
<div class="sub_camp_cont", id="rh_perf"></div>
<div class="sub_camp_cont", id="rm_perf"></div>
<div class="sub_camp_cont", id="rl_perf"></div>
<div class="sub_camp_cont", id="ul_perf"></div>
<div class="sub_camp_cont", id="rt_perf"></div>
</body>
</html>
I am wondering if I can do something like the following:
x = $("#cpa_perf").width()
Again, when I inspect cpa_perf in Chrome it says its width is 515px. That's what I'm trying to get at
jQuery Width works just fine for this:
x = $("#cpa_perf").width();
alert(x);
JS Fiddle: http://jsfiddle.net/9abcf9d3/
You can use jQuery pretty easily to modify attributes of elements..
$('.classname').css(property, value);
I'm not certain if you are trying to use jQuery or pure javascript.
You're original attempt to get the width of the element should work as long as you're using a jQuery library.
Otherwise, if you just want the width of the element with pure javascript, you can use something like this:
var x = document.getElementById('cpa_perf').offsetWidth;
If you are including a jQuery library then the following should work:
var x = $("#cpa_perf").width()
Additional Note: Make sure that the script isn't called before the DOM element is written to the page as well. For example:
$(document).ready(function (){
var x = $("#cpa_perf").width();
console.log(x);
}) ;
I am relatively new with Javascript but managed to somehow get this code to work on chrome, firefox, safari but it doesn't properly on IE. First look at this code and then after that I will explain what seems to be not working:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.domain.com/test/wtf.css" />
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var transition = 'slow';
var target1 = $('#flash1');
var target2 = $('#flash2');
var target3 = $('#box2');
var target4 = $('#tble');
var target5 = $('.links');
var target6 = $('#wording');
target1.delay(1000).fadeIn();
target2.delay(2000).fadeIn();
target3.delay(3000).fadeIn();
target4.delay(4000).fadeIn();
target5.delay(5000).fadeIn();
target6.delay(6000).fadeIn();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#this_is_button").click(function () {
$("#box2").hide();
$("#tble").hide();
$(".links").hide();
$("#second_pls").show();
$("#box2").css("background", "black");
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#what_close").click(function () {
$("#second_pls").hide();
$("#tble").show();
$(".snap").show();
$(".links").show();
$("#box").css({
backgroundImage: "url('/test/img.jpg')",
backgroundSize: "800px"});
});
});
</script>
</head>
<body>
<div id="box">
<div id="box2" style="display:none"></div>
<div id="wording" style="display:none">
<label id="flash1" style="display:none">Hello</label>
<label id="flash2" style="display:none">World</label>
</div>
<div id="tble" style="display:none">This is a table</div>
<div id="second_pls" style="display:none">Hello Hello Hello, is this working? come on already?!!
<input type="button" id="what_close" value="Close">
</div>
<div class="links" style="display:none">
<input type="button" id="this_is_button" value="Sample">
</div>
</div>
</body>
</html>
CSS:
#box {
background-color: #000000;
height: 350px;
margin-left: auto;
margin-right: auto;
width: 800px;
}
#box2 {
background-image: url("/test/img.jpg");
background-size: 800px;
height: 550px;
margin-left: auto;
margin-right: auto;
width: 800px;
position: absolute;
}
#wording {
position: relative;
color: #999999;
font-size: 15px;
letter-spacing: 5px;
margin-left: 20px;
padding-top: 30px;
}
#tble {
margin-top: 180px;
position: absolute;
}
#second_pls {
margin-left: 10px;
margin-top: 310px;
position: absolute;
}
.links {
margin-left: 10px;
margin-top: 310px;
position: absolute;
}
So what is the part that doesn't seem to function when the page is rendered in IE? It seems that the fadeIn, fadeOut, hide and show parts are not rendering in IE except #flash1, and #flash2 work, the rest of the fade in, fade out don't work. I am ripping my hair out not understanding why those two would work but not the rest.
I used BrowserStack and it seems that on Windows XP using IE 8 it renders properly with the exception of properly rendering the background image. But on Windows 7 using IE 8, it works the same way as it does on Windows XP but when using IE 9 it gives me the current issue.
What am I doing wrong?
It seems the problem arise from incorrect syntax:
$("#box").css({
backgroundImage: "url('/test/img.jpg')",
backgroundSize: "800px", //<-- extra comma
});
http://jsfiddle.net/bfcZd/3/
vs.
http://jsfiddle.net/bfcZd/4/
You should look at the CSS declarations for the two divs that are working. I suspect they may be position:relative or have some other property that is causing them to render differently (properly) while the other ones fail. Could you provide the CSS that you have set for the divs in your example. It will help us troubleshoot a little better, but without seeing it, this is my hunch.
add this meta tag inside your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
should work then.
i have it here in this jsfiddle: http://jsfiddle.net/Morlock0821/XtyWC/