Tab Round by jquery January 20, 2010

Posted by arifhossen in JQuery.
add a comment

Tab Round Example:

At First you can download jquery with jquery corners js.Then apply below this code.

</head>

<body>
<div align=”center” class=’yourclassname’>
<a href=”#” ><div><div>Signup</div></div></a>
</div>
</body>

</html>

CSS and round corners: Making accessible menu tabs January 20, 2010

Posted by arifhossen in CSS.
add a comment

The solution: CSS menu tabs

We start with a simple link:

<div id="navigation"><a href="#">Home</a></div>

We’ll assign it this CSS code:

#navigation a
{
color: #000;
background: #ffa20c;
text-decoration: none
}

Which gives us:

Home

Needs a bit of work, right?

Adding the left menu tab corner

We need to make a small image with the same colour for the left rounded corner: – here’s one I made earlier. Let’s call this image ‘left-tab.gif’ and place it into the background of this link, using this CSS rule:

#navigation a
{
color: #000;
background: #ffa20c url(left-tab.gif) left top no-repeat;
text-decoration: none
}

This new CSS rule says that the background image should be ‘left-tab.gif’, the image should be on the left, at the top, and it shouldn’t be repeated – kind of obvious really. The result?

Home

We’re getting there, but we need to move that text over a bit as it’s on top of the left rounded corner. It’s pretty simple to do by adding some padding to our CSS rule:

#navigation a
{
color: #000;
background: #ffa20c url(left-tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}

Home

And the right corner

We can only assign one background image to a CSS rule so we need to make a new CSS rule and assign an image to that. We’ll start by inserting a <span> tag into the HTML code:

<div id="navigation"><a href="#"><span>Home</span></a></div>

Now we’ll just create a new CSS rule in which we’ll assign this right menu tab (another one I made earlier) to the <span> and we’re ready to go! We’ll call this image “right-tab.gif”

#navigation a span
{
background: url(right-tab.gif) right top no-repeat;
}

This CSS rule means that every <span> tag within an <a> tag will have this image as its background. And the final result:

Home

Perfect! So now you can… wait a minute, can you spot why it’s not so perfect? That’s right, we forgot to assign some padding to that <span> tag in the CSS rule:

#navigation a span
{
background: url(right-tab.gif) right top no-repeat;
padding-right: 10px
}

Giving us:

Home

Now that really is perfect! Resize the text again and see how it looks!

The final CSS touches

Let’s assign this link a nice hover effect with some new CSS rules. We’ll need a couple more background images, like and which we’ll call ‘left-tab-hover.gif’ and ‘right-tab-hover.gif’. Then, we just insert the following CSS rules and away we go!

#navigation a:hover {
color: #fff;
background: #781351 url(left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}

#navigation a:hover span
{
background: url(right-tab-hover.gif) right top no-repeat;
padding-right: 10px
}

Go on, put your mouse over it:

Home¹⁷

Making a tab menu

Now we’ve done all the hard work we can make as many of them as we want – go on mouseover them!

Home¹⁷
Services¹⁷
Take a tour¹⁷
About us¹⁷
Contact us¹⁷

Doing it this way however does bring up a new accessibility problem, namely that this navigation won’t make sense to anyone with CSS disabled. With no CSS these links look like:

Home¹⁷Services¹⁷Take a tour¹⁷About us¹⁷Contact us¹⁷

Hmmm… this is a problem, me thinks. The solution? Let’s put them into a list! The HTML will therefore look like:

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Take a tour</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>

Now let’s create some CSS rules for our list items, so that the menu tabs all display next to each other on the same line:

#navigation ul
{
list-style: none;
padding: 0;
margin: 0
}

#navigation li
{
float: left;
margin: 0;
}

To get rid of the bullets we used the CSS command, list-style: none and to display our menu tabs inline, so that they’re all stacked next to each other, we used float: left.

(At this point some of the more expert CSS coders may question the point of keeping the <span> tag, especially those who’ve read Doug Bowman’s Sliding Doors¹⁸ article. The reason we leave in the <span> tag is to make the entire menu tab clickable. If we were to assign one of the corners to <li> as a background image then that corner won’t be clickable.)

IE 5.x problems

Unfortunately these tabs won’t work on IE 5.0 on PC (and a couple of other browsers), as the rounded edges of the tabs don’t appear. As such, each menu tab will be displayed as a rectangle, with sharp corners. There’s an easy solution to this, which is to insert display: block into the #navigation a and #navigation a span CSS commands.

Sounds easy, right? Unfortunately not. By inserting these commands into the CSS, IE 5 on Mac will stack these menu items on top of each other. To make these display properly for IE 5 on Mac we’ll need to also insert the float:left command, but apply it only to this browser. But how do we apply a CSS command to just one browser? Easy – we use the commented backslash hack:

#navigation a, #navigation a span
{
display: block;
float: left
}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

The first CSS command says to float the menu tab content to the left, and the second CSS command cancels this out for every browser except IE 5 on Mac. When two CSS commands are specified for the same selector, the second one always takes precedence. However, IE 5 on Mac can’t read the second command because of the slashes, so defaults to the first CSS command. (If you really want to know how and why this works, read Commented Backslash MacIE5 CSS Hack¹⁹ by Sam Foster.)

The final code

The final HTML is:

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Take a tour</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>

And here’s our entire CSS code:

#navigation a
{
color: #000;
background: #ffa20c url(left-tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url(right-tab.gif) right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation a:hover
{
color: #fff;
background: #781351 url(left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}

#navigation a:hover span
{
background: url(right-tab-hover.gif) right top no-repeat;
padding-right: 10px
}

#navigation ul
{
list-style: none;
padding: 0;
margin: 0
}

#navigation li
{
float: left;
margin: 0;
}

Text Effects In jQuery January 10, 2010

Posted by arifhossen in JQuery.
1 comment so far

Font Effect with JQuery : We can use sample code for font effect by JQuery.

Font effect is a jQuery plugin that add some effect to html text.
The available effects are (for now) Outline, Shadow, Gradient and Mirror, here is an example:

download the plugin here

Below Code :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript” src=”js/jquery-1.3.2.js”></script>
<script type=”text/javascript” src=”js/jquery-FontEffect-1.0.0.min.js”></script>

$(‘#example1′).FontEffect({ shadow:true, shadowColor:”#f00″, shadowOffsetTop:4, shadowOffsetLeft:4, shadowOpacity:1, outline:true, outlineColor1:”#fff”, outlineWeight:2 })

$(‘#example2′).FontEffect({ outline:true, shadow:true, mirror:true, gradient:true, gradientColor:”#f00″ })
$(‘#example3′).FontEffect({ gradient:true, mirror:true, mirrorColor:”#298d79″ })

});
</script>
<style type=”text/css”>

#example1{ font-family :”verdana”; font-weight :bold; color :#5a7; font-size :3em; }
#example2{ font-family:”Arial”; font-weight:bold; margin-bottom:30px; font-size:60px; color:#fff; }
#example3{ font-family:”Impact”; font-size:3em; margin-bottom:30px; color:#9ae; }

</style>

</head>
<body>

<div id=”example1″>
Enter Your Text Here
</div>

<div id=”example2″>
Mohammad Arif Hossen
</div>

<!– Gradient & Mirror –>
<div id=”example3″>
Jquery Text Effect
</div>

</body>
</html>

Create watermark images using PHP December 22, 2009

Posted by arifhossen in PHP.
add a comment

Put watermark on images using PHP

<?php
// this script creates a watermarked image from an image file – can be a .jpg .gif or .png file
// where watermark.gif is a mostly transparent gif image with the watermark – goes in the same directory as this script
// where this script is named watermark.php
// call this script with an image tag

//put your main image into : images/yourimage.jpg

//put your watermark image into : images/watermark.gif

$imagesource = $_SERVER['DOCUMENT_ROOT'].”/”.”images/”.”yourimage.jpg”;
if (!file_exists($imagesource)) die();
$filetype = strtolower(substr($imagesource,strlen($imagesource)-4,4));
if($filetype == “.gif”) $image = @imagecreatefromgif($imagesource);
if($filetype == “.jpg”) $image = @imagecreatefromjpeg($imagesource);
if($filetype == “.png”) $image = @imagecreatefrompng($imagesource);
if (empty($image)) die();
$watermark = @imagecreatefromgif(‘images/watermark.gif’);
$imagewidth = imagesx($image);
$imageheight = imagesy($image);
$watermarkwidth = imagesx($watermark);
$watermarkheight = imagesy($watermark);
$startwidth = (($imagewidth – $watermarkwidth)/2);
$startheight = (($imageheight – $watermarkheight)/2);
imagecopy($image, $watermark, $startwidth, $startheight, 0, 0, $watermarkwidth, $watermarkheight);
header(“Content-type: image/jpeg”);
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);

JQuery Basic- November 22, 2009

Posted by arifhossen in JQuery.
add a comment

First lets go over the basics of jquery coding. All jquery starts with a “$” no matter what! In all of your jquery documents ( which is just a javascript file) you need the following code in your document, this code is to load your functions if you do not add this code your jquery will be useless.

$(document).ready(function() {
// all of your code goes here
});

What that code does is simply load all of your functions quickly, without slowing down your page it is only in jquery. For everyone that knows a little about javascript you probably know the “window.onLoad()” function, it does the same thing as “$(document).ready(function() {” but it waits until the entire page finishes loading then it loads in the javascript. This makes your javascript very slow especially if you have large images, the jquery code loads all of the javascript once all of the important stuff has loaded. Like the HTML and CSS structure, which means your javascript are now the coolest kids on the block.

Now that we have that out of the way let us go over calling classes and whatnot, look here:

$('.comments')

All this does is find all of your content inside the CSS class “.comments” , if your replaced the ‘.comments’ with something like ‘p’ jquery would find all of your paragraphs. Same thing for CSS id’s just use a “#” instead of a dot.
So now lets build on our code, let’s add a CSS class to everything inside inside “.comments”. Call it stripe, and it would add a background of a light grey or something. Also note that I am referring to comments in wordpress.

$('.comments').addClass('stripe');

Now all of our comments have a background of a light grey, so now lets make our comments striped like a lot of wordpress comments. Since the comments are in a list lets take advantage of that.

$('.comments:odd').addClass('stripe');

Now this will apply the “stripe” class to every other comment, making our comments striped =). Haha I like how I doubled this tutorial to tell you how to stripe your comments.

You now know how to find a class, id, or HTML elements using jquery and add a class to it. You can also replace “.addClass” with “.removeClass” to of course remove classes from your selected elements. What about highlighting comments oMouseOver?

$('.comments').mouseOver(function() {
$('this').addClass('hover');
});

“$(‘this’) refers back to the last “$(”)” which in this case would be “.comments”, so then the mouse over event adds a function that just says to add the class “hover”. Of course this function would only happen when someone triggers the .mousOver event (when someone hovers over a comment). Obviously the “hover” class would do something like add a new background color or a border, you choose. Although this looks promising we cannot leave the code like this, because then when someone hovers a comment it will not simply remove the “hover” class when they move their mouse away it will stay there. Let’s fix that!

$('comments').mouseOut(function() {
$('this').removeClass('hover');
});

Don’t you just love how easy and short jquery is? The really cool thing is that we are going to chain the .mouseOver and .mouseOut events togethor to make it even shorter. This little trick can be kind of confusing at first, I did not feel comfortable chaining code when I first started jquery. Here it is:

$(".comments").mouseover(function() {
$(this).addClass('hover'); })
.mouseout(function() {
$(this).removeClass("over");
});

Now the code is even shorter! I’m guessing you are pretty much in love with jquery right about now so I will leave you two love birds some alone time. I’ll be back with another fabulous article on learning jquery, and this time it’s on animations and all that fun stuff.

An easy to use jQuery Tabs plugin November 22, 2009

Posted by arifhossen in JQuery.
add a comment

An easy to use jQuery Tabs plugin

jQuery plugin development note – the main application object Over a period of time, I developed a system for developing jQuery plugins . I create a DIV block whose role is being the plugin application placeholder. This placeholder is usually added by the web developer to a location on their webpage where they want that plugin to be displayed. This makes plugin development easier. Defining the jQuery tabs plugin application object:

// Define the application placeholder for jQuery tabs
// The plugin will take care of the rest
<div id = "MyTabbedView"></div>

The plugin’s jQuery object will take the id name of the main application object, which in this case is MyTabbedView. The code will take care of writing the internal display into this application area by itself, so there is no need to write any additional HTML. Note that while the code is working properly, this is a tabbed view example that is limited to one tabbed view area per one initialization call by design. It would be possible to consolidate this code by providing an initialization interface that takes multiple div fields and builds multiple tabbed views on a single web page. Like with other plugins I had written for Authentic Society, this trivial task is up to the web developer implementing my plugin code on their own sites. Now that we have defined the main application object MyTabbedView, it’s time for the next step. Let’s create some content for our tabbed view pages:

// Create 3 pages, each id must be unique
// These id's are conveniently passed to the plugin's initialize function later
// You may place any content you wish into these blocks
<div id = "Page1">Page 1<br/>Description of jQuery Tabs plugin</div>
<div id = "Page2">Page 2<br/>How to use this plugin</div>
<div id = "Page3">Page 3<br/>Download plugin</div>

Initializing and Executing the jQuery Tabs plugin

<script type = "text/javascript">
    // initialize plugin code
    $(document).ready(function() {
 jQuery.Tabs.initialize( "MyTabbedView","300px", "150px",['Description', 'How to Use', 'Download'],                               ['Page1',       'Page2',      'Page3'] );
    });
</script>

We pass the main application placeholder MyTabbedView 

to the plugin Tabs.initialize function. We then pass the horizontal 

and vertical dimensions of our tabbed view respectively: 300px and 150px.

 We then pass two arrays of strings. The first array indicates tabs' names.

 The second array indicates the id's of the pages the tabs link to. 

If you wanted to create more than three tabs, simply extend both of the 

arrays in the same way as demonstrated in the code above, and don't forget

 to specify additional pages with unique id's (Page1, Page2, ... Pagen).

 Final words A tabbed view interface can provide a convenient way to display

 associative information in one place. This jQuery plugin creates a tabbed view 

by taking the minimum parameters required. This plugin can be further improved by 

providing an interface to create multiple tabbed views on one page, but I'll leave 

that up to you. jQuery once again shows how easy it can be to create something as

 complex as a tabbed view with just a few lines of code! Click to see this plugin

 in action:

How cakephp model load dynamically ? October 12, 2009

Posted by arifhossen in Cakephp.
2 comments

How cakephp model load dynamically ?

Cakephp Model load dynamically without create model or $uses variable.
But sometime need without $uses variable for load model in another controller by dynamically.
When we want to load model dynamically then we can use this code .

<?php

class CategoriesController extends AppController

{

var $name = ‘Categories’;

function add()

{

$this->loadmodel($dynamicModelName);

if( $this->$dynamicModelName->save($this->data)){

$this->Session->setFlash(‘Your Data Save Successfully’,true);

$this->redirect(array(‘controller’=>’categories’,'action’=>’index’));

}

How to Create CAPTCHA Protection using PHP and AJAX September 16, 2009

Posted by arifhossen in AJAX.
add a comment

CAPTCHA is a simple test to determine if a user is a computer or a human. It is used to prevent spam abuse on the websites. So if you use CAPTCHA on your web site forms, this can help in stopping some bots and making life harder for other bots in accessing or using your forms.

In brief the CAPTCHA protection works by generating a random string, writing it to an image, then storing the string inside of a session or by some other method. This is then checked when the form is submitted.

The goal of this tutorial is to demonstrate how to make your own simple CAPTCHA protection using PHP and AJAX technologies.

This tutorial is very simple, but if you are unfamiliar with PHP and AJAX this is a great place to start. The tutorial consists of a HTML page for presenting a simple form that will send the data, a JavaScript file for handling the Ajax functionality, and a simple PHP page that makes the actual comparison of the what is in the text box compared to what phrase was stored in the image.

Dynamic Css September 13, 2009

Posted by arifhossen in CSS.
add a comment

Dynamic Css

Get Browser Information September 13, 2009

Posted by arifhossen in PHP.
add a comment

Get Browser Information

« older posts

M	T	W	T	F	S	S
« Jan
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Mohammad Arif Hossen

Tab Round by jquery January 20, 2010

CSS and round corners: Making accessible menu tabs January 20, 2010

The solution: CSS menu tabs

Adding the left menu tab corner

And the right corner

The final CSS touches

Making a tab menu

IE 5.x problems

The final code

Text Effects In jQuery January 10, 2010

Create watermark images using PHP December 22, 2009

Put watermark on images using PHP

JQuery Basic- November 22, 2009

An easy to use jQuery Tabs plugin November 22, 2009

An easy to use jQuery Tabs plugin

How cakephp model load dynamically ? October 12, 2009

How to Create CAPTCHA Protection using PHP and AJAX September 16, 2009

Dynamic Css September 13, 2009

Get Browser Information September 13, 2009

About...

Categories

Archive

Blog Roll

Feeds