Here is the jQuery code snippet I am working with:
<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
get_font_size();
set_sidebar();
});
function get_font_size()
{
var b=$(window).width();
var side_size=b*260/1440;
b=b-side_size;
$("#sidebar").css({"width":side_size});
$("#alexa-widget img").css({"width":side_size});
$(".fb-like-box").attr("data-width",side_size);
}
function set_sidebar()
{
var b=$(window).width();
var font_size=b*65/1440;
var font_size_2=b*133/1440;
var margin_top=b*10/1440;
margin_top*=-1;
margin_top=Math.round(margin_top);
$("#my_tabs li").css({"font-size":font_size});
$("#header").css({"font-size":font_size_2,"margin-top":margin_top});
}
</script>
Although everything works smoothly, I am facing an issue with the margin-top property. Assigning a negative value to margin-top fails, while other CSS properties are applied correctly. Could anyone explain why jQuery CSS settings do not support negative values, whereas it works fine when directly applied in CSS? My goal is to dynamically adjust webpage layout based on screen resolutions, so using CSS directly is not an option. I have already included the viewport meta tag in my code, so viewport or media query solutions are not relevant. I have verified the margin_top variable using alert(margin_top) and it displays the correct negative value. The calculation seems to be correct, but the CSS setting part is failing. Any assistance in resolving this issue would be greatly appreciated. Thank you.