GroundworkCSS : Responsive CSS HTML5 toolkit


Groundwork is a fully responsive HTML5, CSS and Javascript toolkit. Using Groundwork, you can quickly build web apps that work on virtually any device. Groundwork has been built from the ground up with the incredibly powerful CSS preprocessor, Sass.

Features

  • nestable, fractions-based, fluid grid system
  • works on virtually anything: mobile, tablet, or large screen devices
  • built with modular SCSS and JS components
  • easy to customize
  • responsive text
  • unique approach to responsive tables
  • supports purely semantic implementations by utilizing Sass @extend, @mixin and %placeholder classes

http://groundwork.sidereel.com/?url=home

10 CSS selectors you shouldn’t code without


10 CSS selectors you shouldn’t code without

By Sara Vieira | Web Design | Aug 6, 2013 | 31 comments
  

 inShare30

Every time we use CSS, we use selectors. But despite this, CSS selectors are one of the more neglected parts of the specification.

We talk about the big transformations in CSS3 but all too often forget the basics. Good use of selectors makes our day-to-day coding simpler and more elegant. Today I’m going to cover the 10 selectors that often slip our minds, but are both effective and highly useful.

 

*

The * selector may be the one you remember most easily but  it’s often underused. What it does is style everything on the page and it’s great for creating a reset and also for creating some page defaults like the font family and size you wish to have.

* {
   margin: 0;
   padding: 0;
   font-family: helvetica, arial, sans-serif;
   font-size: 16px;
}

 

A + B

This selector is called an adjacent selector and what it does is selects the element that is immediately after the first element. If you wanted to select the first div after our header you would type:

header + div {
   margin-top: 50px;
}

 

A > B

This selector will only select the direct children unlike A B that will select any level children ofA. This selector is recommended for when you are working with first level children of a parent element. For example if you want to select the first level list items in an unordered list that looks like this:

<ul>
	<li>List Item With ul
		<ul>
			<li>Sub list item</li>
			<li>Sub list item</li>
			<li>Sub list item</li>
		</ul>
	</li>
	<li>List Item</li>
	<li>List Item</li>
</ul>

You would use this selector because the usual A B selector will also selected the list items inside the nested unordered list

ul > li {
   background: black;
   color: white;
}

 

A[href*=”example”]

This is a really good selector for when you want to style a particular link in a different way, whatever is in quotes will be matched against the href of the link. For example to style all links to facebook with the color blue you would use: 

a[href*="facebook"] {
   color: blue;
}

There is also a version without the * that matches the exact url that you can use for exact links.

 

A:not(B)

This selector if particularly useful because of it’s negation clause that allows you to select any group of elements that do not match what you place in B. If you want to select every div except the footer you just need: 

div:not(.footer) {
   margin-bottom: 40px;
}

 

A:first-child  / A:last-child 

The first-child and last-child allow us to select the first and last child of the parent element. This can be a great help when it comes to list items and removing the margin-right or borders. To remove the border in the first list item and the margin in the last list item you need:

ul li:first-child {  
   border: none;  
}     
ul li:last-child {  
   margin-right: 0px;
}     

 

A:nth-child(n)

The nth-child is a simple way for you to select any child of an element by its order. If for example you wanted the third list item in an unordered list this would be the way to go:

ul li:nth-child(3) {
   background: #ccc;
}

We can use nth-child to select every multiplier of a number by using the variable n , for example if we put 3n it would select the list item number 3, 6, 9, 12 and so forth.

 

A:nth-last-child(n)

The nth-last-child works like the nth-child but instead of counting form the first list item it starts counting from the last , so if you use it with the number two it will select the list item that comes before the last one and its usage is just like the nth-child selector:

ul li:nth-last-child(2) {
   background: #ccc;
}

 

A:nth-of-type(n)

This selector does exactly what you think it does; it sees what type of element you placed on it and it selects, for example, the third element on your page that matches what you typed. For selecting the third paragraph in a div you would use:

div p:nth-of-type(3) {
   font-style: italic;
}

 

A:visited

Ever noticed that when you search for something on google the pages you have already seen appear in a different color ? That is exactly what visited does. This is a great addition for the users but it’s sometimes forgotten and by my experience it’s comes in handy every time I search google.

