fundacja tvn joomla-cms.com.pl
A+ A A-

responsive css v2

  • Kategoria: CssResponsive
  • Opublikowano: poniedziałek, 05, maj 2014 22:33
  • Super User
  • Odsłony: 39664

Responsive css v2

 

 

  Z racji niezadowalającego działania klasy responsivecss v1 postanowiłem ją przerobić dość radykalnie. Pierwsze co było niewłaściwe w klasie to za duży kontroler i dane tam się znajdujące co opóźniało klasę. W takim przypadku rzecz nie dopuszczalna. Następną sprawą były ciasteczka które w tym przypadku się nie sprawdziły ponieważ po np. odwróceniu urządzenia trzeba było przeładować stronę, a to trochę uciążliwe i nie uniwersalne. Responsive css v2 podołała tym wyzwaniom, jest tak skonstruowana że rozdzielczość zmienia się wraz z urządzeniem obracając np. telefon który zmienia rozdzielczość strona także się zmienia, wszystko dynamicznie za sprawą jquery. Klasę możemy wykorzystać do ustawienia dowolnych rozdzielczości jakie tylko sobie wymyślimy mogą to być nietypowe urządzenia nic nie stoi na przeszkodzie. Klasa Responsive css v2 domyślnie jest ustawiona na obsługę takich rozdzielczości:

 

 

width: 1440

width: 1360

width: 1280

width: 1152

width: 1024

width: 800

width: 768

width: 685

width: 600

width: 568

width: 480

width: 380

width: 320

width: 240

 

 

  Ustawiamy style I możemy korzystać z responsywności.

 

