Make a search field’s background disappear on click

Jun 22nd

Posted by ZACK N9NE in Uncategorized

No comments

Add this value to the string for input type:

value="" onclick="javascript:this.style.backgroundImage='none';"

The full result should look something like this.

 <input type="text" name="q" id="searchfield" autocomplete="off" size="31" value="" onclick="javascript:this.style.backgroundImage='none';"/>

Remember to style the id of “searchfield” to have a background image in your CSS file.

how to List WordPress categories in columns!

May 12th

Posted by ZACK N9NE in Uncategorized

No comments

This was taken from a site called “How To: Display Your WordPress Category List in Multiple Columns – Wordpress Development Blog – Crosshairs” that I have had some trouble accessing. So I have basically mirrored the URL http://www.crosshairs.net/index.php/archives/1009 because this information is very very valuable to me. I have copied and archived the text on that page in a permanant pastebin found here: http://pastebin.com/30×3ZFGr.

Back to the code. This is how to do this the right way. There is another solution out there that does not alphabetize the columns according to plain English, don’t use that solution.

For this tutorial we are going to display the categories in 5 columns. First we need to define all values for the array.

<?php
// Grab the categories - top level only (depth=1)
 $get_cats = wp_list_categories( 'echo=0&amp;title_li=&amp;depth=1' );
// Split into array items
 $cat_array = explode('</li>',$get_cats);
// Amount of categories (count of items in array)
 $results_total = count($cat_array);
// How many categories to show per list (round up total divided by 5)
 $cats_per_list = ceil($results_total / 5);
// Counter number for tagging onto each list
 $list_number = 1;
// Set the category result counter to zero
 $result_number = 0;
?>

Now the html

<ul class="category_footer_post" id="cat-col-<?php echo $list_number; ?>">
        <?php
                foreach($cat_array as $category) {
                $result_number++;
                if($result_number % $cats_per_list == 0) {
                $list_number++;
                echo $category.'</li>
                </ul>
                <ul class="category_footer_post" id="cat-col-'.$list_number.'">';
        }
        else {
                echo $category.'</li>';
                }
        } ?>
</ul>

