w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
How to make CSS height: 100% take effect in a varying height container?
if you tell the tag's parent tags (including html and body tags) to also be 100% height that should fix your issue. I added max-height as an option, I did not know if you wanted the container to run the length of the whole screen. http://jsfiddle.net/brandonbabb/SL3FC/ html, body { height:100% } .outer { border: 1px solid black; height: 100%; max-height: 500px } .col-left { float: left; background: cyan; width: 80%; height: 100%; } .col-right { float: left; width: 15%; background: yellow; height: 100%; } .clear { clear: both; }

Categories : HTML

What do I have to do to get a Border Layout to have the West container full height of the viewport?
You can also use the weight property to give precedence to a region—for example, giving precedence to the West region over the North region. All these changes mean that you should not often need nesting with border layout, speeding up rendering of components that use that layout. Ext.define('MyApp.view.MainViewport', { extend: 'Ext.container.Viewport', layout: { type: 'border' }, initComponent: function() { var me = this; Ext.applyIf(me, { items: [ { xtype: 'panel', region: 'west', weight: -1, width: 150, title: 'My Panel' }, { xtype: 'panel',

Categories : Extjs

calculate and set the height for some div (initial settings). When the height of the browser window is changed --> change the height for div
is that what you are looking for? api.jquery.com jQuery(document).ready(function () { $(window).resize(function() { var height = document.documentElement.clientHeight - 500; if (height < 135) { height = 135; } document.getElementById('left_space').style.height = height + 'px'; jQuery(window).resize(function () { var height = document.documentElement.clientHeight - 500; if (height < 135) { height = 135; } document.getElementById('left_space').style.height = height + 'px'; }); }); });

Categories : Javascript

jQuery - get tallest image's height, apply other images' height difference to top margin
Try this: function createGrid() { var imgs = $('.hlist figure > img'); var maxImgHeight = 0; imgs.each(function () { var imgHeight = $(this).outerHeight(); maxImgHeight = maxImgHeight > imgHeight ? maxImgHeight : imgHeight; }); imgs.each(function () { var margin = maxImgHeight > $(this).outerHeight() ? (maxImgHeight - $(this).outerHeight()) : 0; $(this).css("margin-top", (margin + "px")); }); } The first each loop looks for the tallest height and stores it in maxImgHeight, as you originally had planned. The second each loop calculates and applies the margin for each image. The conditional assignment will cause the margin-top for the tallest image to be 0.

Categories : Javascript

How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript?
The correct way of ending <div> tag is by using </div>. Try this code- <body> <div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;"> <div style="float: left; height: 50px; width: 200px; background-color: green; position: fixed;"></div> <div style="float: left; height: 100%; width: 200px; background-color: red;"></div> <div style="float: left; bottom: 0px; left:0px; position: fixed; height: 50px; width: 200px; background-color: blue;"></div> </div> </body>

Categories : Javascript

Create three divs such that the top and bottom ones have fixed height, and the middle one has dynamic height?
If i understand you request you need to use wrap div: http://www.cssstickyfooter.com/using-sticky-footer-code.html

Categories : HTML

TD cell with css decimal percent height gets incorrect actual height in Chrome
This might be a bug in Webkit based Browsers. But you unnecessarily confuse the table algorithm ...! Why would or should you set the height of each TD explicitly when the table algorithm will do it by itself? So the easiest way to avoid the problem is to simply set no height for the TDs. See the updated jsFiddle: http://jsfiddle.net/RUwLH/4/ ... From a semantically point of view your code is highly questionable, and giving each of the elements the same class is also very inefficient CSS (hope you just did it for the Fiddle). After all these years tables are still a "special problem" ...! So only use them for tabular data and nothing else! HTML and CSS provide a lot of other possibilities which are even more semantically!

Categories : HTML

whats wrong with this code? im trying to change the height of each section to the height of window
Seems like a strange way to do that ? $(window).on('resize load', function() { $('#home, #about, #skills').height( $(this).height() ); }); You have to update the variables when the window changes size, i.e. inside the resize function EDIT: You'll also need a DOM ready handler, and window.onload isn't always triggered when doing it that way, so just do the same thing on DOM ready, like so : $(function() { $('#home, #about, #skills').height( $(window).height() ); $(window).on('resize', function() { $('#home, #about, #skills').height( $(this).height() ); }); }); FIDDLE

Categories : Javascript

issue with setting min-height for a div before website load based on device height
in order to use a percentage height, the parent must have a set height (either in pixels or %): body,html{ height: 100%; } .container-fluid{ background:#000000; width:100px; min-height:50%; } Fiddle

Categories : Javascript

Display 3-column layout with variable-height content in fixed height box?
Using just CSS, columns appear to be the best way. demo HTML Each tweet is just a pair of <strong> usernames, and <p> tweet bodies. Change these to whatever you like, but make sure to change the CSS to match. <div class="threecol"> <strong>@someone</strong> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p> <strong>@nextuser</strong> <p>...</p> </div> CSS This CSS is for the container. Other than your specificiations (width, height, hidden overflow) it just adds the column settings. .threecol { height: 200px; width: 600px; margin: auto; overflow: hidden; -webkit-column-count: 3; -moz-column-count: 3; col

Categories : HTML

Responsively changing an elements height to the view port height in pixels
My solution uses a combination of simple jQuery and some basic css declarations, the jQuery is cross browser as far as I can tell however I have noticed the CSS does not play well with IE<9. If anyone has any other solutions/more efficient ideas let me know! (yes I realize this is not incredibly memory efficient as it runs a loop, but so far my tests have not deemed it noticeable) The CSS can be seen in the jsbin example, it is pretty simple. Keep in mind this solution should only be used if percentages will not work for your height. function ChangeElementHeight(element){ var Element = $(element);//this is the elements whos height needs changes var ElementHeight = Element.css('height');//the current height of the element var ViewportHeight = $(window).height()+"px";//le w

Categories : Javascript

One div fixed height and another div remaining vertical space to make it 100% of window height
Do you want to this apply this css it matching your requirement body, html { min-height: 100%; } #container { margin: 0 auto; height: 400px; width: 400px; padding: 0px; border:1px solid #ccc; } #div-a { height: 16%; width: 96%; float: left; margin: 2%; background: #ddd888; } #div-b { float: left; min-height: 78%; width: 46%; margin: 0% 2% 2% 2%; background: #bbb; } #div-c { float: left; min-height: 78%; width: 48%; margin: 0% 2% 2% 0%; background: #000; } and html its help full for you <div id="container"> <div id="div-a"></div> <div id="div-b"></div> <div id="div-c"></div> </div>

Categories : HTML

Why doesn't $(window).height() and $(document).height() equivalency work well in Firefox?
$(window).height(); will return the height of the visible window. $(document).height(); will return the height of the entire document, not just the visible part. Working Example That said, I don't think your specific issue is with the if statement... I tested it and it seems to work equally well in Firefox, Chrome, and IE9. Working Example 2 $(window).scroll(function () { if ($(window).scrollTop() +1 >= $(document).height() - $(window).height()) { $('body').css('background','red'); }else{ $('body').css('background','none'); } });

Categories : Javascript

css floating element increase parent height but sibling with 100% height not working
Jquery solution, here's a Fiddle $(function() { var fHgt = $('#float').outerHeight(); $('#fill').css({ height: fHgt }); }); and here's a CSS solution #container { display: table; width: 500px; background-color: yellow; } #float { display: table-cell; width: 20%; background-color: green; } #fill { display: table-cell; width: 80%; overflow: hidden; background-color: red; }

Categories : HTML

HTML table with 100% of height, and the rows equally divided in height. How to make it possible?
You can position the table absolute. For example, give it the class "full-height", and then add the following css: table.full-height { position: absolute; bottom: 0; top: 0; left: 0; right: 0; } This will expand the table to the full height!

Categories : CSS

Center div in parent with only min-height, and child may without height & with relative position
Use the display: table; and display: table-cell; properties. The outer DIV will need to have display: table; and the inner DIV display: table-cell; along with vertical-align: middle;. Now you will be mimicing the default display of a td. CSS .parent { min-height: 100%; display: table; } .child { display: table-cell; vertical-align: middle; } HTML <div class="parent"> <div class="child">child</div> </div> This question has been asked often. A simple search here on SO or Google will get you plenting of results. Vertically Aligning Divs Align vertically using CSS 3

Categories : CSS

Find a table row height and apply padding to a div based on row's height
Current problems: You have multiple elements using the same ID's. ID's should always be unique. getElementById('#tr3') is invalid. getElementById('.main') is also invalid. You can't set marginTop on an element which is displayed as a table-cell. You're not actually ever calling your function (and judging by comments you want it on page load) Solutions (ordered as above): Change all duplicate ID's in your mark-up to be unique. This should be getElementById('tr3'). Replace the class main with an ID main and use getElementById('main'). I don't really understand what you're trying to achieve with this part (at the moment anyway)... There's no need for the seperate function if you want it on load, just use window.onload = function().. This will solve your load and padding issues (

Categories : Javascript

Allow GridView cell's height to expand but maintain same height for all cells
Personally, when i want to keep the same height for Gridview items, i set Maxlines to 1 for Child TextView and i set a fixed height for child Container. in your exemple : add android:maxLines="1" to tvCaption add android:minHeight="X dip" and android:layout_height="X dip" to GridItem Replace X with a sufficient value.

Categories : Android

How to return original height to dynamic-height content with Javascript?
Could be done using data(): http://jsfiddle.net/sWf9J/2/ function toggleModule(module){ var selectModule = $('div.module[data-module=' + module + ']'); if(!selectModule.data('originalHeight')) selectModule.data('originalHeight',selectModule.height()); if(selectModule.hasClass('open')){ selectModule.animate({'height':'40px'},200); selectModule.removeClass('open').addClass('closed'); } else if(selectModule.hasClass('closed')){ selectModule.animate({'height':selectModule.data('originalHeight')},200); selectModule.removeClass('closed').addClass('open'); } }

Categories : Jquery

force div height to nearest multiple of the background image height
Here's asolution to your problem. It will expand the content container to the next height that is a multiple of 300. Plain JavaScript version var e = document.getElementById('content'); var height = e.clientHeight; var newHeight = 300 * Math.ceil(height / 300); e.setAttribute('style', 'height: ' + newHeight + 'px;'); Demo Try before buy jQuery version var e = $('#content'); e.css('height', 300 * Math.ceil(e.height() / 300)); Demo Try before buy

Categories : Javascript

Can I grab the height of an unrelated element that has a dynamic height with Sass?
Sorry, but I think is not possible to get a element height with SASS (i'm not an expert in sass, but I couldn't find any option). I recommend you to do this with JavaScript: http://jsfiddle.net/9DcYn/2/ window.onload = fixHeight(); function fixHeight() { var divh = document.getElementById('leftdiv').offsetHeight; var divhnum = new Number(divh); var setheight = (divhnum - 325); document.getElementById('rightdiv').style.height = setheight + 'px'; } Hope this will help you!

Categories : CSS

line-height vs cursor height issue in Textarea in chrome
I have tried this code in Chrome and it was successful. Now you implement and check your code. <TEXTAREA style="font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height: 10px; height: 150px;"></TEXTAREA>

Categories : Jquery

Stretch child div height to fill parent that has dynamic height
The solution is to use display: table-cell to bring those elements inline instead of using display: inline-block or float: left. div#container { padding:20px; background:#F1F1F1 } .content { width:150px; background:#ddd; padding:10px; display:table-cell; vertical-align:top; } .text { font-family: 12px Tahoma, Geneva, sans-serif; color:#555; } Working Fiddle

Categories : CSS

Block with 100% height on both viewport and page
The most common way is to do this: html, body { height:100%; } Then set any elements which are to also fill the vertical space to height:100%. Note: For this to work the item needs to be block-level and have content, even a &nsbp; would do and don't forget that padding adds to the height of the element so be sure to compensate accordingly if you absolutely have to have padding on that element.

Categories : HTML

Make an element at least the height of the viewport
Try $(document).ready(function () { //make sections at least as tall as the viewport var $sections = $('section').each(function(){ var $this = $(this); $this.data('oheight', $this.height()) }); $(window).resize(function(){ var winheight = $(window).height(); $('section').each(function(){ var $this = $(this), oheight = $this.data('oheight') || $this.height(); $this.css('height', oheight <= winheight ? winheight : oheight); //remove this $this.find('.height').text(oheight <= winheight ? winheight : oheight) }) }).resize() }); Demo: Fiddle

Categories : Javascript

How to define layout element height as screen height
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:layout_width="fill_parent"

Categories : Android

Android - Bitmap Height = Textview Text Height?
Try using ImageSpan(resizedbitmap, ImageSpan.ALIGN_BASELINE) instead of ImageSpan(resizedbitmap) The default alignment of an ImageSpan is ALIGN_BOTTOM.

Categories : Android

children height 100% without setting parent fixed height
You can do this by using absolutely positioning the #buttons div within the parent. For this, first declare relative positioning on the parent #container { position:relative; min-height:200px;/* if you can reliably set a minimum height */ } #buttons { position:absolute; height:100%; width:150px; } #content { margin-left:150px; } Because the absolutely positioned button elements are now out of the page flow, you can add a margin equal to the width of the #buttons div to the #content div so that it still is in the right place. See the updated fiddle: http://jsfiddle.net/kVcds/3/

Categories : HTML

Javascript / jQuery - Is there a performance difference between height() and .css({'height'})
Read the Source, Luke. jQuery.prototype.height: //snipped to end: return value === undefined ? // Get width or height on the element, requesting but not forcing parseFloat jQuery.css( elem, type, extra ) : // Set width or height on the element jQuery.style( elem, type, value, extra ); jQuery.prototype.css: return value !== undefined ? jQuery.style( elem, name, value ) : jQuery.css( elem, name ); The difference between the two is what's done before going over the matched elements, and that extra parameter that's passed in .height. What could rationally cause a big slowdown? I've no real idea. Maybe it has to do with optimizations a js engine can do in one, but not the other. More likely than not, the perf test is bad (testing these things correctly is very ha

Categories : Javascript

jQuery Error: Object has no method 'height', this.height()
this is a DOM element. You want a jQuery object. Try $(this).height() : function Test(){ $("#list li").each(function(){ var h = $(this).height() + 50; $(this).height(h); }); }

Categories : Jquery

Find out the height of an element would have to animate max-height properly
My current Workaround: The #stuff element contains two nested divs: <div id="stuff"> <div id="a">Lorem Ipsum</div> <div id="b">Lorem Ipsum</div> </div> I am now using $('#a').outerWidth() + $('#b').outerWidth() to calculate the height I need. (cHeight in Ross' answer) Better approach: An option might be to duplicate the full #stuff div make it display none remove the max-height property (max-height: auto) then use `cHeight = $('#stuff-duplicate').height()'

Categories : Jquery

How to make right side bar height go along with the height of the main content
your container seems to be fine and has a auto height so what is the problem here you see the fiddle http://jsfiddle.net/cancerian73/ZpZCD/ .container {background-color:#fc0;}

Categories : HTML

Fill remaining height in such a way as height: 100% works inside
You can use techniques such as defining top, left, bottom and right at the same time. jsFiddle Demo Main CSS: .wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: yellow; } .content { position: absolute; bottom: 0; left: 0; top: 45px; right: 0; background: red; }

Categories : Firefox

Fill remaining height in fixed-height css table
Why does it need to be a table? Can't you just let the container hide the overflow? html <div class="container"> <div class="top"> Top, green area </div> <div class="bottom"> Bottom, blue area </div> </div> css .container { width: 250px; height: 162px; overflow: hidden; background: lightblue; } .top { background: lightgreen; } http://jsfiddle.net/sXHry/1/ and http://jsfiddle.net/sXHry/2/ (less content) I suspect i might be missing something, looking forward to being enlightened ;)

Categories : HTML

how to make the min-height of body equal to screen.height
Alright, since that didn't work... You have an html element style found in your div id "center_wrapper" it is contained within div id "title". Change the element style of min-height to 450 as shown below: <fieldset id="center_wrapper" style="min-height: 450px;"> That should do the trick...

Categories : Javascript

jQuery Set height of 2 independent lists first list li the same height as second li
http://jsfiddle.net/EvspT/ $(document).ready(function() { $('.extraQuestionName li').each(function(i) { $('.extraQuestionValue li').eq(i).height($(this).height()); }); }); The each() function has an index parameter. This loops through the li elements in the first list, and uses eq() to find the item with the same index in the second list, then set the height.

Categories : Jquery

WooThemes - Flexslider: Height of flex-viewport
Basically flexslider doesn't have a feature for fixed height according to its document. But I found some code to solve this problem here in the official repository by calculating the tallest height to supply the height of slide. $(document).ready(function() { fixFlexsliderHeight(); }); $(window).load(function() { fixFlexsliderHeight(); }); $(window).resize(function() { fixFlexsliderHeight(); }); function fixFlexsliderHeight() { // Set fixed height based on the tallest slide $('.flexslider').each(function(){ var sliderHeight = 0; $(this).find('.slides > li').each(function(){ slideHeight = $(this).height(); if (sliderHeight < slideHeight) { sliderHeight = slideHeight; } }); $(thi

Categories : Jquery

Content Height Based On Browser Viewport
$(document).ready(pageSizer()); $(window).resize(pageSizer()); change to $(document).ready(pageSizer); $(window).resize(pageSizer); You are invoking your functions instead of passing them as a reference which jQuery expects.

Categories : Javascript

How to set fixed height to Viewport and enable browser scroll in GXT 2.x?
On solution would be to extend FitLayout to avoid to recompute the height on resize : public class MyFitLayout extends FitLayout { protected void setItemSize(Component item, Size size) { if (item != null && item.isRendered()) { size.width -= getSideMargins(item); //size.height -= item.el().getMargins("tb"); setSize(item, size.width, size.height); } } }

Categories : Misc

Full viewport height image with parallax scrolling
Don't forget to call refresh() at the end of imageFit. If you include https://gist.github.com/Prinzhorn/5796546 as well, it would be as simple as var imageFit = function() { windowHeight = $(window).height(); $('.parallax').css('min-height', windowHeight).refresh(); };

Categories : Javascript



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.