We Keep Coding

correct algorithm for buttons to toggle

I have two buttons, Edit_1 and Edit_2. By clicking on each one of them, an "expansion" div should appear right below the button which has been clicked.
In the function that I have written, if the display property of the "expansion" div is 'block' under edit_1 and one clicks edit_2, the widow will be displaced under edit_2. But if I click on edit_1 itself, the 'expansion' window will not disappear.
I could easily solve the problem by adding another "expansion" window, but as the 'edit' tags will increase, I need to move this 'one' expansion window among them correctly. I would be grateful if you kindly help me with this;
HTML:
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
<div id="expansion"></div>
</div>
CSS:
*{
margin:0px;
padding:0px;}
body {
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;}
#container{
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;}
#section_1{
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;}
#section_2{
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;}
#edit_1{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background:url(../images/edit.fw.png) no-repeat;}
#edit_2{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background:url(../images/edit.fw.png) no-repeat;}
#expansion{
width:200px;
height:120px;
background-color:#FFFFFF;
position:absolute;
z-index:3;
margin-left:600px;
top:0px;
padding-top: 40px;
padding-left:10px;
padding-right:10px;
border-top:solid 2px #D24726;
display:none;}
javascript:
function edit(clicked_edit){
var click=document.getElementById('expansion').style.display;
if (click=='block'){ /* in any case, if the display property is block, it turns it to none*/
document.getElementById('expansion').style.display='none';
}
var tp=document.getElementById('section_'+clicked_edit).offsetTop;
document.getElementById('expansion').style.top=tp+'px';
document.getElementById('expansion').style.display='block';
}
JSFiddle

JQuery Approach
you may find great use looking at this JSFiddle that uses a nice toggle effect.
the JQuery is:
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
I'm pretty sure you could make use of this in your project :)
Javascript Approach
Have a look at this one - it's not using JQuery and should be suitable for you :)
It was found here:
Another Approach
this demo is also another way of showing/hiding the div on press., so there's pleanty of options to choose from! :)
<script>
function showhide()
{
var div = document.getElementById("newpost");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>

CSS box-shadow overflowing elements

I have a simple jsfiddle example in here http://jsfiddle.net/RQ4F2/1/
The blu box-shadow is actually overflowing, covering a little part of the elements , is it possible to make it not ?
So that elements shows a full white background inside of themselfs?

Instead of setting box-shadow for the spans, you should set box-shadow for some pseudo-element of the span (such as the :before). That way you can put the box-shadow to the back by using z-index, the spans will be on top and cover the box-shadow:
span {
width:100px;
padding:20px;
float:left;
border-radius:100%;
height:100px;
background:white;
position:relative;
}
span:before {
content:'';
position:absolute;
width:100%;
height:100%;
border-radius:50%;
left:0; top:0;
background:white;
box-shadow:0px 0px 20px 4px blue;
z-index:-1;
}
Demo.

I'm guessing that adding a margin isn't what you're after and you'd like to have the circles touching but without the fade overlapping.
To do this you could have another inner span, positioned absolute with the box shadow overridden:
<span><span class="in"> </span></span>
span.in{
position:absolute;
box-shadow:inset 0px 0px 0px 0px;
/*compensate for outer span's padding*/
margin-left:-20px; margin-top:-20px;
}

I updated you CSS by adding margin: 10px to the span tag. To get more space between the elements, please raise the margin.
You may find the updated jsfiddle here

Centring the whole web page (on a really wide site)?

I have a web page that is wide (3078px) and pretty long too (1540px).
The page has a large div containing 6 divs inside it on 3 columns and two rows (each row a separate div itself).
When the page loads, it displays the top left div (box1) in the top right corner, with the option to scroll down or right to see the rest of the content.
I'd like to make it be centered on load, that is to say, I would like the middle column (box 2) to show in the middle of the page when loading, with the option to scroll left and right for the rest of the content.
Is there any script or CSS/HTML combo that would allow me to select what will be displayed in the browser on load? Essentially, what I'm trying to do is similar to centring the whole of the body within the browser window. I was considering attaching an anchor with a name to the middle div (box2), but I still wouldn't know the Javascript to make it select that div as the top left to load on.
Please let me know if this is a bit confusing, I can make a sketch to explain what I mean if that could help! (The jsfiddle link is below)
HERE IS THE CSS:
body {
margin:0px;
padding:0px;
text-align: center;
background:black;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:1024px;
height:768px;
background:transparent;
border:1px red solid;
}
#above {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#below {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#mainbox {
margin: 0 auto;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:1540px;
background:transparent;
}
AND THE HTML:
<div id="mainbox">
<div id="above">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
<div id="below">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
</div>
</div>
There is a JS fiddle too: http://jsfiddle.net/KyMet/
A similar question would be (to remove the pain of horizontal scrolling) – If I have a really long page, which scrolls vertically, how can I get it so that it loads with the bottom of the page in the browser window, so that, practically, you need to scroll up to see the rest of the content?

