0

I need to set width for div depends upon its content.. Below is my HTML flow.

Flow 1:

<div id="header-cart" class="block block-cart skip-content skip-active">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>

Flow 2:

<div id="header-cart" class="block block-cart skip-content skip-active">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<div>
<div id="minicart-widgets"> </div>
<div class="block-content"></div>
<div class="minicart-actions"></div>
</div>
</div>
</div>

I have two HTML flows explained above.. What i need is to set

width as 220px and 300px

for

<div id="header-cart">

.

When there is an occurance of <p class="empty"> in <div id="header-cart">

<div id="header-cart"> should be in

width 220px

.

and if not it should be in 300px.

I dont know how to set flow for this cascade.

Can any one help me?? Thanks in advance..

Syed Ibrahim
  • 573
  • 1
  • 5
  • 19

3 Answers3

1

You can use JavaScript for this.

if(document.querySelectorAll("div#header-cart p.empty").length==0){

   document.getElementById('header-cart').style.width="300px";

}else{

   document.getElementById('header-cart').style.width="220px";

}
Shoaib Chikate
  • 8,665
  • 12
  • 47
  • 70
1

By looking at your above code i feel there is no need to go for any script for this. You can acheive the same with existing css classes.

Flow 1:

Default class is applying. so, give the base width for this class.

.skip-content { width: 220px; }

Flow 2:

Active class is applying. So, give the active class width for this class.

.skip-active { width: 300px; } // This will be applied in active time.
KiV
  • 2,225
  • 16
  • 18
1

i think this can be done by stylign inline

<div id="header-cart" class="block block-cart skip-content" style="width:220px;">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>

<div id="header-cart" class="block block-cart skip-content skip-active" style="width:300px;">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<div>
<script type="text/javascript">
<div id="minicart-widgets"> </div>
<div class="block-content"></div>
<div class="minicart-actions"></div>
</div>
</div>

or make a another div for flow 1 and 2 like this

<div id="flow1">
<div id="header-cart" class="block block-cart skip-content">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>
</div>

<div id="flow2">
<div id="header-cart" class="block block-cart skip-content skip-active">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<div>
<div id="minicart-widgets"> </div>
<div class="block-content"></div>
<div class="minicart-actions"></div>
</div>
</div>
</div>
</div>

CSS:

#flow1 {width:220px;}
#flow2 {width:300px;}

sample - http://jsfiddle.net/wd54paav/

MIke
  • 619
  • 6
  • 29
  • No brother, these flows should comes in dynamic. we cant able set it as predefined. The only source to analyze this function is through

    . No other options are available.

     – Syed Ibrahim Nov 03 '14 at 07:25
  • try using this css div#header-cart .block block-cart skip-content {width:220px;} div#header-cart .block block-cart skip-content skip-active {width:300px;} i think this is possible by combining the id with the class reference: http://stackoverflow.com/questions/1028248/how-to-combine-class-and-id-in-css-selector – MIke Nov 03 '14 at 07:54