We Keep Coding

Footer div, it does not behave as wanted

I have a problem.
Screenprinter of webpage and code is attached.
PROBLEM:
The footer div will not vertical align 100% at the bottom of the page. As you see on image there is some space between the footer div (in red) and the bottom of the page. You also see the yellow main body div under neath the red footer div (the red footer div should cover the yellow in bottom. What can i do to achieve that the vertical align of the red footer completly at the bottom?
iMAGE OF WEBPAGE,CODING IN THE STYLE-TAG AND THE MAIN BODY OF THE "HTML" PAGETHE
Appreciate help with which content to change or add coding.

There are a couple of mistakes in your code.
First : Do not include any inline css, unless you absolutely need to give that style preference (mostly happens in case of using frameworks). Do it in a css file.
Second : target the id in your css using # symbol. like #FooterDiv. If you want it to be at the bottom, use bottom:0; not top:300;
Third : Understand the difference between position:absolute; and position:fixed;
position:fixed; will fix your div at the bottom and it will always be visible even if your content is scrollable.
position:absolute; fixes your div to the bottom of the parent that is set to position:relative; (in your case that is ). If your content in the parent div is scrollable then it will be visible when you scroll to the very bottom of your parent

You overwrite the properties. In the HTML code you set a top: 300 that overwrites the bottom:0 from the CSS file.
Make sure you put # in front of your element in the CSS file: #FooterDiv

Try adding margin-bottom: 0px; to your style.
Or padding-bottom: 0px;

Making scrollbar invisible without removing it - Windows browser

In my Angularjs app I have a dropdown menu that appears when I click on a link. To stop scrolling on the page while the menu is showing I use overflow:hidden and add the class to the body when the menu is showing:
However, using overflow:hidden also removes the vertical scrollbar completely from Windows based browsers meaning the whole page shifts to the right (by the width of the scrollbar) when the menu opens.
Can I stop the scrolling without completely removing the scrollbar? Perhaps keep the scrollbar container in place but hide the handle.
Example
Take a look at https://fancy.com/ - click on the login link and the modal should appear. The scrollbar handle disappears but the scrollbar container remains. How can I achieve this effect?

Take a look at https://fancy.com/ - click on the login link and the modal should appear. The scrollbar handle disappears but the scrollbar container remains. How can I achieve this effect?
Looks like they are simply doing this by having overflow-y: scroll set for body to begin with, and then a class fixed is added to the html element when you click “login”.
And then that class affects the main content container of the page, setting it to fixed position:
.fixed #container-wrapper {position:fixed;left:0;width:100%; /*[…]*/

Put the menu into a wrapper div and set overflow-x: and overflow-y: as you need for this div.

As I mentioned in the comments, this can easily be done with nested divs. Yes it could be done using the body tag but that is a very simple change from my code below. You can see the effect here: https://jsfiddle.net/udgj3ot5/
Note: I doubt you will be calling the function straight from the child div so another means to pointing to the element other than this will probably need to be used.
CSS
html, body {
padding:0;
margin:0;
width:100%;
height:100%;
}
div.parentDiv { /*Set this to the body if you don't want two divs*/
width:inherit;
height:inherit;
overflow-y:scroll;
}
JavaScript
function toggleChildDiv(elem) {
if (elem.style.overflow == "hidden") {
elem.style.width = "auto";
elem.style.height = "auto";
elem.style.overflow = "visible"
} else {
elem.style.width = "100%";
elem.style.height = "100%";
elem.style.overflow = "hidden"
}
}
HTML
<div class="parentDiv">
<div onclick="toggleChildDiv(this)">
YOUR PAGE CONTENT
</div>
</div>

Show div on hover issue

In this fiddle you will fill when i hover on "action" a dropdown is showed.
The problem is when we see the last item it goes below the scroll and it is not seen.
in .scrollable class i have used the position:relative;
.scrollable
{
overflow: auto;
height: 300px;
position:relative;
width:100px;
}
and the child class "drop" has the position:absolute;
i dont want to change the position:relative of .scrollable class and i want the .drop element to comeout of the scrollable on hover and .drop should not be shown below the scroll;
here is the fiddle : http://jsfiddle.net/napper7/XPxsx/15/
THanks in advance!!

here is a working code,i added a bit of js to get the current cursor position
$('.navItem').each(function() {
$(this).hover(function(e) {
$(this).find(".drops").css('left',e.pageX-20);
$(this).find(".drops").css('top',e.pageY);
}, function(e) {});
});​
http://jsfiddle.net/XPxsx/43/

.scrollable
{
position:relative;
height:300px;
width:100px;
}​
I think your best bet is to drop off the overflow behavior. As far as I know, it is not possible to display nested divs outside their parent when it has an overflow value different from visible. Ever other values clip the outside box content of some sort (either by adding a scrollbar or by hiding completely the content)
I edited a jsfiddle that does what you want but without a scrollbar :
http://jsfiddle.net/XPxsx/42/
And here is some documentation on overflow behavior :
http://www.w3.org/TR/CSS21/visufx.html
Anything out of this, will be using js to display the content in a different place DOM wise.
Also, as a more general opinion : it is good to use sass (i guess from css indentation), but even better to order your selectors in a meaning order, that would be from the most general to the most specific (such as html, then body, then div.. in your case .scrollable, then .actionTools, then .navItem..)
hope that helps

Fire CSS3 Transform from Javascript button click

I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)

