Online HTML Preview

Online HTML Preview


online html previewHello friends, I developed another interesting tool for you today :)

Here is a little and a simple tool to write and preview html codes on the fly. Just type your html codes inside the textbox and see how it renders your html code below. Have fun…and make use of it.

Don’t forget to share this with your friends ;)


Type your HTML code here


Your Preview



 Tags : online html preview, html preview, online wysiwyg html editor, online html generator, online html editor wysiwyg, online html creator,online html editor with preview, online html text editor,online editor html, wysiwyg html

Oscommerce Password Generator

oscommerce password generator
Here is a little simple online tool for all those who are looking for a way to change the password of your oscommerce user account or your oscommerce admin account. You can simply put in your new password in the text box below, and click the generate button. This tool will generate the (MD5 + salt) hash which you can manually update in the database using phpmyadmin.

Note: Sometimes it might take 3,4 seconds to generate the password. Please be patient :)

Online Oscommerce Password Generator



Enter Your New Password :


Generated Password :

Get template file name in Wordpress easily!


You found a nice template for your Wordpress website, and then you noticed that you want to make some changes in that template to make it friendlier with your website. You have no idea which template file is delivering that content, and you don’t want to mess with a lot of codes to find that file name. You want a method to get the template file name easily.

Ok, here I have found an awesome, yet simple wordpress plugin which will do that task for you. It’s called “What the File!”.  It will show you the name of the template file which delivers the current content. Simple.


get the template file name in wordpress. What the File

First go to this link and Download the plugin. (or directly install it from Wordpress admin)

Once you complete the installation process and enabled the plugin, go to the page which you need to find the template file.

Then on the top admin navigation bar, you will find a new menu item called ‘What the File’. When you click on it, a dropdown menu will open with the template file name :).

You can click on that file name link. It will take you to the wordpress template editor page with that file opened their. All you have to do is edit.

If you wish to edit it outside the Wordpress admin panel, you can get the path and file name, then login through your FTP and make changes and upload it back.

I hope this article will surely save your time :) Please leave a comment to appreciate the time I spent to write this article if it was helpful to you.

Happy template editing ;)

Joomla Last Database Query!

joomla database queryJoomla is a popular CMS used in creating websites easily without need to know the web development languages such as html or php. However, if you are a web developer who develops custom modules or components for Joomla, you will definitely have to face situations where you need to print the last executed mysql database query for debugging purposes. The scope of this article is to show the way of printing the last query.



As I have already mentioned, the following method is very useful when debugging your database related bugs in your Joomla component or module. Let us assume that you are running a simple query as below;

$db = JFactory::getDbo();
$query = $db->getQuery(true);
$query->select('*'); 
$query->from($db->quoteName('my_users')); 
$query->order('user_id ASC'); 
$db->setQuery($query);  

What I have done here is simply selecting all the data from my “my_users” table. I believe you already know what you have to do to get the data and print it from the above query. Let's say if you did not get the expected results from the above query, and you are sure that the table already has got data in it. Then definitely there should be something wrong with the query. So let's print it and see whether our query is properly generated. Adding the following lines below the above code will print the last query which is being executed.

echo $db->getQuery();
die(); //break the code below this line.

Now you can see the query in plain text, so you can check if there is anything wrong in it like incorrectly spelled table name, column name or any other mistake in your query. Also you can run this query in your phpmyadmin / or your mysql client software and see if it returns any data.

Joomla database query, Joomla Database, Joomla mysql Bug



Find the host name of the mysql connection in PHP

Find the host name of the mysql connection in PHPIf you ever face any situation where you want to get the name of the mysql host you / your web application is connected to, you can use the following little query and find it easily. I recently worked in a project which was initially developed by someone else, and I had to make some minor changes in the codings and the database tables. So I looked for the connection file and found out that the host name mentioned there was localhost (as usual). I had no cpanel login details with me. Besides, for database things what I usually do is, I make a connection to the database using my Navicat and run all queries there as it saves a lot of the time.

In cases where I need to find the host name, I use the following mysql query. Here is how you can use it in your PHP application and quickly find out the mysql hostname.

