Geek Solution

jQuery previous link

2012-07-23T23:16:00.000-07:00

Most of the time in our site we need a previous link through that we can navigate in the backward motion. It help us to navigate our visited pages easily. It can also done with the previous button on the browser but if we want to add this previous link to our site it can be done with jQuery very easily. Its simple and yet beneficial. Lets take a look at the code given below

<script type="text/javascript">
$(document).ready(function(){
$('a.back').click(function(){
parent.history.back();
return false;
});
});
</script>

Just copy and paste this code in the header section of your page and add code given below at the position where you want to display back link between <body>......</body> tag.

<a class="back" href="#">BACK</a>

How to reload page when size of screen changes

2012-07-20T03:31:00.000-07:00

Sometimes we want to refresh our page each time size of screen changes. For example if I have a background image on my website and I want to resize it whenever size of screen changes so what I need to do is to refresh that page also so that it can easily set image size according to screen size. What we are going to do now, we just use javascript onResize() event at body tag.

Just check out this code:

How to combine and merge two images using php GD

2012-07-12T02:36:00.002-07:00

Hi, friends we all know that we can easily combine and merge two images using Photoshop and other designing software’s, but if we want to combine and merge two image at run time using some programming code. Like here I am using PHP GD library to generate image output after merging two images. Let’s check it out.

Here we have two images

Now what I want, I want to merge this pocket on this dress at run time. Let’s check the code.

<?php

// Set the content type header - in this case image/jpeg

header ("Content-type: image/jpeg");

// Defining the background image. Optionally, a .png image

// could be used using imagecreatefrompng

$background = imagecreatefromjpeg("bg.jpg");

// Defining the pocket image

$pkt = imagecreatefrompng("pkt.png");

// Select the first pixel of the overlay image (at 0,0) and use

// it's color to define the transparent color

imagecolortransparent($pkt,imagecolorat($pkt,0,0));

// Get pocket image width and hight for later use

$insert_x = imagesx($pkt);

$insert_y = imagesy($pkt);

// Combine the images into a single output image

imagecopymerge($background,$pkt,50,150,0,0,$insert_x,$insert_y,100);

// Output the results as a jpg image,

//you can also generate output as png, gif as per your requirement

imagejpeg($background,"",100);

After running following script your output will be something like this.

PHP: Change Font Face, Color and Size on user selection

2012-07-07T05:15:00.002-07:00

Hi friends as today I am here just to show how we can easily change font, color and size according to user requirements using PHP. What we need just three dropdown list from which user can easily select their desired font, color and size.

Step 1: Write down following code in your php file.

<?php

if($_POST['submit'])

; {

$face = trim(stripslashes($_REQUEST['fface']));

$str=$_POST['txt'];

$size = trim(stripslashes($_REQUEST['size']));

$color = trim(stripslashes($_REQUEST['color']));

}

//function for setValue of textbox

function setValue($fieldName)

{

if(isset($_POST[$fieldName]))

echo $_POST[$fieldName];

}

//function to store last selected value

function setSelected($fieldName, $fieldValue)

{

if(isset($_POST[$fieldName]) and $_POST[$fieldName] == $fieldValue)

echo ' selected="selected"';

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Online Testing Fonts</title>

</head>

<body>

<table>

<tr>

<td>Select Font Name</td>

<td>

<option value="0" <?php setSelected('fface', '0'); ?>>Select Any One</option>

<option value="Comic Sans MS" <?php setSelected('fface', 'Comic Sans MS'); ?>>Comic Sans MS</option>

<option value="Impact" <?php setSelected('fface', 'Impact'); ?>>Impact</option>

<option value="Arial" <?php setSelected('fface', 'Arial'); ?>>Arial</option>

</select>

</td>

</tr>

<tr>

<td>Select Size of Font</td>

<td>

<option value="0" <?php setSelected('size', '0'); ?>>Select Size</option>

</select>

</td>

</tr>

<tr>

<td>Select Color</td>

<td>

<option value="0" <?php setSelected('color', '0'); ?>>Select Color</option>

<option value="#000000" <?php setSelected('color', '#000000'); ?>>Black</option>

<option value="#ffffff" <?php setSelected('color', '#ffffff'); ?>>White</option>

<option value="#551011" <?php setSelected('color', '#551011'); ?>>Burntsienna</option>

<option value="#8B0000" <?php setSelected('color', '#8B0000'); ?>>darkred(SVG)</option>

</select>

</td>

</tr>

<tr>

<td>Enter Your Text Here</td>

</tr>

<tr>

</tr>

</table>

</form>

<label>

<span style="font-family:<?php echo $face; ?>; font-size:<?php echo $size.'px'; ?>; color:<?php echo $color; ?>;">

<?php

if($_POST['txt'])

echo $str;

else

echo "Sample";

</span>

</label>

</body>

</html>

You can also add more font, color and size as per your requirement. I hope it will help you.

IE doesn't show images getting red x's or broken links

2012-07-04T05:25:00.003-07:00

Some times when we create web pages few images are not shown in Internet Explorer but if we open that particular page on some other browsers such as Chrome and Mozilla it shows images without any problem. There may be few reasons for this:

Web page is not pointing to the correct location (url).
Your browser, spyware and other security features block that particular image.
Internet Explorer in few versions cannot open jpg image in CMYK mode.

I post this today because I face that problem with Internet Explorer today and found that few of my website images are jpg with CMYK mode, when I change their color mode to RGB it works fine.

jQuery Solution To Highlight image on hover

2012-07-03T02:18:00.001-07:00

To use jQuery on our web page firstly we need to add jQuery library. We can download it from internet or can also add it from direct using following url

Step 1: Add following script to the head section: