html tutorials | css tutorials | php tutorials | Nodstrum Blog » CSS http://www.nodstrum.com A coders playground. Tue, 04 May 2010 22:12:43 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Simple CSS roll over image button http://www.nodstrum.com/2009/11/03/simple-css-roll-over-image-button/ http://www.nodstrum.com/2009/11/03/simple-css-roll-over-image-button/#comments Tue, 03 Nov 2009 16:02:02 +0000 jaybaron http://www.nodstrum.com/?p=118 This tutorial is very simple and easy to follow, and you can use this for image roll overs, buttons, and navigation…  Once you’ve done this a couple times it becomes very simple.
CSS Rollovers can be done with either two images or one single image.  I prefer to always do only one image as it allows for faster loading.
The first step is to make our images.  For this example I used an image with a height of 25px and a width of 100px.
For this tutorial because we are only using one image we will have to double the height.  Make sure when you make your image that you have it aligned perfectly so the roll over looks smooth.  Here is a demo Milwaukee Website Design first

Your CSS:

a.button, a.button:link, a.button:visited {
     color:#CFCFD0;
     text-decoration: none;
     line-height:25px;
     text-align: center;
     display: block;
     height: 25px;
     width: 100px;
     background-image: url(img/image.jpg);
     background-color:#333333;
     background-repeat:no-repeat;
     background-position:top center;
}

a.button:hover {
     color:#FFFFFF;
     background-color:#999999;
     background-repeat:no-repeat;
     background-position:bottom center;
}

The HTML:

<a href=”#” class=”button”>Link</a>

How it works:
When you look at the last line in the CSS it is declaring the position of the background.  The normal image only shows the top part and when you roll over the CSS shows the bottom half of the image… That iss why we doubled our image exactly.  If your image moves around when roled over it means you did not align everything perfectly…  I recommend you check the image first for a quick fix before adjusting the CSS.

If you need any help just post below.  Here is the

demo

of what your outcome will look like

]]> http://www.nodstrum.com/2009/11/03/simple-css-roll-over-image-button/feed/ 2 CSSEdit – funny! http://www.nodstrum.com/2007/11/14/cssedit-funny/ http://www.nodstrum.com/2007/11/14/cssedit-funny/#comments Wed, 14 Nov 2007 10:40:08 +0000 Jamie http://nodstrum.com/2007/11/14/cssedit-funny/ Some of you may not know, but CSS Edit is a Mac only CSS Editor from Mac Rabbit

Anyways – if you have a look at the new Icon (hi-res for OS X Leopard) it reveals a funny comment!

Look at the bottom left corner if you dont understand!

]]> http://www.nodstrum.com/2007/11/14/cssedit-funny/feed/ 1 AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL http://www.nodstrum.com/2007/09/19/autocompleter/ http://www.nodstrum.com/2007/09/19/autocompleter/#comments Wed, 19 Sep 2007 11:50:40 +0000 Jamie http://nodstrum.com/2007/09/19/autocompleter/ AutoCompleter Tutorial

As always, links to a demo and ZIP at the bottom, Enjoy!

I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)!



And so we begin:
JavaScript

<script src="jquery-1.2.1.pack.js" type="text/javascript"></script><script type="text/javascript">

function lookup(inputString) {
    if(inputString.length == 0) {
        // Hide the suggestion box.
        $(‘#suggestions’).hide();
    } else {
        $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $(‘#suggestions’).show();
                $(‘#autoSuggestionsList’).html(data);
            }
        });
    }
} // lookup

function fill(thisValue) {
    $(‘#inputString’).val(thisValue);
   $(‘#suggestions’).hide();
}

</script>

JS Explaniation

Ok, the above code it the guts to the script, this allows us to hook into the rpc.php file which carries out all the processing.

The Lookup function takes the word from the input box and POSTS it to the rpc.php page using the jQuery Ajax POST call.

IF the inputString is ‘0′ (Zero), it hides the suggestion box, naturally you would not want this showing if there is nothing in the text box. to search for.

ELSE we take the ‘inputString’ and post it to the rpc.php page, the jQuery $.post() function is used as follows…

$.post(url, [data], [callback])

The ‘callback’ part allows to hook in a function, this is where the real magic if thats what you can call it happens.

IF the ‘data’ returned length is more than zero (ie: there is actually something to show), show the suggestionBox and replace the HTML inside with the returned data.

SIMPLE!

Now for the PHP Backend (RPC.php)

As always my PHP Backend page is called rpc.php (Remote Procedure Call) not that it actually does that, but hey-ho.

// PHP5 Implementation – uses MySQLi.
$db = new mysqli(‘localhost’, ‘root’ ,”, ‘autoComplete’);
if(!$db) {
    // Show error if we cannot connect.
    echo ‘ERROR: Could not connect to the database.’;
} else {
    // Is there a posted query string?
    if(isset($_POST[‘queryString’])) {
        $queryString = $_POST[‘queryString’];
        // Is the string length greater than 0?
        if(strlen($queryString) >0) {
        // Run the query: We use LIKE ‘$queryString%’
        // The percentage sign is a wild-card, in my example of countries it works like this…
        // $queryString = ‘Uni’;
        // Returned data = ‘United States, United Kindom’;

        $query = $db->query("SELECT value FROM countries WHERE value LIKE ‘$queryString%’ LIMIT 10");
        if($query) {
            // While there are results loop through them – fetching an Object (i like PHP5 btw!).
            while ($result = $query ->fetch_object()) {
                // Format the results, im using <li> for the list, you can change it.          
                // The onClick function fills the textbox with the result.
                echo ‘<li onclick="fill(‘‘.$result->value.’‘);">’.$result->value.‘</li>’;
            }
        } else {
            echo ‘ERROR: There was a problem with the query.’;
        }
    } else {
        // Dont do anything.
    } // There is a queryString.
} else {
    echo ‘There should be no direct access to this script!’;
}
}

?>

PHP Explaination

Im not going to go into much detail here because there are loads of comments in the code above.

Basically, it takes the ‘QueryString’ and does a query with a wildcard at the en.

This means that in this case of the code each key-press generates a new query, this is MySQL intensive if its always being done, but short of making it exceedingly complex it is fine for small scale applications.

The PHP code is the part you have to change to work in your system, and all the it is updating the ‘$query’ to your database, you should be able to see where you put the table column name in etc…

CSS Styling – im using CSS3, YEA BABY! much easier although limits the functionality to Firefox and Safari.

<style type="text/css">

.suggestionsBox {
    position: relative;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #212427;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000;
    color: #fff;
}

.suggestionList {
    margin: 0px;
    padding: 0px;
}

.suggestionList li {
    margin: 0px 0px 3px 0px;
    padding: 3px;
    cursor: pointer;
}

.suggestionList li:hover {
    background-color: #659CD8;
}
</style>

The CSS is pretty standard, nothing out of the ordinary.

Main HTML

<div>

       <div>

      Type your county (for the demo):
<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />

    </div>      <div class="suggestionsBox" id="suggestions" style="display: none;">

      <img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" />

      <div class="suggestionList" id="autoSuggestionsList">

</div>

    </div>

</div>

That is the main bit of HTML, really all you need to run this is an input text box with the ‘onkeyup’ function set to lookup(this.value); Also, i recommend NOT changing the ID of the input box, unless you change it in the Javascript section :)

Screenshots ;-)

