Results 1 to 10 of 10

Thread: make div box shrink and grow with show and hide

  1. #1
    Join Date
    May 2012
    Posts
    210
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default make div box shrink and grow with show and hide

    Hi

    I am currently building a website for a client and within the search form, I have more options which is a link that shows and hides more options to search by and it works perfect but I want the div box to shrink and grow when the more options link is clicked

    my coding for the html and javascript is below

    Code:
    <a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >More Options</a>
    <button class="ui-button ui-button-big js-submit"><?php _e("Search", 'bender');?></button>
    <br />
    
    <div class="mid" id="HiddenDiv" style="DISPLAY: none" >
    <div style="float: right; margin: 0 0 0 10px;">
    		<?php $doors = Params::getParam('doors') ; ?>
           <input style="width:20px;" type="radio" name="doors" value="3" id="3" <?php if($doors == '3') { echo 'checked="yes"'; } ?>/> <label for="3"><?php _e('3 Doors', 'cars_attributes'); ?></label>
           <input style="width:20px;" type="radio" name="doors" value="4" id="4" <?php if($doors == '4') { echo 'checked="yes"'; } ?>/> <label for="4"><?php _e('4 Doors', 'cars_attributes'); ?></label>
       		</div>
            
    		<input type="text" id="engine_size" name="engine_size" style="float: left;" placeholder="Engine Size"/>
            
            <input type="text" name="extColr" id="extColr" style="float: left;" placeholder="Colour"/>
            </div>
    
    
    <script language="JavaScript">
    function ShowHide(divId)
    {
    if(document.getElementById(divId).style.display == 'none')
    {
    document.getElementById(divId).style.display='block';
    }
    else
    {
    document.getElementById(divId).style.display = 'none';
    }
    }
    </script>
    The CSS is below

    Code:
    .main-search {
    	background-color: #f0f0f0;
    	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #c9c9c9));
    	background-image: -webkit-linear-gradient(top, #f0f0f0, #c9c9c9);
    	background-image: -moz-linear-gradient(top, #f0f0f0, #c9c9c9);
    	background-image: -ms-linear-gradient(top, #f0f0f0, #c9c9c9);
    	background-image: -o-linear-gradient(top, #f0f0f0, #c9c9c9);
    	background-image: linear-gradient(top, #f0f0f0, #c9c9c9);
    	width: 892px;
    	padding: 6px;
    	height: 138px;
    	border: solid 1px #989393;
    	margin: 0 auto;
    	box-shadow: inset 0px 1px 1px 0px #fff, 0px 2px 2px 0px rgba(0,0,0,0.2);
    	position: relative;
    	margin-top: 15px;
    	border-top-left-radius: 4px;
    	border-bottom-left-radius: 4px;
    	border-top-right-radius: 4px;
    	border-bottom-right-radius: 4px
    }
    I believe it is to do with the height: 138px line but not 100% but have tried min-height, max-height, no height, height: auto and nothing seems to work

    Please help as can't see where I am going wrong with it

    Thank you in advance

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    The css you've posted doesn't appear to be applied to any of the markup above (I can't see an element with that class).

    If you need more help, please provide a link to your page.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    May 2012
    Posts
    210
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Beverleyh View Post
    The css you've posted doesn't appear to be applied to any of the markup above (I can't see an element with that class).

    If you need more help, please provide a link to your page.
    Hi Beverleyh

    Thank you so much for the reply, appreciate it

    So sorry, I have pasted below the whole coding that has the <div id="main-search"> in it

    Code:
    <div class="main-search">
                <div class="cell">
                <script type="text/javascript">
        $(document).ready(function(){
            $("#make").change(function(){
                var make_id = $(this).val();
                var url = '<?php echo osc_ajax_plugin_url("cars_attributes/ajax.php") . "&makeId="; ?>' + make_id;
                var result = '';
                if(make_id != '') {
                    $("#model").attr('disabled',false);
                    $.ajax({
                        type: "POST",
                        url: url,
                        dataType: 'json',
                        success: function(data){
                            var length = data.length;
                            if(length > 0) {
                                result += '<option value=""><?php _e("Select a model", 'cars_attributes'); ?></option>';
                                for(key in data) {
                                    result += '<option value="' + data[key].pk_i_id + '">' + data[key].s_name + '</option>';
                                }
                            } else {
                                result += '<option value=""><?php _e('No results', 'cars_attributes'); ?></option>';
                            }
                            $("#model").html(result);
                        }
                     });
                 } else {
                    $("#model").attr('disabled',true);
                 }
            });
        });
    </script>
                    <?php 
        $make  = Params::getParam('make') ;
        $model = Params::getParam('model') ;
        $type  = Params::getParam('type') ;
    
        $makes  = ModelCars::newInstance()->getCarMakes();
        $models = array();
        if($make != '') {
            $models = ModelCars::newInstance()->getCarModels($make);
        }
    
        $types = ModelCars::newInstance()->getVehiclesType(osc_current_user_locale());
    ?>
    <select name="make" id="make" >
                <option value=""><?php  _e('Select a make', 'cars_attributes'); ?></option>
                <?php foreach($makes as $m) { ?>
                    <option value="<?php echo $m['pk_i_id']; ?>" <?php if($make == $m['pk_i_id']) { echo 'selected'; } ?>><?php echo $m['s_name']; ?></option>
                <?php } ?>
            </select>
                </div>
                
                <div class="cell">
                <select name="model" id="model">
                <option value=""><?php _e('Select a model', 'cars_attributes'); ?></option>
                <?php foreach($models as $m) { ?>
                    <option value="<?php echo $m['pk_i_id']; ?>" <?php if($model == $m['pk_i_id']) { echo 'selected';} ?>><?php echo $m['s_name']; ?></option>
                <?php } ?>
            </select>
                </div>
                
                <div class="cell">
                <?php if( osc_price_enabled_at_items() ) { ?>
            <fieldset>
                    <input class="input-text" type="text" id="priceMin" name="sPriceMin" value="<?php echo osc_esc_html(osc_search_price_min()); ?>" size="6" maxlength="6" placeholder="Min Price"/>
                    <input class="input-text" type="text" id="priceMax" name="sPriceMax" value="<?php echo osc_esc_html(osc_search_price_max()); ?>" size="6" maxlength="6" placeholder="Max Price"/>
            </fieldset>
            <?php } ?>
                </div>
                
                <div class="cell">
    <input class="input-text" type="text" id="sCity" name="sCity" value="<?php echo osc_esc_html(osc_search_city()); ?>" placeholder="Town"/>
                </div>
                
                <div class="cell">
                <div class="select-box undefined" style="margin: 0 5px 0 5px; float: left;">
                <select name="distance">
                <option value="0" <?php echo (($_GET["distance"]) == 0) ? "selected" : ""; ?> >Distance</option>
                <option value="3" <?php echo (($_GET["distance"]) == 3) ? "selected" : ""; ?> >Within 3 Miles</option>
                <option value="5" <?php echo (($_GET["distance"]) == 5) ? "selected" : ""; ?> >Within 5 Miles</option>
                <option value="10" <?php echo (($_GET["distance"]) == 10) ? "selected" : ""; ?> >Within 10 Miles</option>	
                <option value="15" <?php echo (($_GET["distance"]) == 15) ? "selected" : ""; ?> >Within 15 Miles</option>
                <option value="25" <?php echo (($_GET["distance"]) == 25) ? "selected" : ""; ?> >Within 25 Miles</option>
                <option value="50" <?php echo (($_GET["distance"]) == 50) ? "selected" : ""; ?> >Within 50 Miles</option>
                <option value="75" <?php echo (($_GET["distance"]) == 75) ? "selected" : ""; ?> >Within 75 Miles</option>		
                </select>
                </div>
                </div>
                
                <div style="clear: both;"></div>
                
                    <div class="cell" style="margin: 5px 0 0 0; float: left;">
                	<?php $transmission = Params::getParam('transmission') ; ?>
    <input style="width:20px;" type="radio" name="transmission" value="MANUAL" id="manual" <?php if($transmission == 'MANUAL') { echo 'checked="yes"'; } ?>/> <label for="manual"><?php _e('Manual', 'cars_attributes'); ?></label>
    <input style="width:20px;" type="radio" name="transmission" value="AUTO" id="auto" <?php if($transmission == 'AUTO') { echo 'checked="yes"'; } ?>/> <label for="auto"><?php _e('Automatic', 'cars_attributes'); ?></label>
    
    <?php $fuel = Params::getParam('fuel') ; ?>
           <input style="width:20px;" type="radio" name="fuel" value="DIESEL" id="diesel" <?php if($fuel == 'DIESEL') { echo 'checked="yes"'; } ?>/> <label for="diesel"><?php _e('Diesel', 'cars_attributes'); ?></label>
    <input style="width:20px;" type="radio" name="fuel" value="GASOLINE" id="auto" <?php if($fuel == 'GASOLINE') { echo 'checked="yes"'; } ?>/> <label for="auto"><?php _e('Gasoline', 'cars_attributes'); ?></label>
    
    <a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >More Options</a>
    <button class="ui-button ui-button-big js-submit"><?php _e("Search", 'bender');?></button>
    <br />
    
    <div class="mid" id="HiddenDiv" style="DISPLAY: none" >
    <div style="float: right; margin: 0 0 0 10px;">
    		<?php $doors = Params::getParam('doors') ; ?>
           <input style="width:20px;" type="radio" name="doors" value="3" id="3" <?php if($doors == '3') { echo 'checked="yes"'; } ?>/> <label for="3"><?php _e('3 Doors', 'cars_attributes'); ?></label>
           <input style="width:20px;" type="radio" name="doors" value="4" id="4" <?php if($doors == '4') { echo 'checked="yes"'; } ?>/> <label for="4"><?php _e('4 Doors', 'cars_attributes'); ?></label>
       		</div>
            
    		<input type="text" id="engine_size" name="engine_size" style="float: left;" placeholder="Engine Size"/>
            
            <input type="text" name="extColr" id="extColr" style="float: left;" placeholder="Colour"/>
            </div>
    
    
    <script language="JavaScript">
    function ShowHide(divId)
    {
    if(document.getElementById(divId).style.display == 'none')
    {
    document.getElementById(divId).style.display='block';
    }
    else
    {
    document.getElementById(divId).style.display = 'none';
    }
    }
    </script>
    The link to the site is http://www.irhwebsites.com/sites/zacs-new-car-site/

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .main-search {
    	background-color: #f0f0f0;
    	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #c9c9c9));
    	background-image: -webkit-linear-gradient(top, #f0f0f0, #c9c9c9);
    	background-image: -moz-linear-gradient(top, #f0f0f0, #c9c9c9);
    	background-image: -ms-linear-gradient(top, #f0f0f0, #c9c9c9);
    	background-image: -o-linear-gradient(top, #f0f0f0, #c9c9c9);
    	background-image: linear-gradient(top, #f0f0f0, #c9c9c9);
    	width: 892px;
    	padding: 6px;
    	height: 138px;
    	border: solid 1px #989393;
    	margin: 0 auto;
    	box-shadow: inset 0px 1px 1px 0px #fff, 0px 2px 2px 0px rgba(0,0,0,0.2);
    	position: relative;
    	margin-top: 15px;
    	border-top-left-radius: 4px;
    	border-bottom-left-radius: 4px;
    	border-top-right-radius: 4px;
    	border-bottom-right-radius: 4px
    }
    /*]]>*/
    </style></head>
    
    <body>
     <a onclick ="javascript:ShowHide('HiddenDiv',500)" href="javascript:;" >More Options</a>
    <button class="ui-button ui-button-big js-submit"><?php _e("Search", 'bender');?></button>
    <br />
    
    <div class="mid" id="HiddenDiv" style="DISPLAY: none;border:solid red 1px;overflow:hidden;" >
    <div style="float: right; margin: 0 0 0 10px;">
    		<?php $doors = Params::getParam('doors') ; ?>
           <input style="width:20px;" type="radio" name="doors" value="3" id="3" <?php if($doors == '3') { echo 'checked="yes"'; } ?>/> <label for="3"><?php _e('3 Doors', 'cars_attributes'); ?></label>
           <input style="width:20px;" type="radio" name="doors" value="4" id="4" <?php if($doors == '4') { echo 'checked="yes"'; } ?>/> <label for="4"><?php _e('4 Doors', 'cars_attributes'); ?></label>
       		</div>
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    		<input type="text" id="engine_size" name="engine_size" style="float: left;" placeholder="Engine Size"/>
    
            <input type="text" name="extColr" id="extColr" style="float: left;" placeholder="Colour"/>
            </div>
    
    <script type="text/javascript">
    
    function ShowHide(divId,ms){
     var obj=document.getElementById(divId),o=ShowHide[divId];
     if (!o&&obj){
      ShowHide[divId]=o={
       ud:obj.style.display=='none'
      }
      obj.style.display='block';
      obj.style.overflow='hidden';
      o.m=obj.scrollHeight;
      o.a=[obj,'height',o.ud?0:o.m];
     }
     if (o){
      ms=typeof(ms)=='number'&&ms>0?ms:500;
      obj.style.display='block';
      animate(o,o.a,o.a[2],o.ud?o.m:0,new Date(),ms);
      o.ud=!o.ud;
     }
    }
    
    function animate(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=Math.max(0,n);
       a[0].style[a[1]]=a[2]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t;
       a[0].style[a[1]]=t+'px';
       a[0].style.display=t==0?'none':'block';
      }
     }
    
    
    </script>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    May 2012
    Posts
    210
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Hi vwphilips

    Thank you the coding etc, appreciate it

    I tried the coding and the grey box still does not shrink and grow when click the more options link

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Might I suggest something like this http://fofwebdesign.co.uk/template/_...ss-ani-div.htm

    The addClass() javascript function adds a class of "show" to the div with id "box" in the example, although you can specify any id to target via the 1st parameter, and any class to be added via the second parameter onclick="addClass('idToTarget, 'classToAdd')"

    The addition of the new class allows you to change the style of the element with css - here I am using css to animate the max-height of the hidden box from 0 to 150px when the "show" class is added.

    A second click removes the added "show" class (actually this demo removes all classes so be careful with that).

    Maybe you could use the same method for your search box.?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    I tried the coding and the grey box still does not shrink and grow when click the more options link
    please post a link to where you are using the code
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    May 2012
    Posts
    210
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by vwphillips View Post
    please post a link to where you are using the code
    Hi vwphillips

    The link where I am using the code is http://www.irhwebsites.com/sites/zacs-new-car-site/

    The search form is at the top

  9. #9
    Join Date
    May 2012
    Posts
    210
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Hi Beverleyh

    Thank you will try that if can't get the current coding to work

  10. #10
    Join Date
    May 2012
    Posts
    210
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Hi Beverleyh

    Just tried the coding and replies and works perfect, thank you so much really appreciate the help and support

    same for vwphillips thank you for the replies and coding and help, really appreciate it

Similar Threads

  1. Show hide div from xml row id
    By ajsfullhouse in forum JavaScript
    Replies: 6
    Last Post: 12-15-2010, 07:32 PM
  2. show and hide div
    By creative creator in forum JavaScript
    Replies: 4
    Last Post: 05-06-2010, 09:10 AM
  3. DIV Show/Hide
    By TimFA in forum Looking for such a script or service
    Replies: 11
    Last Post: 01-09-2008, 06:50 PM
  4. show hide div (hide last open div)
    By flash in forum JavaScript
    Replies: 5
    Last Post: 12-24-2007, 08:57 PM
  5. grow p onmouseover
    By Dday76 in forum CSS
    Replies: 3
    Last Post: 08-26-2006, 03:37 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •