Develop Reference

HTML5, CSS Transitions & JS Triggers

To give a basic idea of what I hope to accomplish;
I currently have a site live at:
http://shiinachi.com
As it is, the body element is changed using javascript when clicking between the home and email tab.
However, I hope to redo this. I aim to have the width of the body expand when a button is clicked, so the body "drops down" to show the menu in question.
I have experimented using an onload function to trigger a css class;
function bodyloaderS() { classList.add("body-loader")
The css of the body is set to a width of 0 by default, then I attempted to use the body-loader class in question to adjust the width.
body-section.body-loader{ width: 745px; }
I then called the transition onload to test it. However...
The results were less than successful.
Is there a better way I can go about doing this?
Edit:
Here's a dump of the code being used
Body tag;
<div id="body-section" onload="bodyloaderS(document.body-section)">
<h1>Home</h1>
<p>Hello.<br><br>Temp</p> </div>
Relevant CSS;
#body-section{
position: relative;
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
height: 350px;
width: 0px;
transition: width 2s;
border-color: #ffffff;
border-style: solid;
border-width: 1px 1px 3px 3px;
border-radius: 3px 9px 3px 0px;
top: -752px;
left: 325px;
background-color: #222222;
}
#body-section.body-loader{
width: 745px;
}
The script in use;
<script>
function bodyloaderS() { classList.add("body-loader")
}
</script>

If you also add a target element in your function it will work, e.g.
function bodyloaderS() {
document.querySelector('#body-section').classList.add("body-loader");
}
Also, you might want to consider start using event listeners instead
var thebody = document.querySelector('#body-section');
thebody.addEventListener('load', function() {
this.classList.add("body-loader");
})
Updated based on a comment and a question edit
The onload event doesn't work on div elements.
Here is a suggestion using a DOMContentLoaded listener
document.addEventListener("DOMContentLoaded", function() {
var thebody = document.querySelector('#body-section');
thebody.classList.add("body-loader");
});
#body-section {
position: relative;
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
height: 350px;
width: 0px;
transition: width 2s;
border-color: #ffffff;
border-style: solid;
border-width: 1px 1px 3px 3px;
border-radius: 3px 9px 3px 0px;
/*
top: -752px;
left: 325px;
background-color: #222222;
*/
}
#body-section.body-loader {
width: 745px;
}
<div id="body-section">
<h1>Home</h1>
<p>Hello.<br><br>Temp</p>
</div>

Position div at bottom of containing div

I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.
HTML:
<div class='container'>
<aside>
<img id="user-pic" src="images/blank-user.jpg">
#User_Name
<div id="trend"><h6>TRENDING</h6></div>
</aside>
<section class="main">
</section>
</div>
CSS:
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
}
.container{
margin-top: 80px;
}
section{
margin: auto;
width: 400px;
clear: left;
top: 100px;
}
.tweet{
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.
It appears that the jquery aspect of the code might have something to do with it so here it is.
UPDATE: removed JQuery because it was not relevant.

Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.
Update:
And to the child elements for which you want to change position using left add position:absolute
P.S : Need to add relative for the div that contains #dT and absolute for #dT
#parentofdT
{
position:relative;
}
#dT
{
position:absolute
}

Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/
Good luck.

You should add position: relative or position: absolute property to make the bottom: 0px work
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
position: relative;
}

use position property like position absolute or position relative so as to work with top, left,right,bottom properties

How to apply :hover on :after to certain div in CSS

Made an in-depth search and learnt on how to create some stylish custom created textboxes to achieve a better graphic look. I have two issues to complete this mesh-up of textboxes so that they serve a total functioning of a common textbox.
I'm unable to execute the :focus on the parent div container, although the code is perfectly fine in CSS because when going by Inspect Element (Chrome), Force Element to> :focus it does what I want but in the real-time it never does nevertheless clicking on its children or itself.
I want to add the :hover effect on the child div container (the left black coloured div) in which it'll expand the :after transition for a certain amount of pixels (assuming +20px/+30px).
The desired and the final result should look like in the picture below:
#submitForm {
border:2px grey inset;
border-radius:10px;
display:table;
margin: 10px auto 0;
height: 500px;
position:relative;
width: 800px;
}
#submitForm #btnSend {
bottom:20px;
display:block;
height: 50px;
position:absolute;
right: 20px;
width:100px;
}
#submitForm .highlights {
border-bottom:5px solid #2E8DEF;
border-radius:15px;
float:left;
height: 45px;
margin-top: 40px;
margin-left:40px;
width: 520px;
}
#submitForm .highlights:focus {
border-bottom:none;
outline: 0;
-webkit-box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
-moz-box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
}
#submitForm .tags, #submitForm .textarea {
float:left;
font-size: 25px;
font-family: calibri;
font-style: italic;
height: 40px;
position:absolute;
text-align: center;
}
#submitForm .tags {
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
background: #333333;
color: #2E8DEF;
height:40px;
padding-top:5px;
text-align: center;
width: 120px;
z-index:3;
}
#submitForm .tags:after {
background: #333333;
content:" ";
display: block;
left: 90px;
height: 100%;
position:absolute;
top: 0;
width: 30%;
z-index:-1;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
#submitForm .tags:hover {
text-shadow: #2E8DEF 0px 0px 5px;
}
#submitForm .tags:after:hover {
/* Code for expanding the skewed .tags:after */
}
#submitForm .textarea {
background-color:#F0F0F0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: 120px;
overflow: hidden;
padding-top: 5px;
width: 400px;
appearance: field;
-moz-appearance: field;
-webkit-appearance: field;
}
#submitForm .textarea:focus {
outline:0;
}
<forms id='submitForm'>
<div id='formName' class='highlights'>
<div class='tags'>Name</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formSurname' class='highlights'>
<div class='tags'>Surname</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formAddress'class='highlights'>
<div class='tags'>Address</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formCity' class='highlights'>
<div class='tags'>City</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formPhone' class='highlights'>
<div class='tags'>Phone</div>
<div class='textarea' contenteditable></div>
</div>
<button id="btnSend" type="button" onclick='submitListOfProducts()'>Submit</button>
</forms>
And, the link to JS fiddle:
http://jsfiddle.net/xa3nwhj4/1/

Vishal provided the reason for the hover effect not working - this is my addition to it:
- focus only fires on the textarea, but you want to change the style of the parent div
so lets change the css entry for #submitForm .highlights:focus to #submitForm .focusedhighlights
and then let jquery do the magic:
$(".textarea").focus(function(){ //event handler, to fire when a textarea gets focused
$(this).parent().toggleClass("focusedhighlights") //toggle class on parent element for highlight effect
});
$(".textarea").focusout(function(){ //event handler to fire, when textarea gets unfocused
$(this).parent().toggleClass("focusedhighlights") // toggle class to remove highlight effect
});
see working fiddle here: http://jsfiddle.net/vo59rgnd/2/

The :focus is not working because you are adding focus to .highlights which is a <div> and not input element.
And to expand the onhover. The CSS should be like this
#submitForm .tags:hover {
text-shadow: #2E8DEF 0px 0px 5px;
width:160px;
}
#submitForm .tags:hover:after {
left:130px;
}
See the demo here : http://jsfiddle.net/Lrdmuzu6/

Appending content in a <div> with limited sizes

In my project, I have this <div> which receives, via jquery function, the content read from several pages and display them as a popup window:
<div id="popup">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
The css associated to this is the following:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
width: 1000px;
height: 900px;
max-width: 1500px;
max-height: 1000px;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
background-color: #FFFFFF;
border-style: solid;
border-color: #E0E0E0;
text-decoration-color: #E0E0E0;
font: 24px sans-serif;
overflow: auto;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
and the content is appended in this <div> through this jquery code:
<script>
$('document').ready(function(){
$('#popup').draggable({
cointainment: "#container"
});
$('#popup').resizable({
cointainment: "#container"
});
$('#popup').hide();
$('#button').click(function(){
$('#popup').hide();
});
$('a').click(function(e){
if($(this).attr('href') != '<c:out value="${pageContext.request.contextPath}/acesso/logout.html"/>') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#popup').show();
});
}
});
});
</script>
My problem is the content attached to <div> being displayed ou of the boundaries of the popup, like this:
Someone knows how to solve this?
UPDATE
new code for the css file:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
max-width: 85%;
max-height: 85%;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
overflow: scroll-y;
}

It depends on how you want to solve it:
Make the popup scroll:
#popup {
overflow:scroll-y;
}
The ideal thing is to make the popup fit the content. But the problem is, that size depends on what is generated inside the popup. If it is predictable, maybe you can define some styles to force the geerated stuff to use relative (%) sizes, in this case your problem is solved. I mean, kind of:
#popup {
position:relative;
display:block;
}
#popup > div {
width: 100% !important;
height: 100% !important;
}
This will work if inside #popup there's one div with the rest of the contents. Find out what's inside to make this fit your needs. You can overwrite styles with the !important tag.
If, on the other hand, you really have no idea what will be inside the popup, or everytime is different, you can detect the size of what's inside via javascript, and adjust #popup accordingly. Take a look at clientHeight and clientWidth properties of DOM elements.

Content appear outside the div

I recently tried out the div with different shape like triangle trapezoid etc.
HTML:
<div class="triangle">HI nice to meet you guys</div>
CSS
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
Previously, the content appears properly when the div is a square (height and width are 100px).
When I style the div to look like a triangle, then the content oveflows.
How can I make this one as proportional in order to appear properly inside the div.
See fiddle: http://jsfiddle.net/7qbGX/2/
Any suggestion would be great.

try this: LINK
.triangle{
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
float: left;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.triangle p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}

Your Height and width is 0. You won't fit any text into it. It will either overflow or you can set overflow to "hidden", but than you will not see anything cos the div have the size 0.

your div is invisible to see in your actual div try to give background-color to that div.
[see demo]http://jsfiddle.net/salwenikhil0724/7qbGX/6/
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
background-color:red;
}
.triangle p {
text-align: center;
top: 40px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}

This is for displayed text properly, you need to mentioned width property as follows:-
<div style="width: 10em; word-wrap: break-word;">
Some longer than expected text with antidisestablishmentarianism
</div>
for Horizontal scroll you can put overflow-x:hidden its up to you dear.