Develop Reference

Div aligning right and changing x location depending on other Divs on the right side

Overall I would like to have something like this jsfiddle.net/DSghU/
Just that the the whole thing is not sliding out to the left. It shall slide out to the right. So that by clicking on the button the button is going completely to the right side.
Edit
I was able to solve the first question: jsfiddle.net/kwoxer/7hne1d0b/
But now I'm looking for a small fix on that. I really dislike that the text is braking when toggled out. How can I set it so that the text is not braking?
Edit 2
The current solution is already cool. But there is just another small issue with the other content. It's moving to the bottom. So how can these toggle elements really be just like an overlay. Here an example: jsfiddle.net/kwoxer/7hne1d0b/4/ I want that the other text(on the left) is staying as it is. And image there is a SVG instead!
Edit 3
Found it out. You need another inner div: jsfiddle.net/kwoxer/7hne1d0b/5/ But I don't think that's a cool solution for this right? If someone finds out something way better, please let me know.

Is this correct. Please have a look at following fiddle:
http://jsfiddle.net/zxwo3ack/16/
basically I just added a few things to the css
#myDiv {
position:relative;
top:50px;
color:Green;
background-color:#eee;
border:2px solid #333;
text-align:justify;
float:right;
width:200px;
overflow:hidden;
}
#button{
position: absolute;
top:80px;
right:0px;
float:right;
}
.other_details{
position:relative;
top:50px;
float:right;
font-weight:bold;
width:200px;
border:1px solid black;
padding:5px;
margin-left:2px;
}

In order to achieve your goal you will need to animate either left position or margin-left. In both cases respectic div should be wrapped with one more container with overflow: hidden on it.
var targetWidth = $('#myDiv').css("margin-left") == "200px" ? "0px" : "200px";
if (!$("#myDiv").is(":visible")) {
$("#myDiv").show();
}
$('#myDiv').animate({marginLeft: targetWidth}, duration, function () {
if ($(this).css("margin-left") == "200px") {
$(this).hide();
} else {
$(this).show();
}
});
Demo: http://jsfiddle.net/7hne1d0b/3/

Solution was pretty simple. Just a bit of CSS needed to be changed and the order and elements in the HTML edited.
This is what I wanted to have: jsfiddle.net/kwoxer/7hne1d0b/2/

Flow and Scroll Text around non rectangular shapes

I have created a little code which lets text flow around some shapes. Using a simple Javsscript:
See http://jsfiddle.net/lobin/YPBmJ/2/
What I try to achieve is that the shape is fixed and when scrolling, the text will scroll around the shape. I let the shape stay fixed via a JS bound to the scroll event, but it seams the rendering does not adopt itself to the new situation (See jsfiddle).
Any Ideas how that could work?
HTML:
<div class="box"><div class="shapewrapper"></div>Some long Text</div>
CSS:
.box {
width:600px;
height:400px;
position: absolute;
overflow-y: scroll;
}
.box .shapewrapper {
position: relative;
}
.box .shapewrapper .left {
background-color: #f00;
height:1px;
float:left;
clear:left;
}
JS:
var hbratio=10;
var h=$(".box").height();
for (i=h;i>0;i--) {
b=Math.round(i/10);
$(".shapewrapper").prepend('<div class="left" style="width:'+b+'px;" />');
}
$(".box").scroll(function() {
var y=$(".box").scrollTop();
$(".shapewrapper").css("top",eval(y)+'px');
});
(Idea from http://www.csstextwrap.com)

I don't know if there is a way to achieve this with css (alone), but I came up with a solution that involves jQuery.
Whenever the user scrolls the ".box" element, the top margin of the first ".left" element should be adjusted.
$(".box").scroll(function() {
$(".box .left").first().css("margin-top", $(this).scrollTop()+"px");
});
In order to make this work, the user must actually scroll the box element, so I changed the CSS of the box to overflow:auto. It would also work of the user scrolls the parent-element, but then the selector for the scroll event would need to be changed to the parent element.
I created a new jsFiddle to demonstrate it: http://jsfiddle.net/EwQ5J/1/

:active and :hover both active at the same time, padding stacks

I've got an issue with one of my designs at the moment, i'm creating a hover button using the :hover CSS element and then ensuring that it stays the same using the :active element.
However, both the :hover and :active have padding specified in their respective CSS rules which creates an issue when you click on the button whilst still hovering over it - the padding stacks and the button is completely misplaced.
What can I do to avoid this?

Is this what you mean (click the div to see hover/active).
HTML:
<div class="a">Some content</div>
CSS:
.a{
display:block;
padding:5px;
}
.a:hover{
padding:5px;
background:red;
}
.a:active{
padding:5px;
background:blue;
}
Example: http://jsfiddle.net/justincook/JsWCF/

Div button to toggle divs - Javascript/CSS

I'm trying to add a "back button" which will toggle the current div to the previous div. Basically, I have a div of an Oklahoma map which fills the window. When the user clicks a certain area of the map, the div is toggled with a div that is the image of the "zoomed-in" area which they selected. I want my back button to appear on top of this zoomed-in div, in the bottom right corner, and if the user clicks the button, the div will be toggled with the original Oklahoma map div.
Here's the code I've tried so far:
CSS:
#backButton
{
position:absolute;
bottom:50px;
right:50px;
background:url('images/backspace.png');
background-repeat:no-repeat;
z-index:2;
height:50px;
width:50px;
}
.button
{
position:absolute;
bottom:100px;
right:100px;
background:url('images/backspace.png');
background-repeat:no-repeat;
z-index:2;
cursor:pointer;
}
HTML:
<div id="backButton" style="display:none; background:url('images/backspace.png');" onClick="#container.toggle();">
<div class="button"></div>
</div>
The button appears correctly, but it isn't functioning. I'm sure it has to do with onClick="#container.toggle();" but I don't know how to do it correctly.
Just for background information, the container is the original Oklahoma map and it is toggled off in my JS code ($("#container").toggle();) when I switch to a zoomed-in div.
EDIT: Ok, so I do have Jquery and I tried making a click event like my other toggle events:
$("#backButton").click(function(e)
{
$("#container").toggle();
$("#backButton").toggle();
});
--> I removed the onClick part in the div. The button will toggle off when I click it, but the container div (Oklahoma map) is not toggling back on.

As you are using jQuery (evident in your code)
Put this in your javascript:
$("#button").click(function(){
$("#backButton").toggle();// hide the div (assume you have it turned on somewhere
$("#container").toggle();) // show the other div
});
remove the onClick="#container.toggle();" from the markup