a:visited {
   color: blue;
}

 

Pure – A Set of Small, Responsive CSS Modules


A set of small, responsive CSS modules that you can use in every web project.

 Pure is ridiculously tiny. The entire set of modules clocks in at 5.7KB minified and gzipped, without forgoing responsive styles, design, or ease of use. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.

Get it from here – 

HTML’s New Template Tag


The concept of templating is not new to web development. In fact, server-side templating languages/engines like Django (Python), ERB/Haml (Ruby), and Smarty (PHP) have been around for a long time. In the last couple of years however, we’ve seen an explosion of MVC frameworks spring up. All of them are slightly different, yet most share a common mechanic for rendering their presentational layer (aka da view): templates.

Read more @ http://www.html5rocks.com/en/tutorials/webcomponents/template/

Instant Character Counter Using jQuery


Here is the jQuery code to count the text.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script> – jQuery library will be loaded from google site

$(“#val1″).keyup  ID of text box is val1. keyup event is used to find any character is typed or deleted in text box with ID value val1

var length1=$(“#val1″).val().length;  –  Text length of text box will be stored in a variable length1.

var length2=10-length1; – We have to display character left. By subtracting length1 from 10 , we can get character left value.

$(“#dis”).html(length2);  – Character left will be displayed in label with ID dis.

A problem will rise when more than 10 character is typed. So we have to fix the maximum length of text box as 10. ( maxlength=”10″ )

 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#val1").keyup(function(){
var length1=$("#val1").val().length;
var length2=10-length1;
$("#dis").html(length2);
});
});
</script>
</head>
<body>
<form>
<strong>Maximum Length of username is 10</strong> <br>
<br>
Name<input type="text" name="val" id="val1" size="10" maxlength="10"><br>
</form>
Character Left: <label id="dis">10</label>
</body>
</html>

Image to Base64string C#


This code snippet will help you to convert an image into a base64 string.
using (MemoryStream objMemoryStream = new MemoryStream())
{
string imgContentType = FileUploadLogo.PostedFile.ContentType;
 
// Convert Image to byte[]
switch (imgContentType)
{
case “image/jpeg”:
System.Drawing.Image.FromStream(FileUploadLogo.PostedFile.InputStream).Save(objMemoryStream, System.Drawing.Imaging.ImageFormat.Jpeg);
break;
case “image/gif”:
System.Drawing.Image.FromStream(FileUploadLogo.PostedFile.InputStream).Save(objMemoryStream, System.Drawing.Imaging.ImageFormat.Gif);
break;
case “image/bmp”:
System.Drawing.Image.FromStream(FileUploadLogo.PostedFile.InputStream).Save(objMemoryStream, System.Drawing.Imaging.ImageFormat.Bmp);
break;
case “image/png”:
System.Drawing.Image.FromStream(FileUploadLogo.PostedFile.InputStream).Save(objMemoryStream, System.Drawing.Imaging.ImageFormat.Png);
break;
}
 
byte[] objImageBytes = objMemoryStream.ToArray();
 
// Convert byte[] to Base64 String
string base64String = Convert.ToBase64String(objImageBytes);
return base64String;
}

jquery : querystring params


Getting query string parameters

 
Here we have a very practical function to retrieve parameters from query string 

We just have to register the function, and it simplifies the access to the params 

    $.urlParam = function (name) {
        var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if (!results) {
            return 0;
        }
        return results[1] || 0;
    }

    var idValue = $.urlParam('id');;

 

CSS : Shadowing the image


http://w3lessons.info/2012/02/15/image-shadow-using-css/

<pre>/* SHADOWS */

.shadow_120{
	background:#FFF url(images/shadow_120.png) no-repeat center bottom;
	padding:0 0 20px 0;
}

.shadow_200{
	background:#FFF url(images/shadow_200.png) no-repeat center bottom;
	padding:0 0 18px 0;
}

.shadow_240{
	background:#FFF url(images/shadow_240.png) no-repeat center bottom;
	padding:0 0 20px 0;
}

.shadow_340{
	background:#FFF url(images/shadow_340.png) no-repeat center bottom;
	padding:0 0 20px 0;
}

.shadow_280{
	background:#FFF url(images/shadow_280.png) no-repeat center bottom;
	padding:0 0 20px 0;
}

