Useful CSS Tricks

Useful CSS Tricks

1. Prevent Firefox Scrollbar Jump
Firefox usually hides the vertical scrollbar if size of the content is less than the visible window but you can fix that using this simple CSS trick.
html{ overflow-y:scroll; }

2. Cross Browser Minimum Height
Internet Explorer does not understand the min-height property but here’s the CSS trick to accomplish that in IE.
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}

3. Highlight links that open in a new window
a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}

4. Drop Caps Using CSS
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}

5. Cross Browser Opacity
CSS3 standard includes the opacity property, but not every browser supports it, here’s the CSS trick for cross browser transparency.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

6. Vertical centering with line-height
If you are using fixed height container and need to vertically center the text, use the line-height property to do that perfectly.
line-height:30px;

4. Remove vertical textarea scrollbar in IE
IE adds a vertical scrollbar to textarea input fields regardless of the height of content in it. You can fix that with this simple CSS trick.
textarea{
overflow:auto;
}

5. CSS Pointer Cursors
input[type=submit],label,select,.pointer { cursor:pointer; }

6. Capitalize Text
text-transform: capitalize;

7. Small Caps Text
font-variant:small-caps;

8. Highlight Text Input Fields
highlight the input field currently in focus. This trick does not work in IE though.
input[type=text]:focus, input[type=password]:focus{
border:2px solid #000;
}

9. Highlight Acronym and Abbr Tags
acronym, abbr{
border-bottom:1px dotted #333;
cursor:help;
}

10. Text Shadow Property in CSS3
The text-shadow property looks cool, but it is currently not supported by major browsers including Firefox 3.0, but will be supported in Firefox 3.1 beta. Browsers that support this CSS3 property are Safari 3+, Konquerer, Opera9.5+ and iCab.
text-shadow: 3px 3px 4px #999;
text-shadow: 0 1px 0 #FFFFFF;

11. z-index - content slider block cover over the drop-down menu
Adding z-index: 0; in the contentslider.css fixes it
#slider {
z-index: 0;
}

12. position:fixed
<style type="text/css">
span.followus{
font-family:Arial;
position:fixed;
left:10px;
bottom:10px;
}
</style>
<div>
<span class="followus">
<a href=""><img src="images/folowus.jpg"/></a>
</span>
</div>

Simple Download Buttons (HTML & CSS)

Simple Download Buttons (HTML & CSS)

HTML and CSS version of Simple Web Buttons by Orman Clark.

If you want to know more and download the source follow the link below

http://www.vagrantradio.com/2011/01/simple-download-buttons-html-css.html

Demo

http://www.vagrantradio.com/demos/pp_buttons/

How to Create an AJAX File Uploader

How to Create an AJAX File Uploader
A Query’s versatility to allow multiple file uploads without a page refresh.

If you want to know more and download the source follow the link below

http://www.vagrantradio.com/2009/09/how-to-create-an-ajax-file-uploader.html

Demo

http://www.vagrantradio.com/demos/file_uploader/index.html

Parse XML with jQuery Ajax Sitemap

Parse XML with jQuery Ajax Sitemap
learn how to parse or process an XML document and display the data on a page in HTML.

<style type="text/css">
ol,ul{list-style:none;}
body {color:#333;font-family:Helvetica, Arial, sans-serif;Font-size:16px;}
#wrap {width:700px;margin:10px auto;}
#loading {display:none;}
#loading img {vertical-align:middle;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function() {
alert ('Start loading from xml?');
$("#loading").show();
$.ajax({
 type: "GET",
 url: "sitemap.xml",
 dataType: "xml",
 success: parseXml
});
function parseXml(xml) {
$(xml).find("url").each(function() {
//find each instance of loc in xml file and wrap it in a link
$("ul#site_list").append('<li>' + '<a href="' + $(this).find("loc").text() + '">' + $(this).find("loc").text() + '</a>' + '</li>');
$("#loading").hide();
});
}
});
</script>
<div id="wrap">
<h1>Parse XML with jQuery Sitemap</h1>
<ul id="site_list">
 <li id="loading"><img src="images/ajax-loader.gif" alt="loading" /> Loading Data..</li>
</ul>
</div>

Download

http://dl.dropbox.com/u/3293191/r-ednalan/jquery_xml.zip

CSS - Create a Button with Hover

CSS - Create a Button with Hover

The CSS Code
a.button {
background: url(../images/button.png) no-repeat 0 0;
width: 186px;
height: 52px;
display: block;
text-indent: -9999px;
}
Hover State CSS
a.button:hover { background-position: 0 -52px; }
Click State CSS
a.button:active { background-position: 0 -104px; }

CSS3 Cross Browser Examples - rounded corners

CSS3 Cross Browser Examples - rounded corners

#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

htaccess - Hide .php extension with url rewriting

htaccess - Hide .php extension with url rewriting

create a htaccess file in the root folder of your web directory. And have to put the following codes as your requirement.

Options +FollowSymlinks
RewriteEngine on
RewriteRule ^(.*)\.htm$ $1.php [nc]

Example
test.php to test.htm
http://localhost/test.htm

URL rewrite
Options +FollowSymlinks
RewriteEngine on
RewriteRule ^product-([0-9]+)\.html$ products.php?id=$1

example
rewrite the product.php?id=5 to porduct-5.html
http://localhost/product-5.html
calls product.php?id=5

CSS3 Search Form

CSS3 Search Form

