Friday, December 28, 2012

Stop Bounce webapp in iphone

To stop bounce iphone view on the phonegap because iphone native app does not bounce
Go to the cordova.plist  file and you can see the key name "UIWebViewBounce" its default value id yes.  set value "NO".



and check app.. cheers.

loading message until all the images are load


Start loading when function call.

$.mobile.showPageLoadingMsg();
$.each(data.cmspages, function(key, value) {
                       content+='<li class="ui-li ui-li-static ui-btn-up-c">'+
                       '<div class="ui-grid-a">'+
                       '<div class="ui-block-a left_thumbs">';
                       for(var i=0;i<value.images.length;i++){  // multiple images in single page.
                       content+='<img src="'+imagepath+'ayana/files/gallery_image/'+value.images[i]+'" class="image_'+id+key+'">';
                       }
});

Dynamic youtube video in phonegap


Get video url like: 
http://www.youtube.com/watch?v=l32LjEtTUkY
http://www.youtube.com/embed/l32LjEtTUkY
l32LjEtTUkY

Create function like below:

function Loadvideo(catvideo){

//Get video ID from catvideo variable.
var videoid= catvideo.substring(catvideo.lastIndexOf('=')+1);
if(videoid == catvideo){
        var videoid= catvideo.substring(catvideo.lastIndexOf('/')+1);
}

Wednesday, December 26, 2012

Reduce query page transition time.

Go to the Jquery mobile css file.

find .in and .out in the css. you can see the below code
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
}


 and reduce the time 350ms to 10ms or as you want in these css like below.

.in{-webkit-animation-timing-function:ease-out;
-webkit-animation-duration:10ms;
-moz-animation-timing-function:ease-out;
-moz-animation-duration:10ms
}
.out{-webkit-animation-timing-function:ease-in;
-webkit-animation-duration:10ms;
-moz-animation-timing-function:ease-in;
-moz-animation-duration:10ms
}

I hope this will help you.:)
cheers...

Disable Active page When loading start

Open jquerymobile.js  and find below text

<span class='ui-icon ui-icon-loading'></span>

add one div element before the span like: 
<div class='inner_loader ui-loader-verbose'>

and end it after the h1 tag, that is created after span.
and add below css in your style.css.

Regular expresion to validate URL

var url = value.v_url;

var pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

if (pattern.test(url)) {
        content+='<a href="'+value.v_url+'" target="_blank">'; //  Url is valid
}
else{
        console.log("invalid url");
}

Tuesday, September 25, 2012

Mobile website not fit to the screen.


Open the Html file and write below code in the first line.

For Mobile site:


<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>


If Doctype is already exist like below then replace it.

For Desktop site.


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>





Wednesday, September 12, 2012

Password Protect Directory using .htaccess

1) Create new .htaccess
and write below code in the .htaccess file.

AuthName "Section Name"
AuthType Basic
AuthUserFile /home/username/.htpasswds
Require valid-user

Wednesday, August 29, 2012

Box Shadow using CSS3

Hello Guys.
There are basically two types of the shadow to box. one is outer its looks like the glow and some times it gives 3D effects. and another is for the inner glow or inner shadow.
instead of CSS3, we have to use image for the shadow, glow and inner shadow.
so its speedy and easy to change.

1) Outset Glow

Syntax Attributes: 


Inset: NO
Horizontal Length: 5px
Vertical Length: 4px
Blur Radius: 50px
Spread: 1px
Hex: #000000

Friday, August 24, 2012

Create .htaccess file for the HTML site

Create one text file name is 'htaccess.txt' in the root directory of the server.
and copy below text in htaccess.txt file.

Below is a basic structure of the htaccess file.
IndexIgnore .htaccess */.??* *~ *# */HEADER* */README* */_vti*

<Limit GET POST>
order deny,allow
deny from all
allow from all
</Limit>

Tuesday, August 14, 2012

Thumbnails slider is too wide! Please reduce the number of thumnail images or size. in HOT Joomla Gallery

When HOT Joomla Gallery load in ie9, safati and chrome I found the error message like "Thumbnails slider is too wide! Please reduce the number of thumbnail images or size."

SOLUTION:
write below code in the header section and reload the gallery page.

<?php
//remove mootools.js and caption.js
$headerstuff=$this->getHeadData();
reset($headerstuff['scripts']);
foreach($headerstuff['scripts'] as $key=>$value){
 unset($headerstuff['scripts'][$key]);
}
$this->setHeadData($headerstuff);
?>

and find out the below syntax in header of index.php page and comment it.
JHTML::_('behavior.mootools');

I Hope it will help you:)

Tuesday, July 31, 2012

Load JSON Data Using Ajax


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

<script type="text/javascript" >

$( '#page1' ).live( 'pageshow',function(event, ui){
  getData();
});

Monday, July 30, 2012

How to solve Ubuntu Drive Mount error

Open the Terminal.
Go to Applications > Accessories > Terminal

Type below Code in terminal and press enter

$ sudo apt-get install ntfsprogs


This package has a nice collection of tool for ntfs drives. To fix your problem check your drive name like /dev/sda2.

and type below code.
$ sudo ntfsfix /dev/sda2

This should fix the disk. Reboot your computer.
I hope it will help you..:)


Create JQuery Mobile Multiple page


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>

Thursday, July 26, 2012

Unable RAR file support in the Ubuntu Linux.


