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>

Drupal 6 Installation on windows

DRUPAL INSTALLATION

1.UNZIP  Drupal-6.15 and rename folder drupal-6.1.5 to drupal and copy that in your server webroot
I am using XAMPP , so I kept this “drupal”  folder in “htdocs” folder
Start your Xampp server.
On browser , type:-
http://localhost/drupal
it will show this page as in screenshot
2.Follow drupal instructions
Choose language to English

1

3. After that you will get this screen

2

3

4.You will get screen like below and enter your DB name and all , after that click on ” SAVE AND CONTIUNE “ button

4

5. After that you will see screen as shown below .
This prompt error message because we don’t have “drupal_team”  database in MYSQL DB

5

 First create “drupal_team” db in MYSQL database
As  shown in screenshot

6

After creating DB name in MYSQL

6.Goto drupal installation browser
 
NOTE:- if u want then put prefix for your tables in “drupal_team” database. Its optional
See screenshot:-

7

7. after that we will see screen as shown and fill appropriate data .

8

9
10

8. AT last you will see screen as shown below , SMTP error will come but its just for mailing functionality which you can resolve in php.ini file.

11

PHP & ORACLE

PHP &  ORACLE

Introduction to ORACLE : –  Oracle DB is well known for scalability , reliability and features.It is a leading DB and is available on many platforms.

Oracle Terminology:  

  1. 1.       Databases and Instances :-  Oracle databases store and retrieve data. Each database consists of one or more data files. An Oracle database server  consists of an Oracle database and an Oracle Instance. Whenever an Oracle database server is started , a shared memory region SGA(System Global Area) is allocated and Oracle background processes are started. Combination of background processes and SGA is called an Oracle Instance.   
  2. 2.       Tablespaces :-  Tablespaces are logical unit of data storage made up of one or more datafiles. 
  3. 3.       Schemas:- A Schema is a collection of database objects such as tables and indexes. Typically, a single DB contains multiple schemas. Multiple Application can use same DB without any conflicts by using   different schemas. Instead of using a CREATE DATABASE command for new application , use CREATE USER to create a new schema in the database. 

PHP ORACLE EXTENSIONS

PHP has several extensions that let application use Oracle DB. Database access  and abstract library in each extension of PHP   is fundamentally similar. The differences are in  support for advanced features and programming methodology.

If you want to make full use of Oracle features and need high performance, PHP OCI8 extension  has to be used. PHP OCI8 is a main ORACLE Extension.

If you want database independence , use PHP PDO(data object) or ADOdb extension for database abstraction.

 

PHP Oracle Extensions

1.Oracle (Not recommended)

2.OCI8

3.PDO

4.ODBC

PHP Oracle extensions are written in C  and linked into PHP Binary.

 

 

OCI8 Extension :- OCI8 Extension is recommended extension to use. It is used in PHP 3,4 and 5.

Example:

<?php

$con=oci_connect(‘dbname’,’passwd’,’localhost/XE’);

$s=oci_parse($con,’select * from User’);

oci_execute($s);

While($res=oci_fetch_array($s,OCI_ASSOC)){

echo $res[‘name’];

}

?>

HOW TO GET OCI8 EXTENSION

Bundle Containing OCI8 Location and Current Release
  1. PHP Source Code
http://www.php.net/downloads.phpphp-5.2.7.tar.bz2
  1.  PECL Source Code
http://pecl.php.net/package/oci8oci8-1.3.4.tgz
  1.  Zend Core for Oracle 2.5
http://www.oracle.com/technology/tech/php/zendcore/ZendCoreForOracle-v2.5.0-Linux-x86.tar.gz

ZendCoreforOracle-v.2.5.0-Windows-x86.exe

   

Oracle has cross-version compatibility, that means if PHP OCI8 is linked with Oracle10g  Client Libraries, then it can able to connect with Oracle database  8i,9i,10g,11g. If OCI8 is linked with oracle 11g client libraries then it can able to connect with Oracle9iR2 onwards  .

Full OCI8 functionality may not be available unless Oracle client libraries and database servers are latest version.

OCI8 and Oracle Compatibility Matrix

Software Bundle PHP Version OCI8 VersionIncluded Oracle Client Libraries Usablewith OCI8
PHP Release Source Code Current release is 5.2.7 OCI8 1.2.5 8i, 9i, 10g, 11g
PECL OCI8 Source Code Builds with PHP 4.3.9onwards Latest release isOCI8 1.3.4 9iR2, 10g, 11g
Zend Core for Oracle 2.5 Includes PHP 5.2.5 OCI8 1.2.3 Inbuilt Oracle Database 10g client
       

ORACLE DATABASE XE :-

Oracle database XE (Oracle 10g ) is available on 32-bit Windows and Linux platform.Oracle DatabseXE is available on Oracle network http://otn.oracle.com/xe

Oracle Database XE has a browser based management interface, Oracle Application Express.

Installing Oracle Database XE on Windows

REFER :- http://www.oracle.com/technology/tech/php/pdf/underground-php-oracle-manual.pdf

REFERENCE :- http://www.oracle.com/technology/tech/php/pdf/underground-php-oracle-manual.pdf

Cloud Computing

Cloud Computing : –  It refers to the Utilization of shared , elastic resources and processing power accessed via Internet.

Cloud based developement means , outsourcing of various parts of application out of server & into the cloud.

Instead of storing Images , Videos , Audio or other files into File system , thay are stored in Cloud.

Instead of using Local server DB , a cloud-based DB is used.

Batch – processing and other functionalities are also performed on Cloud.

Most significant benefit of course is that Cloud’s capacity is theoretically limitless as compared to some Local servers.

Amazon Cloud related offerings are EC2 ,S3 and Cloud Front

EC2 :- elastic compute cloud , it allows developers to start instances of servers & control them via web services interface.

S3 :- provides storage on cloud.

Cloud Front :- S3 objeccts are esaily achieved via Cloud Front