.shadow_440{
	background:#FFF url(images/shadow_440.png) no-repeat center bottom;
	padding:0 0 20px 0;
}

.shadow_600{
	background:#FFF url(images/shadow_600.png) no-repeat center bottom;
	padding:0 0 20px 0;
}
</pre>

Best HTML5 Drag and Drop plugin : DropZoneJS


my sample code 

Image

 

Google Map API v3 : Custom Markers with Bubble, Pins, Text etc…


https://developers.google.com/chart/infographics/docs/dynamic_icons#bubbles

Example:

var callmarker = new google.maps.Marker({
‘position’: new google.maps.LatLng(latitude, longitude),
‘map’: map,
‘scaleControl’: true,
‘icon’: ‘https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|’ + callnumber + ‘|’ + hex.replace(‘#’, ”) + ‘|000000’,
‘clickable’: true

});

Example for icon

chst=d_bubble_text_small&chld=bb|Launch+site|C6EF8C|000000

 

LINQ in .NET returning duplicate rows from a working SQL view


The Problem

For a little background, the view is performing a JOIN on another table, then grouping the results by an ID and summing another column to create and ID,SUM pair of columns. It looks something like the following:

SELECT b.Id, COUNT(DISTINCT a.UserId) AS users FROM table1 AS a INNER JOIN table2 AS b ON a.Id = b.Id GROUP BY b.Id, a.OtherId HAVING (COUNT(DISTINCT a.UserId) > 1)

The Cause

The reason this is happening is that the Entity Framework has attempted to identify a unique primary key on the view when you added the view object to your .edmx file. Since no primary key is set on a view, it simply took the first column in the table. The problem here should now be obvious, the first column is clearly not unique.

Since EF thinks the first column is unique, it does some internal data building on the result set to build out the entity object by pairing the rest of the data columns to its matching record based on this “primary” key value. The end result is that the same record is duplicated for every data row since the same value is always assigned to the identical primary key.

The Solution

To solve this problem there are two straightforward options.

The first is that you can simply add a column to your view select statement which is unique. You don’t have to use that column in your program but it will allow EF to properly build each object for you. Of course, base on your query and groupings this may not be possible.

The second option is to add a pseudo key to your view. This option should work in basically every case and is the option that we went with. The new column will create an incrementing integer which is basically a pointer to the row number of the results. To do this in MS SQL Server, add the following to the beginning of your column selection:

ROW_NUMBER() OVER( ORDER BY b.Id) as NID

which alters the example view to:

SELECT ROW_NUMBER() OVER( ORDER BY b.Id) as NID, b.Id, COUNT(DISTINCT a.UserId) AS users FROM table1 AS a INNER JOIN table2 AS b ON a.Id = b.Id GROUP BY b.Id, a.OtherId HAVING (COUNT(DISTINCT a.UserId) > 1)

====================================================================

If you have View in database and you are writing LINQ query on EF (which is referencing that VIEW), you might get same rows multiple times.  That is because of lack of primary key in view.
Now In order to make row unique in View , you may create cluster index view but instead of that , you can create one column which has unique row id.
to do that in Sql Server : ROW_NUMBER() OVER( ORDER BY b.Id) as NID

Now in your edmx file (EF file) , you might have to remove entity key from other columns in view. To do that, right click on column name in edmx , uncheck entity key if its selected. Only above created column NID should have this entity key checked.

Hope this helps someone as I spend entire day for this 🙂

happy coding…..

WPF application hang problem – all possible causes


I have come across some weird problems in wpf application after deploying it and its only occurs in few machines though. so i thought lets just share all my experience out there on internet…

When your WPF application freeze / hang in windows, it might be one of following –

1) Make sure your display drivers are up to date. If possible , download latest display driver from manuf. site and install it.

2) make sure about font in that client machine. I.e make sure that font which you’ve used in wpf app is available in that machine.

3) try disable “Windows Presentation Foundation Font Cache ” windows service from Services.

4) try changing DPI settings from 100% to 101% (this works only few times though , happened with me and worked in 2-3 machines only)

5) Make sure you have all used service packs of .net installed properly in that machine.

Hope this helps someone … Happy coding .. 🙂

Visual Studio : The current project settings specify that the project will be debugged with specific security …


