+11 votes
by (100 points)

I'm creating three columns with divs, and I'm fiddling a little with borders and inset box shadow. I just can't seem to get it right. i need it to look like this: enter image description here

Here's what I have so far (disregard the radio buttons): Fiddle . The problem is the center column - the left inset box shadow and the border as well as the bottom timeslots don't look quite right.

.CalendarCon.num2 .timeSlot {box-shadow: 1px 0px 1px 0 #fff}

What am I missing? (The columns won't always have the same height, btw.)

If jQuery is needed it's ok.

11 Answers

+26 votes
by (100 points)

Does THIS EXAMPLE work for you?

I've used label s instead of div s (to make each box clickable), got rid of the need for css3 selectors (you're welcome IE8), and have cut down the CSS:

.CalendarCon {float:left;width:112px;background-color:#eaeaeb;}
.CalendarCon .timeSlot, .CalendarCon h3 { font-size:12px; margin:0; border-top:1px solid #d6d6d6; border-right:1px solid #d6d6d6; box-shadow: 1px 1px 1px 0 #fff inset; text-align:center; display:block; padding:15px 10px; text-align:center;}
.CalendarCon {border-left:1px solid #d6d6d6; margin-left:-1px; border-bottom:1px solid #d6d6d6;}
.CalendarCon .timeSlot:hover {background-color:rgba(0,0,0,0.02);}
.CalendarCon .timeSlot input {display:block; clear:both;  margin:auto; border:1px solid #eee;}
+22 votes
by (100 points)

If you change the following 2 styles to be

.CalendarCon {float:left;width:112px;background-color:#eaeaeb; border-bottom:1px solid #ffffff;}
.CalendarCon .timeSlot:last-child {border-bottom:1px solid #d6d6d6;}

You should achieve what you want

(ps not sure why you want the white line on the bottom as it doesn't match the rest of the shadow effect)

+22 votes
by (100 points)

Try to modify this :

.CalendarCon h3 {
    font-size:12px;
    text-align:center;
    box-shadow: 1px 0px 0px 0 #fff, 1px 1px 1px 0 #fff inset;
    border:1px solid #d3d3d3;
    height:40px;
    margin-bottom:0;
    border-bottom:0;
}
.CalendarCon .timeSlot {
    border:1px solid #d6d6d6;
    border-bottom:0;
    box-shadow: 1px 0px 0px 0 #fff, 1px 1px 1px 0 #fff inset;
    text-align:center;
    padding:15px 10px;
}
.CalendarCon .timeSlot:last-child {
    border-bottom:1px solid #d6d6d6;
}

FIDDLE

Hope this help.

+21 votes
by (100 points)

You can restrict the url not to have blank in it with a negative look-ahead:

(https?:\/\/(?![^"]*blank[^"]*)[^"]*(?:png|jpg))"

It's a bit cleaner if it's only the filename that can be 'blank' that you want to filter, with a negative look-behind:

(https?:\/\/[^"]*(?<!blank)(?:png|jpg))"
+17 votes
by (100 points)

You can either directly create the Table within Javascript or within the PHP Script that returns the JSON Data however since you didn't show us your PHP Script, we'd go the Javascript Route like so:

<script id="source" language="javascript" type="text/javascript">

$(function ()  {
    $.ajax({                                      
        url     : 'example.php',              
        data    : "",
        dataType: 'json',                  
        success : function(data) {   
            var html  = "<table class='data-tbl'>";
                html += "<tr class='data-head-row'>";
                html += "<th class='data-head-cell'>UID</th>";
                html += "<th class='data-head-cell'>First Name</th>";
                html += "<th class='data-head-cell'>Last Name</th>";
                html += "<th class='data-head-cell'>Email</th>";
                html += "<th class='data-head-cell'>Username</th>";
                html += "<th class='data-head-cell'>Password</th>";
                html += "</tr>";
                html += "<tbody class='data-content-body'>";
            for(var i = 0; i < data.length; i++){
                var uid = data[i].uid;             
                var firstname  = data[i].firstname;       
                var lastname   = data[i].lastname;
                var email      = data[i].email;
                var username   = data[i].username;
                var password   = data[i].password;

                html    += "<tr class='data-content-row'>";
                html    += "<td class='data-content-cell'>" + uid + "</td>"; 
                html    += "<td class='data-content-cell'>" + firstname + "</td>";
                html    += "<td class='data-content-cell'>" + lastname + "</td>";
                html    += "<td class='data-content-cell'>" + email + "</td>";
                html    += "<td class='data-content-cell'>" + username + "</td>";
                html    += "<td class='data-content-cell'>" + password + "</td>";
                html    += "</tr>";
            }
            html        += "</tbody>";
            html        += "</table>";
            $("#output").html( html );

         } 
     });
 }); 
 </script>
+16 votes
by (100 points)

You must use .push, as @Dave told, this will update your ViewModel vith new data. Here is complete example:

function ProductsViewModel() {
    var self = this;
    self.products = ko.observableArray();

    var baseUri = '@ViewBag.ApiUrl';

    // New code
    self.create = function (formElement) {
        // If the form data is valid, post the serialized form data to the web API.
        $(formElement).validate();
        if ($(formElement).valid()) {
            $.post(baseUri, $(formElement).serialize(), null, "json")
                .done(function (o) { 
                    // Add the new product to the view-model.
                    self.products.push(o); 
                });
        }
    }

    self.update = function (product) {
        $.ajax({ type: "PUT", url: baseUri + '/' + product.Id, data: product });
    }

    self.remove = function (product) {
        // First remove from the server, then from the view-model.
        $.ajax({ type: "DELETE", url: baseUri + '/' + product.Id })
            .done(function () { self.products.remove(product); });
    }

    $.getJSON(baseUri, self.products);
}
+16 votes
by (100 points)

Regardless of how well your code is written and running on the machine, there will be relatively long periods of CPU idle time where the CPU is just waiting on something to happen. Cache misses are a subset of the problem, waiting for I/O, user input, etc. can all lead to lengthy stalls in the CPU where the progress can still be made on the second set of registers. Also, there are several causes of cache misses that you can't plan for/around (an example is pushing new instructions on a branch since you executable probably doesn't all fit into Level 3 cache).

One of the main reasons that Silvermont went away from HT is the fact that at 22 nm, you have a lot of die (relatively) to play with. As a result, you can get away with more physical cores for increased parallelism.

ARM and AMD have not implemented hyper threading because it is Intel's proprietary technology.

+13 votes
by (100 points)

I would use LEFT JOIN here:

SELECT DISTINCT order1.email
FROM `order` order1
LEFT JOIN (SELECT email FROM `order` WHERE orderdate >= '2012-05-01') order2
  ON order1.email = order2.email
WHERE orderdate < '2012-05-01'
  AND order2.email IS NULL;

The main query is checking for people who ordered before May 2012, and the LEFT JOIN query is checking (with order2.email IS NULL ) for people who have NOT ordered since then.

+13 votes
by (100 points)

FCM (firebase cloud messaging) can be implemented with Android, iOS and web(specified Google Chrome) only. So for using it on web application for all browser we have to implement the firebase database. You can see this implementation of firebase database

+13 votes
by (100 points)

Assuming m 's Equals / GetHashCode isn't overridden, if m.SomeUniqueMovieProperty is null and you don't have any other unique key, you can use m itself as the unique key.

DistinctBy(m => (object) m.SomeUniqueMovieProperty ?? m)

No related questions found

...