CSS behaviour on IE & Other Browsers

In this post , i want to emphasize how exactly the css behave on IE and Other browsers like firefox , google chrome , opera etc.

I would like to share my personal experience and challenges which i have faced during working on different different browser for an application.
here are the some challenges in key points:

1.Display box in IE & other browser

Solution:
For IE:-

#box{ display:inline; border: solid 1px; }

For Other browser:-
#box {
display: inline-block;
border: solid 1px;
}

2.Anchor tag (hyperlink) visited issue

Html code :

tesing hyperlink

a:link {
color: #A5ACB0;
}
/* visited link */
a:visited {
color: #00ADEF;
}
/* selected or active link */
a:active {
color: #A5ACB0;
}
/* Hover link */
a:hover {
color: #00338E;
}

Test IE
Test ALL

For IE Broswer:-
After clicking on TestIE link , it will show a:visited color but when you go to other page and come back to the same page where you have TestIE link , the color of hyperlink will as a:link .
Logically , it should be a:visited color because you have visited the link.
This logic won’t work on IE 6,7,8 and other latest IE versions but work perfectly fine on any other browsers.

But After clicking on TestALL link on any browser, it shows visited color .

Advertisements

Image onmouseout , onmouseover and onclick

Requirement:- A web page should contain an image say top arrow image.
When user visit to a page , top arrow image should be in disable form (say in grey color) , when user hover over the image , it should get activated and turns to other color (say in green) and when user clicks on that image , it should turns to other color (say blue).

images:- top_arrow_disable.jpg , top_arrow_active.jpg and top_arrow_visited.jpg

1st Solution:-

<script type=”text/javascript”>
function checkHidden(id,checkVal){
var hiddenVal = document.getElementById(‘check’).value;
if(hiddenVal==’clicked’){
if(checkVal==’over’){
document.getElementById(id).src=”images/up_arrow2.gif”;
}
if(checkVal==’out’){
document.getElementById(id).src=”images/up_arrow3.gif”;
}
//document.getElementById(id).src=”images/up_arrow3.gif”;
//alert(‘Link is already clicked:Onclick takes precedence’);
}
else{
if(checkVal==’over’){
//alert(‘on mouse over’);
document.getElementById(id).src=”images/up_arrow2.gif”;
}
else if(checkVal==’out’){
//alert(‘on mouse out’);
document.getElementById(id).src=”images/up_arrow1.gif”;
}
else if(checkVal==’clicked’){
//alert(‘just clicked’);
document.getElementById(id).src=”images/up_arrow3.gif”;
document.getElementById(‘check’).value=’clicked’;
}
}
}

</script>
<a  href=”#top” onclick=”checkHidden(‘a1′,’clicked’);” onMouseOver=”checkHidden(‘a1′,’over’);” onMouseOut=”checkHidden(‘a1′,’out’);”>
<img id=”a1″ src=”images/up_arrow1.gif” name=”anandf” width=”16″ height=”16″ border=”0″>
</a>

2nd solution:-

 <script type=”text/JavaScript”>
<!–
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>
</script>

<a href=”#top” onMouseOut=”MM_swapImage(‘Top’,”,’../images/up_arrow3.gif’,1)” onMouseOver=”MM_swapImage(‘Image1′,”,’../images/up_arrow2.gif’,1)”><img src=”../images/up_arrow1.gif” name=”Image1″ width=”16″ height=”16″ border=”0″></a>

PHP PDO

PHP PDO :-PHP Data object is a database connection abstraction library for PHP 5.

What is  PDO ?

  • Its written in complied language(c/c++) , other php libraries are written in Interpreted language (AdoDB , PEAR DB)
  • its lightweight database connection abstraction library

WHY PDO ?

  • It support many databases , so you don’t need to write lines of code of each database , just write one code and run on any database
  • Speed . PDO is written in complied language but others php libraries like PEAR DB ,Adodb are written in interpreted language.

PHP supports many databases like mysql , sqllite , postgre sql etc.

mysql_connect($host,$user,$password)

sqllite_open($host,$user,$password)

pg_connect($host,$user,$password)

so if you have to change your database from say mysql to postgre or viceversa , then you have to change your code , so you have to do rework on that.

thats way PDO cam ein picture , so that you have to write just one code and it will be work on any database platform without changing codes again and again.

PDO: Activation PHP Data Objects Extension

Goto PHP/ext folder and check whether pdo extension exists or not.

php_pdo.dll , php_pdo_mysql.dll etc.

To enable PDO , go to PHP.INI file and uncommnet the code

