Adjacent sibling selectors + select element which comes first

I want to apply red color only to class t2 which are followed by t3.

For example

<div class="t1">
  <div class="t2">2</div>
  <div class="t3">3</div>
</div>
<div class="t1">
  <div class="t3">3</div>
  <div class="t2">2</div>
  <div class="t4">4</div>
</div>
<div class="t1">
  <div class="t2">2</div>
</div>

I want to apply red color only to class t2 which are followed by t3 in class t1.

t2 + t3 -> selects t3 and applies css to t3 t2 ~ t3 also does the same.

what other options do I have. Order or t2 is not know as it might be first/last/any child of t1.

How to change the cursor icon when dragging in HTML5?

I need to set the icon for cursor when a user is dragging DIV (red div in the following example).

I have tried several attempt, including using CSS cursor:move and event.dataTransfer.dropEffect with no success, as the icon always show up a "crossed circle".

Any ideas how to solve this issue using HTML5 drag-and-drop API?

http://ift.tt/1F4N3wc

 <script>
        window.app = {
            config: {
                canDrag: false,
                cursorOffsetX: null,
                cursorOffsetY: null
            },
            reset: function () {
                this.config.cursorOffsetX = null;
                this.config.cursorOffsetY = null;
            },
            start: function () {
                document.getElementById('target').addEventListener('dragstart', function (event) {
                    console.log('+++++++++++++ dragstart')
                    this.config.cursorOffsetX = event.offsetX;
                    this.config.cursorOffsetY = event.offsetY;
                    this.adjustPostion(event);
                    event.dataTransfer.effectAllowed = 'move';
                    event.dataTransfer.dropEffect = 'move';
                }.bind(this));
                document.getElementById('target').addEventListener('drag', function (event) {
                    console.log('+++++++++++++ drag')
                    this.adjustPostion(event);
                }.bind(this));
                document.getElementById('target').addEventListener('dragend', function (event) {
                    console.log('+++++++++++++ dragend')
                    this.reset();
                }.bind(this));;
            },
            adjustPostion: function (event) {
                if (event.pageX <= 0 || event.pageY <= 0) {
                    console.log('skipped');
                    return;
                }
                var elm = document.getElementById('target');
                elm.style.left = (event.pageX - this.config.cursorOffsetX) + 'px';
                elm.style.top = (event.pageY - this.config.cursorOffsetY) + 'px';
                console.log(event.pageX);
                console.log(event.pageY);
            }

        };
    </script>

Make a very thin white line in CSS

This may sound quite silly, but I have no idea how to make a thin line smaller then 1px.

What I am looking for is something like this:

https://www.simple.com/

If you do:

    .nav-bar {
       border-bottom: 1px;
    }

It's almost twice, if not three times as thick. As you are also probably aware, doing 1em would just round up to 1px.

Anyone have any ideas?

Site scaling on a mobile device

Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!

Find the site on http://ift.tt/1ciYXWE And heres my css: http://ift.tt/1EOF8Qr (lots of thrash there though) Please ask if you need anything else! Thanks in advance!

Twitter Bootstrap grid not working evenly across browsers

I'm having problems getting a table to display uniformly across browsers using Twitter Bootstrap 3.

Here's the HTML:

<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <table class="table table-striped table-responsive first-table">
            <thead>
                <tr>
                    <th>Ingredient</th>
                    <th>Amount <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Amount" data-content="This is the amount of the ingredient you want to appear on the label." aria-hidden="true"></span></th>
                    <th>% Carrier <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Carrier" data-content="The amount of carrier (or salt) that's used with the ingredient.  This information should come from the quality assurance docs from the supplier." aria-hidden="true"></span></th>
                    <th>$$/Kilo <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Price" data-content="The price of the ingredient.  You should get this from your supplier." aria-hidden="true"></span></th>
                    <th>Who Sources? <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Source" data-content="Choose whether or not you or the manufacturer will source the ingredient." aria-hidden="true"></span></th>
                    <th>Pack Size <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="packSize" data-content="The minimum packsize of the ingredient supplied by the provider.  You only have to fill this out if you're sourcing the ingredient yourself." aria-hidden="true"></span></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr class="formulaRow">
                    <td>
                        <input type="text" class="ingredient required" name="ingredient">
                    </td>
            <div class="col-md-1">
                <td>
                    <div class="input-group">
                        <input type="number" class="amount required small-input" name="amount" >
                        <div class="input-group-addon">mg</div>
                    </div>

                </td>
            </div>
            <td>
                <div class = "input-group">
                    <input type="number" class="carrier required small-input" name="carrier" max="100">
                    <div class="input-group-addon">%</div>
                </div>
                <p class="message">Only use numbers smaller than 100</p>
            </td>
            <td>
                <div class="input-group">   
                    <div class="input-group-addon">$</div>
                    <input type="number" class="price required small-input" name="price" size="6">
                    <div class="input-group-addon">.00</div>
                </div>
            </td>
            <td>
                <select class="tableDropDown" style="min-width: 100px;">
                    <option value=true>The Manufacturer</option>
                    <option value=false>Me</option>
                </select>
            </td>
            <td>
                <div class="input-group">
                    <input class="packSize small-input" type="number" size="8" disabled>
                    <div class="input-group-addon">kg</div>
                </div>
            </td>
            <td>
                <a><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
            </td>
            <td>
                <a><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></a>
            </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

You can also see it here: http://ift.tt/1IdWl8d

It's the table that displays under the heading: "Per Serving"

What I want: For it to be evenly centered in the screen and so you don't have to scroll to the right to finish filling in the input fields.

My condundrum: It works fine in Mozilla. It also works fine in Chrome when I view it offline from the files on my computer.

But it bleeds to the right in Chrome and IE when I view it online.

I'm not sure why has the desired effect in Mozilla but not the other two.

The ultimate goal is to have it center-align if at all possible (or close to it).

Also, here are two screenshots to demonstrate what I'm talking about.

On Chrome, the table does not offset on the right and instead gets pushed out of the window:

Whereas in Firefox it justifies properly:

jquery accordion menu animation transition

I am looking for a tutorial on how to reproduce an effect very similar to http://ift.tt/1E9nbt3 I really like the way it animates and navigates. Does anyone have any pointers. Much appreciated,

Cheers, Greg.

Hover for touchscreens

The site I am making has a hover menu, what is best practice to deal with this for touchscreens. How can I get it to work on mobile devices?

I googled this and some responses suggest:

 :active

So I tried a quick fiddle on an iPhone, but it doesn't appear to work.

Whats the correct way to tackle this and why does my fiddle not work?

Also is there a CSS only solution?