You want your onClick method to call a valid function such as abcMethod(). (Wherever your toggle code lives).

Implementing a hover info box

I have a calendar, and when the user hovers over a cell, a large-ish info box appears with details for that date. I am having some trouble though making the info box disappear when the user moves away.
I basically want it so that when the mouse cursor moves out of the calendar cell which is hidden by the info box it will disappear. But I'm having trouble with this because mouseenter and mouseleave get messed up by having the info box as the top element.
So I tried to get around this by using "placeholder" divs that are transparent, have the same shape and location as the calendar cell beneath it, and have a z-index of 1000 so they are above the info box. I then apply the mouseenter and mouseleave events to these divs instead.
There's two problems with this though. One, I have now messed up my HTML semantically. The divs have no purpose but to get around what seems to be a limitation. And secondly, they mess up my jQuery UI selection (I've applied it to the calendar cells - a click no longer selects a cell).
Is there a clean way to handle displaying an info box? There will be no user interaction with the info box -- it's just to display information.
EDIT: Here is some code:
<li>
<div class="day-content">
</div>
<div class="day-content-placeholder">
</div>
</li>
and CSS
li
{ position: absolute; width: 15%; height: 20%; top: ... left: ... }
.day-content
{ position: absolute; width: 100%; height: 100%; }
.day-content-placeholder
{ position: absolute; width: 100%; height: 100%; z-index: 1000; }
.popup
{ position: absolute; width: 300%; height: 300%; left: -150%; top: -150%; z-index: 500; }
and Javascript
var popup;
$('.week-content-placeholder')
.mouseenter(function()
{
popup = $('<div class="popup">'+a_lot_of_text+'</div>').insertAfter(this);
})
.mouseleave(function()
{
popup.remove();
});
That's not the exact code, but you get the idea. This works okay, but like I said, since .week-content-placeholder is above .week-content, the selection capability with jQuery UI doesn't work properly on .week-content.

You could modify your solution with the transparent "placeholder" divs in the following way:
Have the "placeholder" dive underneath the "calendar cell", using {zIndex: -1}.
When you enter a calendar cell, unhide the large "content" div and set {zIndex: 1000} on the "placeholder" div to bring it to the top.
Have a "mouseout" event on the placeholder div that will hide the "content" div and set {zIndex: -1} for the the "placeholder" cell.
Rather than create the "placeholder" cells in the HTML, you could create one in the javascript and move it to the postion of each "calendar" cell as you "mouseIn" it. You could also duplicate any "click" events on the "calendar cell" onto this one as well.
Let me know if this works.

The trick here is to make the info box a child of the cell:
<div id='box'>
Normal content
<div id='inner'>
This big box obscures everything in the cell!
</div>
</div>
The inner box is hidden until the hover occurs. Notice how with CSS we can make the box bigger than the cell itself with negative margins.
#box
{
width:100px;
height:100px;
margin:100px;
border:solid 2px darkblue;
position:relative;
}
#box #inner
{
display:none;
position:absolute;
background-color:#eeee00;
top:-10px;
left:-10px;
width:120px;
height:120px;
}
And you can use normal jquery hover because the hover covers box the box and it's child:
$('#box').hover(function(){
$('#inner').show();
},function(){
$('#inner').hide();
});
Here's it running:
http://jsfiddle.net/RbqCT/
You can create the info box dynamically as you do in your code.

Here's 15 different plugins that let you do this with jquery:
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

You could track mousemouse and use the offsetLeft + width and offsetTop + height of your hover trigger against the event.pageX and event.pageY to compare.

If you make this work as you described a tiny mouse movement that remains within the calendar cell (which is not even visible) leaves the popup in place, but a slightly larger movement that exits the cell makes the popup disappear.
The user sees only movement within the popup itself — small movement within the popup leaves it in place; large movement makes it go away.
I suggest triggering the disappearance of the popup on exiting the popup div itself. Any movement that remains within the "tip" panel leaves it up. I think that (1) this is better usability and (2) it avoids the whole problem with the obscured calendar cell event handling.
You could do that by adding a .mouseleave() handler to the div when you create it.