;extension=php_pdo.dll -> extension=php_pdo.dll

;extension=php_mysql_pdo.dll -> extension=php_mysql_pdo.dll

Restart your apache server.

PDO: connection to databases

//mysql connection

$con = new PDO(‘mysql:host=$host,dbname=$DB’,$user,$pwd);

//sqllite connection

$con = new PDO(‘sqllite:$DB’);

//postgre connection

$con = new PDO(‘pqsql:host=$host,dbname=$DB’,$user,$pwd);

or we can write like this also

<?php
// configuration
$dbtype		= "sqlite";
$dbhost 	= "localhost";
$dbname		= "test";
$dbuser		= "root";
$dbpass		= "admin";
$dbpath		= "c:/test.db";

// switching
switch($dbtype){
  case "mysql":
    $dbconn = "mysql:host=$dbhost;dbname=$dbname";
    break;

  case "sqlite":
    $dbconn = "sqlite:$dbpath";
	break;

  case "postgresql":
    $dbconn = "pgsql:host=$host dbname=$db";
	break;
}

// database connection
$conn = new PDO($dbconn,$user,$pass);

?>

PDO: Fetch Mode

// database connection
$conn = new PDO("mysql:host=$dbhost;dbname=$dbname",$dbuser,$dbpass);

// query
$sql = "SELECT title FROM books ORDER BY title";
$q	 = $conn->query($sql);

// fetch
while($r = $q->fetch()){
  print_r($r);
}

// result //Array ( [title] => PHP AJAX [0] => PHP AJAX )


// query
$sql = "SELECT title FROM books ORDER BY title";
$q	 = $conn->query($sql);
$q->setFetchMode(PDO::FETCH_ASSOC); //fetch association 
// fetch
while($r = $q->fetch()){
  print_r($r);
}

// result //Array ( [title] => PHP AJAX)


$q->setFetchMode(PDO::FETCH_NUM);

// fetch
while($r = $q->fetch()){
  print_r($r);
}

// result //Array ( [0] => PHP AJAX )
$q->setFetchMode(PDO::FETCH_BOTH);
$q	 = $conn->query($sql);

// fetch
while($r = $q->fetch()){
  print_r($r);
}

// result //Array ( [title] => PHP AJAX [0] => PHP AJAX ) 




Working with Selenium-IDE & Running PHP Unit tests

Working with Selenium-IDE | Running Functional Tests | Runnig PHP Unit Tests

Selenium IDE is an integrated development environment for Selenium tests. It is implemented as a Firefox extension, and allows you to record, edit, and debug tests. Selenium IDE includes the entire Selenium Core, allowing you to easily and quickly record and play back tests in the actual environment that they will run.

Selenium IDE is not only recording tool: it is a complete IDE. You can choose to use its recording capability, or you may edit your scripts by hand. With auto-complete support and the ability to move commands around quickly, Selenium IDE is the ideal environment for creating Selenium tests no matter what style of tests you prefer.

1. Download selenium IDE from
http://selenium-ide.openqa.org/download.jsp

This will directly add IDE as fire-fox add-ons.
https://addons.mozilla.org/en-US/firefox/addon/2079
2. Start Firefox and then Start Selenium IDE: Tools->Selenium IDE.

You will see the following window.

3. Enter base url or open the site on which you want to perform functional testing.
IDE will directly open in play mode with the entry of base url as below. Here we want to perform testing on
http://www.offshoresoftwaredevelopmentindia.com/

4. After starting the IDE now simply browse the site. It� makes entry in the table as below

Now the entire test is like

Now stop recording by pressing red button.

In html format it looks like

We can export this file in any format we want as

In PHP format it looks as

5. Now to run the recorded test open new browser and press the green – play button

6. The test will run as follow

7. If there will be any error then that test will be highlighted by red line as

8. If you are on a slow internet connection than it may help to slow the test speed.

9. You can save the test case in php as follow..

Required changes in the exported PHP file is as follow

