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

If 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.

<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;

 

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

In 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 :)

An 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