I've got Auto Complete Mode installed for Emacs.

First: When I'm typing declarations I get the normal auto-complete behavior:

So I hit Tab to complete — no problem. But then I hit ;:

It instantly tries to complete something! And I can't hit Enter because that'll accept the erroneous completion!

So I have to hit C-j. What a pain.

Second: Once I'm done with a declaration, I type }:

...but it doesn't get indented properly unless I type Tab.

What gives?

Update, settings:

I'm using Emacs 23. My css-electric-keys are } and ;. My Auto Complete configuration is as follows:

(ac-config-default)
(setq ac-auto-start t)
(setq ac-delay 0.1)
(setq ac-auto-show-menu nil)
(setq ac-show-menu-immediately-on-auto-complete t)
(setq ac-trigger-key nil)

Here's a few suggestions:

1. (setq ac-auto-start t) starts autocomplete automatically. If you change that to (setq ac-auto-start 1) (or 2 or 3) then it will only start after that many characters have been typed. This might not solve your problem though if after you type the ;, it considers the entire preceding word as part of the current auto-complete search.

2. Maybe the problem is that it isn't recognizing the semicolon as a delimiting character (like whitespace), so it thinks you're still adding to the last word. Perhaps adding the semicolon string to ac-ignores would do the trick? (Not sure what the syntax for that would be)