The current project settings specify that the project will be debugged 
with specific security permissions.In this mode, command line arguments 
will not be passed to the executable.

SOLUTION

You have setup ClickOnce publishing for this project, which adds a security restriction preventing command line parameters from being processed.

To remove the security restriction:

  • Open Project Properties
  • Go to the Security tab
  • Unchecked the “Enable ClickOnce Security Settings”

 

How to populate a dropdownlist with json data in jquery?


 

<html>
    <head></head>
    <body>
      <select id="DLState">
      </select>
    </body>
    </html>

    /*javascript*/
    var jsonList = {"Table" : [{"stateid" : "2","statename" : "Alabama"},
                {"stateid" : "3","statename" : "Arkansas"},
                {"stateid" : "4","statename" : "Mississippi"},
                 {"stateid" : "5","statename" : "New York"},
                 {"stateid" : "6","statename" : "Oregon"}]}

    $(document).ready(function(){
      var listItems= "";
      for (var i = 0; i < jsonList.Table.length; i++){
        listItems+= "<option value='" + jsonList.Table[i].stateid + "'>" + jsonList.Table[i].statename + "</option>";
      }
      $("#DLState").html(listItems);
    });    

get parent’s id using JQuery ..


<ul id ="myList">
<li><a href="www.example.com">link</a></li>
</ul>

How can I get the id of the ul (myList) using jquery? My j-script event is triggered when the a link is clicked. I have tried:

$(this).parent().attr('id');

But it gets the id of the li, I need to go one higher, and I cant attach the click to the li either.

SOLUTION

$(this).parent().parent().attr('id');

EDIT:

$(this).closest('ul').attr('id');

Is a more foolproof solution.

jQuery : Epoch time to human date (javascript)


var date = new Date(parseFloat(myepochdate.substr(6)));
var formatteddate = (
(date.getMonth() + 1) + “/” +
date.getDate() + “/” +
date.getFullYear() + ” ” +
date.getHours() + “:” +
date.getMinutes() + “:” +
date.getSeconds()
);

jsfiddle :http://jsfiddle.net/QzKwE/9/

 

JS Function

function ToLocalDate(inDate) {
var date = new Date(parseFloat(inDate.substr(6)));
date = (
(date.getMonth() + 1) + “/” +
date.getDate() + “/” +
date.getFullYear() + ” ” +
date.getHours() + “:” +
date.getMinutes() + “:” +
date.getSeconds()
);
return date;
}

Elysium : WPF Metro Style App UI Framework for .net 4.0/+


I am using this f/w since long time and i am happy with it. They have really nice metro style UI components, themes etc for WPF applications. I am also using ActiPro components which are Paid but this is free and far better.

Here is all the details on how to get started :

Download from http://elysium.asvishnyakov.com/Default.cshtml

Example on how to get started

  1. http://bizvise.com/2012/09/24/how-to-install-elysium-on-visual-studio-project/
  2. http://bizvise.com/2012/09/27/how-to-create-metro-style-window-on-wpf-using-elysium/

Note: You may also use MahApps Metro if you dont want to use this Elysium. Try http://aerobraintech.blogspot.com/2013/03/convert-winform-to-wpf-metro-style.html

Alternatives of Elysium

1) Modern UI WPF (MUI)  : I really like this one too as it’s robust & used by many big companies in their legacy systems.  It’s basically developed from MahApps Metro UI

      [Download:   http://mui.codeplex.com/wikipage?title=screenshots ]

[Templates : http://visualstudiogallery.msdn.microsoft.com/7a4362a7-fe5d-4f9d-bc7b-0c0dc272fe31]

2) MahApps Metro

    [Documentation and Download : http://mahapps.com/MahApps.Metro/]

     [GitHub: https://github.com/MahApps/MahApps.Metro]

Happy Coding .. 🙂

How to implement windows authentication in ASP.NET MVC 3


How to implement windows authentication in ASP.NET MVC 3 : by Shivprasad Koirala

Yesterday I watched a very nice video on title “How to implement windows authentication in ASP.NET MVC 3” by Shivprasad Koirala and the same I am sharing this with you. I hope you will learn many things in this video like Deploying MVP App, Setting-up MVC App in IIS etc.