Dual View on Firefox and Google Chrome

Filed Under ( Browser, Firefox, Google Chrome, Javascript, Programming, Technology, Tips ) by admin on 10-09-2009

Tagged Under : , , , ,

Yes, split Mozilla Firefox or Google Chrome down the middle in one tab. For the multi-tasking type this will enable you to create 2 side by side “panels” in Firefox/Chrome in the same tab so you can browse two sites at once side by side.

Why not switch between tabs?

A few reasons, maybe you want to compare search results on both Google and Yahoo or do side by side comparisons of products or checking templates/themes look. Maybe you want to reference something in the left panel and type about it in the right and switching tabs is a pain.. Well this will enable you to do just that. See examples:

A comparison search for Chrome on Google and Yahoo

1

Click for larger view

Reference content in one panel, write about it in the other

1

Click for larger view

To use simply drag and drop the following in your bookmarks…

Dual View

When clicked, a pop-up box asks for the first URL which will be the left panel and the URL you are currently on will be entered by default however this can be changed so in my dual search i entered Google.com for this one. Once you ok it, it will ask for the second URL which is the right panel and i entered Yahoo.com for my search comparison.

Simple, Google Chrome or Mozilla Firefox split down the middle with a double panel all in one tab.

http://tayoymagmunimuni.blogspot.com/

0 Comments
Read More

MooTools Basic Tips (lesson 3): interaction with HTML Form

Filed Under ( CSS, Javascript, Programming, Technology, Tutorial ) by admin on 01-10-2008

Tagged Under : , ,

This post is the third lesson which I dedicate to MooTools for newbie and illustrates how to implement simple interactions with form input elements using this powerful framework and unobtrusive JavaScript code.

Some time ago I wrote this post where I explained some useful tips to enrich HTML Form using simple JavaScript functions. Some readers asked to me to illustrate similar examples using MooTools and unobtrusive JavaScript code, so in this tutorial I implemented the Twitter-like chars counter example of my previous post. This counter decreases, from the max value of available chars in the input field (20 in this example) to zero, while you type something into the input field:

3

Click on the link below to download the full code: Read the rest of this entry »

0 Comments
Read More

MooTools Basic Tips (lesson 2): get elements ID using unobtrusive code

Filed Under ( CSS, Javascript, Programming, Technology, Tips, Tutorial ) by admin on 01-10-2008

Tagged Under : ,

In this post I want to illustrate how to get the ID of DOM elements using MooTools and unobtrusive elegant code.
1. An “Obtrusive” way to implement it

Before to explain how to do it with MooTools, I think it’s better take a look at the following HTML code: Read the rest of this entry »

0 Comments
Read More

MooTools Basic Tips for Web Designer (Lesson 1)

Filed Under ( CSS, Javascript, Tips, Tutorial ) by admin on 01-10-2008

Tagged Under : , ,

In this first lesson you can see how to manipulate element properties, in particular how to get DOM element by ID, how to use getStyle(), setStyle() (to get and set CSS properties), toInt() to convert string to number and some examples to introduce how to write unobtrusive JavaScript code with MooTools.
1. Add Mootols framework to your page

First, you have to download the latest version of MooTools and add a link to the framework within the <head> tag of the page: Read the rest of this entry »

0 Comments
Read More

Adding external (Menu) JavaScript, CSS and Images in a project using CodeIgniter

Filed Under ( CSS, Codeigniter, Javascript, PHP, Programming, Tutorial ) by admin on 29-07-2008

Tagged Under : , , , ,

Open config.php file (Under application/config folder) and change the following line

$config['base_url'] = “”;

to

$config['base_url'] = “http://localhost/cimenu”; //here cimenu is the folder where all the files of CodeIgniter is

Now open autoload.php file (Under application/config folder) and change the following line

$autoload['helper'] = array();

to

$autoload['helper'] = array(’url’, ‘form’);

Now create a folder named menu under cimenu(This is the project name) folder, that is, in your root folder. Now put all the files of the external menu to the menu folder under cimenu.

Lets create a php file and name it mymenu.php under application/controller folder and write the following code: Read the rest of this entry »

0 Comments
Read More

Changing CSS property using Javascript

Filed Under ( Browser, CSS, Javascript, Programming, Tips ) by admin on 29-07-2008

Tagged Under : ,

Look at this example. When you hover over the box, the border, background color, and foreground colors change. This is caused by JavaScript dynamically changing the box’s CSS properties much like it does the “visibility:” property in pop up menus. This opens a whole new world of dynamic styling opportunities as most CSS properties can be accessed.

The generic form of the JavaScript reference to change a CSS property is:

document.getElementById("div_id").style.CSS_property_to_change = "new_CSS_value_in_quotes";

JavaScript does not always use the same term to refer to a property as CSS does. This is the biggest thing to keep in mind as you refer to CSS properties in JavaScript. Now lets start coding the example.

Making & Styling The Box

Read the rest of this entry »

Related Posts with Thumbnails

0 Comments
Read More
HI