Tuesday, January 13, 2015

How, to, make, PC, version, in, wapka, ALL, CODES,

Many people asked me to help them about it so now I got time to share these codes :)
First you need a browser detection code and u can use this code

<script type="text/javascript">var w=window.innerWidth; if (w>=900){document.write ('<style>#pc {display:block} #mobile {display:none}</style>');} else {document.write('<style>#mobile {display:block} #pc {display:none}</style>');}</script>


This will help u to separate PC n MOBILE items [ex: <div id='mobile'>Mobile items</div> <div id='pc'>PC Items</div> 

Then you need two more css to set items left/right for pc version


/** RESPONSIVE STYLE **/
@media only screen and (min-width:500px)
{body {min-width: 990px; max-width: 1024px; margin: 5px auto 10px auto; padding:0px;} #pc {display:block} #mobile {diplay:none}
#raz_left{width: 65%;float:left; display:block; margin-left:0px; margin-right:8px; margin-top: 10px; overflow: hidden;}
#raz_right{float:left; display:block; width: 34%;margin-top: 10px; overflow: hidden; }}
@media only screen and (max-width:500px)
{body {min-width: 98%; max-width: 100%; margin: 0 auto; border: 1px solid #f5f5f5;padding:opx}
#mobile{display: yes;}
#pc {display: none; }}

here raz_left for left items and raz_right for right items
I hope now you can make pc version for your site but if you face any problem then comment here for solve.


How I Use?

<div class="pc">CODE FOR SHOW IN PC</div>

<div class="mobile">CODE FOR SHOW IN MOBILE</div>

<div class="raz_righ">CODE FOR RIGHT</div>

<div class="raz_left">CODE FOR LEFT</div>

Like That?

Logged class or non logged class code
<style> .guest {display: none}</style>
<style> .member {display: blok}</style>

All Code Use in wml/xhtml
image শুধু এই পোস্টি পড়ে চলে যাবেন 

No comments: