Categories
Web Development

Front End Web Development Workflow

Hey guys and gals, just a quick pointer to my latest article on front end web development. You can read it on World Wide Creative’s website here : READ MY ARTICLE HERE

Categories
Web Development

Update remote repo with command line using git and github

If you are using git and github to maintain your code here are some quick and short commands to remember.

Categories
General Web Development

ASP.net Client-side Validation

A couple of days ago, I faced a situation whereby I needed to add some form validation to an aspx page.

I had options of either JavaScript or ASP.net client side validation. JavaScript seemed like an easier solution…
<h5>Client-side JavaScript for form validation</h5>

[code lang=”js”]
<script language="javascript">
<!–
Function CheckForm(form)
{
for(var intCtr = 0; intCtr <= (form.elements.length – 5); ++intCtr)
{
var temp = form.elements[intCtr];
if(temp.type == "text" && temp.value == "")
{
alert("Please Enter All Information!");
temp.focus();
return false;
}
}
return true;
}
//–>
</script>
[/code]

Categories
jQuery Plugins

Ultimate jQuery plugin list

[one_half]

  • [button link=”http://www.jquerylist.com/category/ajax_plugins_tutorials size=”small” target=”self” color=”orange”]Ajax Plugins and Tutorials[/button]
  • [button link=”http://www.jquerylist.com/category/alert_windows_and_prompts size=”small” target=”self” color=”orange”]Alert Windows and Prompts[/button]
  • [button link=”http://www.jquerylist.com/category/animation_and_effects size=”small” target=”self” color=”orange”]Animation and Effects[/button]
  • [button link=”http://www.jquerylist.com/category/browser_tweaks_and_fixes size=”small” target=”self” color=”orange”]Browser Tweaks and Fixes[/button]
  • [button link=”http://www.jquerylist.com/category/charts_and_presentations size=”small” target=”self” color=”orange”]Charts and Presentations[/button]
  • [button link=”http://www.jquerylist.com/category/color_pickers size=”small” target=”self” color=”orange”]Color Pickers[/button]
  • [button link=”http://www.jquerylist.com/category/corners_and_borders size=”small” target=”self” color=”orange”]Corners and Borders[/button]
  • [button link=”http://www.jquerylist.com/category/css size=”small” target=”self” color=”orange”]CSS[/button]
  • [button link=”http://www.jquerylist.com/category/dom_and_other_plugins size=”small” target=”self” color=”orange”]DOM and Other Plugins[/button]
  • [button link=”http://www.jquerylist.com/category/drag_and_drop size=”small” target=”self” color=”orange”]Drag and Drop[/button]
  • [button link=”http://www.jquerylist.com/category/file_uploading size=”small” target=”self” color=”orange”]File Uploading[/button]
  • [button link=”http://www.jquerylist.com/category/flash_and_other_media size=”small” target=”self” color=”orange”]Flash and Other Media[/button]
  • [button link=”http://www.jquerylist.com/category/form_select_boxes size=”small” target=”self” color=”orange”]Form Select Boxes[/button]
  • [button link=”http://www.jquerylist.com/category/form_validation size=”small” target=”self” color=”orange”]Form Validation[/button]
  • [button link=”http://www.jquerylist.com/category/forms_and_input_fields size=”small” target=”self” color=”orange”]Forms and Input Fields[/button]
  • [button link=”http://www.jquerylist.com/category/games_and_game_development size=”small” target=”self” color=”orange”]Games and Game Development[/button]

[/one_half]
[one_half_last]

  • [button link=”http://www.jquerylist.com/category/grids size=”small” target=”self” color=”orange”]Grids[/button]
  • [button link=”http://www.jquerylist.com/category/inline_edit_and_editors size=”small” target=”self” color=”orange”]Inline Edit and Editors[/button]
  • [button link=”http://www.jquerylist.com/category/mapping size=”small” target=”self” color=”orange”]Mapping[/button]
  • [button link=”http://www.jquerylist.com/category/photos_images_galleries size=”small” target=”self” color=”orange”]Photos/Images/Galleries[/button]
  • [button link=”http://www.jquerylist.com/category/plugin_development size=”small” target=”self” color=”orange”]Plugin Development[/button]
  • [button link=”http://www.jquerylist.com/category/rating_plugins size=”small” target=”self” color=”orange”]Rating Plugins[/button]
  • [button link=”http://www.jquerylist.com/category/rss_and_xml_xslt size=”small” target=”self” color=”orange”]RSS and XML/XSLT[/button]
  • [button link=”http://www.jquerylist.com/category/search_plugins size=”small” target=”self” color=”orange”]Search Plugins[/button]
  • [button link=”http://www.jquerylist.com/category/sliders_and_accordions size=”small” target=”self” color=”orange”]Sliders and Accordions[/button]
  • [button link=”http://www.jquerylist.com/category/social_bookmarking size=”small” target=”self” color=”orange”]Social Bookmarking[/button]
  • [button link=”http://www.jquerylist.com/category/tables_and_table_sorting size=”small” target=”self” color=”orange”]Tables and Table Sorting[/button]
  • [button link=”http://www.jquerylist.com/category/tabs_menus_navigation size=”small” target=”self” color=”orange”]Tabs/Menus/Navigation[/button]
  • [button link=”http://www.jquerylist.com/category/tagging_and_tag_clouds size=”small” target=”self” color=”orange”]Tagging and Tag Clouds[/button]
  • [button link=”http://www.jquerylist.com/category/text_and_links size=”small” target=”self” color=”orange”]Text and Links[/button]
  • [button link=”http://www.jquerylist.com/category/time_and_date_pickers size=”small” target=”self” color=”orange”]Time and Date Pickers[/button]
  • [button link=”http://www.jquerylist.com/category/tooltip_plugins_and_tutorials size=”small” target=”self” color=”orange”]Tooltip Plugins and Tutorials[/button]

[/one_half_last]

[button link=”http://www.jquerylist.com” size=”small” target=”self” color=”orange”]The Ultimate jQuery List >>[/button]

Categories
jQuery Web Development

Show & hide content using jQuery

In this tutorial I will show you how to show and hide HTML content using just 6 lines of JavaScript code. feel the power! dependency jQuery.

Here’s an example of what you are going to build: [button link=”http://www.jsfiddle.net/element01/RQfXY” size=”small” target=”self”]View working example[/button]

The HTML

[html]</pre>
<div class="main_image">
<div class="desc" style="display: block;"><a class="collapse show" href="#">Click Me!</a>
<div class="block" style="opacity: 0.85; display: none;">
<h2>Hello</h2>
Hello this is content to slide up and show what is inside.

<a href="#" target="_blank">Loreme ipsum delore</a></div>
</div>
</div>
<div class="main_image">
<div class="desc" style="display: block;"><a class="collapse show" href="#">Click Me!</a>
<div class="block" style="opacity: 0.85; display: none;">
<h2>Hello</h2>
Hello this is content to slide up and show what is inside.

<a href="#" target="_blank">Loreme ipsum delore</a></div>
</div>
</div>
<pre>
[/html]

The CSS

[css]* { margin: 0; padding: 0; outline: none; }

body { background: #CCC; margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; }

/*–Main Image Area–*/
.main_image {
margin: 20px 0 0 20px; width: 249px; height: 440px;
float: left; background: white;
position: relative; overflow: hidden;
color: #fff;

moz-box-shadow: 0px 0px 4px #666;
-webkit-box-shadow: 0px 0px 4px #666;
box-shadow: 0px 0px 4px #666;
}

.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
}
.main_image p {
font-size: 1.2em;
padding: 10px;
margin: 0;
line-height: 1.6em; }
.main_image .desc {
position: absolute;
bottom: 0; left: 0;
width: 100%;
display: none;
}
.main_image .block {
height: 410px;
width: 100%;
background: #111;
border-top: 1px solid #000; }
.main_image a.collapse {
background: black;
height: 30px; width: 249px;
position: absolute; top: -30px; right: 0px;
font: normal 12px arial;
color: white; text-align: center;
}
.main_image a.show {
background-position: left bottom;
}
[/css]

The JavaScript

[js]$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

//Toggle Teaser
$("a.collapse").click(function(){
$(this).next().slideToggle();
$(this).toggleClass("show");
});
});//Close Function [/js]

Categories
Web Standards

Learning jQuery

Hi Team

As We have adopted jQuery as our JavaScript library of choice.  I thought it would be to all our advantage if we all knew a little more about the library and its widgets + tools & plug-ins.

One cool place to start in order to get the basics down, would be here:  http://www.learningjquery.com/

We are already using some of the widgets on our sites, Reurnert, King pie, Bidvest Intranet (most recent).

In an effort to learn how to implement jQuery UI widgets I had created this test suite. http://element.co.za/sandbox/jqui/accordion.php  it is an exact replica of the jQuery UI website test suite http://jqueryui.com/demos/accordion/

The aim behind it was to build each widget one by one. Replicating what they had on their website, so that i could learn how to do it.  Please download your copy of the element test suite and add your own pages, play around with the code so that you can get to grips with it.
links:

http://www.learningjquery.com/

http://jqueryui.com/demos/accordion/

http://element.co.za/sandbox/jqui/accordion.php

Categories
General

Survey monkey

Was thinking we could try this out next time we do a survey type job like the eskomfactor report job.

[button link=”http://www.surveymonkey.com/” style=”orange” open_type=”blank”] View survey monkey here [/button]

Categories
Mobile Development

GOMO

Hey guys check out this cool site GOMO. A nice introduction into mobile websites

…surfs up!

GOMO