I suppose you want to see some more screen shots…. OK.

And another one!

And now for the links… this is probably what you are all looking for!

Demo: Auto Complete Demo

Source ZIP: AutoComplete Source ZIP

If you have any problems, just post them up here (as comments) and i am sure i can help you fix it :)

Thanks for the continued support,

Jamie.

]]> http://www.nodstrum.com/2007/09/19/autocompleter/feed/ 960 MySQL Calendar http://www.nodstrum.com/2007/06/27/mysql-calendar/ http://www.nodstrum.com/2007/06/27/mysql-calendar/#comments Wed, 27 Jun 2007 10:57:10 +0000 Jamie http://nodstrum.com/2007/06/27/mysql-calendar/ VERSION 1.1 RELEASED!

Changes: Added (by popular demand) Event deletion!
Ok… I have finally got this script working!

I have not done it like a tutorial because it is just too big, so here are a load of screen shots, There is a link to a fully functional demo and zip at the bottom!

A little setup information:

1. Copy the entire calendar into whatever directory you want.

2. Create your database and import the ‘databaseSQL.sql’ file into it, this will create the default data for running it.

3. Alter the ‘databaseConnection.php’ file to show your connection details.That should be it..

NOTE:By default the username and password are both ‘admin‘ (without the quotes), i suggest you change your password in the control panel.

If you have any problems i will be happy to help, just post your query as a comment to this page.

Screen Shots

Default View

View Events

View Events 2

Login

Control Panel

Add Event

Add Event 2

Downloads

MySQL Calendar V1.1 DEMO

MySQL Calendar v1.1 ZIP

]]> http://www.nodstrum.com/2007/06/27/mysql-calendar/feed/ 240 Transparency in IE6 and Other Browsers :) http://www.nodstrum.com/2007/02/02/csstransparency/ http://www.nodstrum.com/2007/02/02/csstransparency/#comments Fri, 02 Feb 2007 10:06:44 +0000 Jamie http://nodstrum.com/2007/02/02/csstransparency/ This post will cover backgrounds (for DIVs) and transparent images (.PNGs)

As we ALL know; IE6 poses far too many challenges for designers, resulting in seperate stylesheets and hacks.
I found the need for a transparent background with links on top of it, in Firefox & Safari (and IE7) PNGs are supported, so all worked fine, but when tried with IE6, Yea, there were PROBLEMS! No PNG support and links within the transparent window disappeared.

There are links to the PNGs and Demos at the bottom of the post.

This is the difinitive way to make transparency work with all browsers!

CSS code for STANDARD supporting browsers (Firefox, Safari).

.transparent {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 250px;
border: 1px solid #000;

background: url(‘../images/blackTransparent80.png’);

z-index: 1;
}

CSS code for IE6 (hack). this is put in the style-sheet as well.
(The ‘*html’ only works on IE and is ignored by all other browsers.)

*html .transparent {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 250px;
border: 1px solid #000;

background: none;
filter:progid :D XImageTransform.Microsoft.AlphaImageLoader(src=‘images/blackTransparent80.png’, sizingMethod=’scale’);

z-index: 1;
}

This code is the code for the DIV

<p class="transparent">
<span style="position: relative; top: 1px; left: 1px">
<a href="http://nodstrum.com">nodstrum.com</a>
</span>
<span style="position: relative; top: 90px; left: 270px">
<a href="http://blue44.com">blue44.com</a>
</span>
<span style="position: relative; top: 200px; left: 70px">
<a href="http://teenfirst.com">teenfirst.com</a>
</span>

Here are the links to my pre-made transparent backgrounds and the demos.
Transparency Demo – White
Transparency Demo – Black
White 80% Transparent PNG (1px x 1px)
Black 80% Transparent PNG (1px x 1px)

Enjoy!

]]> http://www.nodstrum.com/2007/02/02/csstransparency/feed/ 14