With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform

From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform

How to Click a div and have it change dimensions of other divs and then change back once clicked again

I am trying to do a basic div layout and would like to use plain javascript or jquery to mimic the functionality on this page
http://octopress.org/blog/archives/
There is a content wrapper div and a left article column and a right sidebar column. There is also a skinny div in-between the left and right div that can be clicked on, once clicked on, it either closes or expands the right side div.
The page flow...
1) On page load the right side div should be open.
2)
Once you click the middle div it closes the right side div and expands the left side div's width to cover the space of the left + right side div. The middle div still is visibable, so you can click it again to expand the div back out
3) Also once you click the middle div to collaps the right side div, it collapses it, but it also puts the contents of that div, underneith the left main column div. Like the right side div I think has a float:left valuse so once the left div is expanded, it will push that div down underneith the left div
4) With right side div collapsed, you can click the middle div which is now hugging the right side border of the main div wrapper, it will then resive the left div back down small to allow the right div to fit back into place again
It probably sounds more complicated then it is to describe what I am looking to do, if you view the link though http://octopress.org/blog/archives/ it does exactly what I am talking about.
I have tried disecting the page and rebuilding just the part I am after without any luck, I would really appreciate any help in a doing this with jquery, as well as how to do the css for the divs.
I have seen some plugins that do similar work but not the same, please help if you can
Here are some screen shots of the different phases I am after...
I appears that I just need to have the javascript add and remove some css rules when the middle div is clicked.

the key for the layout is to use negative margin on the sidebar.
You could see the simplified layout example here:
http://jsfiddle.net/9FUQA/
The html
<div id="wrapper">
<div id="content">
<div class="left_column"></div>
<div class="right_column"></div>
<span class="toggle_sidebar"></span>
</div>
</div>
The CSS. First you float both column, and you set the width on the right column and a 100% nagetive margin-right to bring the right column onto the same line as the left-column.
On collapse, you remove both the float and negative margin-right on right-column, and it falls into the normal block flow.
#content {
width:500px;
margin-right:200px;
position:relative;
}
.left_column {
width:100%;
float:left;
}
.right_column {
width:160px;
padding:0 20px;
margin:0 -100% 0 0;
float:left;
}
.toggle_sidebar {
position:absolute;
top:0;
bottom:0;
right:-10px;
}
.collapse .right_column {
float: none;
width: auto;
clear: left;
margin: 0;
}
.collapse #content {
margin-right:20px;
}
.collapse .toggle_sidebar {
right: -20px;
width: 19px;
}
The JS
$(document).ready(function () {
$('.toggle_sidebar').click(function(event) {
$('#wrapper').toggleClass('collapse');
});
});
You could see the simplified layout example here:
http://jsfiddle.net/9FUQA/

Load jQuery 1.7...
$('#left-div').click(function () {
$('left-div').animate({
width: 99%,
}, 5000, function() {
});
});
$('#right-div').click(function () {
$('right-div').animate({
width: 400px,
}, 5000, function() {
});
});
Something like that. Might have to tweak it for your css though.