css responsive design having difficulty accessing width with javascript - javascript

I am making my first responsive design website.. I have an image slider div that is set with using pixels and media queries. I want to be able to access the width so I can tell the image slider how far I need to move. Unfortunately media queries don't seem to change the HTML. Is there any workarounds to get that information so I can use it in javascript.
here is a simple webpage example to play with and a JSFiddle http://jsfiddle.net/synthet1c/sNbW9/
<!doctype html>
<html>
<head>
<style>
body{
position:absolute;
background:red;
width:100%;
height:100%;
}
#outer{
position:absolute;
width:80%;
height:80%;
background:red;
background-image:url('http://www.largepictures.net/largepictures/scenery/largepictures_scenery_large_3066.jpg');
background-position: center;
margin:auto;
}
#inner{
width:80%;
height:80%;
background:rgba(255,0,0,0.3)
margin:auto;
margin-top:5%;
}
</style>
<script>
document.getElementById('inner').onclick = function(){
alert(document.getElementById('inner').style.width);
}
</script>
</head>
<body>
<div id="outer">
<div id="inner">click the box to get width</div>
</div>
</body>
</html>

The element.style object is only available for properties set with the style attribute (as the name might suggest). To retrieve CSS settings for elements whose style is set using a stylesheet:
document.getElementById('inner').onclick = function(){
alert(window.getComputedStyle(document.getElementById('inner'), null).width);
}
JS Fiddle demo.
References:
element.style.
window.getComputedStyle().

I made a little snippet for myself as this is a function I have been needing for a while
var comStyle = function(element , pseudoElt){
if(!pseudoElt){pseudoElt = null}
return window.getComputedStyle(document.getElementById(element), pseudoElt); }
This has me thinking though... Am I able to change the prototype so if element.style.something equals and empty string then use getComputedStyle() to get the actual value from the stylesheet?

Can't you just use offsetWidth, it's read-only property providing width of an element as an integer.
var el = document.getElementById('inner')
el.onclick = function(){
alert(el.offsetWidth)
}
http://jsfiddle.net/t2r7jnb4/

Related

How to crop the image so that it fits 50% of the screen?

I need the image to fit the 50% of the screen height of the device and not 50% of the current screen size (the user might have minimized the screen). Also, when the user resizes the screen, I don't want the image to automatically fit the screen once initially it is rendered.
The image is very large and I am looking to crop it, and not resize it. Here is what I done so far:
home.html:
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<img class="image" src="myimage.jpg" alt="">
</body>
</html>
home.css:
html, body {
margin:0;
border:0;
padding:0;
}
img.image {
width:100%;
}
I don't want to use anything apart from HTML, CSS and JavaScript. It would be great if somebody help me understand how should this be done in CSS. Thanks!
Consider using the css clip property.
Combining clip with a little JavaScript to get the screen size may just be the right solution.
to crop the image, you will need a container with overflow:hidden.
DEMO/example :
html, body {
height:100%;
margin:0;
}
.crop50h {
height:50%;
overflow:hidden;
}
/* some specific behavior for image ? */
.crop50h {
text-align:center;
}
.crop50h img {
/* width:100%; ? */
margin:0 -100%;
min-width:100%;
}
Wit html basis :
<div class="crop50h">
<img src="http://lorempixel.com/1200/1200/"/>
</div>
If I've read your question correctly, I believe you're asking to set the image to be 50% of the desktop window, not the browser window.
In that case you can use window.screen.availHeight in Javascript to get the available height:
var half = window.screen.availHeight / 2;
var image = document.getElementByClassName("image")[0];
image.width=(half)+"px";

Create wall for post made of blocks

i need a way to create a wall made of blocks.
The idea was: i get the informations via php, then i echo them in a div.
Stylesheet
.block{
min-height:100px;
min-width:190px;
background-color:#999;
float:left;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
.holder{
width:800px;
height:100%;
margin: 0 auto;
}
Here the html:
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class='holder'>
<? *connect to the db*
my_query=mysql_query("SELECT * FROM news");
while($array=mysql_fetch_array(my_query)){
echo "<div class='block' id='block_".$array['id']."'>".$array['text']."<div>";
}
?>
</div>
</body>
</html>
Now, the problem is that obviously the blocks have not the same height nor the same width, and so the float left create horrible margin between the blocks and the right side of the holder.
How they should be
http://img17.imageshack.us/img17/1813/cy44.png
How they display
http://img716.imageshack.us/img716/9703/lnyr.png
Ideas: For the width I could use jquery maybe creating id by echo.
if($('#block_'+id).css('width')>590){$('#block_'+id).css('width','790')}
if($('#block_'+id).css('width')>390){$('#block_'+id).css('width','590')}
if($('#block_'+id).css('width')>190){$('#block_'+id).css('width','390')}
This should do the trick for the width, but what about the height? Should i try to create a function set the absolute position of all the element based on the height of the element that are before?
I not clearly understand your requirement. But you can do one thing set comman class for all elements say '.elements' and once rendered you can get all elements you can all elements like this below commands.
$(document).ready(function(){
$('.elements') // and you do want you want to do.
})
Hungerstar pointed out that already exist Masonry. It did the trick.

jqLite: elm.css("width") is returning an empty string

This appears to be an issue with jqLite, which I came across while working with angular.js. To see the problem, open the console tab and click "run with js" in this jsbin. left.css("width") is returning an empty string when it shouldn't be.
HTML
<!doctype html>
<html ng-app>
<head>
<meta name="description" content="Angular Template" />
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="left"><span id="test">left</span></div>
<div class="right">right</div>
</div>
</body>
</html>
CSS
.container {display:table; width:100%;}
.left {border: 1px dashed purple; display:table-cell; overflow:hidden; width: 66%; height: 20px;}
.right {display:table-cell; background:green; width: 34%; height: 20px;}
JS
var innerSpan = document.getElementById("test");
var left = angular.element(innerSpan);
console.log(left.css("width"));
When I inspect the element using the chrome dev tools panel, the computed width is definitely not the empty string? What am I missing here?
You can't use .css('width') to get the width of an element. You use it to get the styled width. Since you didn't define the width in the element's style attribute, you get no value.
Try .prop('offsetWidth') instead.
Also, when using jsbin.com, your script is automatically included. Including script.js is just throwing a 404.

Changing background position with Javascript?

Though I can see this question has been asked before I really need a solution without the use of JQuery, its for an embedded web interface and I don't want the overhead of loading jQuery. I need to be able to manipulate sprites using just the JS on the single page, the state of the sprite is dependent on certain JS variables. I'm sure this must be possible, but can't find anything without the use of JQuery.
The easiest way (I think) is to define your own css classes and change those clasess on certan events. i.e.
<style type="text/css">
.bg1{
/* Some attributes set here */
background-position:cen‌​ter;
}
.bg2{
/* Some attributes set here */
background-position:left;
}
</style>
and then you put your javascript like this
document.getElementById("some_id").class = "bg2";
I think you can use Object.style.backgroundPosition="position" to change your desired background position .
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-image: url('example.png');
background-repeat: no-repeat;
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<script>
function displayResult()
{
document.getElementById("div1").style.backgroundPosition="center bottom";
}
</script>
</head>
<body>
<button type="button" onclick="displayResult()">Position background image</button>
<br>
<div id="div1">
</div>
</body>
</html>
Reference

Height of a html window's content (not just the viewport height)

I'm trying to get the height of a html window's content. This is the full height of the content not the visible height. I have had some (very limited) success using:
document.getElementsByTagName('html')[0].offsetHeight in FireFox.
This however fails in IEs and it fails in Chrome when using absolute positioned elements (http://code.google.com/p/chromium/issues/detail?id=38999).
A sample html file that can be used to reproduce this is:
<html>
<head>
<style>
div {
border:solid 1px red;
height:2000px;
width:400px;
}
.broken {
position:absolute;
top:0;
left:0;
}
.fixed {
position:relative;
top:0;
left:0;
}
</style>
<script language='javascript'>
window.onload = function () {
document.getElementById('window.height').innerHTML = window.innerHeight;
document.getElementById('window.screen.height').innerHTML = window.screen.height;
document.getElementById('document.html.height').innerHTML = document.getElementsByTagName('html')[0].offsetHeight;
}
</script>
</head>
<body>
<div class='fixed'>
window.height: <span id='window.height'> </span> <br/>
window.screen.height: <span id='window.screen.height'></span> <br/>
document.html.height: <span id='document.html.height'></span> <br/>
</div>
</body>
</html>
Thanks All
Guido Tapia
The best solution I found is:
document.documentElement.scrollHeight (scrollWidth for the width). Anthony above mentioned that this can have issues in IE quirks but this appears fine for my purposes.
Thanks
I seem to remember doing something like this before. To be clear, you want the height of the content that's below the scrollbar as well as what is on screen, right?
Have you tried using jquery? They have a built in method height() that will return the computed height of any DOM element. So to get the height of your document above and below the fold, you would use:
$(document).height();
To test it out, you could compare it to:
$("body").height();
One more quick plug for jquery: If you try to do this with straight JS, you'll run into issues with IE not supporting the same height properties as Firefox and Safari. So it not only make things more simple with jquery, but more cross-browser.

Categories