Detecting Width: Auto in Jquery

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:

1. Use width in percentages so, when resized it'll auto adjust
2. Use media queries for resolution specific styles
3. 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;
    }
}

3. 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