3. Maybe you can prevent auto-completion via the enter key by adding: (define-key ac-complete-mode-map "\t" 'ac-complete) and (define-key ac-complete-mode-map "\r" nil). I'm not sure how this will interact with DWIM though (enabled by default).

4. Try adding semicolon as an auto-complete key?

My .emacs knowledge on a scale of 0 to 10 is like a 1.5, but maybe this will jog some better ideas.

Possible Duplicate:
Why do /**/ comments work in stylesheets but // comments don't?

In CSS there is only one way to create comments: /* I'm a comment */

The problem is that it isn't nestable.

Does anyone know why we don't have an alternative comment syntax like //?

I think the real answer is that CSS treats newlines like any other whitespace, so it wouldn't make sense to have comments that are terminated by a newline. This is from the CSS1 spec: http://www.w3.org/TR/REC-CSS1

A CSS style sheet, for any version of CSS, consists of a list of statements. There are two kinds of statements: at-rules and rulesets. There may be whitespace (spaces, tabs, newlines) around the statements.

Of course, this also makes a lot of sense in the context of minification, as mentioned here: Why do /**/ comments work in stylesheets but // comments don't?.

My UI has an unordered list on the left. When a list item is selected, a div appears on the right of it. I'd like to have a curved outer corner where the <li> and the <div> meet. Some people call this a negative border radius or an inverted corner. See the white arrow in the image below.

To extend the blue <li> to the edge of the <ul>, I'm planning to do something like this:

li { 
    right-margin: 2em; 
    border-radius: 8px; 
}

li.active { 
    right-margin: 0; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0;
}

Is there a better way to extend the <li> to the edge of the <ul>? Obviously, I'll include the webkit and mozilla border radius CSS as well.

The main thing I'm unsure about is that outer corner underneath the bottom right corner of the active <li>. I have some ideas, but they seem like hacks. Any suggestions?

NOTE that the <ul> is indicated in grey, but it would be white in the real design. Also, I'm planning to use Javascript to position the <div> correctly when an <li> is selected.

Well, as it turns out, I managed to solve the problem myself. I hacked together a demo -- check it out.

Essentially, several additional DOM elements are required and a fair amount of CSS. And as mentioned in the link provided by @Steve, a solid background is required. I don't believe there is any way to do this over a gradient background or other pattern.

I ended up with HTML like this:

<ul class="selectable">
    <li>
        <dl>
            <dd class="top"></dd>
            <dt>Title</dt>
            <dd class="bot"></dd>
        </dl>
    </li>
    <li class="active">
        <dl>
            <dd class="top"></dd>
            <dt>Title</dt>
            <dd class="bot"></dd>
        </dl>
    </li>
    <li>
        <dl>
            <dd class="top"></dd>
            <dt>Title</dt>
            <dd class="bot"></dd>
        </dl>
    </li>
</ul>
<div class="right">
    <div class="content">This is content</div>
</div>

And here's the CSS. Notice that I'm using negative margins in some places. There's probably some way to do it without that, but it was easiest.

ul.selectable {
    padding-top: 1em;
    padding-bottom: 1em;
    width: 50%;
    float: left;
}
ul.selectable li {
    margin: 0 3em 0 4em;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
}
ul.selectable li.active {
    margin-right: 0;
}
ul.selectable li.active dl {
    background-color: #4f9ddf;
}
ul.selectable li dt {
    background-color: #dfd24f;
    padding: 1em;
    margin-left: -2em;
    margin-right: -2em;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
ul.selectable li dd {
    padding: 0.25em;
    background-color: #fff;
}
ul.selectable li.active dt {
    background-color: #4f9ddf;
    margin-right: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -khtml-border-top-right-radius: 0;
    -khtml-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; 
}
ul.selectable li.active dd.top {
    -webkit-border-bottom-right-radius: 8px;
    -khtml-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    border-bottom-right-radius: 8px;
}
ul.selectable li.active dd.bot {
    -webkit-border-top-right-radius: 8px;
    -khtml-border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    border-top-right-radius: 8px;
}
div.right {
    float: left;
    padding-top: 3em;
    width: 50%;
}
div.content {
    height: 15em;
    width: 80%;
    background-color: #4f9ddf;
    padding: 1em;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

I haven't optimized any of the CSS as I just hacked it together. But perhaps it will help someone else. I've only tested this in Google Chrome on Mac OSX.

I'm running into an issue where the border of an outer div with rounded-corners is getting cut-off by an inner element with a CSS3 gradiet. Is this a bug with CSS3 - if so, I'll happily submit a bug-report.

If not, how do I fix this?

Source & Demo here: http://jsfiddle.net/joshuamcginnis/2aJ8X/

Screenshot:

The problem isn't the gradient - give your <h2> element a solid background to see. Instead, you need to round the corners of the <h2> as well as of the wrapping <div>.

Add border-radius: 10px 10px 0 0; and the appropriate vendor-specific versions to the <h2> styling and it all works.

404 Page or 500 Page

Anyone have any idea how to do this sort of thing? The animation that moves with your mouse? Thanks for the correction, @Alin. Just a link to a tutorial would be nice.

EDIT: Just also learned it's the parallax effect. That should help.

The effect is accomplished with javascript, not just CSS.

The source code is on the page you linked to.

Have a look at jParallax, which makes it easy to implement the effect in a robust way on your own site: http://webdev.stephband.info/parallax.html

I'm developing an app for the iPad using HTML5/CSS3. I'm not using any framework and am just using whatever is natively supported on the device. I have created some css3 animations to emulate the typical iOS sliding left or sliding right when navigating between screens. Here's an example of the slide left animation which is taking advantage of the iPad's CSS3 hardware acceleration: (the ipad is running 4.2).

/*************************************************
Slide Left
*************************************************/
.screen.slideleft{
 -webkit-animation-duration: 0.5s;
 -webkit-animation-timing-function: ease-in-out;
}
.screen.slideleft.outgoing{
 z-index: 50 !important;
 -webkit-animation-name: slideleft-outgoing;

}
.screen.slideleft.incoming{
 z-index: 100 !important;
 -webkit-animation-name: slideleft-incoming;
}
@-webkit-keyframes slideleft-outgoing{
 from { -webkit-transform: translate3d(0%,0,0); }
 to { -webkit-transform: translate3d(-100%,0,0); }
}
@-webkit-keyframes slideleft-incoming{
 from { -webkit-transform: translate3d(100%,0,0); }
 to { -webkit-transform: translate3d(0%,0,0); }
}

I also have this CSS which I've attempted to use to fix the flicker:

.incoming,
.outgoing{
 display: block !important;
 -webkit-backface-visibility: hidden;
}

This works great until the iPad keyboard is used. After which point all the animations flicker severely.

I've been looking for examples of an iPad HTML5 app that uses the keyboard and doesn't have flickers afterwards, but haven't turned up much. The jqTouch demos exhibit the same behavior on the iPad (although I know they were designed for the iPhone).

I've turned up a few posts/questions of similar questions but have never found a good answer. I've been through http://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/ and the articles linked there but haven't had any success.

Any other suggestions?

Update 1/13 @ 9am

I've added this css and it helped a lot:

.incoming *,
.outgoing *{
 -webkit-backface-visibility: hidden;
 -webkit-transform: translate3d(0,0,0); /* This helps with the flicker a lot. */
}

The foreground elements don't seem to flicker anymore, but the backgrounds still do. Still looking for some help or helpful resources on Mobile Safari's memory handling tactics.

Update 1/16 @ 11pm

Increasing the z-index as suggested by anonymous. Didn't seem to make a difference.

Update 1/17 @ 8:30am

I've posted a demo of the problem here.

The transitions between screens work great...until you tap/click inside one of the form fields. After the keyboard slides up and returns, all the transitions flicker. Go to the URL inside the iOS simulator or on an actual iPad to see what I'm talking about.

Ultimately, there really wasn't a fix for this issue. It seems like form elements in WebKit on the iPad cause problems with flickering.

My workaround was that on the onblur of each form element, I refreshed the page using hash tags to ensure it refreshed to the exact same state. It still caused a "flicker" while it was refreshing, but it did keep the screen from flickering throughout the rest of the app.

Is it possible to have a circular menu or dock using css or jquery.?
I have a set of images as the dock items that need to be displayed as a circular dock... however the number of items in the dock are not constant and may vary.... so i cannot tend to use constant values for positioning each item in a pre-defined manner. Ajax loads some images into this particular div and i need to use css or jquery to style this so that they get displayed as circular dock items. Any idea on how this can be implemented..?
I would like a browser in-specific implementation, but i also welcome if some one has some solutions specific to few browsers...

UPDATE
I don't think i exactly want a pie menu... it easily gets messed up as the number of dock items increase. I am looking for a spiral dock. and by spiral i mean that the menu items must be in the following alignment..

I got it I think! This is just a basic concept, so please tweak it yourself.

http://www.mathematische-basteleien.de/spiral.htm#Spirals%20by%20polar%20equations

See the following JSFiddle and the code below:

var items = 10;
var a = 20;
var b = 1; // updated an extra b, used for rate (see update section below)
var centerX = $('.content').innerWidth()/2; // and some adjustment of half its own size
var centerY = $('.content').innerHeight()/2;
for(var i = 0; i < items; i++)
{
    var yPos = a * i * Math.cos(b*i) + centerY;
    var xPos = a * i * Math.sin(b*i) + centerX;
    var item = '<div class="item" style="top:' + yPos   + 'px; left:' + xPos + 'px;" />';
    $('.content').append(item);
}

And some CSS for testing purposes:

.item
{
    width:10px;
    height:10px;
    position: absolute;
    background-color:red;
}

.content
{
    position:relative;
    height:300px;
    width:300px;
    background-color:green;
}

<div class="content">
</div>

Update: answer to the comment

The function for yPos and xPos are generating items to the outside, they start from the center point. By defining a different a and a an extra var b inside the Math.cos(b*i). It is possible to change the rate of the divs showing up and the spread of the total spiral. The spread of the spiral is defined by a, because it defines the amplitude. The rate that divs are showing up is defined by the new b.

So a smaller b means lower angles, means closer together on the spiral. A smaller a means lower amplitude, means closer together in x and y axes.

If the number of images is not predictable, it shouldn't matter, because of the spiral going out. Of course, this will give you problems when adding too much.

Another solution is just doing this in PHP, because it has nothing dynamic to do, so you can already do this in your backend. The could will be the same with the forloop and all, but then with printing statements in your PHP.

If I need #element-one to be above #element-two, #element-two to be above #element-three, and #element-three to be above #element-one, is there any way to do this with CSS? Any other way?

I don't know any methods to do this in CSS or JavaScript..

I would split up one element into two parts, without it's noticed by user. (Actually this is not possible in every case, e.g. with text boxes, but it works well with images.)

So #element-one-part-A is above #element-two, #element-two is above #element-three, and #element-three is above #element-one-part-B. Technically it's not a z-index circle, but it looks like.

From my time on SO I've found w3schools may not be the best place to send people as an html/web programming reference. I started using them a loooong time ago and have been sending people there for years because of their usage of programming categories and tutorials.

I know I can go there and easily find out what different tags are available for use(though it may not be correct) and I can find out attributes to tags easily. Are there any alternatives that can provide the same simple reference and tutorials as they do? Where should I refer people too?

Google Doctype is a nice reference that describes itself as a

Google-sponsored open encyclopedia and reference library for developers of web applications. By web developers, for web developers.

It often references:

• blooberry.com
• MSDN (HTML & CSS section)
• SitePoint HTML Reference
• HTML 4.01 Reference
• WHATWG's HTML 5 Reference

W3Fools - A W3Schools Intervention also promotes the following "more reputable sources":

• HTML Dog is a fantastic and comprehensive intro for HTML and CSS.
• Opera Web Standards Curriculum covers the basics of web standards-based design in HTML and CSS.

• Google's HTML, CSS, and Javascript from the Ground Up presents the basics of web development with video tutorials presented by Google's expert web developers.

  [...]

• The W3C, itself, has a wiki-based general Learn page as well as an HTML element reference.

Possible Duplicate:
resize font to fit in a div (on one line)

For a small flashcard maker app I need to set the correct font size so text would fill all the available width of a fixed-size container; like the text in the four boxes in this picture:

A solution using PHP GD has been provided to this question. Is there a client side solution with css or javascript to this problem?

it's not brute force ;)

HTML:

<span id="txt">Lorem</span>
<div id="card"></div>

CSS:

#card { 
    width: 150px; 
    height: 50px;
    border: 1px solid black 
}

#txt {
    display: none
}

JS (using JQuery):

var size_w = (150/$('#txt').width() - 0.05);
var size_h = (50/$('#txt').height() - 0.05);
var size = size_w>size_h?size_h:size_w;
$('#card').css('font-size',  size + 'em');
$('#card').text($('#txt').text());

fiddle here: http://jsfiddle.net/cwfDr/

All right, now it covers both height and width. ;)

