jQuery - Find Remaining Height of HTML Element and apply Background Color to it -


how can find remaining height of #home-banner div , apply background color it?

description: want find height of #home-banner , apply red background color it.

fiddle

some key points have observed below code...

why getting scrollbar though using 100% height body , html? jquery cannot calculate box model or other way it?

  • .navbar -- actaul heihgt is: 85px, showing 84px (ignoring border-bottom 1px?)
  • .home-logo -- actaul heihgt is: 190px, showing 90px (ignoring margin top 50px , bottom 50px?)
  • #login-form -- actaul heihgt is: 240px, showing 200px (ignoring padding top 20px , bottom 20px?)
  • .s-info -- actaul heihgt is: 65px, showing 200px (ignoring padding top 10px , bottom 10px?)
  • #footer -- actaul heihgt is: 51px, element showing correct height:                       ps: have removed, padding , margin , inside element

html:

<div class="navbar">navbar</div>  <div id="home-content">      <div class="container">          <div class="home-logo">logo placeholder</div>          <div id="login-form">             <p>login form</p>             <p>lorem</p>             <p>ipsum</p>             <p>dolar</p>             <p>sit</p>             <p>amet</p>         </div>          <div id="home-banner">             banner height (excluding .navbar, .home-logo, #login-form, #footer, .s-info)         </div>      </div>      <div class="s-info"><p>some information</p></div>      <div id="footer">         <h1>footer</h1>         <p>dummy content</p>     </div>  </div>

jquery:

$(document).ready(sizecontent);  $(window).resize(sizecontent);  function sizecontent() {     var newheight = $("html").height() - $(".navbar").height() - $(".home-logo").height() - $("#login-form").height() - $(".s-info").height() - $("#footer").height() + "px";      $("#home-banner").css("height", newheight );      alert('navbar height:  ' + $(".navbar").height()); // 84     alert('home logo height:  ' + $(".home-logo").height()); // 93     alert('login form height:  ' + $("#login-form").height()); // 200     alert('banner height:  ' + $("#home-banner").height()); // 442     alert('s info height:  ' + $(".s-info").height()); // 45     alert('footer height:  ' + $("#footer").height());  // 51      alert('html height:  ' + $("html").height()); }

css:

html,body{height:100%;padding:0;margin:0;font-family:verdana;font-size:14px;} .navbar{height:84px;background:yellow;border:0;border-bottom:1px solid #000;} .home-logo{background:#999;margin:50px 0;height:90px;} #login-form{padding:20px 0;background:#ccc;} .s-info{padding:10px 0;background:#666;} #footer{padding:0;background:#eee;} #footer p{margin:0;padding:0;} #footer h1{padding:0;margin:0;} #home-banner{background:red;text-align:center;color:#fff;font-weight:bold;}

hurray... found solution....

thanks jquery api...

here working code:

$(document).ready(sizecontent);  $(window).resize(sizecontent);  function sizecontent() {     var newheight = $("html").outerheight(true) - $(".navbar").outerheight(true) - $(".home-logo").outerheight(true) - $("#login-form").outerheight(true) - $(".s-info").outerheight(true) - $("#footer").outerheight(true) + "px";      $("#home-banner").css("height", newheight );      alert('navbar height:  ' + $(".navbar").outerheight(true)); // 84     alert('home logo height:  ' + $(".home-logo").outerheight(true)); // 93     alert('login form height:  ' + $("#login-form").outerheight(true)); // 200     alert('banner height:  ' + $("#home-banner").outerheight(true)); // 442     alert('s info height:  ' + $(".s-info").outerheight(true)); // 45     alert('footer height:  ' + $("#footer").outerheight(true));  // 51      alert('html height:  ' + $("html").outerheight(true)); }

Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

php - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more