Now, open the terminal from Applications > Accessories > Terminal or Press Ctrl+Alt+T and run the following command:
sudo apt-get install rar unrar
Now you able to extract the.rar files.
Cheers..

Some Css tricks for square and triangle..

Hello...
Style sheets are the way that standards-compliant Web designers define the layout, look-and-feel, and design of their pages.  and trough the css webpages looks great.
Some times we have to use images instead of the css. because we are aware of some tricks of the css. 
here i share some tricks. 

1) Triangles in the Square.

in above image. i have use the css to create square using 4 triangle.
CODE:

<style>
.triangle{
border-left: 200px solid red;
border-top: 200px solid yellow;
border-bottom:200px solid green;
border-right: 200px solid blue;
display: inline-block;
}
</style>

Wednesday, June 20, 2012

Can not able to drag form fields in Chronoform Wizard Mode

When i develop one site then  I faced issue with the chronoform component. I am not able to create form via wizard edit mode. I tried a lot and then I found one solution for that. and i like to share with you guys.

If you face problem like.. you drag the form elements in the area and its not drag perfect like below image...

Monday, June 18, 2012

Can't able to view positions in the 1.6, 1.7 and 2.5??

I am able to view the positions in the 1.5 version of Joomla but in the 1.6 and later version the position is not display by appending ?tp=1 after URL.

I thought is there any other syntax in the new joomla to view positions. but no. new joomla has disable the position from the back-end for the security.  if the developer want to view the position they are able to enable that setting.

For enable. just follow below steps.

Saturday, June 16, 2012

Append "*" before Required fields label in Sobipro

I want to add * before require field label. there are not any setting option in the sobipro configuration. and sobipro is used .XSL format to display fields to the front end. and if i add * in the XSL file then star will display above all the fields.

Open your sobipro section and then open edit.js file from the js directory in template files template files. and write below code in the top of the file.

Wednesday, May 16, 2012

Change joomla site color on reload or on page change

Hello Guys,

Create some .css files for colors you want.

if you want orange then create one css file orange.css
same way for all colors you want.

Sequence color change

see below code.

Saturday, May 12, 2012

Check Validation using Javascript


Hello,

I face the many problem when I validate form using javascript. here i share you a validation functions for you guys...


// empty check validation
function check_empty(text) {
   if (text == null || text == "" || text == "0.00")
      return false;
   return true;
}

View Joomla Positions

Hello,

If you want to view joomla template positions of any of the sites then just type ?tp=1 in the end of the domain name.
For Example.

www.joomlasite.com/?tp=1
www.joomlasite.com/index.php?tp=1

joomla positions are looks like the below image.



Cheers...

Monday, April 30, 2012

Create collapsible content area in joomla


open selected template index.php file and put below code where you want to collapse div.

<div id="content">
     <?php if($this->countModules('content_right')) : ?>
       <div id="content_left"><jdoc:include type="message" /><jdoc:include type="component" /></div>
     <?php elseif(!$this->countModules(' content_right ')) : ?>
       <div id="content_full"><jdoc:include type="message" /><jdoc:include type="component" /></div>
     <?php endif; ?>

Friday, April 27, 2012

Some Important syntax of Joomla

Here are the some codes to help the joomla developer..


login user details 


$user =& JFactory::getUser();
echo $user->id;
echo $user->username;
echo $user->name;
echo $user->email;
echo $user->usertype;
echo $user->guest;
echo $user->get('aid'); // access Guest 0, register 1

Display JSON data

Create a function to get data json data.

function getjson(){
var url = "https://sitename/getdata.php";
requestCrossDomain(url, function(results)
{


// result = {" resultdata ":[{" imgname ":"2147512358.jpg"," name ":"bhumika"},{"imgname
//                  ":"2411827535.jpg"," name ":"rahul"}]}

var myJSONObject1 = eval('(' + results + ')');
if(myJSONObject1== null)
{
return false;
}
$('#content_home').html(CreatedataView(myJSONObject1.resultdata)).fadeIn();
});
return false;
}

Monday, March 19, 2012

Pass all the Form elements to call JSON


If you call any server file on the live server to get json data, then may be you need to transfer some variables with value. for ex. if you need to insert data to your server then you must haveto post all data to server file.

First you need to follow my previous blog(get-data-using-cross-domain-request).

Create one form element and create all the variable into the form tag that you want to post on the server.
Create below function in the .js file.

function createQuery(fname)
{
     var formname= fname;
     var elements = document.getElementById(formname).elements;
     var pairs = new Array();
var next_el = "";
var checkdetail=""
    for (var i = 0; i < elements.length; i++)
   {

Saturday, March 10, 2012

Get Data using Cross-Domain Request

There is a two methods to get data from the url. one is XML and second is the Json. the xml methods is very complicated and large. that's why I started to use json format for the cross-domain request.

Create cross_domain.js file

function requestCrossDomain( site, callback ) {
     if ( !site ) {
          return false;
     }
     var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=?';
  $.getJSON( yql, cbFunc);

  function cbFunc(data) {
     if ( data.results[0] ) {

Saturday, March 3, 2012

Getting Started Phonegap with Android eclipse

Here is the steps that I follow to start a phonegap using android eclipse.
Refer the below link to configure the android eclipse and Sdk setup on your computer.
http://wiki.phonegap.com/w/page/16494774/Getting-started-with-Android-PhoneGap-in-Eclipse


don't Forget to setup the environment variable for the java, android, SDK and ant-home.
My Computer-->properties-->advance parameters