How should my class names be?

For example, a CSS class for a vote count, how should I name it?

.vote-count-post     (1) // SO uses this
.VoteCountPost       (2)
.voteCountPost       (3)
.vote.count-post     (4)
.vote .count-post    (5)
.vote .count.post    (6)

• What are the advantages and disadvantages of each?
• Which is most used and why?
• Are there any implications in any of these?
• May I have any uppercase in my CSS?

It's just naming, so it's up to you what you like. Either of your examples would work fine. Just pick one and stick to it.

The three first selectors addresses single elements, the fourth addresses a single element with two classes, the fifth addresses an element inside another, and the sixth does the same but with the inner ellement having two classes.

I would probably put class="Vote" on the surronding element, and out class="count" on the count element inside it to address it. I use pascal case for surrounding elements and lowercase for child elements inside them, so I would use:

.Vote .count

Title might be a bit confusing, I'll try my best to explain what I need to achieve. Basically I have the following elements to a particular webpage:

1. Header - always visible above content
2. Content - background image covers the entire content area - this is the key part
3. Sub-footer - information about the content always visible below it
4. Footer - standard company footer, visible if window height is a certain size, otherwise need to scroll down to see it

As I mention above, the content portion of the page is maybe the trickiest part. I need a big image to be in the background that covers the entire area. css-tricks has an excellent guide in the ways to do full page background images. So I'm hoping this can be achieved easily. The issue is how to make the sub-footer stay at the bottom if the window is <720px with the footer underneath it below the fold (needing you to scroll to it). A window >720px should show both the sub-footer and the footer with no scrollbars.

