Skip to main content

Detecting and handle tab orientation changes with jQuery Mobile

Continue reading for example on using the orientationchange event.

Javascript
Outline:
1. get original orientation – window.orientation (return 0=portrait/1=landscape)
2. set style to use based original orientation
3. bind orientationchange event to the body element
4. when triggered call changeOrientation function sending over the event.orientation property
5. setOrientation function removes the current style class associated with the div and assign it a new one (portrait/landscape)
$(function(){

 // Set Inital orientation

// get the initial orientation from window which

// returns 0 for portrait and 1 for landscape

if(window.orientation == 0){

var ori = "portrait";

}else{

var ori = "landscape";

}

changeOrientation(ori);



// Orientation Change

// When orientation changes event is triggered

// exposing an orientation property of either

// landscape or portrait

$('body').bind('orientationchange',function(event){

changeOrientation(event.orientation)

})



// Change the style dependengt on orientation

function changeOrientation(ori){

// Remove all classes separated by spaces

$("#orientation").removeClass('portrait landscape');

$("#orientation").addClass(ori);

$("#orientation").html("<p>"+ori.toUpperCase()+"</p>");

}



})

<!DOCTYPE html>

<html>

<head>

<title>Orientation</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script src="custom.js"></script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>



<style>

div.portrait {

background-color: rgba(0, 25, 255, 0.5);

width: 100%;

height: 100%;

}

div.landscape {

background-color: rgba(255, 25, 0, 0.5);

width: 100%;

height: 100%;

}

p{

font-size:24px;

color:white;

}

</style>

</head>

<body>



<div data-role="page">



<div data-role="header">

<h1>Orientation</h1>

</div><!-- /header -->



<div data-role="content">

<div id="orientation" class="portrait"></div>



</div><!-- /content -->



<div data-role="footer">

<h4></h4>

</div><!-- /footer -->

</div><!-- /page -->



</body>

</html>


Comments

Popular posts from this blog

Shell Script to check tomcat status and restart

The below script checks the status of a particular tomcat status and restarts it if the tomcat does not respond....TOMCAT_HOME=/usr/local/tomcat-folder/

is_Running ()
{

        wget -O - http://yourserver.com/ >& /dev/null
 if( test $? -eq 0 ) then
  return 0
 else
  return 1
 fi
}


kill_Hanged_Processes ()
{
 echo "killing hanged processes......"
 javaProcs=`ps -efl| grep -v grep | grep java`
 if(test ! -z "$javaProcs") then
  echo "nonzero"
  processId=`echo $javaProcs | awk '{ print $2} '`
  echo "$processId"
  kill -9 $processId
 fi
}
stop_Tomcat ()
{
 echo "shutting down......"
 $TOMCAT_HOME/bin/shutdown.sh
}

start_Tomcat ()
{
 echo "starting......"
 $TOMCAT_HOME/bin/startup.sh
}

restart ()
{
 stop_Tomcat
 sleep 10
 kill_Hanged_Processes
 start_Tomcat
 sleep 60
}

send_Mail ()
{
#!/bin/bash
# script to send simple email
# email subject
SUBJECT="Telegraphindia.com went down"
# Email To ?
EMAIL="mailid1@gmail.com,mailid2@gmail.com"
# Em…

Getting access to menu from portlet in liferay

The below code describes the way of accessing menu items from the portlet. Here i have called it from jsp. The best thing about this is you can use the beautiful permission management of menu items of liferay as well without bothering about that. Writing services for fetching menu names from the layout tables will need more codes for permission managements......

Hope this helps.........


<%--
/**
* Copyright (c) 2000-2010 Liferay, Inc. All rights reserved.
*
* This library is free software; you can redistribute it and/or modify it under
* the terms of the GNU Lesser General Public License as published by the Free
* Software Foundation; either version 2.1 of the License, or (at your option)
* any later version.
*
* This library is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
* details.
*/
--%>
<%@ page import="com.li…

Virus f Opyum Team

Symptoms :: 
Several processes running named f or i. 
Network choked
Apache Dead
Unknown entry  * * * * * root f Opyum Team in crontab

Investigate ::
Try to kill the f process and even root will be unable to kill it. Check file named f and i in /etc or /bin or /usr/sbin directory. Try to delete, the file f  will not delete.  Some unknown .jpg files will be there in the same folder. 

Solve :: The root is unable to delete the file f because of the immutable bit in f
To remove it use ses or chattr
Follow the below steps to remove it completely.....



remove the unknown .jpg files in system folders

#top
(kill process f) option k

#ses -i /bin/f
#rm /bin/f
#ses -i /etc/crontab
#vi /etc/crontab (and delete last line)
#reboot


Precautions ::  In my case the server was hacked bu Brute-force attack
So set a good password with a combination of upper,lower case letters and special characters.

Post your feedback or any issues you may face removing the virus.  Very less number of good threads are there explaining …