Develop Reference

Customizing where a div wraps to

Is it possible to have two divs wrap as if their one line?
<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>
so if top line was all "A"'s and the bottom line was all "B"'s we would see it wrap like
AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB
I'm trying to accomplish this with JavaScript, jQuery, and css3.

This could actually be done just by using CSS and playing with the div positions and the line heights.
For example:
.multiLine {
position:relative;
width:100px;
eight:100px;
}
.topLine {
position:absolute;
word-break:break-all;
line-height:40px;
top:20px;
}
.bottomLine {
position:absolute;
word-break:break-all;
line-height:40px;
}
This would work although it may not be an optimal solution for what you want. It depends on the context and what you want to achieve with this effect.
EDIT: You can see an example of how it would look like here: http://jsfiddle.net/78f94/

You cannot do it with html/css alone. But with Javascript you can find viewport width, truncate the string and add it as content to new inner divs. This could get very complicated when you resize as width changes!
Here is more info on getting viewport width: Get the browser viewport dimensions with JavaScript

Fade in, Fade out Divs

I'm trying to build a webpage that is essentially one page, but with four 'hidden' divs that will fade in and out of visibility when you click on menu buttons along the bottom.
I would like to put a 'close' button at the top of each of these divs so you can 'close' that div - but it would be great if the div still faded out on its own when a new menu item is clicked. So far I've created the div boxes and the links using css and html, but I'm an absolute newbie when it comes to javascript. Here's the code I have so far
HTML:
<div class="menu">
<a class="portfolio" href="http://www.google.com"> Portfolio </a> | <a class="aboutme" href="http://www.google.com"> About Me </a> | <a class="education" href="http://www.google.com"> Education</a> | <a class="contact" href="http://www.google.com"> Contact</a>
</div>
<div>`
(NOTE: I only put google as the link target because I didn't know what else to put).
CSS:
.aboutmewindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}
.portfoliowindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}
.educationwindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}
.contactwindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}`
I've tried writing a little bit of the javascript on my own, but it's seriously out of my depth at this point. I'm going to keep going through tutorials though, so hopefully I'll get the hang of it.
Anyone have any suggestions? Or good tutorials?
Thanks!

you can try this its a simple example but without all your markup and code you can get the idea .. requires jQuery
http://jsfiddle.net/YnzRV/9/
$(function(){
$("#main > .box").not(":first").hide();
$(".menu").on("click", "a", function(){
var $this = $(this),
dataBox = $this.data("box");
$("#main > .box").hide();
$("."+dataBox).fadeIn(400);
return false;
});
});
if you check the jsfiddle you will see how i added data attributes that get passed through the click handler to tell it which div to show using the data attributes

This is a slightly outdated (August, 2012) tutorial showing you the HTML, CSS, and JavaScript required to fade elements in, fade them out, and fade them to a specific opacity.
http://www.mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/
You're essentially trying to learn about the following:
.fadeIn()
.fadeOut()
.fadeTo()
jQuery's .click() handler
jQuery's .on() handler

You can use fadeIn() or fadeOut().
Use it like this:
$('selector').fadeIn(); // you can use time in ms, inside ()
Similarly, you can use fadeOut too. But keep in mind, that you have the latest version of jQuery linked to your web page.
Links:
http://jquery.com

Interactive HTML webpage

EDIT: Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D
I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.
So, what do I need help with?
I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.
This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =)
So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.
Any help would be great!
BREAKDOWN:
I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2
This is that happens when you hover/click any of these hotspots.
Text and image is displayed inside a nice little info box.
If the user clicks "more information" it will open up even further to display more information if available. Like in this img:

I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on JSBin.
Basically the point is that you enclose the image in a relatively positioned div, then absolute position the hotspots inside the same div. Inside the hotspots divs you will have the more info elements, showing only on :hover of their parents.
This makes it simple, and far more accessible.
Update: cropping the image equally from both sides
If you want to keep the image centered and still not use any javascript, you could set the required image as a background-image of the container, and setting its background-position parameters to center center.
You would have to make sure that the width of this div is set to the width of your image, and the max-width to 100%, so that when the window gets resized below the image width it stays at the center.
Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:
I created a wrapper div for the hotspots with these characteristics:
margin: 0 auto;
position: relative;
width: 0px;
This basically makes sure that the wrapper div finds the center of our image. Then, you would position the hotspots relatively to the top-center position of the image, instead of the top-left as a starting point.
Then you have what you are looking for.
Working demo