I won't even worry at this point about a minimum height the content needs to be (possibly necessitating scrollbars on the content <div> or making both the sub-footer and footer go below the fold).

Here are image mockups of what I'm trying to achieve:

First - a window <720px tall where the footer needs to be scrolled to:

Second - a window <720px tall that has been scrolled down to see the footer:

Finally - a tall window >720px that has no scrollbars because everything is visible:

I'm using jQuery and don't care about IE6. Can I achieve this in CSS? Do I have to use jQuery to dynamically adjust things? Full page backgrounds are easily done with css3, I'm happy to use css3 or html5 to do what I need.

You definitely can not use CSS position: fixed because that is always relative to the viewport, not the parent element.

What you need to do is have the "subfooter" as a fixed positioned child element of "content". In order to do that, you're going to have to use Javascript.

Something like this should do what you need. Try changing the height variable in the CSS for #content so you can see how it behaves with various content heights:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<style>
    #header {
        height: 50px;
        background-color: #ccc;
        width: 100%;
        margin-bottom: 10px;
    }

    #content {
        position: relative;
        height: 1500px;
        width: 100%;
        background-color: #ccc;
    }

    #subfooter {
        height: 50px;
        width: 100%;
        background-color: #666;
        position: fixed;
    }

    #footer {
        height: 50px;
        width: 100%;
        margin-top: 10px;
        background-color: #ccc;
    }
</style>
<script>
    $(document).ready(function(){

        $(document).scroll(function() {
            position_subfooter();
        });

        var position_subfooter = function() {
            $("#subfooter").css("bottom", "20px");
            if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) {
                $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20));
            }
        }
        position_subfooter();
    });
</script>
</head>
<body>
    <div id="header">
        <h1>HEADER</h1>
    </div>
    <div id="content">

    </div>
    <div id="subfooter">
        <h2>SUB FOOTER</h1>
    </div>
    <div id="footer">
        <h1>FOOTER</h1>
    </div>
</body>
</html>

I have a fairly stand-alone page, and I'd like to make it as small as possible: inline minimized Javascript and minimized CSS, and then minimize the HTML itself. There's tools for each of these parts, but I'd like to avoid writing the glue for putting all of these together. Open source would be ideal.

try http://code.google.com/p/htmlcompressor/

EDIT

Although doing it will make the code reading part a lot more complex and as a result, debugging will be a big pain. Do it only after you have all the other required optimization in place.