Detecting width: auto in jQuery
I don't believe it's possible for the moment. At least not in any other browser than IE. IE implements element.currentStyle
which represents styles at they were written in the CSS file. On the other hand, the rest of the browsers implement window.getComputedStyle
which returns the computed values of those styles. That's what you receive there, a numeric value instead of auto.
The only way around it would be to parse CSS declarations from document.styleSheets
.
References:
- http://msdn.microsoft.com/en-us/library/ms535231(VS.85).aspx
- https://developer.mozilla.org/en/DOM:window.getComputedStyle
- https://developer.mozilla.org/en/CSS/computed_value
JQuery: How to detect mobile width and change my css to it's with using jquery?
No need of using Javascript/jQuery, check the below points.
Suggestions:
- Use
width
in percentages so, when resized it'll auto adjust - Use
media queries
for resolution specific styles - When setting properties from Javascript, use quotes around property name or use camelcase. Ex. maxWidth, or 'max-width'
Example:
@media (max-width: 600px) {
.page {
width: 200px;
}
}
- Create separate CSS file for various resolutions and load them for such resolutions
Example:
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 600px)" href="mobile.css" />
Update
If you still want to use Javascript, call your function on window resize event.
window.onresize = responsiveFn;
Use max-width
in quotes
jQuery('.page').css('max-width', width);
JQuery - Get width: auto from inline style
document.getElementById('image').style.width;
Or for more jquery's way:
$("#image")[0].style.width;
Auto detect screen height
You can set height dynamicly with codes below:
$(function(){
var height = $(window).height();
$('#FrontImg').css("height", height + "px");
})
jQuery: How to detect window width on the fly?
Changing a variable doesn't magically execute code within the if
-block. Place the common code in a function, then bind the event, and call the function:
$(document).ready(function() {
// Optimalisation: Store the references outside the event handler:
var $window = $(window);
var $pane = $('#pane1');
function checkWidth() {
var windowsize = $window.width();
if (windowsize > 440) {
//if the window is greater than 440px wide then turn on jScrollPane..
$pane.jScrollPane({
scrollbarWidth:15,
scrollbarMargin:52
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
Resize div and dynamically detect width
Worked it out in the end:
http://jsfiddle.net/ablueman/2uvpk2d5/
//DIV with .change class
$('#changelog').text(' W: ' + $('.change').width() + 'px , H:' + $('.change').height() + 'px ');
$(window).resize(function () {
$('#changelog').text(' W: ' + $('.change').width() + 'px , H:' + $('.change').height() + 'px ');
});
Thanks all.
Javascript auto width detect then add two pixels to it
You can use width
as setter and getter. See the jQuery API: http://api.jquery.com/width/
$('.navbar-nav li a').each(function(index){ $(this).width($(this).width() + 2);});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul id="main-menu" class="nav navbar-nav"> <li><a href="/" class="nav-link">Home</a></li> <li><a href="/" class="nav-link">About</a></li> <li><a href="/" class="nav-link">Contact</a></li></ul>
How to detect window width changes without resizing
You can detect both events and just execute code when it's a width change:
var width = $(window).width();
$(window).resize(function(){
if($(this).width() != width){
width = $(this).width();
console.log(width);
}
});
Related Topics
How to Make Cross-Browser CSS3 Code Dry
How to Position Popover Over a Highlighted Portion of Text
Applying More in Depth Selection to the :Host CSS Pseudo Class
Create New Row Every 2 Records Using Knockout Foreach
How to Detect If Element Has 'Auto' Height
How to Handle Radio Event When Icheck-Helper Is Used
Any Way to Hide CSS and JavaScript File from the Client-Side User
How to Make React-Bootstrap's Dropdown Open on Mouse Hover
Fixing Sub-Pixel Rounding Issue in a CSS Fluid Grid
Detect When Scrolling Has Finished When Using 'Scroll-Behavior: Smooth'
Css: Set Divs Horizontally in 2 Rows
How to Start CSS3 Animations at a Specific Spot
How to Hide Href Attribute of <A> Tag via CSS When Using Window.Print
Jquery .Position() Strangeness While Using CSS3 Rotate Attribute