<?php
$sql = "SHOW VARIABLES WHERE Variable_name = 'hostname'";
$qdata = mysql_query($sql);
print_r(mysql_fetch_array($qdata)); // prints debug.
?> 

Now you can easily connect to the mysql database with your favorite database client.

Please feel free to leave a comment if this article was helpful to you :)

Embed FLV video in HTML

Embed FLV video in HTMLA “Video” is an essential element for many websites today. Unlike in early days, the usage of videos have significantly increased among internet users and the websites today. People tend to watch and react for videos very much than the usual static images. The availability of high speed internet connections and the many number of free video sharing websites like Youtube have made people to watch videos regularly. So as a webmaster, if you are not making use of videos in your website, you are losing many additional benefits you can get from your website.

When embedding videos in a website, you will have two options to select from.
  • Hosting your videos with a free video sharing website like “youtube.com”. 
  • Hosting in your own web server.
The main focus of this article will only be on the second option. We are discussing how to embed a video in your website which is hosted on your own web server.

Also, note that we are specifically talking about embedding FLV videos only.

We know that with HTML5, a new tag for embedding videos was introduced to embed videos in your websites. That is very easy to use and you can find many articles in internet for HTML5 video embed code samples. But the bad thing about this great HTML5 video tag is, you can't use this tag to embed FLV videos in your website. So definitely you will have to go for an alternate solution, and in this article I will show you a nice script which you can use to embed FLV videos easily in your HTML website.

To embed FLV videos, we are using a swf file which can be downloaded from the following URL.

code.google.com/p/youplayer/downloads/detail?name=mediaplayer.swf 

Download the above file and place it in your root directory, or the directory you have uploaded your FLV videos. I recommend to keep your FLV videos and this .swf file in the same directory.

Now, in your web page where you would like to embed the FLV video, you can paste below code. Make sure that you change the file paths correctly.
<embed allowfullscreen="true" height="250" src="/videos/mediaplayer.swf?file=my_video.flv" width="400"></embed>
 
The output of the above code will be as shown below;

Embedding FLV video in HTML
 

According to the above example code, the “mediaplayer.swf” is uploaded to the 'videos' folder, and my FLV videos are also in the same directory. I can now simply call the flv video file only using its name 'my_video.flv' since both the video and the .swf file are in the same location.

Even though we have discussed only about FLV videos here, you should know that this method can be used to embed any other common video formats in your website. This method is very useful when inserting FLV videos, since the native HTML5 tag doesn't support FLV.

I hope my article was helpful to you. If you find any errors or mistakes in my article please feel free to correct me :) 

Embed FLV video in HTML, FLV Html5, HTML video embed

How to edit any web page from your browser?

edit web page using browserIn this article I'm going to show you how you can edit any webpage using your browser.

First of all, remember that this is not a permanent edit to the webpage. We all know that when we are viewing a website, what happens is that simply we send a request to the web server asking for a particular webpage / website, and then the web server returns the HTML web page to us. Since we cannot convert this HTML content into a readable or visually pleasing content, we use web browsers to do this task on behalf of us, and show us the webpage.

What we do here is, we will change that HTML code returned by the web server, so the web browser will show the page as we changed it. Nothing is not going to be changed in the server side, ie. we are making changes only in the HTML code returned by the web server. It is like editing a copy of the web page we temporary have :)

I am using Firefox Web Browser to do this task. But you should know that this trick is not limited only to Firefox. You can do the same thing using Google Chrome as well. Since most of the steps will be remained similar in both the browsers, I will explain this only for Firefox. You can ask me anytime if you want support with any other browser.

How to Edit Web Page using Browser?

To start the trick, Go to any website. Here I am selecting my favorite search engine, Google.  http://www.google.com You may choose any website you like.

Once the web page is fully loaded, right click on an empty area and select "Inspect Elements" Option (which is the last option, in most cases). You can also use the shortcut key “F12” in Windows to activate this panel.

When you click on that, a window will open in the bottom of the screen (see the image below). There will be a small icon in your top left hand corner (It is an icon of a mouse pointer). Clicking on that icon will toggle a tool which you can use to select elements on the page.

