Skip to main content

How to Show Content on Mobile Devices, Smart Phones and Tablets only

 There are two ways to do that, whether to use javascript or to use css style sheet.

Javascript: The code below will redirect the visit to a different page which should be a mobile theme page:

<script>
 <!--
  if (screen.width <= 699) {
  document.location = "https://www.mymobilepage.com";
}
//-->
</script>


 CSS: In CSS you can decide which part of your page to show or to hid on a mobile device ora tablet:


Show content on mobile devices and tablets:

The below div tag shows the content on mobile devices and or tablets:
 
<div class="showToMobile">
TEXT OR IMAGE FOR MOBILE HERE
</div>

The below css code contains the style class definition, this should be stored in your .css file on in your style sheet in the head section of your html page:
 
<style type="text/css">
  .showToMobile
{ display: none;}
   /* Portrait and Landscape Screens */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 699px)
   { .showToMobile { display: inline;}}
</style>


 

Hide content on mobile devices and tablets:

The below div tag hides the content on mobile devices and or tablets:
 
<div class="mobileHide">
TEXT OR IMAGE NOT FOR MOBILE HERE
</div>

The below css code contains the style class definition, this should be stored in your .css file on in your style sheet in the head section of your html page:
 
<style type="text/css">
   .mobileHide { display: inline;}
   /* Portrait and Landscape Screens */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 699px)
   {  .mobileHide { display: none;}}
</style>

If you want this styling to apply to your entire website, add the following to your CSS stylesheet:
.mobileHide 
{ display: none;}

Comments

Popular posts from this blog

Coldfusion Facebook Graph API publish to your wall and your friends walls

In this tutorial we will learn by full coldfusion Graph API code example how to publish on your wall and your friends walls. This application uses new oauth authentication method.

The code is divided into four files: we will first start with a file called index.cfm:

<cfoutput>    
    <!--- Your FB application IDS --->
      <cfset api_key = ""/>
    <cfset secret_key = ""/>
    <cfset appID = ""/>
<!--- create a connection to the fb graph cfc --->
    <cfset graphCFC = createObject("component", "graph").init(#appID#, #api_key#, #secret_key#) />
    <!--- If user is authenticated or his access token is set create a cookie --->     <cfif not isdefined("cookie.access_token") and isdefined("url.access_token")>
        <cfset cookie.access_token=url.access_token>
    </cfif> <!--- If the user is authenticated and access token is set, then make the action…

Error: Write to Disk Access Denied - Troubleshooting - BitTorrent

I have downloaded Bit Torrent software and when trying to download I got an error after few seconds saying:

Error: Write to Disk Access Denied
Solving this problem is so simple:
Shut down BitTorrent program.
Go to Start and in the small search box on top of windows start button start typing Bittorrent and the program will show, right click with the mouse on the icon and Run as Administrator.
All ur problems are sorted out now and you can enjoy downloading...
Good Luck.

Implementation of Facebook Graph API in Coldfusion

Facebook has launched a new FB API called Graph that simplifies FB applications development, the new Graph API allows website owners to create Single Sign On (SSO) with Facebook and allow websites owners to be able to import a lot of users information but after their permissions.


The code below written in Coldfusion gives an example on how to Create FB login/logout button and then how to retrieve the created cookie, and use it for further development:

  <body>
  <cfoutput>
<!--- Your FB application IDS --->
    <cfset api_key = "XXXXXXXXXXXXX"/>
    <cfset secret_key = "XXXXXXXXXXXXXX"/>
    <cfset appID = "XXXXXXXXXXXXXX"/>
<!--- Facebook login/logout button --->
    <p><fb:login-button perms="email,user_birthday" autologoutlink="true"></fb:login-button></p>
    <!--- Facebook login/logout button that publishes to your wall--->
    <p><fb:like></fb:like…