Code

A little something about everything

internet marketing and website development made simple..

lightweight Javascript toggle function without jquery to display block/none for an element

Here is a quick lightweight javascript toggle function for sites where you dont want to use jquery.

The JavaScript:

<script>
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
var list = document.getElementsByClassName("tmc");
for (var i = 0; i < list.length; i++) {
list[i].style.display="none";
e.style.display = 'block';
}
}
</script>

Some example CSS:

<style>
.dbn {
display:block;
float:right;
width:40vw;
border:.05em solid #000;
padding:.8em;
margin:1em;
box-shadow:0 0 .3em #000;
}
#aa {background-color:#f00;}
#bb {background-color:#0f0;}
#cc {background-color:#00f;}
</style>

Some excmple HTML:

<ul>
<li><a onclick="toggle('aa');" style="cursor:pointer ">one</a></li>
<li><a onclick="toggle('bb');" style="cursor:pointer ">two</a></li>
<li><a onclick="toggle('cc');" style="cursor:pointer ">three</a></li>
</ul>
<div id="aa" class="dbn">
Content of Div aa
</div>
<div id="bb" class="dbn">
Content of Div bb
</div>
<div id="cc" class="dbn">
Content of Div cc
</div>

Example:

Content of Div aa
Content of Div bb
Content of Div cc

simple Show/Hide content or multiple Div's using only javascript and CSS

Simple script to show and hide multiple div's

Example:

Spotlight 1, Spotlight 2, Spotlight 3

Spotlight 1 content

Spotlight 2 content

Spotlight 3 content

The code:
<script language="javascript">
function getElementsByClass( searchClass, domNode, tagName) {
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) {
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1)
			el[j++] = tags[i];
	}
	return el;
}
function ShowHide(bioname) {
	var bios = getElementsByClass('bio');
	for(i=0; i<bios.length; i++)
		bios[i].style.display = 'none';
	document.getElementById(bioname).style.display='block';
}
</script>
<style>
#bio2,#bio3 {
	display: none;
}
</style>
<p>Simple script to show and hide multiple div's</p><p>Example:</p>
<p>
<a href="#" onclick="ShowHide('bio1');">Spotlight 1</a>,
<a href="#" onclick="ShowHide('bio2');">Spotlight 2</a>,
<a href="#" onclick="ShowHide('bio3');">Spotlight 3</a></p>
<div id="bio1" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #000;box-shadow: 0 0 5px #000;"><h4 style="color:#000;">Spotlight 1 content</h4> </div> <div id="bio2" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #f00;box-shadow: 0 0 5px #f00;"><h4 style="color:#f00;">Spotlight 2 content</h4> </div> <div id="bio3" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #0f0;box-shadow: 0 0 5px #0f0;"><h4 style="color:#0f0;">Spotlight 3 content</h4> </div>

Mobile is the future

With the launch of googles new mobile friendly test tool you can expect to see google pushing mobile friendly code for search placements. 

The results are basic with no in major code diagnostics, with the following two main results:

  • Awesome! This page is mobile-friendly.
  • Not mobile-friendly
    • generic fail reason
If your website is not already mobile now is the time to bring it up to date before google and other major search engines implement penalties for non mobile friendly websites.

A well designed mobile site also helps keep clients on the site long enough to turn them into prospective clients.

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" -->

text-shadow not working in chrome, css tricks

Here is the sample,

Text Shadow

And with no further adieu, here is the code:

for chrome:

  • text-shadow: -3px 3px 2px rgba(0,0,0,1);

For MS Browsers:

  • text-shadow: -3px 3px 2px 1px rgba(0,0,0,1)

For Both:

  • text-shadow: -3px 3px 2px rgba(0,0,0,1)
  • text-shadow: -3px 3px 2px 1px rgba(0,0,0,1)
Since CSS is read top down you can just place the version needed for crome above the general use/preferred method.