.

2 Divs on one line, filling the total width

HTML:

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

CSS:

.container {
  width:600px;
  height:200px;
  border:1px solid;
}
.right {
  width:auto;
  height:200px;
  background:red;
  overflow:hidden;
}
.left {
  height:200px;
  width:200px;
  background:blue;
  float:left;
}

Demo:

left
right

anchor css

a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}

web fonts

http://www.google.com/fonts/

http://www.fontsquirrel.com/fonts/

IE7 specific styles

      &lt;!--[if IE 7]&gt;
            &lt;script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;

<a href="http://blog.bitlinkit.com/wp-content/uploads/2013/04/json2.js">json2</a>

image align text middle and right

<div style="display: table;">
    <div style="float: left">
            <img src="box-300x260.jpg" width="310" height="270" />
    </div>
    <div style="display: table-cell; vertical-align: middle;">
       your text goes here (this is on the right and in the middle-vertically)
    </div>
</div>
<div style="clear: both;">

 

MVC maintain scrolling position – [best alternative suggested]

There is no standard way of handling this, this was a Microsoft hack to support their post back model. They needed this because every control did a post back and the user would constantly be pushed back to the top of the page.

The recommendation for use with MVC is to do most of your post back to servers using AJAX. So that the page doesn’t have to rerender the the focus is not moved. jQuery makes AJAX really easy, and there is even default forms like

<% Ajax.BeginForm(...) %>

Which will take care of the AJAX side of things for you.


The way MaintainScrollPositionOnPostback works in Asp.Net
is that it has a pair of hidden fields: __SCROLLPOSITIONX and __SCROLLPOSITIONY

On a postback, it sets these,

function WebForm_GetScrollY() {
if (__nonMSDOMBrowser) {
    return window.pageYOffset;
}
else {
    if (document.documentElement && document.documentElement.scrollTop) {
        return document.documentElement.scrollTop;
    }
    else if (document.body) {
        return document.body.scrollTop;
    }
}
return 0;
}
function WebForm_SaveScrollPositionSubmit() {
    if (__nonMSDOMBrowser) {
        theForm.elements['__SCROLLPOSITIONY'].value = window.pageYOffset;
        theForm.elements['__SCROLLPOSITIONX'].value = window.pageXOffset;
    }
    else {
        theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();
        theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();
    }
    if ((typeof(this.oldSubmit) != "undefined") && (this.oldSubmit != null)) {
        return this.oldSubmit();
    }
    return true;
    }

and then it calls RestoreScrollPosition:

function WebForm_RestoreScrollPosition() {
    if (__nonMSDOMBrowser) {
        window.scrollTo(theForm.elements['__SCROLLPOSITIONX'].value, theForm.elements['__SCROLLPOSITIONY'].value);
    }
    else {
        window.scrollTo(theForm.__SCROLLPOSITIONX.value, theForm.__SCROLLPOSITIONY.value);
    }
    if ((typeof(theForm.oldOnLoad) != "undefined") && (theForm.oldOnLoad != null)) {
        return theForm.oldOnLoad();
    }
    return true;
}

But (as most people say), MVC should be avoiding postbacks .


For anyone who want to use something easy as replacement, try this:

@{
    var scrollPositionX = string.Empty;        
    if(IsPost) {
        scrollPositionX = Request.Form["ScrollPositionX"];
    }
}

<form action="" method="post">
    <input type="hidden" id="ScrollPositionX" name="ScrollPositionX" value="@scrollPositionX" />
    <input type="submit" id="Submit" name="Submit" value="Go" />
</form>

$("#Submit").click(function () {
    $("#ScrollPositionX").val($(document).scrollTop());
});

$("#ScrollPositionX").each(function () {
    var val = parseInt($(this).val(), 10);
    if (!isNaN(val))
        $(document).scrollTop(val);
});

Box Model

static by default

fixed and absolute – fixed scroll with the page – both will remove from the layout

relative is just temp relative

general css simplified

why use CSS? To seperate content from presentation

selectors – body, div, p etc

selector rules: { background: none; }

IECSS.com show all default css styles – > internet options / accessibility / has the default css there

common lookups:
<link rel=”shortcut icon” href=”@Url.Content(“~/Content/images/favicon.ico”)”>

using Razor: <link href=”@Url.Content(“~/css/Html5Reset.css”)” rel=”stylesheet”/>
standard: <link href=”/css/Html5Reset.css” rel=”stylesheet”/>

background-image: url(“sfdfdsf.jpg”);

link a stylesheet …. fonts.googleapis.com/css?family=share:400,700

!important;

@import url(“whatever.css”);

input[type=textbox]

list-style-type: none; /* to remove bullet points */

display: block / inline / none or inline-block;

visibility: hidden , – reserves space

Other things:

http://yuilibrary.com/yui/docs/cssreset/

specificity:

last in order wins

ABC – c=count of type selectors

b=count of attributes and class selectors

a=count ID selectors

and style overrule all!

dynamic css: <link rel=”stylesheet/less” type=”text/css” href=”css/my.less” />
less-1.2.1.min.js

 

 

css selectors simplified

http://www.w3.org/TR/css3-selectors/

Universal selector
* any element
Type selector
E an element of type E
Attribute selectors
E[foo] an E element with a “foo” attribute
E[foo="bar"] an E element whose “foo” attribute value is exactly equal to “bar”
E[foo~="bar"] an E element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar”
E[foo^="bar"] an E element whose “foo” attribute value begins exactly with the string “bar”
E[foo$="bar"] an E element whose “foo” attribute value ends exactly with the string “bar”
E[foo*="bar"] an E element whose “foo” attribute value contains the substring “bar”
E[foo|="en"] an E element whose “foo” attribute has a hyphen-separated list of values beginning (from the left) with “en”
Structural pseudo-classes
E:root an E element, root of the document
E:nth-child(n) an E element, the n-th child of its parent
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
E:nth-of-type(n) an E element, the n-th sibling of its type
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
E:first-child an E element, first child of its parent
E:last-child an E element, last child of its parent
E:first-of-type an E element, first sibling of its type
E:last-of-type an E element, last sibling of its type
E:only-child an E element, only child of its parent
E:only-of-type an E element, only sibling of its type
E:empty an E element that has no children (including text nodes)
other  pseudo-classes
E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
E:active an E element during certain user actions
E:hover
E:focus
E:target an E element being the target of the referring URI
E:lang(fr) an element of type E in language “fr” (the document language specifies how language is determined)
E:enabled a user interface element E which is enabled or disabled
E:disabled
E:checked a user interface element E which is checked (for instance a radio-button or checkbox)
E::first-line the first formatted line of an E element
E::first-letter the first formatted letter of an E element
E::before generated content before an E element
E::after generated content after an E element
E.warning an E element whose class is “warning” (the document language specifies how class is determined).
E#myid an E element with ID equal to “myid”.
E:not(s) an E element that does not match simple selector s
E F an F element descendant of an E element
E > F an F element child of an E element
E + F an F element immediately preceded by an E element
E ~ F an F element preceded by an E element

a Search Button with watermark

<input onfocus=”if (this.value == ‘Search’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Search’;}” value=”Search” name=”s” id=”s” type=”text”>
<input value=”" name=”submit” type=”submit”>