Here's another approach, and in my opinion far superior to using a map or excessive JS. Place <div> elements on top of the element with the background-image and have HTML and CSS do the heavy lifting for you.
See it on JSFiddle
HTML
The HTML should seem pretty each enough to understand, we create <div>s with the class hotspot and rely on certain things being present. Namely .text (to show digit), .hover-popup (to show on hover) and .click-popup (which is inside .hover-popup and is shown when clicked).
<div id="hotspot1" class="hotspot">
<div class="text">1</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
<div id="hotspot2" class="hotspot">
<div class="text">2</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
CSS
This is where most of the magic happens, see the comments for further explanation.
/* These two position each hotspot */
#hotspot1 {
left:15%; /* we could use px or position right or bottom also */
top:20%;
}
#hotspot2 {
left:35%;
top:25%;
}
/* General styles on the hotspot */
.hotspot {
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background-color:#CCC;
position:absolute;
}
.hotspot .text {
width:40px;
height:40px;
}
/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
cursor:pointer;
}
/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
display:none;
z-index:1;
}
/* show when clicked */
.hotspot.clicked .click-popup {
display:block;
}
/* show and position when clicked */
.hotspot:hover .hover-popup {
display:block;
position:absolute;
left:100%;
top:0;
width:300px;
background-color:#BBB;
border:1px solid #000;
}
JavaScript (with jQuery)
Unfortunately you're going to have to use some JavaScript for the clicking part as CSS doesn't have a 'clicked' state (outside of hacks with checkboxes). I'm using jQuery because it's dead easy to do what I want.
$(document).ready(function () {
$('.hotspot').click(function () {
$(this).toggleClass('clicked');
});
});
Creating the arrow
Over at css-tricks you can find a tutorial for attaching an arrow to a element using the :before and/or :after pseudo-elements. You can even 'simulate' a border around them by placing the :after element on top of the :before. But yea, lots of resources on how to do this.

You should be able to use the onclick or OnMouseOver event in the map area (define the href as "").
An example using OnMouseOver is here: http://www.omegagrafix.com/mouseover/mousimap.html

Give a class for that image in html (Ex: imgclass). And in javascript(using jquery), build that hover box in html format and bind it to 'mouseover' event of that image.
For example:
function bindhtmltoimage() {
myimg = $('body').find('.imgclass');
divSlot.each(function (index) {
$(this).bind('mouseover', function () {
try {
//position the hover box on image. you can customize the y and x axis to place it left or right.
var x = $(this).offset().left;
var y = $(this).offset().top;
var position = $(window).height() - ($("#divHover").height() + y);
var widthposition = $(window).width() - ($("#divHover").width() + x);
if (position < 0 || widthposition < 0) {
if (position < 0) {
$("#divHover").css({
position: 'absolute',
left: x + 20,
top: y - $("#divHover").height() - 20
});
}
if (widthposition < 0) {
$("#divHover").css({
position: 'absolute',
left: x - $("#divHover").width(),
top: y + 20
});
}
}
//build your html string for that hover box and apply to it.
$('#divHover').html("your Html content for that box goes here");
$('#divHover').show();
//if you want the box dynamically generated. create the html content and append to the dom.
}
catch (e) {
alert(e)
}
});
});
}
it will work fine in desktop and mobile. if you face any problem in touch devices, bind the function to click event instead of 'mouseover'.
Also, for map approach, i strongly recommend SVG instead of images.

Overlap equal sized images completely on top of another image

I am a beginning web developer and I want to overlap two images completely on top of one another. I am developing an application that checks to see if an answer inputed into the application is correct or not. For each answer, I will either display a checkmark or an "X" mark for the correct/incorrect answers respectively. To do this, I will use CSS and JavaScript:
CSS:
#checkmark { visibility: hidden}
#xmark {visibility:visible}
JavaScript:
function showCorrect(input, ans) {
if (input == ans) {
document.getElementById('checkmark').style.visibility=visible;
}
}
To do this, I just want to make the checkmark visible so that it covers up the xmark completely. What is the simplest way to overlay the images completely one on top of the either so that the checkmark covers the "X" mark?

How to make images overlap:
.imagewrapper {
position:relative;}
.imagewrapper img {
position:absolute;
top:0px;
left:0px;
}
.img1 {
z-index:1
}
.img2 {
z-index:2;
}
HTML
<div class="imagewrapper">
<img class="img1" src="img1.jpg" />
<img class="img2" src="img2.jpg" />
</div>
This will make the images overlap.
Zindex controls which image is on top.
Alternatively, you could also use display:none; and display:block; in your js or even change the z-index.
If you use display you wont need to overlap anything.

How to cycle a single div in an element with jQuery

I am trying to see if the following is possible:
I want to be able to cycle a single div within an element continuously [so the start of the div is by the end of the same div as it cycles.]
This doesn't have to be an existing plugin. I would prefer to not clone the div if possible. The div's width will be set via javascript prior to cycle but might be adjusted in small amounts.
I would appreciate any ideas!

jsBin demo
jQuery:
$('.scroller').each(function(){
$(this).find('img').clone().appendTo($(this));
});
(function move(){
$('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move);
})();
HTML:
<div class="scroller">
<img src="" alt="" />
</div>
CSS:
.scroller{
width:310px;
height:80px;
white-space:nowrap;
word-spacing:-1em;
overflow:hidden;
margin:30px;
}
.scroller img{
display:inline;
}
It will make clones only once. Than my jQuery script will create a loop that will just play with the scrollLeft() element property.
N.B: this is just a plain example, you could make 310px be dynamically calculated, but that's another story, let's keep it simple.

What about the marquee plugin?
Demo
Docs
Note that first example in the Demo, that scrolls left, if you set the width of the container to the same size or smaller than your content to scroll it will appear to cycle fluidly.