You need to use some query to pull this of.
EDIT
DEMO
$(function(){
//total width of your wrapper
var totalWidth = $('#mainbox').outerWidth(true);
//width of the user browser
var width = window.innerWidth;
//calculate the middle
var middle = (totalWidth - width) / 2
window.scrollTo( middle, 0 );
});
YOUR CSS
I would also recommend you to clean up your css, there is a lot of unnecessary properties there. You can choose to use this
body {
margin: 0 auto;
padding: 0;
text-align: center;
background: #222;
overflow: scroll;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin: 0;
padding: 0;
float: left;
display: block;
width: 1024px;
height: 768px;
border: 1px red solid;
}
#box2 {
background-color: aqua; /* only for demo */
}
#above {
margin: 0px;
padding: 0px;
display: block;
}
#below {
margin: 0px;
padding: 0px;
display: block;
}
#mainbox {
padding: 0;
width: 3078px;
height: 770px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
*zoom:1;
}

You would have to use jQuery scrollto library
http://demos.flesler.com/jquery/scrollTo/

jquery animate width disrupts the flow of other elements

I have a bunch of divs in sort of a grid pattern, and when a tile div is clicked on, i want it to expand out to the right to show a previously hidden div. however, during the animation, the surrounding tile divs are put out of position for a moment before going back to their correct position after the animation completes. I would like it to just smoothly slide out to the right. click on the top left tile to see most closely what I mean.
Here's the JS code, but I assume there has to be some CSS tweak. see the fiddle for CSS.
$('.tile').on('click', function(){
$(this).find('.sparkline').show();
$(this).animate({
width : '326px'
},
600,
function(){
});
});
JSFiddle
All the Less:
.tiles{
.tile{
display:inline-block;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
.origMetrics{
width:154px;
display:inline-block;
}
.sparkline{
display:inline-block;
width:154px;
height:53px;
float:right;
}
.seperator {
margin: 0 15px 5px 15px;
border-color:black;
}
.metrictitle{
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.metricvalue {
display:inline-block;
text-align:left;
width:auto;
margin-left:10px;
font-size:25px;
}
.metrictrend {
float:right;
margin-right:10px;
margin-top:5px;
}
.positive{
color:green;
img{
position:relative;
bottom:15px;
left:15px;
}
}
.negative{
color:red;
img{
display:none;
}
}
.even{
img{
display:none;
}
}
}
}

Try placing the showing of the sparkline div inside of the .animate() complete callback function.
The sparkline container was being shown and taking up space in the DOM prior to the animation being completed. This led to the appearance of a jump in the animation.
For an even cleaner look, you can use .fadeIn() instead of .show() on the sparkline container.
$('.tile').on('click', function () {
$(this).animate({
width: '326px'
}, 600, function () {
$(this).find('.sparkline').fadeIn();
});
});
In addition, in IE and Firefox it appears that the display: inline-block style on the tiles was interfering with the overflow: hidden that gets applied as part of the animation. When you utilize inline-block, I would highly suggest also setting the vertical-align property accordingly. In your case, I believe vertical-align: top would be the best setting for the tiles.
.tile{
display:inline-block;
vertical-align: top;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
}
jsfiddle

Use javascript to click on a pseudo-element?

I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code.
Link: http://jsfiddle.net/Vv6Eb/4/
HTML:
<div></div>
CSS:
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div:before { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}

If you know where the circle "should" be, you can use trigonometry to see if the click is within the circle: http://jsfiddle.net/Vv6Eb/19/
$("div").click(function(e){
var $me = $(this),
width = $me.outerWidth(),
height = $me.outerHeight(),
top = $me.position().top,
left = $me.position().left;
var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2));
if (len < 10)
alert('ding');
});​

A workaround for this would be to dynamically append a <span> to the item and assigning a click method to it. Like this fiddle.
var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);
CSS
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div span { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}

I know you are trying to use :before, but for this situation, can't you just create a new div with a class to use as a hook and append it to the original div?
Something like this might work:
var newDiv = $("<div class='orangeCircle'>");
$(".parentDivToOrangeCircle").append(newDiv);
And the CSS:
.parentDivToOrangeCircle { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
.orangeCircle {
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}

Do simply like using jquery
$(document).on("click", "span", function(e){
if (e.offsetX > $(this)[0].offsetWidth) {
alert('clicked on after');
}
else
{
alert('clicked on main span');
}
})
div { margin: 20px; }
span:after { content: 'AFTER'; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>ELEMENT</span></div>

My purpose was solved by another workaround which is just adding a child DIV. Wrapping up all child elements inside the parent into this new child DIV:
My working sample as same as the problem statement: See Fiddle
HTML:
<div class="parentDiv">
:before
<div class="childDiv">
<!-- child elements -->
</div>
</div>
**Note: Ignore the :before in the HTML, just showing to understand.
CSS:
div.parentDiv{position:relative; background-color:#333; padding:0; margin:20px; float:left; }
div.parentDiv:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; cursor:pointer}
div.childDiv{padding:20px; margin:0}
jQuery:
jQuery(document).ready(function($){
$('div.parentDiv').click(function(e){
if( $(e.target).closest('.childDiv').length==0 ){
//so clicked on psudo :before element!
//do your work here ;)
alert('Psudo :before element is clicked!');
}
});
});