Develop Reference

Can I clip mask text over a div in CSS (with or without the help of JS)?

I would like to make a fancy looking button in CSS, where it displays a text overlay for a number on the left (see image below).
Is it possible in CSS (with or without the help of JS) to mask overlay text onto an element, similar to that of the Photoshop 'Clipping Mask'?
EDIT: As always you guys want to know I did some testing, which I did, but did not manage to position the number correctly where the button was on the page, using abosolute and relative position, so I asked here not only so that I could get help, but so that I could archive the answer in a format that can be easily found through Google. I have tried this. I want the definitive answer, so that I don't just use a way that 'works', but a way that works well.

I would try something like this
html:
<div class="number">1</div>
css:
.number{display: inline-block; background-color: #ccc; max-width: 50px; max-height: 50px; width: 50px; height: 50px; font-size: 80px; font-weight: bold; text-align: center; line-height: 60%; color: #000; overflow: hidden; vertical-align: middle;}

How to implement collapsible navigation bars?

I am relatively new to the world of client-side development and might be using the word "collapsible" in the title incorrectly, but here is what I would like to achieve in my web application:
So, I have several bars in the header for different purposes and I want to allow user to fold them to a tiny chevrons and unfold them back only if they really need them.
So, I am looking for a framework or sample code that would help me here.
I am using Bootstrap for the main design and layouting of my web application and I would be best if they would be compatible, but I can work on it on my own. I just don't want to implement everything from scratch here...

You can achieve that effect with some simple CSS. Check out this jsfiddle.
You have two elements inside of your wrapper container like so:
<div class="wrapper">
<nav>
My nav
</nav>
<section>
This is my content
</section>
</div>
Then with css you make the nav element be on top of the section element
section {
width: 100%;
height: 100%;
background-color: gray;
display: block;
position: absolute;
top: 0;
left: 0;
padding-top: 10em;
text-align: center;
box-sizing: border-box;
}
nav {
z-index: 100;
position: absolute;
background-color: green;
display: block;
top: 0;
left: 0;
width: 50%;
transition: all 500ms ease;
}
To create the effect of a hiding navigation menu you can add some jquery:
$('nav').click(function () {
$(this).toggleClass('hide');
});
and finally just add another style to handle the hidden nav element:
nav.hide {
left: -15em;
}
The sample itself is bare bones, but hopefully it can give you a sense of how to approach a problem like that.

What is the pop up/hoover box called in jquery/javascript/html/css

I am at the beginning of researching how to do something and not sure what is the proper name of what I am trying to research and if there is something that can be done in jquery, or a mix of jquery and css. What I am looking for is something similar to a small pop up when you hover over something; similar to hovering over a hyperlink will reveal the full link. But it will be styled to something that looked like a dialog box and instead of hovering over it the user will have to click it to see that dialog box, but it will be displayed similar to hoovering over something. I hope this question is clear and that I am not over thinking this.

You can do this with pure CSS if you wanted
DEMMO jsFiddle
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
margin-left:100px;
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
.alert {
display: none;
}
span {
display: line-block;
position: absolute;
left: 10px;
top:45px;
}
span:focus ~ .alert {
display: block;
}

I would 2nd SiDiX's recommendation of qTip if you are looking for a jQuery based solution. It has numerous features and is fairly easy to implement.
Since you mentioned you are still in the researching phase, I would suggest a google search on "top jquery tooltip plugins" - you will find many solutions.

Are you talking about tooltip? Check out this plugin called qTip
http://craigsworks.com/projects/qtip/

I believe what you are looking to define is referred to as a 'tooltip'. I like to use PowerTip to implement tooltips. It relies on jQuery, has lots of useful options, and outputs easily styled tooltips.

Checkout Bootstrap and look at what they are calling Tooltip, popover, and modal. That should help clarify.

http://getbootstrap.com/2.3.2/javascript.html#tooltips...
tooltips and popovers by bootstrap...You can put in html in the tooltip if you want.

How to make a div fill remaining space, and go to next line when necessary?

Here's an example of what I have so far as a demo:
link to demo
And here's the CSS that I'm using right now:
body {
background-color: darkgrey;
}
.container {
background: #ccc;
max-width: 300px;
overflow: hidden;
}
.label {
float: left;
}
.filler {
overflow: hidden;
display: block;
}
.filler input {
min-width: 150px;
width: 100%;
border: none;
}
What I'm trying to accomplish is a responsive way to add tags (almost exactly like the tag system on stackoverflow), to a div, whilst having the input always sit after the last entered tag div. So far I've accomplished this, except for when the last tag is pushed to the next line.
I'd really like a non-javascript solution, but if anyone has an elegant javascript solution I'm willing to take it!

Try this:
.label {
display: inline-block;
}
Here is the fiddle: http://jsfiddle.net/vGWCR/

Could this be of any use? I'm no pro with javascript and I haven't tested it, but it looks simple. Sounds like all you need is a way to get backspace to subtract width.
Create a text box with an auto-expanding width?

Use display: inline-block instead of float: left:
CSS
.label {
display: inline-block;
}
.filler {
overflow: hidden;
display: inline-block;
}
Demo

I know this isn't a code solution, but maybe an existing plugin can help. For example: jQuery Tags Input Plugin ? I am sure there are others, but maybe reuse, unless your use case is significantly different?
(I would have just added a comment, but my rep ins't high enough yet :) )

How can I make a div horizontally slide in?

I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.

Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>

My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.

Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.

There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.

This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast