Increase a Div Size on Click with CSS Alone

Increase a div size on click with css alone

One potential solution would be to add a tabindex attribute to the div, like so:

<div id="sample" tabindex="0"></div>

Now, you can use :focus in your CSS:

#sample:focus {
   width: 200px;
}

Here's a jsFiddle to show it in action.

Unfortunately, when the div is blurred, the width will go back. Update: check out Shaggy's Answer for a clever solution to retaining the focus effect.

If you need the width to stay after the div is blurred, you will likely have to venture into JavaScript/jQuery, or just add an onclick attribute.

<div id="sample" onclick="this.style.width = '200px';"></div>

Change div height on button click

Just a silly mistake use quote('') in '200px'

 <html>
  <head>    
  </head>

<body >
    <button type="button" onClick = "document.getElementById('chartdiv').style.height = '200px';">Click Me!</button>
    <div id="chartdiv" style="width: 100%; height: 50px; background-color:#E8EDF2"></div>
</body>

Change Div Width Along on load and resize

You need to recalculate the dimension.

$( window ).resize(function(){
    width = (($(window).width())-100);
    height = (($(window).height())-100);
    $("#wrapper").width( width );
    $("#wrapper").height( height );
});

I can't change the width of a div in css...?

Try this

Add following code to line 291

.index-post {
list-style: none;
clear: both;
width: 90% !important; /*this*/
height: 70vw;
margin: 5% 1%;
padding: 1vh 1vw;
}

Just quick tips:

You should not give height in small device to index-post make in height auto, as height will adjust according to content
Your markup is wrong li should not be used without ul

How do I change Style Width of Div Element on Page load using JavaScript or JQuery?

Approach 1 (CSS Animation):

You can achieve this effect using a CSS animation alone.

This animation animates the width of #ProgressBarPercentage from 0 to 100%.

Working Example:

#ProgressBar {  margin-top: 30px;  height: 30px;  padding: 15px;  background-color: rgb(0, 0, 0);}
#ProgressBarPercentage { height: 30px; background-color: rgb(255, 0, 0); animation: loadProgressBar 4s linear;}
@keyframes loadProgressBar {
   0% {width: 0;} 100% {width: 100%;}}

<div id="ProgressBar"><div id="ProgressBarPercentage"></div></div>

How do I force a DIV block to extend to the bottom of a page even if it has no content?

Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:

html,body { height:100%; }

You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.

This site has some excellent examples:

http://www.brunildo.org/test/html_body_0.html

http://www.brunildo.org/test/html_body_11b.html

http://www.brunildo.org/test/index.html

I also recommend going to http://quirksmode.org/

Keep ratio of a div when the font size changes

You need to re-calculate the div width, height and line-height when you change its font-size. By updating just its font-size alone, nothing else will be changed.

$('button').on('click', function() {
  var div = $('#mydiv');

  // These methods return the value unit-less, so they'll be integers
  // if defined.
  var currentWidth = div.width();
  var currentHeight = div.height();

  // Parsing the values to make sure you got integers.
  var currentFontSize = parseInt(div.css('font-size'), 10);
  var currentLineHeight = parseInt(div.css('line-height'), 10);
  var value = parseInt($('#input').val(), 10);

  var newFontSize = value + 'px';

  // Here we keep the ratio between width and height, considering
  // the current and new font-size.
  var newWidth = ((currentWidth * value) / currentFontSize) + 'px';
  var newHeight = ((currentHeight * value) / currentFontSize) + 'px';
  var newLineHeight = ((currentLineHeight * value) / currentFontSize) + 'px';

  // Applying all the styles at once.
  div.css({
    fontSize: newFontSize,
    width: newWidth,
    height: newHeight,
    lineHeight: newLineHeight
  });
});

Demo

Increase a Div Size on Click with CSS Alone