a. Change the class name same as stored file name as default class name will be ?Example?.
b. Enter the web-site name in the
$this->setBrowserUrl(”
http://change-this-to-the-site-you-are-testing/“);
Field.
c. Available browser options are
*iexplore
*konqueror
*firefox
*mock
*pifirefox
*piiexplore
*chrome
*safari
*opera
*iehta
*custom
That is write as follow
$this->setBrowser(”*chrome”);
(When we define browser as chrome then no need to get security certificate but in case of firefox or iexplore we need to take certificate. )

10. Downloading and installing Selenium RC
Selenium RC is a Java based command line server that starts browsers and runs commands you pass from your tests.

a. First make sure you have a Java runtime installed on your machine.
Otherwise download it from
http://www.java.com/en/download/manual.jsp
http://java.sun.com/javase/6/docs/technotes/guides/jweb/otherFeatures/jre_install.html
Test the version of JRE by entering command on command line as ?
java -version
b. Download Selenium RC from
http://selenium-rc.seleniumhq.org/download.html.
c. After extracting the files from the archive copy the ?selenium-server.jar? file to any directory you feel appropriate.
d. Start the Selenium RC server from the command-line by issuing the following command:
java -jar selenium-server.jar
This will start the server on port 4444.
e. Now the server is ready to accept test commands from your PHP script. Make sure you keep this server running till you finish testing.

11. Changes in selenium-server.jar file requires to run in Firefox is as below:

a. Open selenium-server.jar using winrar
b. locate 2 dirs: customProfileDirCUSTFFCHROME and customProfileDirCUSTFF
c. recursively explore each of those dirs, and when you find a file called install.rdf drag it to some temp location, and edit the following line:
<em:maxVersion>2.0.0.*</em:maxVersion>
change it to:
<em:maxVersion>4.0.0.*</em:maxVersion>
d. drag the install.rdf back into the archive and overwrite the old one.
e. do this for all the install.rdf files in those 2 dirs.

12. Installing PHPUnit
a. An easy way to install PHPUnit is to use the PEAR installer. The PEAR channel (pear.phpunit.de) is used to distribute PHPUnit so make sure that it is registered with your local PEAR environment:
pear channel-discover pear.phpunit.de
After the channel is registered install PHPUnit:
pear install phpunit/PHPUnit
Actual testing

Now that PHPUnit is installed and the Selenium RC server is up and running, it?s time to run our test we saved before in our ?Example.php? file. Type the following on your command-line:
phpunit Example

13. This will start the test. The PHPUnit Selenium driver will execute each test command from your file and send it to the Selenium server, which does the job of launching the appropriate browser, opening web pages, and performing various specified actions; and closing the browser after the test completes.

This will open new browser as

After successful execution the output will be as

 

REFERENCE:

http://www.offshoresoftwaredevelopmentindia.com/blog/category/php-development/

Tiny MCE Editor For Symfony Framework

TinyMCE is a powerful WYSIWYG editor control for web browsers such as MSIE or Mozilla that enables the user to edit HTML contents in a more user friendly way. The editor control is very flexible and it’s built for integration purposes (usage within systems like Intranets, CMS, and LMS, for example).

TinyMCE is developed by Moxiecode Systems AB and is currently released under the “LGPL” license.

TinyMCE has no direct requirements except for browser compatibility and, of course, JavaScript needs to be turned on.

There is NO back-end code distributed with TinyMCE.

How to use tinyMCE
Step 1 :
Download tinyMCE from this link :http://tinymce.moxiecode.com/

Step 2 : Extract tinyMCE zip file .

Step 3 : Copy tinymce/jscripts/tiny_mce folder
into
symfonyProjectName(any name)/web/js/

Step 4 : sfproject(say symfony project name)/apps/myapp(say application name)/config/settings.yml

copy this code to settings.yml file

all:
.settings:
rich_text_js_dir: js/tiny_mce

Step 5 : Goto your page where you want to put tinyMCE editor and copy following code there :

tinyMCE.init({
// General options
mode : “textareas”,
theme : “advanced”,
plugins : “safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager”,

// Theme options
theme_advanced_buttons1 : “formatselect,fontselect,fontsizeselect”,
theme_advanced_buttons2 : “cut,copy,paste,|,insertdate,inserttime,|,forecolor,backcolor,|,styleprops,spellchecker,”,
theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen”,
theme_advanced_buttons4 : “insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage”,

theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : false,

// Example content CSS (should be your site CSS)
//content_css : “$texteditorpath”,

// Drop lists for link/image/media/template dialogs
//template_external_list_url : “js/template_list.js”,
//external_link_list_url : “js/link_list.js”,
//external_image_list_url : “js/image_list.js”,
//media_external_list_url : “js/media_list.js”,

// Replace values for the template plugin
template_replace_values : {
username : “symfony”,
staffid : “symfony”
}
});

Step 5 : run symfony project 🙂

External links:
For FAQ :
http://wiki.moxiecode.com/index.php/TinyMCE:FAQ

http://wiki.moxiecode.com/index.php/TinyMCE:About