With this tool you can select any element in the web page and edit it. In this example, I am going to replace the country name shown below the Google's logo with a my own version. These steps will be the same for every element inside the page.

Click on the above Mouse Pointer Icon. Once it is activated, click on the text below the Google's logo to select that text element. Since I am viewing the website from Sri Lanka, the text appeared here is “Sri Lanka”. I will change this text and type something like, “Sri Lanka - The Miracle of Asia”, which is more suitable :)



So first I will click on the text “Sri Lanka” using the select element option. Then in the inspect window, the selected text will be appeared. Now you can double click in the text inside inspect element window to make the text editable, and change the text as you wish.



This is one of the simple ways you can edit any webpage inside the browser window. (There are few other ways too). This tool is very useful for web developers and designers to make changes in a webpage which is under development, so they can see what is needed to be changed and give it a try in the browser itself without editing in their editors and reload the page to see the changes.


Bonus Tip for non techies :)

Well, I know that all of you are not Web Developers or Web Designers. So what's special for you?

Don't worry..I will tell you one thing...If you have any friends in your office who are always having their web browsers opened, you can use this trick. (make sure that they don't see you :D) Have fun!!!

Also, if you enjoyed this article please do not forget to leave a comment :)

Jquery Image Popup on page load simple plugin.

Jquery Image Popup simple pluginAn image popup sometimes become a very important element / feature to a website. We usually use popup images as banners to notify something important to our visitors. In the recent time I came through many occasions where I had to use this kind of an image popup when the page loads. There are many Jquery Image popup plugins available now. But the major disadvantage is that sometimes they are going beyond the expectations. I mean most of the Jquery plugins for popups are large in size or much advanced when compared to the simple requirement sometimes we need, which is just to insert a popup image in the webpage when the page loads.

Today I wanted to insert another image popup to a website, and the website was already using Jquery. But my concern was that I had a very limited time to implement this on the website, and since this website was having very big traffic, I did not want the plugin to be too big. Besides, this was only a temporary one. So I looked for a nice, yet simple and a light weight Jquery Plugin.

While searching, I found this simple plugin called 'Colorbox'. It matched my requirement exactly, and it was very light. No round ways like in other plugins and you get the ability to use it straight.

You can Download the Plugin and the other necessary files through link :

popup.zip - Download Jquery Image Popup Plugin.

This folder contains all the css, images and the javascript files.

How to Use this Jquery Image Popup Plugin?

It is simple. Once downloaded, extract the contents inside the zip archive into a folder in your website root. We'll call this folder as "popup".

Now your website structure would look like,

Document Root (public_html)
 |---   popup (our new folder)
 |---   your_other_folders
 |---   ...
 |---   index.html

Now open your desired file (which you need to insert the image popup) and put the following code in between your <head> </head> tag.


<link href="popup/colorbox.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="popup/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.fn.colorbox({href:"popup/popup_image.jpg", open:true});
});
</script>


That's It....If you want to make the popup to appear a few seconds after  the page is loaded, you can change the script to below;


<script type="text/javascript">
$(document).ready(function(){
    setTimeout(function() {
        $.fn.colorbox({href:"popup/popup_image.jpg", open:true});
    }, 1500);
});</script>

Where 1500 represents the delay in miliseconds.
 

Hope you enjoyed my article. Please do not forget to leave a comment if this was helpful to you. :)
 

Incoming Terms :
jquery image popup
jquery popup image
jquery simple popup
jquery open popup
jquery popup window
jquery popup

Fixing Wordpress Error : All the pages redirecting to the index.php

Wordpress Bug


fix wordpress bug in permalinks
As the title suggests, this is another error/bug you may come across while working with Wordpress. I recently found this error in one of the Wordpress websites and I was confused as I had no idea how it happened. All I could remember was the site was working properly few days / weeks back.  So as usual I checked to see if any newly installed plugins have caused this bug. But I couldn't find a proper solution. So I had to use Google to find any clues as to what might have caused this and I found one question at Stackoverflow. Luckily I found  a good hint there, but nobody had given a proper answer.

Following on that hint, I could solve my problem and I thought I should keep it written in my blog so that someday, somebody may find this  article useful :)  Please read below to understand the issue and how to fix it quickly.

