What is wrong in my jquery? I would like to make my div bigger depending on screen size and there is plenty of good examples, but still no success.

.picLeft {
    border: 4px solid black;
    border-radius: 15px;
    width: 130px !important;-------> I need to change this
    height: 130px;-------> I need to change this
    text-align: center;
    background-color: white;
    margin: 10px !important;
    padding: 0px;
    float: left;
}

**EDIT TWO DIVS LIKE THAT**
var height = window.innerHeight;
var width = window.innerWidth;
console.log("height------->" +height);
console.log("width-------->" +width);
// <div class="ui-block-a picLeft" id="leftDiv">
//$("#leftDiv").css("width","300 !important"); NOT working
$(".picLeft").css("width","300 !important"); //NOT Working

<div class="ui-grid-a"   style="background-color:black">
    <div class="ui-block-a picLeft" id="leftDiv">
    <img src="images/nk100x100.jpg" data-theme="c"
                id="pictureId" />
</div>
    <div class="ui-block-b picRight">
        <img src="images/th100x100.jpg" data-theme="c" id="pictureId2"  />
    </div>
</div>

Thank you! Sami

What is wrong in my jquery? I would like to make my div bigger depending on screen size and there is plenty of good examples, but still no success.

.picLeft {
    border: 4px solid black;
    border-radius: 15px;
    width: 130px !important;-------> I need to change this
    height: 130px;-------> I need to change this
    text-align: center;
    background-color: white;
    margin: 10px !important;
    padding: 0px;
    float: left;
}

**EDIT TWO DIVS LIKE THAT**
var height = window.innerHeight;
var width = window.innerWidth;
console.log("height------->" +height);
console.log("width-------->" +width);
// <div class="ui-block-a picLeft" id="leftDiv">
//$("#leftDiv").css("width","300 !important"); NOT working
$(".picLeft").css("width","300 !important"); //NOT Working

<div class="ui-grid-a"   style="background-color:black">
    <div class="ui-block-a picLeft" id="leftDiv">
    <img src="images/nk100x100.jpg" data-theme="c"
                id="pictureId" />
</div>
    <div class="ui-block-b picRight">
        <img src="images/th100x100.jpg" data-theme="c" id="pictureId2"  />
    </div>
</div>

Thank you! Sami

• javascript
• jquery
• css
• html
• resize

5 Answers 5

$(".picLeft").css("width","300px !important"); //Added "px"

How about this:

$(window).resize(function()
{
    $('#display').css('width', ($(this).width() - 100) + 'px');
});​

http://jsfiddle/qJCc9/

you have missed px:

$(".picLeft").css("width","300px !important"); 

I suggest to use percentage values or CSS3 Media Queries for doing this.

You can use an expression in your css file something like the example below too:

width: expression((document.body.clientWidth - 300)  + "px") !important;

Thought it might be useful. You can also do conditional ones like this too:

width: expression( document.body.clientWidth > 1000 ? "1000px" : "99%" ); 

I know this isn't what you asked but others have already given good examples; this is just an alternative.

Try this...

 var width = jQuery(window).width();       
 jQuery('div.picLeft').css('width':width); 
 jQuery(window).resize(function() {
        var width = jQuery(window).width();  
        jQuery('div.picLeft').css('width':width);
    });