W stylach nie ustawiamy media max i min klasa sama rozpoznaje rozdzielczości i wczytuje tą która jest akurat w tym momencie potrzebna za pomocą jquery. Błyskawiczna reakcja na każdą zmianę nie wczytuje niepotrzebnych styli, a praca przy takiej ilości styli css jest o wiele bardziej przejrzysta. Tu wszystko jest poporcjowane dla każdej z wymienionych rozdzielczości żadnego bałaganu w kodzie, mniejsze obciążenie dla strony, można style przygotowywać pod daną rozdzielczość. Każdy kto kiedyś przygotowywał style dla stron responsywnych wie ile kodu jest w jednym pliku dla takich stron. Proszę powoli się także przygotowywać do tego, że ludzie będą korzystać z coraz większych rozdzielczości np. 4K itd. a strony trzeba będzie do takich rozdzielczości przygotować. Ja mam ustawiony próg na 1440 jak na razie to wystarczy, ale czy za dwa lata także będzie odpowiednie ! wątpię. Proszę `przemyśleć przesiadkę na moją klasę, a zaoszczędzicie sobie pracy w przyszłości jak chcecie dalej pisać porządne strony responsywne bez większego wysiłku i przejrzystego i poukładanego kodu, o szybkości działania już nie wspomnę.

 

 

 

 

class_cssresponsiwe-v2.php

<?php

/* * Responsive CSS is a class to handle pages html5, jQuery, CssResponsive, CssBrowser, CssVersion, Open Graph Facebook * google font, meta tag. * Class is designed to load the appropriate CSS styles depending on the browser like Mozilla, IE, etc. * Class also recognize the screen resolution, thus adapting to a device such as tablet, phone, etc. * By reading the right style for your device. Identifies the version of the style supported by your browser. * All this results in a significant acceleration loading, because they are charged only the styles * that are just at the time needed. * In the classroom you will find a few other things you need to use a web page that may help facilitate the work. * Check javascript, cookiesmedia etc. * Class will prepare more efficiently css responsieive for devices and for our applications. * * Added support for the Protocol Open Graph Facebook * Added support for the framework Bootstrap * * The class made every google font support. * Now in an easy way that you can make the font on the page. * You get to choose from 10 pieces * * Class for proper operation of the library needs browscap.ini * * # # # # # # # ###### Browser ##### # # # # # # # # # # # # # * Example of style for opera such as "-o-linear" * Example of style for FIREFOX example, "-moz-linear" * Example for IE style such as "-ms-linear" * Example of style for the W3C as "linear-gradient" * # # # # # # ####### Responsive ##### # # # # # # # # # # # # # # # * Example of style for example 1440px width width: 96%; max-width: 1440px; min-width: 1400px; * Example of style for example, 240px width width: 96%; max-width: 240px; min-width: 230px; * # # # # # # ####### Version css ####### # # # # # # # # # # # # # * Example 3 css style for example, box-shadow: 10px 10px 5px # FFFFFF; * Example 2 css style for example, font-size-adjust: 0.5; * Example CSS style for one such border-left: solid red * * Klasa do prawidłowego działania potrzebuje biblioteki browscap.ini * ############# Browser ################## * Przykład stylu dla opera np. "-o-linear" * Przykład stylu dla FIREFOX np. "-moz-linear" * Przykład stylu dla IE np. "-ms-linear" * Przykład stylu dla W3C np. "linear-gradient" * ############# Responsive #################### * Przykład stylu dla width 1440px np. width: 96%; max-width: 1440px; min-width: 1400px; * Przykład stylu dla width 240px np. width: 96%; max-width: 240px; min-width: 230px; * ############# version css #################### * Przykład stylu dla css 3 np. box-shadow: 10px 10px 5px #FFFFFF; * Przykład stylu dla css 2 np. font-size-adjust: 0.5; * Przykład stylu dla css 1 np. border-left: solid red; * * Do klasy dołożono obsługę czcionek firmy google. * Teraz w łatwy sposób możesz dołożyć * interesujące cię czcionki do strony. * Do wyboru dostajemy 10 szt. * * Css_responsive & CssBrowser & CssVersion & Facebook & google font & meta tag * * PHP 5.1 * @version v2.0 * Added support for the Protocol Open Graph Facebook * Added support for the framework Bootstrap * The class made every google font support. * Now in an easy way that you can make the font on the page. * You get to choose from 10 piece * Meta tag * ######## * V 2. 0 -> Zmieniono działanie klasy zastąpiono ciasteczka na rzecz jquery * co znacznie przyśpieszyło całą klasę a także spowodowało bardziej płynną pracę. * V 2 0 -> Changed the class action was replaced with cookies for jquery * Which greatly sped up the entire class, and resulted in a smoother operation. * ####### * @license Apache License, Version 2.0. * @author Adam Berger <Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.; * @Site www.joomla-cms.com.pl */ class CssResponsive{ ######################################### Browser ############################################################################## const CSS_IE = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/styll.IE.css" />';/* IE, Msie*/ const CSS_OPERA = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/styll.Opera.css" />';/* OPERA*/ const CSS_FIREFOX = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/styll.FIREFOX.css" />';/* FIREFOX , MOZILLA*/ const CSS_SAFARI = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/styll.Safari.css" />';/* Chrome , Safari */ const CSS_CHROME = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/styll.Chrome.css" />';/* Chrome , Safari */ const CSS_MOZILLA = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/styll.MOZILLA.css" />';/* FIREFOX , MOZILLA*/ const CSS_NETSCAPE = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/styll.netscape.css" />'; /* Chrome , Safari */ const CSS_GECKO = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/styll.Gecko.css" />'; /* Chrome , Safari */ const CSS_W3C = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/styll.W3C.css" />';/* W3C, Gecko, Netscape */ ######################################### RESPONSIVE ######################################################################### const CSS_1440 = 'http://localhost/class_responsive/css/styll.1440.css'; /*1440*/ const CSS_1360 = 'http://localhost/class_responsive/css/styll.1360.css';/* 1360*/ const CSS_1280 = 'http://localhost/class_responsive/css/styll.1280.css'; /*1280*/ const CSS_1280x1024 = 'http://localhost/class_responsive/css/styll.1280x800.css'; /* 1280 x800*/ const CSS_1280x800 = 'http://localhost/class_responsive/css/styll.1280x800.css'; /* 1280 x800*/ const CSS_1280x600 = 'http://localhost/class_responsive/css/styll.1280x600.css'; /* 1280 x800*/ const CSS_1152 = 'http://localhost/class_responsive/css/styll.1152.css'; /*1152*/ const CSS_1024 = 'http://localhost/class_responsive/css/styll.1024.css';/* 1024x768*/ const CSS_800 = 'http://localhost/class_responsive/css/styll.800.css'; /*800*/ const CSS_768 = 'http://localhost/class_responsive/css/styll.768.css';/*768*/ const CSS_685 = 'http://localhost/class_responsive/css/styll.685.css';/*685*/ const CSS_600 = 'http://localhost/class_responsive/css/styll.600.css';/*600*/ const CSS_568 = 'http://localhost/class_responsive/css/styll.568.css';/*568*/ const CSS_480 = 'http://localhost/class_responsive/css/styll.480.css';/*480*/ const CSS_380 = 'http://localhost/class_responsive/css/styll.380.css';/*380*/ const CSS_320 = 'http://localhost/class_responsive/css/styll.320.css';/* 320*/ const CSS_240 = 'http://localhost/class_responsive/css/styll.240.css';/*240*/ const CSS_W3C_RE = 'http://localhost/class_responsive/css/styll.w3c.css'; /* W3C */ ######################################### Css version ################################################### const CSS_1 = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/css.1.css" />'; /* Css 1 */ const CSS_2 = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/css.2.css" />';/* Css 2 */ const CSS_3 = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/css.3.css" />';/* Css 3 */ const CSS_4 = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/css.4.css" />'; /* Css 4 */ const CSS_5 = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/css.5.css" />'; /* Css 5 */ const CSS_W3C_VER = '<link type="text/css" rel="stylesheet" href="/../Responsive/css/css.w3c_ver.css" />'; /* W3C */ ########################################## jQuery & HTML5 IE 9 ########################################## const JQuery = '<script src="/http://code.jquery.com/jquery-1.11.1.js"></script>';/* jQuery 1.9*/ const JQuery_UI = '<script src="/http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>'; const JQueryCss = '<link rel="stylesheet" type="text/css" href="/http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />';/* jQuery*/ const BootstrapCss = '<link rel="stylesheet" href="/../zarabiarka/css/bootstrap.css" />';/* Bootstrap */ const BootstrapCssResponsive = '<link rel="stylesheet" type="text/css" href="/../zarabiarka/js/bootstrap-responsive.css" />';/* Bootstrap css responsive*/ const BootstrapJavascript = '<script src="/../zarabiarka/js/bootstrap.js"></script>';/*Bootstrap javascript*/ const HTML_IE = '<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->'; ####################################### Font Google ########################################### /* * http://www.google.com/fonts * Font Kavoon * time 0.17 * css font-family: 'Kavoon', cursive; */ const Font_Kavoon = "<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>"; /* * http://www.google.com/fonts * Font Hanalei * time 0.18 * css font-family: 'Hanalei Fill', cursive; */ const Font_Hanalei ="<link href='http://fonts.googleapis.com/css?family=Hanalei+Fill' rel='stylesheet' type='text/css'>"; /* * http://www.google.com/fonts * Font Mouse * time 0.15 * css font-family: 'Mouse Memoirs', sans-serif; */ const Font_Mouse ="<link href='http://fonts.googleapis.com/css?family=Mouse+Memoirs' rel='stylesheet' type='text/css'>"; /* * http://www.google.com/fonts * Font Roboto * time 0.10 * css font-family: 'Roboto', sans-serif; */ const Font_Roboto ="<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>"; /* * http://www.google.com/fonts * Font Flavors * time 0.97 * css font-family: 'Flavors', cursive; */ const Font_Flavors ="<link href='http://fonts.googleapis.com/css?family=Flavors' rel='stylesheet' type='text/css'>"; /* * http://www.google.com/fonts * Font Glass * time 0.13 * css font-family: 'Glass Antiqua', cursive; */ const Font_Glass ="<link href='http://fonts.googleapis.com/css?family=Glass+Antiqua' rel='stylesheet' type='text/css'>"; /* * http://www.google.com/fonts * Font Maiden * time 0.32 * css font-family: 'Maiden Orange', cursive; */ const Font_Maiden ="<link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>"; /* * http://www.google.com/fonts * Font Rosario * time 0.18 * css font-family: 'Rosario', sans-serif; */ const Font_Rosario="<link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>"; /* * http://www.google.com/fonts * Font UnifrakturMaguntia * time 0.44 * css font-family: 'UnifrakturMaguntia', cursive; */ const Font_UnifrakturMaguntia ="<link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia' rel='stylesheet' type='text/css'>"; /* * http://www.google.com/fonts * Font Rancho * time 0.26 * css font-family: 'Rancho', cursive; */ const Font_Rancho ="<link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'>"; ########################################################################################### public $htmlie; public $htmlie_7; public $css_1440; public $css_1360; public $css_1280; public $css_1280x1024; public $css_1280x800; public $css_1280x600; public $css_1152; public $css_1024; public $css_800; public $css_768; public $css_685; public $css_600; public $css_568; public $css_480; public $css_380; public $css_320; public $css_240; public $css_w3c_re; public $css_w3c_ver; public $html; public $html_s; public $meta; public $first_name; public $last_name; public $typebrowser; public $responsive= array(); //tablica; private $browser = array(); //tablica private $key = array(); //tablica public function __construct(){ ####################################### $this->css_1440 = self::CSS_1440; $this->css_1360 = self::CSS_1360; $this->css_1280 = self::CSS_1280; $this->css_1280x1024 = self::CSS_1280x1024; $this->css_1280x800 = self::CSS_1280x800; $this->css_1280x600 = self::CSS_1280x600; $this->css_1152 = self::CSS_1152; $this->css_1024 = self::CSS_1024; $this->css_800 = self::CSS_800; $this->css_768 = self::CSS_768; $this->css_685 = self::CSS_685; $this->css_600 = self::CSS_600; $this->css_568 = self::CSS_568; $this->css_480 = self::CSS_480; $this->css_380 = self::CSS_380; $this->css_320 = self::CSS_320; $this->css_240 = self::CSS_240; $this->css_w3c_re = self::CSS_W3C_RE; /* W3C */ } public function fb_meta_site($site_name, $title, $description=null, $content_type, $url=null, $image=null){ /* * documentation https://developers.facebook.com/docs/opengraph/ * http://ogp.me/#types * FACEBOKE */ $this->html =""; if(!empty($site_name)){ $this->html .='<meta property="og:site_name" content="'.$site_name.'" />'; /* Nazwa strony*/ } if(!empty($title)){ $this->html .='<meta property="og:title" content="'.$title.'" />'; /* tytuł linka*/ } if(!empty($description)){ $this->html .='<meta property="og:description" content="'.$description.'" /> '; /* Opis treści*/ } if(!empty($content_type)){ $this->html .='<meta property="og:type" content="'.$content_type.'" />'; } if(!empty($url)){ $this->html .='<meta property="og:url" content="'.$url.'" />';/* link url*/ } if(!empty($image)){ $this->html .='<meta property="og:image" content="'.$image.'" />'; /* link zdiecie*/ } return $this->html; } public function fb_meta_profile($first_name, $last_name, $username=null, $gender=null){ $this->html =""; if(!empty($first_name)){ $this->first_name=$first_name; $this->html .='<meta property="profile:first_name" content="'.$this->first_name.'" />'; /* imie autora*/ } if(!empty($last_name)){ $this->last_name =$last_name; $this->html .='<meta property="profile:last_name" content="'.$this->last_name.'" />'; /* Nazwisko autora*/ } if(!empty($username)){ $this->html .='<meta property="profile:username" content="'.$username.'" />'; /* NICK autora*/ } if(!empty($gender)){ $this->html .='<meta property="profile:gender" content="'.$gender.'" />'; /* płeć autora male "mężczyzna" female "kobieta"*/ } return $this->html; } public function set_fb_meta_profile($domain_name){ /*set_fb_meta_profile Is associated with fb_meta_profile*/ /*set_fb_meta_profile Jest powiązany z fb_meta_profile*/ return $this->html ='<meta property="article:author" content="'.$domain_name.'/'.$this->first_name.'-'.$this->last_name.'/" />'; } public function fb_meta_audio($audio_url, $audio_title, $audio_artist, $audio_album, $audio_type) { $this->html =""; if(!empty($audio_title)){ $this->html .='<meta property="og:audio:title" content="'.$audio_title.'" />'; /* Tytuł piosenki*/ } if(!empty($audio_artist)){ $this->html .='<meta property="og:audio:artist" content="'.$audio_artist.'" />'; /* Nazwa wykonawcy lub zespołu*/ } if(!empty($audio_album)){ $this->html .='<meta property="og:audio:album" content="'.$audio_album.'" />'; /* Tytuł płyty*/ } if(!empty($audio_type)){ $this->html .='<meta property="og:audio:type" content="'.$audio_type.'" />'; /* application type np. mp3*/ } if(!empty($audio_url)){ $this->html .='<meta property="og:audio" content="'.$audio_url.'" />'; /* adres utworu track address*/ } return $this->html; } public function fb_meta_video($video_url, $video_type, $video_height=null, $video_width=null){ $this->html =""; if(!empty($video_url)){ $this->html .='<meta property="og:video" content="'.$video_url.'" />'; /* adres utworu track address*/ } if(!empty($video_height)){ $this->html .='<meta property="og:video:height" content="'.$video_height.'" />'; /* Wymiary Dimensions height 640*/ } if(!empty($video_width)){ $this->html .='<meta property="og:video:width" content="'.$video_width.'" />'; /* Wymiary Dimensions width 360*/ } if(!empty($video_type)){ $this->html .='<meta property="og:video:type" content="'.$video_type.'" />'; /* application type np. mp4*/ } return $this->html; } public function fb_meta_image($image_url, $image_secure_url=null, $image_type=null, $image_width=null, $image_height=null) { $this->html =""; if(!empty($image_url)){ $this->html .='<meta property="og:image" content="'.$image_url.'" />'; /* application type np. mp4*/ } if(!empty($image_secure_url)){ $this->html .='<meta property="og:image:secure_url" content="'.$image_secure_url.'" />'; /* application type np. mp4*/ } if(!empty($image_type)){ $this->html .=' <meta property="og:image:type" content="'.$image_type.'" />'; /* application type np. mp4*/ } if(!empty($image_width)){ $this->html .=' <meta property="og:image:width" content="'.$image_width.'" />'; /* application type np. mp4*/ } if(!empty($image_height)){ $this->html .='<meta property="og:image:height" content="'.$image_height.'" />'; /* application type np. mp4*/ } return $this->html; } public function get_meta($author=null, $description=null, $keywords=null, $scale=null, $robots=null, $verification=null, $telephone=null ) { $this->meta =""; if(!empty($author)){ /*author*/ $this->meta .='<meta name="author" content="'.$author.'"/>'; } if(!empty($description)){ /*description*/ $this->meta .='<meta name="description" content="'.$description.'"/>'; /* opis */ } if(!empty($keywords)){ /*keywords*/ $this->meta .='<meta name="keywords" content="'.$keywords.'"/>'; /* slowa kluczowe */ } if(!empty($robots)){ /* robots */ $this->meta .='<meta name="robots" content="'.$robots.'">'; /* noindex,nofollow */ } if(!empty($verification)){ /* verification */ $this->meta .='<meta name="google-site-verification" content="'.$verification.'"/>'; /* google site verification key */ } if(!empty($telephone)){ /* telephone */ /* Po uruchomieniu w przeglądarce na telefonie komórkowym określa, czy numery telefonów w treści HTML będzie wyświetlan */ /*When running in a browser on a mobile phone, determines whether or not telephone numbers in the HTML content will appear*/ $this->meta .='<meta name="format-detection" content="telephone='.$telephone.'"/>'; /* yes or no*/ } $this->meta .='<meta name="copyright" content="&copy;'.date("Y").'" />';/* copyright rok */ if(!empty($scale) && $scale == 1){ /*Scala responsive*/ $this->meta .='<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">'; $this->meta .='<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />'; /* uzywamy z responsywnym css3 */ } $this->meta; } public function set_meta(){ return $this->meta; } public function javascript(){ if($this->browser_all()->{'javascript'} == 1){ /* This browser supports javascript*/ return true; /* ta przeglądarka obsługuje javascript*/ }else{ return false;/* nie obsługuje*/ } } public function cookies(){ if($this->browser_all()->{'cookies'} == 1){ /* This browser supports cookies*/ return true; /* ta przeglądarka obsługuje cookies*/ }else{ return false; /* nie obsługuje*/ } } public function backgroundsounds(){ if($this->browser_all()->{'backgroundsounds'} == 1){ /* This browser supports backgroundsounds*/ return true; /* ta przeglądarka obsługuje backgroundsounds*/ }else{ return false; /* nie obsługuje*/ } } public function iframes(){ if($this->browser_all()->{'iframes'} == 1){ /* This browser supports iframes*/ return true; /* ta przeglądarka obsługuje iframes*/ }else{ return false; /* nie obsługuje*/ } }

public function Bootstrap_css(){ if(self::BootstrapCss){ return self::BootstrapCss; /* bootstrap css*/ }else{ return false; /* nie obsługuje*/ } } public function Bootstrap_css_responsive(){ if(self::BootstrapCss){ return self::BootstrapCss; /* bootstrap css*/ }else{ return false; /* nie obsługuje*/ } } public function Bootstrap_javascript(){ if(self::BootstrapJavascript){ return self::BootstrapJavascript; /* bootstrap javascript*/ }else{ return false; /* nie obsługuje*/ } } public function HtmlIE(){ if(self::HTML_IE){ /* This browser supports html5-IE 9*/ return self::HTML_IE; /* ta przeglądarka obsługuje html5-IE9*/ }else{ return false; /* nie obsługuje*/ } } public function platform(){ if(!empty($this->browser_all()->{'platform'})){ /* This browser supports javascript*/ return $this->browser_all()->{'platform'}; /* ta przeglądarka obsługuje javascript*/ }else{ return false; /* nie obsługuje*/ } } public function fontgoogle($font_info){ if(!empty($font_info)){ switch($font_info) { case "Rancho": return self::Font_Rancho; break; case "UnifrakturMaguntia": return self::Font_UnifrakturMaguntia; break; case "Rosario": return self::Font_Rosario; break; case "Maiden": return self::Font_Maiden; break; case "Glass": return self::Font_Glass; break; case "Flavors": return self::Font_Flavors; break; case "Roboto": return self::Font_Roboto; break; case "Mouse": return self::Font_Mouse; break; case "Hanalei": return self::Font_Hanalei; break; case "Kavoon": return self::Font_Kavoon; break; default: return self::Font_Roboto; break; } } } public function jQueryCss(){ if(self::JQueryCss){ return self::JQueryCss; /* jquery*/ }else{ return false; /* nie obsługuje*/ } } public function jQuery(){ if(self::JQuery){ return self::JQuery; /* jquery*/ }else{ return false; /* nie obsługuje*/ } } public function jQuery_UI(){ if(self::JQuery_UI){ return self::JQuery_UI; /* jquery*/ }else{ return false; /* nie obsługuje*/ } }

public function get_responsive(){ return '<link id="link" type="text/css" rel="stylesheet" href="/" />'; } public function get_test(){ return '<aside id="bb" style="width:99%;height:99%;"></aside>'; } public function set_responsive(){ ?> <script> $(document).ready(function(){ $(window).on('resize', function(){ // window var widt = $(window).width(); var heig = $(window).height();

if(widt>='1360'){ $( "#link" ).attr( "href", "<?php echo self::CSS_1440; ?>" ); $('#bb').text( ' width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>1440</b>').show(); } if(widt<='1359' && widt>='1280'){ $( "#link" ).attr( "href", "<?php echo self::CSS_1360; ?>" ); $('#bb').text( ' width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>1360</b>'); //$('#bb').hide(); } if( widt<='1279' && widt>='1152'){ $( "#link" ).attr( "href", "<?php echo self::CSS_1280;?>" ); $('#bb').text( ' width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>1280</b>'); //$('#bb').hide(); } if(widt<='1151' && widt>='1024' ){ $( "#link" ).attr( "href", "<?php echo self::CSS_1152;?>" ); $('#bb').text( ' width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>1152</b>'); //$('#bb').hide(); } if(widt<='1023' && widt>='800'){ $( "#link" ).attr( "href", "<?php echo self::CSS_1024;?>" ); $('#bb').text( ' width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>1024</b>'); //$('#bb').hide(); } if(widt<='799' && widt>='768'){ $( "#link" ).attr( "href", "<?php echo self::CSS_800;?>" ); $('#bb').text( 'window width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>800</b>'); //$('#bb').hide(); } if(widt<='767' && widt>='685'){ $( "#link" ).attr( "href", "<?php echo self::CSS_768;?>" ); $('#bb').text( 'window width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>768</b>'); //$('#bb').hide(); } if(widt<='684' && widt>='600'){ $( "#link" ).attr( "href", "<?php echo self::CSS_685;?>" ); $('#bb').text( 'window width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( '<b>685</b>'); //$('#bb').hide(); } if(widt<='599' && widt>='568'){ $( "#link" ).attr( "href", "<?php echo self::CSS_600;?>" ); $('#bb').text( 'window width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>600</b>'); //$('#bb').hide(); } if(widt<='567' && widt>='480'){ $( "#link" ).attr( "href", "<?php echo self::CSS_568;?>" ); $('#bb').text( 'window width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>568</b>'); //$('#bb').hide(); } if(widt<='479' && widt>='380'){ $( "#link" ).attr( "href", "<?php echo self::CSS_480;?>" ); $('#bb').text( 'window width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>480</b>'); //$('#bb').hide(); } if(widt<='379' && widt>='320'){ $( "#link" ).attr( "href", "<?php echo self::CSS_380;?>" ); $('#bb').text( 'window width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>380</b>'); //$('#bb').hide(); } if(widt<='319' && widt>='240'){ $( "#link" ).attr( "href", "<?php echo self::CSS_320;?>" ); $('#bb').text( 'window width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>320</b>'); //$('#bb').hide(); } if(widt<='239'){ $( "#link" ).attr( "href", "<?php echo self::CSS_240;?>" ); $('#bb').text( 'window width: ' + widt + ', height: ' + heig ).show(); $('#bb').prepend( 'Css <b>240</b>'); //$('#bb').hide(); } }); // Wywołuje się jako pierwsze a dopiero to u góry $(window).trigger('resize'); }); </script> <?php } }

 

 

index_fb_go_meta-v2.php

 

<?php

require_once (dirname(__FILE__) . '/'.basename('class_cssresponsiwe-v2.php')); $browser = new CssResponsive();

 

/* * FACEBOKE site */ $site_name = "Sterownia"; // nazwa strony www $title = "Responsive"; // tytul artykulu $description = "Modul‚ do wyswietlania naszych aukcji allegro"; // Opis artykulu $content_type ="article"; // Typ Dokumentu artikle $url ="http://www.joomla-cms.com.pl/pl/komponenty/slider-aukcji-allegro.html"; // adres do artykułu $image="http://www.joomla-cms.com.pl/images_ber34/slider aukcji_front_2.jpg"; // fotka odnoszaca sie do artykulu /* * FACEBOKE profile * male "mężczyzna" female "kobieta" */ $domain_name="http://www.joomla-cms.com.pl"; // Is associated with adres strony autora: $first_name="Adam"; $last_name="Berger"; $username="Ber"; $gender="male"; /* * FACEBOKE audio */ $audio_url ="http://domena.pl/nazwa.mp3"; $audio_title="Tytuł piosenki"; $audio_artist="Nazwa wykonawcy"; $audio_album="Tytuł płyty"; $audio_type ="application/mp3"; /* * FACEBOKE video swf */ //$video_url = "http://domena.pl/film.swf"; //$video_type = "application/x-shockwave-flash";

 

// or

 

/* * FACEBOKE video mp4 */ $video_url ="http://domena.pl/film.mp4"; $video_type ="video/mp4"; // type $video_height="320"; // width $video_width="240"; // height /* * FACEBOKE image */ $image_url = "http://domena.com/obraz.jpg"; $image_secure_url = "https://secure.domena.com/obraz.jpg"; // secure url $image_type = "image/jpeg"; // type $image_width = "320"; // width $image_height = "240"; // height

 

$browser->fb_meta_site($site_name, $title, $description, $content_type, $url, $image); /* * meta author & description & keywords & scale responsive & robots & telephone * przypisanie meta tag */ $author="Adam Berger"; $description="Opisz stronę "; $keywords="responsive, css, tag, html, link"; /* Jeżeli chcemy użyć scale przypisujemy 1 */ /* If you wish to use the scale attribute 1 */ $scale=1; $robots ="noindex"; /* noindex or nofollow */ /* google site verification key */ $verification = "+xGUDJ4Bsjdi102tLVC3908vVuFHs="; /* Po uruchomieniu w przeglądarce na telefonie komórkowym określa, czy numery telefonów w treści HTML będzie wyświetlan */ /* When running in a browser on a mobile phone, determines whether or not telephone numbers in the HTML content will appear */ $telephone="yes"; /* yes or no */ $browser->get_meta($author, $description, $keywords, $scale, $robots, $verification, $telephone); ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title><?php echo $title; ?></title> <?php /* Wywołanie meta tag */ //echo $browser->set_meta(); /* * FACEBOKE SITE * Protokol Open Graph * meta_site * https://developers.facebook.com/docs/opengraph/ */ //echo $browser->set_fb_meta_site(); /* * FACEBOKE profile * Protokol Open Graph * meta_site * https://developers.facebook.com/docs/opengraph/ */ //echo $browser->fb_meta_profile($first_name, $last_name, $username, $gender); /* * FACEBOKE profile autor * adres strony autora: * Is associated with * Protokol Open Graph * https://developers.facebook.com/docs/opengraph/ */ //echo $browser->fb_meta_profile_domain_name($domain_name); /* * FACEBOKE audio * Protokol Open Graph * https://developers.facebook.com/docs/opengraph/ */ //echo $browser->fb_meta_audio($audio_url, $audio_title, $audio_artist, $audio_album, $audio_type); /* * FACEBOKE video swf or mp4 * Protokol Open Graph * https://developers.facebook.com/docs/opengraph/ */ // echo $browser->fb_meta_video($video_url, $video_type, $video_height, $video_width); /* * FACEBOKE image * Protokol Open Graph * https://developers.facebook.com/docs/opengraph/ */ // echo $browser->fb_meta_image($image_url, $image_secure_url, $image_type, $image_width, $image_height);

 

echo $browser->jQuery(); // jQuery echo $browser->jQuery_UI();// jQuery UI you must be here for the proper operation, musi tu by&#347; do prawid&#322;owego dzia&#322;ania echo $browser->jQueryCss(); // jQuery Css /* * Style depends on version css example, CSS1, CSS2, CSS3, etc. .. * Styl uzale&#380;niony od versji css np. css1, css2, css3 itd.... */ //echo $browser->css(); /* * you must be here for the proper operation, * musi tu by&#347; do prawid&#322;owego dzia&#322;ania */ echo'<link rel="stylesheet" href="/http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/css/bootstrap.min.css" />'; echo $browser->get_responsive(); /* * Assign a CSS style for the visitor's browser such as IE 9 * Przypisz styl css dla odwiedzaj&#261;cej przegl&#261;darki np. IE 9 */ //echo $browser->cssversionbrowser();

 

/* * http://www.google.com/fonts * select a font * Font - Maiden, Rancho, UnifrakturMaguntia, Rosario, Maiden, Glass, Flavors * , Roboto, Mouse, Hanalei, Kavoon. */ $font_info = "Roboto"; $font_info1 = "Maiden"; // echo $browser->fontgoogle($font_info); // echo $browser->fontgoogle($font_info1);

 

/* * HTML5 IE 9 */ //echo $browser->HtmlIE(); /* * HTML IE 7 */ //echo $browser->HtmlIE_7(); /* javascript dla responsive get_responsive() */ echo $browser->set_responsive(); ?> </head> <body> <?php $host = htmlentities(htmlspecialchars($_SERVER['HTTP_HOST'])); $uri = rtrim(dirname(htmlspecialchars($_SERVER['PHP_SELF'])), '/\\'); ?> <header> <nav> <ul> <li class="divider-vertical dropdown"> <a class="dropdown-toggle" href="/" target="">Start</a> </li> <li class="divider-vertical"> <a href="/" target="">Faq</a> </li> <li class="divider-vertical"> <a href="/" target="">Regulamin</a> </li> <li class="divider-vertical"> <a href="/" target="">Zasady</a> </li> <li class="divider-vertical"> <a href="/" target="">Kasa</a> </li> <li class="divider-vertical"> <a href="/" target="">Zapisy</a> </li> <li class="divider-vertical"> <a href="/" target="">Zapisy</a> </li> <li class="divider-vertical"> <a href="/" target="">Kontakt</a> </li> </ul> </nav> </header> <section> <?php echo $browser->get_test(); ?> <figure> <img src="/http://<?php echo $host.$uri; ?>/sms-wymiana.png" alt="SMS Wymiana" width="1400" height="1050" /> </figure>

 

<article style="color:#000000;"> <?php /* * If the browser supports javascript * czy przegl&#261;darka obs&#322;uguje javascript */ //echo "JavaScript ".$browser->javascript()." "; /* * If the browser supports cookies * czy przegl&#261;darka obs&#322;uguje cookies */ //echo "Cookies ".$browser->cookies()." "; /* * nazwa przegl&#261;darki * Name of the browser */ //echo "Browser ".$browser->browser()." "; /* * css wersja * Css version */ // echo "Version Css".$browser->cssversion()." "; /* * czy przegl&#261;darka obs&#322;uguje backgroundsounds IE * if the browser supports backgroundsounds IE */ // echo "Backgroundsounds IE".$browser->backgroundsounds()." "; /* * //czy przegl&#261;darka obs&#322;uguje iframes * if the browser supports iframes */ // echo "Iframes ".$browser->iframes()." "; /* * Jaki System obs&#322;uguje u&#380;ytkownik * What system supports the use */ // echo "Platform ".$browser->platform()." "; // Jaki System obs&#322;uguje u&#380;ytkownik ?> </article> <?php ?> <mark style="margin: 0 0 0.01% 33.0%;">Strona została wygenerowana w  sek.</mark> </section> </body> </html>

 

 Demo responsive css v2-> Demo responsive css v2

 

Pracę nad klasą będę dalej kontynuował.

 

Github-> responsive css v2

Phpclasses->responsive css v2

 

 

 

Komentarze  

 
0 #1 crimsonchilla 2014-09-12 08:00
Lots of companies that are well establish may not provide as good of service as you may expect.
Not once did we take into consideration the cost of these dragons.

This will also help them interact with you and ferrets love to
cuddle.
Cytować
 

Dodaj komentarz


Kod antyspamowy
Odśwież

 Pozycjonowanie-Joomla, seo-joomla Tworzenie-Sitemap-joomla, TG-Chmura-Tagów, rs-rules-security Admin-Login-Security, joomla Licencja-Drupal, Licencja-ZenCart, Licencja-GPL2, Licencja-GPL3 Creative-Commons-License, joomla-2.5.x Kalendarz-Celtycki data-zodiak-data-majowie, moduł-GA-Gadu-gg, Moduł-Lotto-joomla K2-joomla Moduł-Kodownik-joomla kontakt-admin-3-pl Moduł-miłość-joomla Moduł-minutnik-joomla Google-Gadżet-strona-www Moduł-Multi-AnalogClock-joomla Grafika-Wektorowa-joomla Pascal-podstawy Pascal-instrukcja-if Pascal-pętla-for Pascal-Pętla-white-Repet Pascal-Instrukcja-Case Pascal Pascal-record Pascal-Tablice-(Macierze) Kolory-w-Pascalu Systemy-Liczbowe-10-16-8 Pak-top10-głosowanych-jQuery Waga-Bmi BF-Bear-Form Joomla+2.5+captcha+google BSD joomla, MP3 Creating, SEO, Admin tg RS BF The Celtic Forever Création Erstellen Toujours Immer Multi Contact-Admin-3-EN Contact-Admin-3-fr Contact-Admin-3-DE Open-Software-License-v.3.0-(OSL-3.0) System Interfejsy Mozilla joomla-metadane, seo-katalogi, wymiana Slider aukcjoner, Informator Osiemnaście CiastkoPl sem, Class Class-PDO-session login, registerUserClass, index PHP PDO, Class-ResponsiveCss zarabiarka-allegro Pogodynka Pogodynka Praca-Programisty Praca Funkcja-if Special+Arguments Simple-Captchta Jquery, Od 2 Konfiguracja 4.Instalacja 5.Konfiguracja 6.Instalacja 7.Konfiguracja 8.Metadane 9.Optymalizacja 10.Ciasteczka 11.System 12.Diagnostyka 13.Sesja Klasa Książka responsive Uniwersal Dodatek GoogAd.v1.4-polish-utf-8 Error Cooki Funkcje Linki Google Kompresja pdf, Dynamiczne template wycena Twoja Separation reklama ssd, bezpieczeństwo wzorce rekrutacja Zastosowanie Urządzenia Portale chat, dyski Platformy QUIZ 

Używamy cookies i podobnych technologii m.in. w celach: świadczenia usług, reklamy, statystyk. Korzystanie z witryny bez zmiany ustawień Twojej przeglądarki oznacza, że będą one umieszczane w Twoim urządzeniu końcowym. Pamiętaj, że zawsze możesz zmienić te ustawienia. To find out more about the cookies we use and how to delete them, see our privacy policy.

I accept cookies from this site.

EU Cookie Directive Module Information