What is the Error?
Well, it is not a kind of error that you may find usually in your wordpress website. But if you got hit, you may go crazy since this error (rather I would call it a bug, or whatever) doesn't stop running your wordpress website or does no harm except it will ruin your user's experience. What it does is, all your pages will be redirected to your homepage. What a disaster, yeah? Your visitors who are coming only to read your content will find a buggy site and leave it quickly without knowing that it is a bug. Besides, who would care about a bug in someone else's website? They will go to another one because there are plenty of websites delivering the same kind of information.

How to Identify the Error?
Check your website in regular time periods to know that it is working properly. (Open few common links and make sure that they open the correct page.). I am not saying you may definitely get this bug in your wordpress website, but who knows? 

What is the reason?
As I mentioned above, I still have no idea to confirm what exactly caused this bug. But most probably, it might be due to a malfunctioning plugin or a bug in your template. I am confident that this bug is not coming bundled with the Wordpress original download package. That is why you find this bug in your website after few weeks or months after the installation.




How to Fix this?
Here comes the most useful and the easiest part of this article :)

Whatever the reason it would be, you can fix this bug in less than 30 seconds.

Step 01 :
Log into your Wordpress admin area.
Step 02 : Hover your mouse over “Settings” in your admin dashboard menu bar.

worpdress permalinks bug

Step 03 : Click on “Permalinks” from the menu appeared after step 02.
Step 04 : Now, you will see the Permalinks options page, “Do not change anything”. Just Click on the “Save Changes” button.

worpdress template bug redirect to home page

Step 05 : Check whether your site is working fine now.


Additional Steps (Optional)
Step 06 :
If the above solution didn't work for you, leave a comment here. Sometimes we can discuss further.

OR


If it worked for you, as a way of showing you liked that, leave a comment here :)

That's it....you have fixed your Wordpress website's annoying Bug in less than 30 seconds...Just a click of a button. But you know? I had to dig much deeper in Google's search results to find this solution. If you think this will be useful to your friends you can share it over social network sites like Google+, Facebook or Twitter.

SEO has changed so much over the last few years. They need a lot of shares over social networks...That is why people say sharing is caring :)

Wordpress Bug, Wordpress pages redirecting to index.php, Wordpress Hack, Wordpress Permalink error, Wordpress Error, Wordpress not showing correct page, wordpress permalinks not working

Joomla Datepicker : How to insert in components

Joomla Datepicker


joomla datepickerJoomla is a popular Content Management System which helps people to develop websites easily without the need of learning web development languages like html, css, php etc. Anybody who is having a basic understanding of using web based softwares can create and maintain a website using joomla as it is already equipped with many modules and components, backed and developed by its open source community. Joomla is Free, Open Source and more than everything, it is easy to use. Joomla was the most popular and the most used CMS for websites few years ago. The usage of Joomla was slightly gone down over the time with the growth of another elegant Open Source CMS, called “Wordpress”. Many web developers preferred Wordpress over the Joomla as it was simpler to use. But Joomla is still being used by many web developers and webmasters to create websites as it has more features than in Wordpress. In this article, I am going to show you how to insert a datepicker in your custom developed Joomla Component or a Module.

Joomla has its own datepicker built within the Joomla framework for you to use in your components. To insert the datepicker simply put the following code.

<?php
JHTML
::_('behavior.calendar');
?>


Then wherever you want to include the datepicker, you can call the following function

<?php 
echo JHtml::calendar('date''%Y-%m-%d');
?>


This will generate a datepicker textbox as below;



So that is how to insert a datepicker within your custom Joomla component or Module. See how easy it is. You can use this datepicker for any kind of a component related to the time and date. For an example, if you are developing a Hotel Reservation Component, you can simply integrate this datepicker for a availability checker or a check-in date selector. One thing I am not happy about this datepicker is that it is not that much beautiful. It will definitely not go with a modern template, so you will have to use some third party datepicker plugin for sure ;) This will be useful if you are not concerned much about the design of the datepicker. Anyway, the scope of this article was only to show the way of adding the built in Joomla datepicker in your custom components. The decision to use it or not will be always up to you :)

Please leave a comment if this post was useful to you.