Develop Reference

Making emojis bigger and align with text.

Here is my emoji one fiddle.
https://jsfiddle.net/L8a9zazh/
How do i resize the emojis and make it align in center with text and make it look neat.
Css:
img.emojione {
// Override any img styles to ensure Emojis are displayed inline
margin: 0px !important;
display: inline !important;
}

Your content should always be placed within HTML tags that give context to what structural component you're trying to build. In the fiddle example below, we encapsulate the emoji inside a span tag which in turn is wrapped in a p tag for the wording content. By doing this, we can target specific CSS on the emoji content to vertical align within the p tag without having to deal with line-height. The font-size CSS property can control unicode characters and font-face content.
Update 1
I see now that you're trying to convert the chars to an image; your jsfiddle was broken because it wasn't using the jquery framework and you don't have to declare onLoad; instead this should all be set in the js settings window pane.
Update 2: updated jsfiddle
Example
https://jsfiddle.net/L8a9zazh/15/
HTML
<br><br>
<p>Hello world I'm buzz 😠</p>
<br><br>
<p id="wrong-test">Hello world I'm buzz <span class="emoji">😠</span></p>
CSS
img.emojione {
// Override any img styles to ensure Emojis are displayed inline
margin: 0px !important;
display: inline !important;
height: auto;
width: 50px;
}
p#wrong-test {
border-top: 1px solid black;
border-bottom: 1px solid black;
display: inline-block;
}
span.emoji {
font-size: 30px;
vertical-align: middle;
line-height: 2;
}

What it sounds like you want would be expressed by the following: vertically centered at a point half the x height of the font above the baseline. For that you need to address line-height.
Your text and inline images will never align vertically if the image size exceeds the line-height of the font. You need to make the line-height of the font to be at least equal to the image height.
Experiment with different line-heights and see where the images line up. If you get a good fit, you're done. If you still can't find get there, get yourself close and then give the image a pixel or two of margin or padding top or bottom where appropriate.

You can wrap your emoji in a container element (such as a <div> or a <span> and style that element, such as:
<div style="font-size:5rem;width:100%;text-align:center;">😠</div>
I did this for your jsFiddle, here:
jsFiddle Demo

How to create gutters between pages in a fluid-width carousel?

I'm creating a custom carousel for my current project. Here's a simplified version (only tested in Chrome/Mac):
http://codepen.io/troywarr/pen/LpQzbv
Note that when the carousel scrolls, you can see that each page (1-5) butts up flush against its neighbor on the left and right sides (looking like a single double-thick border). I'd like to add a 5px-wide gutter between the left and right borders of each page so that the borders don't touch.
However, since this is a fluid-width carousel, this has proven to be more difficult than expected.
I need to support IE9+, so I can't rely on calc() values or CSS animations; I'd probably need to do this via jQuery .animate(), but when the horizontal position to which I'm animating is basically 100% + 5px, I can't figure out how to express that in code.
How would I go about that? Is there, perhaps, another clever way to set up the carousel that allows me to use margins, padding, table cell padding, etc. to my benefit? Or, any other ideas? I've played around with different approaches for a couple of hours and I'm running out of ideas.
UPDATE:
Just to clarify what I mean by "gutter" - I'd like there to be a 5px empty gap between the left and right sides of each page in the carousel. Each page should retain its own borders, but there should be empty whitespace between them (only noticeable on scroll). Here's an example that uses calc() and CSS transitions to do exactly what I want (only tested in Chrome):
http://codepen.io/troywarr/pen/GpQYPj
I just need to find a comparable solution that is compatible with IE9+ (which calc() and CSS animations are not).

Applying border-box to everything will allow you to add paddings without breaking the layout.
// See an explanation here:
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
EDIT:
Sorry, you were already doing this. Here is my take on it:
.window {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
// Add these two rules
// The idea is to make a static frame, except for the right column
// which is the one being repainted.
border: 5px solid #666;
border-right: 0;
}
...
.slider li {
float: left;
width: 20%;
height: 100%;
background-color: #ccc;
display: table;
border-right: 5px solid #666; // <- Paint the right column only
}

Centering Two Dynamic-Width Divs On The Same Line and

Okay I apologize if this is a repeat - but I couldn't find any working answers anywhere.
I want to have two divs (50% width each) side by side... so a left and a right - inside of a content div (see photo below).
I want them to have min-widths at 300px and once the page gets smaller than 600px (which is when both divs will reach their mins) I want to divs to wrap.. so one on top the other.
I've tried to do that here: fiddle but am having problems.
Here is EXACTLY what I want:

You're making things hard for yourself! This can be done quickly and easily with inline-blocks. Have a nice JSfiddle.
Lets explain the code:
.wrapper
{
text-align: center; /* specifies that the inline-blocks (which are treated
like text here) will be centered. */
font-size: 0; /* Explained later */
max-width: 1000px; /* Your desired max-width */
position: relative; /* These two lines center your wrapper in the page. */
margin: 0 auto;
}
Now for the inside 50% elements:
.left, .right{
display: inline-block; /* This will treat these divs like a text element.
This will work with the parent's "text-align: center" to center the element. */
min-width: 300px;
width: 50%;
font-size: 16px; /* Explained below */
vertical-align: text-top; /* Explained below */
}
You might be wondering why font-size is included. It is because with this method comes a little quirk - if a font size is kept at default, the div's will have an annoying gap between them that can not be eliminated with margin.
However, adding font-size: 0; to the parent element eliminates this gap. It's weird, and you then have to specify the font-size for your children elements, but it's well worth it for the ease of use.
But there's still a problem - the blue element is pushed down, and isn't flush on the top. This can be remedied with vertical-align: text-top; This will make sure all Div elements are aligned by the tops, so they lay in a more pleasant pattern. This is just another little quirk to remember when using inline-blocks. I know it seems like a lot of things to fix just for something this simple, but compared to your other options using inline-block is the cleanest and easiest way of going about this. (Though if you prefer, jshanley offers a very good alternative using float elements)
Also, because these children are now treated like text, they will automatically reposition themselves when the window gets too small! No media-queries needed. Yay.
Good luck.

Instead of using inline-block which causes some sizing quirks, you can use block elements, and float both .left and .right to the left, giving each a width of 50%.
Then to make them stack you need to do a little calculating. Since you specified that the wrapper is 80% of the page width, and the break point for the content is at 600px (each element 300px) the page's breakpoint would be at 750px since 80% of 750 is 600.
You can make a media query that will only apply styles when the page width is less than 750px and set .left and .right to width 100% to make them stack.
#media only screen and (max-width: 750px) {
.left, .right {
width: 100%;
}
}
It's very simple to implement, and gives a good result, here's the fiddle.

I think both #jshanley and #emn178's answers do the trick, but I want to point something out:
The display: inline-block; css property doesn't work with float: right nor float: left, since when you use the float property, it ALWAYS automatically set the display property to block.
Since you're doing this:
.right{
min-width:100px;
background-color:purple;
height:100%;
margin-left:50%;
display:inline-block;
}
The display: inline-block; property is doing nothing.

left and right could have same layout, so I add a class block.
To use float:left and width:50%, it should work.
http://jsfiddle.net/emn178/mzbku/7/
I add media query, it should be what you want.
But you need to calculate how to set the size.

Jquery slideToggle, still no easy non-jumpy solution?

I'm still to this day surprised when I run into the slideDown jumpy bug in jQuery. Been reading so much about it, articles on jQuery for designers and so on. Still can't wrap my head around it.
Is there still no easy way to solve this without storing heights and so on? Any other take to get to the same result?
Made a basic example of my code in question, but I guess it's the same as in any other buggy case.
http://jsbin.com/oyokoc/20/edit

There is no bug as such you are saying in slidetoggle actually,
The problem is with how the browser behave to the default padding and margin for the tags like p, if they are not visible the default padding and margin are not added,
but as soon they become visible they are added in the layout and i.e. the reason of this jumping you are mentioning.
Here is something I did for ignoring these implementation error:
.more{
display: none;
background: #eee;
/* added to make the margin and padding instead of p */
padding: 5px;
margin-top: 5px;
}
/* removing the default margin and padding of p */
p{
margin: 0px;
padding :0px;
}
Here is the demo http://jsbin.com/udexix/1/
UPDATE
If you want to use multiple p and dont want to change the default padding and margins, what you can do is you can change the display style for all the p to inline-block
Here is the code for that as well:
.more{
display: none;
background: #eee;
/* no changes here */
}
/* changing the display property of p */
p{
display: inline-block;
}
Here is the demo 2 http://jsbin.com/udexix/8/

DIVs overlapping. Need to move it over so they don't

Basically what the title says. Though the spacing needs to be the same on any resoulution. I tried to do it with css but on different resolutions it moves around a bit. It dosn't matter how you do it (javascript, css, html), as long as it works.
You can view the site that im having issues on here.

If the error is the Fatal Error. Check Code. bit at the top, then do this
Change
#newscontent {
top: 4px;
left: 14%;
position: fixed;
}
to
#newscontent {
top: 4px;
left: 18%; //CHANGE HERE
position: fixed;
}
This will keep the text from overlapping the Latest News bit, at least until the page shrinks smaller than the BB.
Even better would be to make #newscontent a span and place it inside the #news div, so there would be no overlapping or separation no matter what the screen size.

only #topbar should be positioned absolute (if needed), child divs can have float left and margin/padding right

OK, so bottom line is you don't want to solve this using absolute or fixed positioning with left-offset percentages. This approach will fail depending on screen resolution and length of text. A better approach is to float the items, which will allow them to "push" the next element to the right, if need be. Try this:
First, remove all your CSS for your #serverstats, #news, and #newscontent selectors.
Second, on all three of those divs, add a menu-item class:
<div id="serverstats" class="menu-item">...</div>
<div id="news" class="menu-item">...</div>
<div id="newscontent" class="menu-item">...</div>
Third, add the following CSS to your style sheet:
.menu-item {
float: left;
font: bold 120% Arial,Helvetica,sans-serif;
margin-left: 15px;
padding-top: 3px;
text-decoration: none;
}