I want a dynamical margin-left on a given div.
I tried this code :
window.onload = function()
{
var pageWidth = window.innerWidth;
var size = (pageWidth - 200 ) / 2;
$('#search').css('margin-Left', size));
alert(size);
};
which doesn't work (the alert is here just for test purpose), the problem is ing from the ligne $('#search').css('margin-Left', size));
but I can't find out where...
I've tried with a lowercase l
on margin-left and didn't work.
I want a dynamical margin-left on a given div.
I tried this code :
window.onload = function()
{
var pageWidth = window.innerWidth;
var size = (pageWidth - 200 ) / 2;
$('#search').css('margin-Left', size));
alert(size);
};
which doesn't work (the alert is here just for test purpose), the problem is ing from the ligne $('#search').css('margin-Left', size));
but I can't find out where...
I've tried with a lowercase l
on margin-left and didn't work.
- 2 $('#search').css('margin-left', size)); case sensitive – Harsha Venkataramu Commented Oct 17, 2013 at 19:06
- @harsha already tried, didn't work either. – Thomas Ayoub Commented Oct 17, 2013 at 19:08
- Are you sure the div has an id of 'search' and not a class? – Andrew Commented Oct 17, 2013 at 19:09
- If you inspect the div with the developer tools for your browser is there an inline style there? – Andrew Commented Oct 17, 2013 at 19:10
- 3 You should note that you have an extra closing parenthesis on your code. – Giovanni Silveira Commented Oct 17, 2013 at 19:25
4 Answers
Reset to default 8Would the following work for you?
document.getElementById("search").style.marginLeft = size + "px";
You need to specify the type of unit you want to use.
$('#search').css('margin-left', size + 'px');
Try using marginLeft, without the hypen.
jQuery.css() documentation: http://api.jquery./css/
JAVASCRIPT
$(document).ready(function(e){
alert('test');
var pageWidth = parseInt($(window).innerWidth());
alert(pageWidth);
var size = (pageWidth - 200 ) / 2;
$('#search').css('margin-left', size);
alert(size);
})
HTML
<div id = 'search'></div>
CSS
#search
{
height:100px;
width:100px;
background-color:#F00;
}
FIDDLE LINK