Question

18

How to change width of div to 100% with jQuery?

rated 0 times [ 25] [ 7] / answers: 1 / hits: 19340 / 11 Years ago, sat, june 15, 2013, 12:00:00

I have 2 divs side by side and when one isn't there, I want the other to have a width of 100%.

while ($array = $query->fetch(PDO::FETCH_ASSOC)){    

     if (!empty($array['photoname'])){

          echo '<div class=photo></div>';

     }

        echo  '<div class=info></div>';

}

Here's my Javascript/jQuery:

$(document).ready(function() {

    //check if photo div exists

    if ($('.photo').length){



    }else{

        $('.info').css('width', '100%');

    }

});

So if there is no photo div I want the info div to get a width of 100%. How can I achieve this?

UPDATE

If I don't have any photo divs showing, the above works and sets info divs to 100%. But when I have a photo div anywhere on the page, then none of the info divs are set to 100% even if they dont have a photo div next to them.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hallie

Add To Favorites

Follow

Total Points: 503

Total Questions: 114

Total Answers: 103

Location: Iraq

Member since Fri, Jun 5, 2020

4 Years ago

hallie questions

1 Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

Fri, Jan 28, 22, 00:00, 2 Years ago

1 isSameOrBefore implementation for date-fns

Fri, Jul 9, 21, 00:00, 3 Years ago

1 Module build failed when using mini-css-extract-plugin with postcss-loader for less

Thu, May 27, 21, 00:00, 3 Years ago

1 d3.js in Angular - Property 'event' does not exist on type 'typeof import

Wed, Nov 11, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: Unexpected token '< ' VueJS PWA

Fri, Mar 27, 20, 00:00, 4 Years ago

View All

answered 11 Years ago anabeldaliad · Accepted Answer

You can use something like this:

HTML

<div class=main>

<div class=photo>a</div> <div class=info>a</div>

</div>

JS

$(document).ready(function() {

    //check if photo div exists

    $( .main ).each(function( index ) {

       var thisPhoto = $(this).find('.photo').html();

        if(thisPhoto==undefined){

            

            $(this).find('.info').css('width', '100%');

        }    

     });

    

        

});

CSS

.main{

        display:block;

        color:red;

        width:200px;

        height:200px;

    }

    .photo{

        float:left;

         width:50%;

        display:block;

        background:red;

        height:100%;

    }

    .info{

        float:left;

         width:50%;

        display:block;

        background:red;

        height:100%;

    }

DEMO

EDIT: Please see my updated jsfiddle, the reason why your jQuery is not working as expected is because you refer to class in a global score, as you want to modify your divs in a row basis you will have to somehow iterate trough each of them, this is when Jquery comes to the play again, in the updated code I'm using the find() function on each iteration, this will affect only the current row as the scope is reduced to the iterated element only.