A little something about everything

internet marketing and website development made simple..

Vertical alignment of a menu using pure css

Many methods for this are workarounds or hacks that break other elements or don't work on some browsers. However, you can do this quite simply using flex.

For example:

html

<body>
 <div id="menubox">
  <ul id="menu">
   <li>menu item 1</li>
   <li>menu item 2</li>
   <li>menu item 3</li>
  </ul>
 </div>
</body>

css

#menubox {
 position:absolute;
 display:flex;
 flex-direction: column;
 width:15rem;
 height:100%;
}
#menu {
 list-style:none;
 margin: auto 0;
}

 

How to show/hide a asp.net sub element with jquery

This method allows you to show/hide a form element without making another request against the server. It also works when the show/hide element is required by the asp.net code behind.

You can use any type of sub element under a dropdown with this script. You will need to use a CDN or download and host your own jquery-1.3.2.min.js file.

SCRIPT

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function() { $('#<%= Dropdown1.ClientID %>').change(function() { if (this.value=="My Value") { $('#<%= Element1.ClientID %> ').css({ visibility: 'visible' }); } else { $('#<%= Element1.ClientID %> ').css({ visibility: 'hidden' }); }}); }); </script>

 

HTML

<asp:DropDownList runat="server" ID="Dropdown1" class="required" >
<asp:ListItem Value=""> none</asp:ListItem>
<asp:ListItem Value="My Value">Some Text Here</asp:ListItem>
</asp:DropDownList>

<!-- place any element here with id="Element1" -->

How to target specific browsers within certain platforms, such as mozila & safari within mac for CSS design

You would first need to target the operating system which can be best accomplished by using javascript such as:

if(navigator.userAgent.indexOf('Mac') > 0) {

//code

}

Now in order to target the browser version you can use things such as if ie triggers for internet explorer

<!--[if (gt IE 6)&(lte IE 7)]>
<link href="/css/IE.css" rel="stylesheet" type="text/css">
<![endif]-->

or webkit for mozila or safari

@media screen and (-webkit-min-device-pixel-ratio:0) {
your css here
}

final code to target internet explorer on mac would look something like this:

if(navigator.userAgent.indexOf('Mac') > 0) {

<!--[if (gt IE 6)&(lte IE 7)]>
<link href="/css/IE.css" rel="stylesheet" type="text/css">
<![endif]-->


}

 

 

 

How to target Safari only using CSS and Javascript while keeping your page W3 compliant and completely valid

Here is a neat little trick you can use to target Safari and make it behave while fixing cross browser layouts. This method will allow you to keep a page valid and it will allow you to only target Safari.

First thing you want to do is use javascript to inject a css file for all browsers that support webkit with this code: 

Now, like I stated above this will target all browsers that currently support webkit and add support for it in the future so you cannot rely on only this. So now you need to create the css file and add some code that is Safari specific by using the double # method. Some people will ask, why not just include the double # to begin with? And the simple answer is that it will cause your CSS not to validate.

Here is the example css code that will target only Safari

Enjoy!