We can now easily style following with CSS: #cat-col-’.$list_number.’ with ‘.$list_number.’ being the… you guessed it, the number of your column.
Because every column will have its own number, do not forget that you will have to style all columns (#cat-col-1, #cat-col-2, #cat-col-3, #cat-col-4, #cat-col-5).

for example:

#cat-col-1{float:left;width:100px;}
#cat-col-2{float:left;width:100px;}
#cat-col-3{float:left;width:100px;}
#cat-col-4{float:left;width:100px;}
#cat-col-5{float:left;width:120px;}

The 4 example jQuery slider

May 11th

Posted by ZACK N9NE in Uncategorized

No comments

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<head>


<title>jQuery Tools Tabs, Tooltips and Scrollable</title>


<meta http-equiv="content-type" content="text/html;charset=utf-8" />


<meta http-equiv="Content-Style-Type" content="text/css" />


<link href="styles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


<script type="text/javascript" src="jquery.tools.min.js"></script>


<script type="text/javascript">


$(function() {


/* Initialize Tabs */


$("#tabs-1").tabs("#tabPanes-1 > div");


$("#tabs-2").tabs("#tabPanes-2 > div", { effect: 'fade' });


$("#tabs-3").tabs("#tabPanes-3 > div", { effect: 'fade' });


/* Initialize Tooltip */


$(".trigger").tooltip();


/* Initialize Scrollable "Coda Slider" */


$("div.scrollable").scrollable({size:1});


$("div.navi a").each(function(i) {


$(this).html('Tab ' + (i+1));


});


});


</script>


</head>


<body>


<div>


<h3>Basic Tabs</h3>


<!--BEGIN FIRST SET OF TABS -->


<ul id="tabs-1">


<li><a href="#">Tab 1</a></li>


<li><a href="#">Tab 2</a></li>


<li><a href="#">Tab 3</a></li>


</ul>


<div id="tabPanes-1">


<div><p>First pane</p></div>


<div><p>Second pane</p></div>


<div><p>Third pane</p></div>


</div><!-- end div .panes -->


<!-- END FIRST SET OF TABS -->


</div><!-- end div .wrapper -->


<div>


<h3>Transition Fade Effect Tabs</h3>


<!-- BEGIN SECOND SET OF TABS -->


<ul id="tabs-2">


<li><a href="#">Tab 1</a></li>


<li><a href="#">Tab 2</a></li>


<li><a href="#">Tab 3</a></li>


</ul>


<div id="tabPanes-2">


<div><p>First pane</p></div>


<div><p>Second pane</p></div>


<div><p>Third pane</p></div>


</div><!-- end div .panes -->


<!-- END SECOND SET OF TABS -->


</div><!-- end div .wrapper -->


<div>


<h3>Tooltip on Tabs</h3>


<!-- BEGIN THIRD SET OF TABS -->


<ul id="tabs-3">


<li>


<a href="#">Tab 1</a>


<div>This is the tooltip for Tab 1</div>


</li>


<li>


<a href="#">Tab 2</a>


<div>This is the tooltip for Tab 2</div>


</li>


<li>


<a href="#">Tab 3</a>


<div>This is the tooltip for Tab 3</div>


</li>


</ul>


<div id="tabPanes-3">


<div><p>First pane</p></div>


<div><p>Second pane</p></div>


<div><p>Third pane</p></div>


</div><!-- end div .panes -->


<!-- END THIRD SET OF TABS -->


</div><!-- end div .wrapper -->


<div>


<h3>Scrollable ("Coda Slider")</h3>


<!-- BEGIN SCROLLABLE -->


<!-- navigator -->


<div></div>


<!-- Scrolling Panels -->


<div>


<div>


<div><p>First pane</p></div>


<div><p>Second pane</p></div>


<div><p>Third pane</p></div>


<div><p>Fourth pane</p></div>


<div><p>Fifth pane</p></div>


</div><!-- end div .items -->


</div><!-- end div .scrollable -->


<!-- Next and Previous links -->


<a>Next</a><a>Prev</a>


<!-- END SCROLLABLE -->


</div><!-- end div .wrapper -->


</body>


</html>

Download

Essential web design document setup list

Mar 1st

Posted by ZACK N9NE in Uncategorized

No comments

Step 1 get your color profile setup:

Step 2 Download a 960 grid from 960.gs

Step 3 Get your Databases in order. Switch them where they need to be and run these queries. hint- browse the Database first to see the current location for the location you want to change.

Step 4. Download this Web2.0 photoshop style and append it to your default style palette.

Step 5. Make sure your WordPress blog is visible to search engines.

  • Settings – Privacy – Blog Privacy settings – Allow blog to be viewable by search engines.

Bonus step: Browse around some good free icon sites.

Online Invoicing roundup

Oct 19th

Posted by ZACK N9NE in Uncategorized

1 comment

With many choices for online billing, or the dreaded Quickbooks, you can spend a lot of time entereing your clients, bills ect. to find that the billing platform you are using falls short.

Freshbooks.com

Key Pay Off Feature:

Being able to receive payments.

Simplyinvoices.com

Key Pay Off Feature:

Very simple billing. If you do whole projects and receive full payment every time, this is an ok solution.

5 things to check if you can't upload images in WordPress

Oct 6th

Posted by ZACK N9NE in Uncategorized

No comments

I can never remember where the image settings are for WordPress. Without hasseling around with the database or the dreaded options.php page, make sure your Image path is set correctally for images to upload.

Problems uploading images in WordPress? There are a couple of things to check.

  • Go to your Miscellanious in Settings in WordPress
  • Look for the Upload Files section
  • Make sure it points to “wp-content/uploads”, everything inside the quotes
  • Go to your file system and verify everybody has all privileges
  • save
  • uploading should work now

Here are some images on how to do this in case you don’t like to read.

3 steps to a custom WordPress sidebar

Sep 24th

Posted by ZACK N9NE in Uncategorized

No comments

This sidebar is accesible through / Appearance / Widgets on your Wordpress.org installation.

  • Add the below code to sidebar.php, or index.php, or whatever appropriate file that houses the layout for your new sidebar: 
    <?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>
  • Call the sidebar through Widgets panel. Put whatever Widgets you want in said sidebar.
  • Don’t forget the <?php endif;?> (from the code chunk above) or else your page will break.

You’re all set. Now the code will look to your widgets panel and display whatever things you have dragged in to show up in your layout. Need more sidebars? Put them everywhere, just change the number to something like ’sidebar2′.

Got any other good tips? Let us know.

8 Steps to a fully accessible OS X webserver

Sep 21st

Posted by ZACK N9NE in Uncategorized

No comments

  • Install all of the above
  • Set the MAMP stuff to port 80 its easier that way.
  • Turn your Mac’s web sharing to off, MAMP is handeling that.
  • VirtualHostX edits your Mac’s htaccess file for you.
  • Make a Virtualhost in VirtualHostX. If the client’s site is www.client.com make it client.offline. Point it to port 80.
  • Set your wordpress.org blog address to the client.offline
  • See what IP the Mac your running the server off of has. System preferences, Network, AirPort 10.0.1.3 is my example.
  • Switch to VMWare Windows virtual machine. Run: wordpad c:\\windows\\system32\\drivers\\etc\\hosts. On the last line below 127.0.0.1       localhost, put in a new line called 10.0.1.3 client.offline

Now you can run your server at a coffee shop, on an airplane, at home and in a Virtual Machine.

Vista Use HTML HoTMaiL As E-mail Client

Jan 23rd

Posted by agendatronix in Uncategorized

1 comment

I hate e-mail clients. They are the scum of the earth. One more thing to backup, dosen’t work with any free e-mail account you actually want, yeah I know Windows Live Mail works but, its still annoying to install, update, and have the responsibility of backing up. Yeah I know it backs up to your normal hotmail, but you still should check to make sure its doing its job, and most importantly if you ever wipe your system environment you will have to waste costly time to re-install Windows Live again, what a drag that is. Come on people we are in web 2.0 here lets use some web apps and get away from all the OS centric garbage. The golden link below. Thanks Vista Forums.

here.

Once you run this app, just click both of the big buttons and you should be using HTML hotmail with out too much fuss in your near future.

Definition Of The Day: Internal Style Sheet

Jan 5th

Posted by agendatronix in Uncategorized

No comments

Page With an Internal Style Sheet:

This page contains style definitions at the top of the HTML code.

« Older Entries