.searchform {
 display: inline-block;
 zoom: 1; /* ie7 hack for display:inline-block */
 *display: inline;
 border: solid 1px #d2d2d2;
 padding: 3px 5px;
 
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;

 -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
 -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
 box-shadow: 0 1px 0px rgba(0,0,0,.1);

 background: #f1f1f1;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
 background: -moz-linear-gradient(top,  #fff,  #ededed);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
 -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
 font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
 background: #fff;
 padding: 6px 6px 6px 8px;
 width: 202px;
 border: solid 1px #bcbbbb;
 outline: none;

 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;

 -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
 color: #fff;
 border: solid 1px #494949;
 font-size: 11px;
 height: 27px;
 width: 27px;
 text-shadow: 0 1px 1px rgba(0,0,0,.6);

 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;

 background: #5f5f5f;
 background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
 background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
 -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

<form class="searchform">
 
 
</form>

Extracting Named Parameters in CakePHP

Extracting Named Parameters in CakePHP

In real php you would have collected the GET Parameters from a URL like this www.example.com/test.php?id=1 using the $_GET variable in this fashion $get_variable = $_GET['id']; You can also do the same in CakePHP. In CakePHP if you are passing parameters in the URL, then the URL would appear like this (also they are named) http://www.example.com/test/view/id:1 the controller like this



function view(id=null){
$get_variable = $this->params['named']['id'];
}

or

http://www.example.com/test/view/1/submit:yes

function view($id=null, $submit=null){
$get_variable_submit = $this->params['named']['submit'];
}

php - Upload image from url

php - Upload image from url

<?
error_reporting(E_ALL);

// define the filename extensions
define('ALLOWED_FILENAMES', 'jpg|jpeg|gif|png'); 
// define a directory 
define('IMAGE_DIR', 'image'); 

// check against a regexp for an actual http url and for a valid filename, 
$url = "http://www.philwebcreative.com/philweb_logo.jpg";
if(!preg_match('#^http://.*([^/]+\.('.ALLOWED_FILENAMES.'))$#', $url, $m)) { 
  die('Invalid url given'); 
} 

// try getting the image 
if(!$img = file_get_contents($url)) { 
  die('Getting that file failed');
}

// try writing the file with the original filename 
if(!$f = fopen(IMAGE_DIR.'/'.$m[1], 'w')) { 
  die('Opening file for writing failed'); 
} 

if (fwrite($f, $img) === FALSE) { 
  die('Could not write to the file'); 
} 

fclose($f);  
?>

Resize images on the fly

Resize images on the fly

Follow these steps:

1. Get the script and save it on your computer

Once done, you can display images like this:

<img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="" />

Demo

http://creativedesign-mind.com/r-ednalan/demo/resize_onthefily.php

Integrate WordPress Blog into CakePHP Application

Integrate WordPress Blog into CakePHP Application

INSTALL WORDPRESS IN CAKEPHP

1. Install wordpress under the webroot

==app\webroot\blog

2. added htacess in the root

==htaccess file in main CakePHP folder(root).

RewriteEngine on

RedirectMatch temp ^/blog/wp-admin$ http://www.example.com/blog/wp-admin/

RewriteRule blog$ /blog/ [L] RewriteRule blog/wp-admin$ /blog/wp-admin/ [L]

RewriteRule ^$ app/webroot/ [L]

RewriteRule (.*) app/webroot/$1 [L]

3. login wordpress admin

4. set up the the permalinks under Setting category menu then permalink

6. choose Custom Structure then enter this value

/%postname%/

7. above is the url blog

www.example.com/blog/Top-Firefox-Plugins-for-Web-Development

Shorter SQL statements by abbreviating table prefixes

Shorter SQL statements by abbreviating table prefixes






Instead of writing:

SELECT books.title, books.short, books.releasedate, authors.firstname, authors.lastname
FROM books, authors
WHERE books.author_id = authors.id AND authors.id = 21

You can write:

SELECT b.title, b.short, b.releasedate, a.firstname, a.lastname
FROM books b, authors a
WHERE b.author_id = a.id AND a.id = 21

Programming Language For Web Development (video from youtube)

Programming Language For Web Development video (video from youtube)

A good conceptual video about what a programming language is and what you need to know in terms of a web developer.

Animate a Contact Us Slide-Out Area using jQuery

Animate a Contact Us Slide-Out Area using jQuery

Contact us pages are usually boring static pages with a form, not very exciting so what we’re going to do is place the contact us form at the top of the page and create a button that slides out and reveals the form when clicked. All with the help of our little friend, jQuery.

If you want to know more and download the source follow the link below

http://inspectelement.com/tutorials/animate-a-contact-us-slide-out-area-using-jquery/

Demo

http://inspectelement.com/demos/jquerycontactus/

Download

http://inspectelement.com/demos/jquerycontactus/jquerycontact.zip

Learning jQuery in 30 minutes

Learning jQuery in 30 minutes

Animated Call to Action Button - Animate Button

Animated Call to Action Button - Animate Button

In this tutorial, you’ll find a walkthrough for creating a “Call to Action” button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.

If you want to know more and download the source follow the link below

http://sixrevisions.com/tutorials/web-development-tutorials/create-an-animated-call-to-action-button/

Demo

http://sixrevisions.com/demo/call-to-action-button/demo.html

Download

http://dl.dropbox.com/u/3293191/JQUERY/animate_button.zip

Scriptaculous ProtoFlow - Prototype

Scriptaculous ProtoFlow - Prototype

ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff!

If you want to know more and download the source follow the link below

http://www.deensoft.com/lab/protoflow/

Prototype Prototip

Prototype Prototip

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.

Style: Easy to customize.
Position: Complete control over tooltip positions.
Round: Configurable rounded corners, no PNG images required.
Speech bubble effect!
Works on all modern browsers.


If you want to know more and download the source follow the link below

http://www.nickstakenburg.com/projects/prototip2/

Sum HTML Textbox Values using jQuery

Sum HTML Textbox Values using jQuery

If you want to know more and download the source follow the link

Demo

http://creativedesign-mind.com/r-ednalan/demo/sum-textbox-value-javascript.htm