Text content outside Div IE | Duplicate Characters Bug IE6
July 14, 2010 by rooturaj
Filed under Programming
Hey Programmer,
Since you are on this page I know you are a web developer. Cheers mate. I hope you have not spent one whole night awake and skipped dinner like me when you had a deadline and Microsoft Internet Explorer acted up. Especially the God Damned IE6 which should, IMHO, be banned and all users using that browser be taxed $1000 a year as Anti-Development tax. I am not exaggerating. We waste our time and electricity on fixing code for IE6 and that should be charged on users who don’t upgrade to Firefox or Opera or Chrome.
Anyway I wanted to share with you a peculiar error on IE6. You see parts of your content duplicated for no apparent reason. If it not aligned properly or breaking orientation its understandable…but showing some characters that make the end of the content is just outrageous. Now see this example -
a simple instance of the bug - snapshot
Notice the pink area in the footer. I have set the height of container divs and the two yellow/blue halves as same. The last three characters of my content in right half is being duplicated. I know its like majic but who the hell likes this shitty magic?
How to recreate the bug?
<!--main div statrs here--> </code> <div style="height: 300px; width: 300px; background: none repeat scroll 0% 0% #ffccff; float: left;"> <!--sub div statrs here--> <div style="height: 300px; width: 300px; background: none repeat scroll 0% 0% #ffccff; float: left;"> <!--left div statrs here--> <div style="height: 300px; width: 150px; background: none repeat scroll 0% 0% #ffff99; float: left;">This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div.</div> <!--left div endshere--> <!--right div statrs here--> <div style="height: 300px; width: 150px; background: none repeat scroll 0% 0% #00ffff; float: left;"> Right div text material here. Right div text material here. Right div text material here. Right div text material here.Right div text material here.Right div text material here.Right div text material here.</div> <!--right div ends here--> </div> <!--sub div ends here--> </div> <!--main div ends here-->
How to fix this IE duplicate characters issue?
The fix is rather simple .. You got to limit the use of comments. Yeah…for some ‘God Knows Why’ reason using comments can lead to bugs in your HTML coding. From what I have read about this ..it seems IE6 has a margin buffer on right..that is if you have a box with 100px width you cannot have two boxes inside it with 50px width each.
1. You need to provide atleast 3px free space on right so that Microsoft guys might stick their thing there. (sorry for being rude)
2. Else you need to remove the comments. The comments seem to trigger the bug in most cases.
Either one of the fixes or their combination should work for you. If it does not you can curse me in the comments for wasting your time and continue your search on internet.
Related Posts:
Displaying HTML DIV above flash content (transparency + z-index)
April 14, 2010 by rooturaj
Filed under Programming, Technology
We have faced this problem many of the times. When we want to display some message on top of all layers on a page or use some feature like jQuery light boxes. Normally the flash file continues to shine through the page. No matter what you do with layering the dom elements using z-index.
See the layering flash content problem definition here.
Before this, people used to dodge this issue with some fixes like hiding the flash area completely and then showing a static image of the html file in its place. Then it gave a semblance of layering flash beneath html content. But since flash 9 we can layer flash elements under html with ease.
See the solved situation where we have content over flash.
What you need to do to achieve this?
Nothing much. You set z-index value to your divs. Say we have a flash div (#flasho), a div for creating a the transparent layer (#transo), and the div for displaying content as a light box (#boxo)
Here is the css for them all. There is also the javascript code for the effect call on button click. (see solved example link above.
<style type="text/css">
#flasho{z-index:0;}
#boxo{top:200px;left:400px;border:1px double #600;width:532px;height:210px;margin:0px;z-index:100;position:absolute;display:none;background:#FFFFFF;}
#transo{background:#000000;height:400px;;width:100%;-moz-opacity:.80;top:0px;left:0px; filter:alpha(opacity=80); opacity:.80;display:none;position:absolute;z-index:99;}
</style>
<script type="text/javascript">
function addthiseffect()
{
document.getElementById('transo').style.display="block";
document.getElementById('boxo').style.display="block";
}
</script>
Now for the flash part we need to do this little addition. Add wmode=”transparent” to the <embed> tag and <param value=”transparent” /> to the <object> tag. See my Flash code below that I have used in my example.
<div style="float:left;width:343px;height:160px;margin-top:7px;z-index:0;"> <OBJECT codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="343" HEIGHT="160"><PARAM VALUE="flash/course-in-aviation.swf"><PARAM VALUE=high><PARAM VALUE=#00000><param value="transparent" /><EMBED src="flash/course-in-aviation.swf" quality=high bgcolor=#FFFFFF WIDTH="343" HEIGHT="160" wmode="transparent" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT> </div>
Related Posts:
Accessing PHP Cookies from different directories or domain path
February 25, 2010 by rooturaj
Filed under Programming
It is pretty easy to work with cookies. They are really tasty. I am talking about PHP cookies and yeah we programmers can taste them. I will be highlighting some ‘not so common’ points about cookies today. Ready?? Lets Go.
What are Cookies?
These are little bits of information stored on your computer by a website. The specialty of these bits is that they can only be opened by the site that stores it in first place. So Google’s Cookies are invisible to Yahoo’s and same the other way round. Cookies can be set for a particular time span and deleted by the site that created it. The user can also clear cookies whenever he wants to from his browser or manually from the personal folders of his system.
Now we know that Cookies are store houses for secure information that we webmasters use to dish out customized content to our visitors. They are widely used for storing user login information and shopping cart contents so that even if the user closes the browser and comes back the site allows access and restores his shopping cart. We could even use it to store your theme choice for sites or to tell you when you visited last time.
How to set a cookie Using PHP?
Its pretty easy. Use this code.
<?php
// set a cookie named 'pingu' with a value of 'Penguin'
setcookie('pingu', 'Penguin');
?>Recalling and using the set Cookie
We use the super global variable $_COOKIE to call the stored value of cookie the same way we do with $_GET and $_POST.
<?php
// We will use ‘pingu’ cookie in a sentence.
echo "Pingu is a ".$_COOKIE['pingu'].".";
?>Output: Pingu is a Penguin
Setting a time span for your cookie.
For security purposes we need to set some cookie expiry time. Some sites even ask the user how long to store his cookie. Others have a default expiry period. After this time your cookies is dead and you need to log in again to use the site. (or any other similar functionality)
<?php
$time = 7*24*3600 + time() ; //no of secs to store the cookie
// set a cookie named 'pingu' with a value of 'Penguin' for 2 days
setcookie('pingu', 'Penguin', $time);
?>Accessing a Cookies from a different directory of domain.
Now when using the previous methods to set cookie will restrict the access to the directory where it was originally set. Eg. If you set the cookie on file domain.com/user/setcookie.php you cannot retrieve the cookie on domain.com/member/getcookie.php. To get around this we need to set an accecibility parameter as well. See below.
<?php
// set a cookie named 'pingu' with a value of 'Penguin' for 2 days through out the domain.
setcookie('pingu', 'Penguin', $time, “/”);
?>Now you cookie can be called from any part of the domain. But it’s a not much recommended. Similarly you can specify particular directories/folders to access the cookie. Like “/user/” or “/member/” instead of “/”.
Overall Syntax format – setcookie (‘[string]’,’[string]’,[integer],’string’);
Related Posts:
PHP Image Resize script – Resize Images on the fly
January 30, 2010 by rooturaj
Filed under Programming
What does this Script do?
It changes the dimensions and hence the file size of image files on the fly. All you need to do is specify a source file, set the new dimensions and this PHP class will generate the new re-sized image for you.
Who should use this?
Any one who needs to re-size their images automatically.
For example: If you need to generate thumbnails for the images uploaded to your image sharing site then this is the solution for you. Sometimes we need to display smaller images to save band width and improve page load time.
What does this need?
PHP 5 + GD Library
(and of course the image files to manipulate and apache server)
To check if you have got GD library on your PHP bundle Create a php file with the following code and run it.
<?php
phpinfo();
?>
Let’s get working then.
Here is the Class File. It contains two functions resize() and resize_const(). The first one only takes in a width value with the source file and generates a new image with height in constrained proportions. While resize_const() takes in width, height and source file to generate an image of exact dimensions.
<?php
class ImgResizer {
private $originalFile = '';
public function __construct($originalFile = '') {
$this -> originalFile = $originalFile;
}
public function resize($newWidth, $targetFile) {
if (empty($newWidth) || empty($targetFile)) {
return false;
}
$src = imagecreatefromjpeg($this -> originalFile);
list($width, $height) = getimagesize($this -> originalFile);
$newHeight = ($height / $width) * $newWidth;
$tmp = imagecreatetruecolor($newWidth, $newHeight);
imagecopyresampled($tmp, $src, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
if (file_exists($targetFile)) {
unlink($targetFile);
}
imagejpeg($tmp, $targetFile, 85); // 85 is my choice, make it between 0 – 100 for
//output image quality with 100 being the most luxurious
}
//the function below will get you an image with the width and height values set by you.
// In case you need exact size images.
public function resize_const($newWidth,$newHeight, $targetFile) {
if (empty($newWidth)|| empty($newHeight) || empty($targetFile)) {
return false;
}
$src = imagecreatefromjpeg($this -> originalFile);
list($width, $height) = getimagesize($this -> originalFile);
$tmp = imagecreatetruecolor($newWidth, $newHeight);
imagecopyresampled($tmp, $src, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
if (file_exists($targetFile)) {
unlink($targetFile);
}
imagejpeg($tmp, $targetFile, 85); // 85 is my choice, make it between 0 – 100 for output image quality with 100 being the most luxurious
}
}
?>
Using the Class and the Functions.
Use the code below in as where ever you want it to work. (I am sorry but that does not include pasting the code on your photo frame)
<?php
$work = new ImgResizer('path/to/original/image.jpg');
$work -> resize(75, 'path/to/resized/image.jpg');
$work = new ImgResizer('path/to/original/image.jpg');
$work -> resize_const(200,150, 'path/to/resized/image.jpg');
?>
This is not my original code. I am building upon this base.
Related Posts:
Adding a Facebook share button and Digg this button with tweetmeme retweet button in wordpress thesis theme
November 5, 2009 by rooturaj
Filed under Programming, Social Media, Technology
I guess the thesis theme is among the most popular wordpress themes among professional bloggers. The best part about the theme is its ability to support custom functions and styles. So virtually everything is possible.
After I tried my hands at Thesis theme for Wordpress I added some plugins. I need not explain to you the merits of social media sharing buttons. The hottest in this section are Twitter, Facebook and Digg. Especially the share buttons with the counter are must haves for any blog. You get the code to add these buttons from the official portals. There are plugins to achieve the same. But it’s hard to get all three of them or two of them next to each other using different plugins. The example is right on this post.
If you need to have some thing like this on your blog, then follow this simple guide. I have put in screenshots to help you in process. We will be tinkering around with the coding. So some hands on experience with PHP and HTML is welcome. Else you can follow the coding exactly as it is and hope for the best.
Most popular and accurate Re-Tweet button with count comes from tweetmeme. They have a wordpress plugin for that. I am going to add official Facebook and digg share buttons with share count display to the tweetmeme plugin. In this example I am messing with Thesis wordpress theme. You can do the same to any theme you want. It only changes the code of the plugin so – a theme independent solution.
Browsing to the Tweetmeme.php file in wordpress
I believe you have a self hosted wordpress blog.
>>So navigate to the wp-content folder.
>> >>Find the plugins folder. Enter
>> >> >>Find the TweetMeme folder. Enter
>> >> >> >> locate this file tweetmeme.php
Now we tinker with the code. To do so, download the file to local system and open is with some standard text editor. I am using dreamweaver. Now look for this function in the code ‘tm_generate_button()’. Use the find feature in your text editor (ctrl +f ) to find this function. The code is rather long so might be hard to do it manually.
Editing the code
The red bordered area is where we do the actual change. You will have something different in the original file. Now add this code to the $button variable so that the final code looks like above.
<br><br><script>var fbShare = {size: \’large\’,google_analytics: \’true\’}</script><script src=”http://widgets.fbshare.me/files/fbshare.js”></script>
<br><br>
<script type=”text/javascript”>
digg_url = \”.$url.’\';digg_title = “TITLE”;
</script>
<script src=”http://digg.com/tools/diggthis.js” type=”text/javascript”></script> </div>
Replace the file and enjoy. Download this php file right here if it is too much for you.
You can do your own modifications to suit your purpose. Replace the <br> with spaces to get a horizontal effect. Feel free to comment.
Related Posts:
RESTful time for PHP developers working with ADO.NET
September 7, 2009 by rooturaj
Filed under Programming, Technology
Microsoft’s open source community manager, Peter Galli reported on this post about the new technology to bridge Microsoft .NET developer’s platform and widely popular PHP server side scripting language. The open source community is glad that this finally came up. PHP programmers can now connect to ADO.net data services with ease. It was not possible for Apache based clients to draw data form MS SQL servers with .net platform.
They use RESTful service interface to connect the previously stranger (to each other) internet data sharing methods. Sources say that full support will be available in Visual Studio 2008 SP1 and the forthcoming 2008 build.
Full report at http://news.idg.no/cw/art.cfm?id=3E8FFC06-1A64-6A71-CEB8414EFC373373
The PHP toolkit is available at Microsoft CodePlex site for open source projects.
Related Posts:
Disable Javascript on IE8 /IE7 (Internet Explorer) : Common Mistakes
September 4, 2009 by rooturaj
Filed under Programming, Technology
I was surprised when one of our engineers asked me – “ How can we disable Javascript on Internet Explorer?” He was testing Javascript validation and precautions against bypassing this layer of validation. As usual he googled it up and tried something. But it would not work. When I arrived at his system he showed me what he was doing to disable javascript but it was still working.
There was just one thing he was over looking. This I guess is one of the common errors people face while disabling javascript on Internet explorer.
In case you do not know how to do it here is a picture guide for you.
1.Open your Internet Explorer browser window.
2.Go to the menu and click on TOOLS
3.Choose Internet Options. (See below; it might help)
Step One - Tools>Internet Options (Disable Javascript IE)
Once you open the Internet Options then
4.Click the Security Tab. (Use the picture below as guide)
Step 2 >> Choose Security Tab (Disable Javascript IE)
Now here is the trick. The Zones. By default the Internet Zone is selected. So if you proceed further you would be able to disable Javascript on websites that are live on internet. If you are developing / testing on local files then it would still be working. So choose what you want. In our case, since we were working locally we have chosen the Local Intranet option.
Finally
5. Scroll down till you find the Scripting Option.
6.On Active Scripting Radio Button choose Disable.(Use the screen shot for reference)
Step 3 >> Disable Active Scripting (Disabling javascript IE)
If your job is not done yet make sure your Javascript function is al right. Else curse me for wasting your time. If your job is done you can leave a comment below.
Cheers
