آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

مخفی کردن عناصر وب با CSS

گاهی مواقع در طراحی صفحات وب و کدنویسی HTML و CSS ممکن است بنا به دلایل مختلف نیاز به این داشته باشیم که مواردی را از چشم کاربران عادی پنهان و مخفی کنیم، به طور مثال شرایطی پیش می آید که بخواهیم بین کاربران عادی و ربات ها تفکیک قائل شویم، یعنی به طور مثال یک فیلد را فقط به ربات ها نشان دهیم، در چنین شرایطی برخی ترجیح می دهند از برنامه نویسی سمت سرور مانند PHP یا ASP در این گونه موارد استفاده کنند و برخی نیز به جاوا اسکریپت متوصل می شوند، اما در کنار همه این روش ها که در جای خود کاربرد دارند، شاید یکی از بهترین و کاربردی ترین راه ها، استفاده از قابلیت های CSS باشد که در ادامه آموزش به آنها اشاره می کنیم.

چرا عناصر را در صفحه وب پنهان می کنیم؟

شاید این سوال در ذهنتان باشد که چه نیازی است عناصر را در صفحات وب مخفی و پنهان کنیم؟
البته این کار همیشه هم ضرورت ندارد، بلکه استفاده از این قابلیت در صفحات وب بستگی به شرایط و نیاز شما دارد، به طور مثال فرض کنید یک سیستم ضد ارسال هرزنامه یا اسپم ایجاد کرده اید که متکی بر پر شدن یا نشدن یک فیلد در یک فرم HTML است، به این صورت که اگر فیلد مورد نظر پر شود یعنی کاربر یک ربات است و اگر خالی باشد یعنی کاربر یک انسان است، همان طور که می دانیم ربات ها صفحات وب را معمولا بدون پردازش CSS و به صورت کد HTML دریافت می کنند، لذا آن فیلد مخفی برای آنها قابل رویت است و بنابراین به همراه سایر فیلدهای موجود در فرم، آن را هم به احتمال خیلی زیاد با عباراتی پر می کنند، اما با مخفی کردن فیلد برای کاربران عادی آنها نمی توانند در شرایط معمولی فیلد را مشاهده کنند و لذا نباید اطلاعاتی در آن وارد نمایند، حتی می توان با درج عبارتی مانند "در این فیلد چیزی ننویسید" کاربرانی که استایل CSS در مرورگرشان غیر فعال است را نیز راهنمایی کرد، یا به طور مثال اگر بخواهیم یک ابزار یا یک عبارت، بنا به دلایل مختلف فقط برای ربات ها قابل رویت باشد، نیاز به استفاده از CSS است.

استفاده از display:none

ابتدایی ترین روشی مخفی کردن عناصر در صفحات وب با CSS استفاده از خاصیت display و با مقادیر none است، به این صورت لایه یا بلاک مورد نظر با وجود اینکه در صفحه وجود دارد، ولی از چشم کاربران عادی (در شرایط معمول و با فعال بودن استایل CSS) پنهان است، برای استفاده از این خاصیت کافی است آن را به صورت یک کلاس یا آی دی و یا به صورت استایل خطی به عنصر مورد نظر نسبت دهیم.

<style type="text/css">
.hidden{
    display:none;
}
</style>

نکته: بعضا مشاهده می شود که برای مخفی کردن لینک ها یا به اصطلاح فریب دادن ربات های جستجوگر مانند ربات گوگل، از این خاصیت استفاده می شود، به یاد داشته باشیم ربات ها و از جمله ربات گوگل بر اساس الگوریتم های خود این گونه موارد را شناسایی کرده و در صورت تکرار ممکن است سایت یا وبلاگ ما را در لیست سیاه خود قرار داده یا حداقل رتبه آن را کاهش دهند، لذا استفاده از display:none باید با دقت و به تعداد خیلی کم انجام شود.

استفاده از visibility:hidden

یکی دیگر از خاصیت های CSS که در مخفی کردن عناصر در صفحات وب کاربرد دارد، خاصیت visibility:hidden است، البته عملکرد visibility:hidden تا حدود زیادی مشابه display:none است، با این تفاوت که visibility:hidden اگرچه عنصر را در صفحه مخفی می کند، اما بر خلاف display:none اثر آن را به طور کامل از بین نمی برد، به عنوان مثال اگر یک بلاک با ارتفاع 200 پیکسل را با display:none مخفی کنیم، فضای 200 پیکسلی اشغال شده نیز از بین می رود، اما اگر همین کار را با visibility:hidden انجام دهیم، بلاک مخفی می شود، بدون اینکه 200 پیکسل فضای اشغال شده از بین برود.

<style type="text/css">
#visibility{
    visibility:hidden;
}
</style>

استفاده از position:absolute و left

تکنیک هایی که در بالا اشاره شد اگرچه روش هایی استاندارد و در جای خود قابل استفاده هستند، اما کاربرد زیاد آنها در یک صفحه به لحاظ سئو (SEO) یا بهینه سازی موتورهای جستجو (Search Engine Optimization) توصیه نمی شود، از این رو طراحان و برنامه نویسان از روش دیگری برای مخفی نمودن عناصر HTML در صفحات وب استفاده می کنند، در این روش ابتدا با استفاده از خاصیت position:absolute عنصر را به حالت شناور در آورده و سپس با کمک left و در نظر گرفتن یک مقدار منفی برای آن، عنصر را از دید کاربران مخفی می کنند بدون اینکه تاثیری در ظاهر صفحه ایجاد شود.

<style type="text/css">
.accessible{
    position:absolute;
    left:-9999px;
    top:auto;
    width:5px;
    height:5px;
    overflow:hidden;
}
</style>

توضیح:
- مقادیر absolute برای خاصیت position باعث شناور شدن بلاک یا عنصر مورد نظر می شود.
- مقدار منفی برای left، عنصر را به بیرون از دید کاربر و خارج از صفحه نمایش هدایت می کند.
- مقادیر width و height می توانند صفر در نظر گرفته شوند، اما برای اطمینان از اینکه ربات هایی مانند ربات گوگل محتوای بلاک را پردازش کنند، بهتر است مقداری بیش از صفر یا 1 برای ارتفاع و عرض در نظر گرفته شود.
- خاصیت overflow با مقادیر hidden باعث می شود که محتوای مازاد بر فضای بلاک، مخفی شود.
نکته: وقتی از مقادیر منفی برای خاصیت left استفاده می کنیم، باید در نظر داشته باشیم که چینش (direction) صفحه در تگ body به صورت پیش فرض یا چپ به راست (ltr) باشد، در غیر این صورت (یعنی اگر تگ body چینش rtl یا راست به چپ داشته باشد) در صفحه اسکرول افقی خواهیم داشت، در این گونه موارد به جای left باید از right و مقادیر منفی برای کلاس مخفی استفاده کنیم یا اینکه چینش را در تگ body به حالت ltr تغییر دهیم و یا اگر ناچار به استفاده از چینش rtl هستیم، آن را به بلاک های زیرمجموعه نسبت دهیم نه به تگ body.

دسته بندی: آموزش کاربردی » CSS

برچسب ها: CSS - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
چسبیدن فوتر قالب به پائین صفحه با CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS

دیدگاه

۵۷ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

دانیال

۲۱:۴۸ ۱۳۹۴/۱۲/۰۹

سلام; ببخشید.
فرض کنیم که تو صفحه ی دو تا عنصر کنار هم داریم که عرض یک از اون را مثلا 200px دادیم.
باید چیکار کنیم که عنصر دوم با عرضی که داره تمام صفحه رو پر کنه.

می توانید از نمونه کد زیر الگوبرداری کنید:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test!</title>
<style>
html, body {
    padding: 0;
    margin: 0;	
}
.div-1 {
    float: left;
    height: 80px;
    width: 200px;
	background: #000000;
}
.div-2 {
    height: 80px;
    margin-left: 200px;
    position: relative;
	background: #ff0000;
}
</style>
</head>
<body>
<div class="div-1"></div>
<div class="div-2"></div>
</body>
</html>

نکته: کدهای CSS با توجه به موقعیت عناصر HTML باید تعریف شوند و ممکن است کد بالا با توجه به کدنویسی HTML صفحه شما نیاز به تغییرات دیگری نیز داشته باشد.

پری

۱۲:۱۲ ۱۳۹۴/۱۱/۲۳

سلام
این حالت برای محصولات بکار میره
وقتی موس روی عکس میره ، عکس پنهان میشه و بک گراند که لینک خرید هستش دیده میشه و کاربر میتونه پروسه خرید رو انجام بده
کدشو نوشتم ولی ایراد داره
چطور میتونم کدها رو بفرستم ؟
ممنون

کدها را در قالب فایل zip به آدرس ایمیل ما (موجود در بخش تماس) ارسال نمائید.

پری

۱۶:۲۷ ۱۳۹۴/۱۱/۲۲

سلام
وقتی روی یک عکس کلیک می کنم میخوام عکس مورد نظر بره و بک گراند دیده بشه
عکس و بک گراند روی هم قرار دارند (اندازه مساوی)
(بک گراند ی لینک هست)
کدهای css و html رو میخواستم
ممنون

متاسفانه کد آماده ای برای این مورد در اختیار نداریم!

معین

۱۹:۴۳ ۱۳۹۴/۰۹/۲۹

سلام مجدد
قربان فکر کنم سوالمو خوب مطرح نکردم.
من میخوام یک منو رو با استفاده از یک کد (ترجیحا css) تو حالت موبایل از نمایشش جلوگیری بشه. یا برعکسش فقط رو حالت دسکتاب نشون داده بشه.
ممنون از پاسختون.

سلام
تشخیص حالت موبایل یا دسکتاپ بودن با کدهای HTML یا CSS امکانپذیر نیست، باید ابتدا با همان روش های توضیح داده شده موبایل بودن یا دسکتاپ بودن سیستم کاربر را تشخیص داده و متناسب با آن، خروجی مورد نظرتان را چاپ کنید (قاعدتا نیازمند آشنایی قبلی با JavaScript یا PHP است!).

معین

۲۲:۱۶ ۱۳۹۴/۰۹/۲۸

با سلام و احترام
میخواستم بدونم چطور میشه با استفاده از کدی یک منو رو در حالت موبایل فقط نمایش بدیم و در حالت دسکتاب نمایش ندیم. و برعکس ...
ممنون میشم راهنمایی بفرمایید.
با تشکر

سلام
برای این موضوع کد ساده ای وجود ندارد، در سمت کاربر می توانید با جاوا اسکریپت این کار را انجام دهید، کد آماده:

<script type="text/javascript">
//initiate as false
var isMobile = false;
//device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4)));
isMobile = true;
</script>

در سمت سرور نیز باید با استفاده از برنامه نویسی سمت سرور (PHP) اطلاعات مرورگر کاربر را بررسی و متناسب با آن خروجی مورد نظر را نمایش دهید، کلاس آماده:

class Mobile {
    public static function is_mobile(){
        $user_agent = $_SERVER['HTTP_USER_AGENT']; // get the user agent value - this should be cleaned to ensure no nefarious input gets executed
        $accept     = $_SERVER['HTTP_ACCEPT']; // get the content accept value - this should be cleaned to ensure no nefarious input gets executed
        return false
            || (preg_match('/ipad/i',$user_agent))
            || (preg_match('/ipod/i',$user_agent)||preg_match('/iphone/i',$user_agent))
            || (preg_match('/android/i',$user_agent))
            || (preg_match('/opera mini/i',$user_agent))
            || (preg_match('/blackberry/i',$user_agent))
            || (preg_match('/(pre\/|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine)/i',$user_agent))
            || (preg_match('/(iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile)/i',$user_agent))
            || (preg_match('/(mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|mp500|samu3|samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|m881|s920|n210|s700|c-810|_h797|mob-x|sk16d|848b|mowser|s580|r800|471x|v120|rim8|c500foma:|160x|x160|480x|x640|t503|w839|i250|sprint|w398samr810|m5252|c7100|mt126|x225|s5330|s820|htil-g1|fly v71|s302|-x113|novarra|k610i|-three|8325rc|8352rc|sanyo|vx54|c888|nx250|n120|mtk |c5588|s710|t880|c5005|i;458x|p404i|s210|c5100|teleca|s940|c500|s590|foma|samsu|vx8|vx9|a1000|_mms|myx|a700|gu1100|bc831|e300|ems100|me701|me702m-three|sd588|s800|8325rc|ac831|mw200|brew |d88|htc\/|htc_touch|355x|m50|km100|d736|p-9521|telco|sl74|ktouch|m4u\/|me702|8325rc|kddi|phone|lg |sonyericsson|samsung|240x|x320|vx10|nokia|sony cmd|motorola|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|psp|treo)/i',$user_agent))
            || ((strpos($accept,'text/vnd.wap.wml')>0)||(strpos($accept,'application/vnd.wap.xhtml+xml')>0))
            || (isset($_SERVER['HTTP_X_WAP_PROFILE'])||isset($_SERVER['HTTP_PROFILE']))
            || (in_array(strtolower(substr($user_agent,0,4)),array('1207'=>'1207','3gso'=>'3gso','4thp'=>'4thp','501i'=>'501i','502i'=>'502i','503i'=>'503i','504i'=>'504i','505i'=>'505i','506i'=>'506i','6310'=>'6310','6590'=>'6590','770s'=>'770s','802s'=>'802s','a wa'=>'a wa','acer'=>'acer','acs-'=>'acs-','airn'=>'airn','alav'=>'alav','asus'=>'asus','attw'=>'attw','au-m'=>'au-m','aur '=>'aur ','aus '=>'aus ','abac'=>'abac','acoo'=>'acoo','aiko'=>'aiko','alco'=>'alco','alca'=>'alca','amoi'=>'amoi','anex'=>'anex','anny'=>'anny','anyw'=>'anyw','aptu'=>'aptu','arch'=>'arch','argo'=>'argo','bell'=>'bell','bird'=>'bird','bw-n'=>'bw-n','bw-u'=>'bw-u','beck'=>'beck','benq'=>'benq','bilb'=>'bilb','blac'=>'blac','c55/'=>'c55/','cdm-'=>'cdm-','chtm'=>'chtm','capi'=>'capi','cond'=>'cond','craw'=>'craw','dall'=>'dall','dbte'=>'dbte','dc-s'=>'dc-s','dica'=>'dica','ds-d'=>'ds-d','ds12'=>'ds12','dait'=>'dait','devi'=>'devi','dmob'=>'dmob','doco'=>'doco','dopo'=>'dopo','el49'=>'el49','erk0'=>'erk0','esl8'=>'esl8','ez40'=>'ez40','ez60'=>'ez60','ez70'=>'ez70','ezos'=>'ezos','ezze'=>'ezze','elai'=>'elai','emul'=>'emul','eric'=>'eric','ezwa'=>'ezwa','fake'=>'fake','fly-'=>'fly-','fly_'=>'fly_','g-mo'=>'g-mo','g1 u'=>'g1 u','g560'=>'g560','gf-5'=>'gf-5','grun'=>'grun','gene'=>'gene','go.w'=>'go.w','good'=>'good','grad'=>'grad','hcit'=>'hcit','hd-m'=>'hd-m','hd-p'=>'hd-p','hd-t'=>'hd-t','hei-'=>'hei-','hp i'=>'hp i','hpip'=>'hpip','hs-c'=>'hs-c','htc '=>'htc ','htc-'=>'htc-','htca'=>'htca','htcg'=>'htcg','htcp'=>'htcp','htcs'=>'htcs','htct'=>'htct','htc_'=>'htc_','haie'=>'haie','hita'=>'hita','huaw'=>'huaw','hutc'=>'hutc','i-20'=>'i-20','i-go'=>'i-go','i-ma'=>'i-ma','i230'=>'i230','iac'=>'iac','iac-'=>'iac-','iac/'=>'iac/','ig01'=>'ig01','im1k'=>'im1k','inno'=>'inno','iris'=>'iris','jata'=>'jata','java'=>'java','kddi'=>'kddi','kgt'=>'kgt','kgt/'=>'kgt/','kpt '=>'kpt ','kwc-'=>'kwc-','klon'=>'klon','lexi'=>'lexi','lg g'=>'lg g','lg-a'=>'lg-a','lg-b'=>'lg-b','lg-c'=>'lg-c','lg-d'=>'lg-d','lg-f'=>'lg-f','lg-g'=>'lg-g','lg-k'=>'lg-k','lg-l'=>'lg-l','lg-m'=>'lg-m','lg-o'=>'lg-o','lg-p'=>'lg-p','lg-s'=>'lg-s','lg-t'=>'lg-t','lg-u'=>'lg-u','lg-w'=>'lg-w','lg/k'=>'lg/k','lg/l'=>'lg/l','lg/u'=>'lg/u','lg50'=>'lg50','lg54'=>'lg54','lge-'=>'lge-','lge/'=>'lge/','lynx'=>'lynx','leno'=>'leno','m1-w'=>'m1-w','m3ga'=>'m3ga','m50/'=>'m50/','maui'=>'maui','mc01'=>'mc01','mc21'=>'mc21','mcca'=>'mcca','medi'=>'medi','meri'=>'meri','mio8'=>'mio8','mioa'=>'mioa','mo01'=>'mo01','mo02'=>'mo02','mode'=>'mode','modo'=>'modo','mot '=>'mot ','mot-'=>'mot-','mt50'=>'mt50','mtp1'=>'mtp1','mtv '=>'mtv ','mate'=>'mate','maxo'=>'maxo','merc'=>'merc','mits'=>'mits','mobi'=>'mobi','motv'=>'motv','mozz'=>'mozz','n100'=>'n100','n101'=>'n101','n102'=>'n102','n202'=>'n202','n203'=>'n203','n300'=>'n300','n302'=>'n302','n500'=>'n500','n502'=>'n502','n505'=>'n505','n700'=>'n700','n701'=>'n701','n710'=>'n710','nec-'=>'nec-','nem-'=>'nem-','newg'=>'newg','neon'=>'neon','netf'=>'netf','noki'=>'noki','nzph'=>'nzph','o2 x'=>'o2 x','o2-x'=>'o2-x','opwv'=>'opwv','owg1'=>'owg1','opti'=>'opti','oran'=>'oran','p800'=>'p800','pand'=>'pand','pg-1'=>'pg-1','pg-2'=>'pg-2','pg-3'=>'pg-3','pg-6'=>'pg-6','pg-8'=>'pg-8','pg-c'=>'pg-c','pg13'=>'pg13','phil'=>'phil','pn-2'=>'pn-2','pt-g'=>'pt-g','palm'=>'palm','pana'=>'pana','pire'=>'pire','pock'=>'pock','pose'=>'pose','psio'=>'psio','qa-a'=>'qa-a','qc-2'=>'qc-2','qc-3'=>'qc-3','qc-5'=>'qc-5','qc-7'=>'qc-7','qc07'=>'qc07','qc12'=>'qc12','qc21'=>'qc21','qc32'=>'qc32','qc60'=>'qc60','qci-'=>'qci-','qwap'=>'qwap','qtek'=>'qtek','r380'=>'r380','r600'=>'r600','raks'=>'raks','rim9'=>'rim9','rove'=>'rove','s55/'=>'s55/','sage'=>'sage','sams'=>'sams','sc01'=>'sc01','sch-'=>'sch-','scp-'=>'scp-','sdk/'=>'sdk/','se47'=>'se47','sec-'=>'sec-','sec0'=>'sec0','sec1'=>'sec1','semc'=>'semc','sgh-'=>'sgh-','shar'=>'shar','sie-'=>'sie-','sk-0'=>'sk-0','sl45'=>'sl45','slid'=>'slid','smb3'=>'smb3','smt5'=>'smt5','sp01'=>'sp01','sph-'=>'sph-','spv '=>'spv ','spv-'=>'spv-','sy01'=>'sy01','samm'=>'samm','sany'=>'sany','sava'=>'sava','scoo'=>'scoo','send'=>'send','siem'=>'siem','smar'=>'smar','smit'=>'smit','soft'=>'soft','sony'=>'sony','t-mo'=>'t-mo','t218'=>'t218','t250'=>'t250','t600'=>'t600','t610'=>'t610','t618'=>'t618','tcl-'=>'tcl-','tdg-'=>'tdg-','telm'=>'telm','tim-'=>'tim-','ts70'=>'ts70','tsm-'=>'tsm-','tsm3'=>'tsm3','tsm5'=>'tsm5','tx-9'=>'tx-9','tagt'=>'tagt','talk'=>'talk','teli'=>'teli','topl'=>'topl','hiba'=>'hiba','up.b'=>'up.b','upg1'=>'upg1','utst'=>'utst','v400'=>'v400','v750'=>'v750','veri'=>'veri','vk-v'=>'vk-v','vk40'=>'vk40','vk50'=>'vk50','vk52'=>'vk52','vk53'=>'vk53','vm40'=>'vm40','vx98'=>'vx98','virg'=>'virg','vite'=>'vite','voda'=>'voda','vulc'=>'vulc','w3c '=>'w3c ','w3c-'=>'w3c-','wapj'=>'wapj','wapp'=>'wapp','wapu'=>'wapu','wapm'=>'wapm','wig '=>'wig ','wapi'=>'wapi','wapr'=>'wapr','wapv'=>'wapv','wapy'=>'wapy','wapa'=>'wapa','waps'=>'waps','wapt'=>'wapt','winc'=>'winc','winw'=>'winw','wonu'=>'wonu','x700'=>'x700','xda2'=>'xda2','xdag'=>'xdag','yas-'=>'yas-','your'=>'your','zte-'=>'zte-','zeto'=>'zeto','acs-'=>'acs-','alav'=>'alav','alca'=>'alca','amoi'=>'amoi','aste'=>'aste','audi'=>'audi','avan'=>'avan','benq'=>'benq','bird'=>'bird','blac'=>'blac','blaz'=>'blaz','brew'=>'brew','brvw'=>'brvw','bumb'=>'bumb','ccwa'=>'ccwa','cell'=>'cell','cldc'=>'cldc','cmd-'=>'cmd-','dang'=>'dang','doco'=>'doco','eml2'=>'eml2','eric'=>'eric','fetc'=>'fetc','hipt'=>'hipt','http'=>'http','ibro'=>'ibro','idea'=>'idea','ikom'=>'ikom','inno'=>'inno','ipaq'=>'ipaq','jbro'=>'jbro','jemu'=>'jemu','java'=>'java','jigs'=>'jigs','kddi'=>'kddi','keji'=>'keji','kyoc'=>'kyoc','kyok'=>'kyok','leno'=>'leno','lg-c'=>'lg-c','lg-d'=>'lg-d','lg-g'=>'lg-g','lge-'=>'lge-','libw'=>'libw','m-cr'=>'m-cr','maui'=>'maui','maxo'=>'maxo','midp'=>'midp','mits'=>'mits','mmef'=>'mmef','mobi'=>'mobi','mot-'=>'mot-','moto'=>'moto','mwbp'=>'mwbp','mywa'=>'mywa','nec-'=>'nec-','newt'=>'newt','nok6'=>'nok6','noki'=>'noki','o2im'=>'o2im','opwv'=>'opwv','palm'=>'palm','pana'=>'pana','pant'=>'pant','pdxg'=>'pdxg','phil'=>'phil','play'=>'play','pluc'=>'pluc','port'=>'port','prox'=>'prox','qtek'=>'qtek','qwap'=>'qwap','rozo'=>'rozo','sage'=>'sage','sama'=>'sama','sams'=>'sams','sany'=>'sany','sch-'=>'sch-','sec-'=>'sec-','send'=>'send','seri'=>'seri','sgh-'=>'sgh-','shar'=>'shar','sie-'=>'sie-','siem'=>'siem','smal'=>'smal','smar'=>'smar','sony'=>'sony','sph-'=>'sph-','symb'=>'symb','t-mo'=>'t-mo','teli'=>'teli','tim-'=>'tim-','tosh'=>'tosh','treo'=>'treo','tsm-'=>'tsm-','upg1'=>'upg1','upsi'=>'upsi','vk-v'=>'vk-v','voda'=>'voda','vx52'=>'vx52','vx53'=>'vx53','vx60'=>'vx60','vx61'=>'vx61','vx70'=>'vx70','vx80'=>'vx80','vx81'=>'vx81','vx83'=>'vx83','vx85'=>'vx85','wap-'=>'wap-','wapa'=>'wapa','wapi'=>'wapi','wapp'=>'wapp','wapr'=>'wapr','webc'=>'webc','whit'=>'whit','winw'=>'winw','wmlb'=>'wmlb','xda-'=>'xda-',)))
        ;
    }
}

نحوه استفاده از کلاس فوق:

<?php if(Mobile::is_mobile()){
echo 1;
 } 
else{
echo 0;
?>

meysam

۱۱:۰۴ ۱۳۹۴/۰۹/۲۰

سلام خسته نباشید من تو وب سایتم یه موزیک پلیره با تگ اسکریپت میخوام این پلیرو مخفی کنم باید چیکار کرد

سلام، کدهایتان را درون بلاک زیر قرار دهید:

<div style="position:absolute; top:-9999px; left:-9999px;">Code!</div>

sara

۱۳:۲۹ ۱۳۹۳/۱۲/۱۲

سلام خسته نباشید ببخشید من میخوام وقتی روی یک لینک کلیک کردیم بعد از visited شدن، اون لینک دیگه نمایش داده نشه .

سلام
اگر منظور عدم چاپ لینک در خروجی است، راه حل کوتاهی وجود ندارد، باید این فرآیند را در کدهای سمت سرور (PHP و...) تعریف کنید!

لیلا

۰۹:۴۸ ۱۳۹۳/۱۱/۲۶

بازم سلام
خوب الان این میشه css داخلی برای فراخوانی باید از کلمه کلیدی class یا id به این صورت استفاده کنم؟
مثلا توی دکمه ی submit

<"input name=sabt  type=submit class="input >

باید فراخوانیش کنیم؟
بعدش ما که دکمه ای برای پرینت نداریم که با زدنش بتونیم ببینیم چه اتفاقی میوفته من توی css ضعیفم

سلام
برای مواقعی که اسم یک تگ (به فرض input) در CSS استفاده می شود، نیازی به تعریف class یا id نیست، به این صورت استایل تعریف شده به تمام تگ های input تعلق می گیرد، class و id برای مواقعی است که بخواهیم تگ های خاصی استایل متفاوت داشته باشند، در مورد دکمه پرینت، می توانید از منوی مرورگر استفاده و گزینه Print را انتخاب کنید!

لیلا

۱۶:۴۸ ۱۳۹۳/۱۱/۲۵

سلام
عذر میخوام من نمیدونم کد بالا رو و چه جوری و کجا استفاده کنم در ضمن دکمه هایی که تو صفحه هست موقع پرینت نشون داده میشه. تو رو خدا کمک کنید

سلام
یک استایل CSS با نام print.css در صفحه (در قسمت head) وارد کنید و داخل آن عناصری مانند input و... که نمی خواهید نمایش داده شوند را بر اساس روش های بالا مخفی کنید، به فرض برای پنهان کردن تمام تگ های input (که شامل دکمه ها نیز می شود) کد زیر را داخل فایل CSS مخصوص پرینت تعریف کنید.

input{
	display:none;
}

همچنین می توانید به صورت مستقیم (بدون استفاده از فایل جداگانه) مانند نمونه استایل زیر این کار را در صفحه HTML انجام دهید.

<style type="text/css" media="print">
input{
	display:none;
}
</style>

لیلا

۱۵:۱۹ ۱۳۹۳/۱۱/۱۹

با سلام
چطوری میتونم با استفاده از این روش عناصری که نمیخوام برای پرینت مخفی کنم. میخوام مثلا دکمه ی ثبت و هدر و بقیه چیزهای غیرضروری موقع پرینت نباشه. خیلی فوریه لطفا کمکم کنید :(

سلام
برای تنظیم صفحه مناسب پرینت، از استایل مخصوص آن به صورت زیر استفاده کنید.

<link rel="stylesheet" href="print.css" type="text/css" media="print">

ali

۱۲:۰۸ ۱۳۹۳/۱۰/۱۴

خیلی ممنون
میشه لطف کنید یه مثال کوچیک هم خودتون با فرم و submit اجرا کنید کدش رو برام بذارید؟
چون بازم درست نشد.

لطفا عبارت "اعتبار سنجی هم زمان فرم با Ajax" و "اعتبار سنجی فرم های وب با JavaScript"را در وب جستجو کنید، آموزش ها و نمونه کدهای جداگانه ای در این رابطه وجود دارد.

ali

۱۳:۱۸ ۱۳۹۳/۱۰/۱۲

سلام خسته نباشید.
من یه فرم دارم که کاربر یه سری اطلاعات رو باید وارد کنه و وقتی دکمه جستجو رو میزنه اطلاعاتی که از دیتابیس میاورد رو داخل یک div که در ابتدا مخفی است نمایش دهد.
این کار با یک دکمه معمولی امکان پذیر است ولی چون دکمه من از نوع submit است، وقتی کلیک می شود یه لحظه div مورد نظر میاد و میره، رو صفحه نمیمونه. چطور میشه که با زدن دکمه submit مثل یه دکمه معمولی div رو صفحه بمونه و اطلاعات من رو نشون بده؟
ممنون میشم کمکم کنید

سلام
برای این کار باید از Ajax استفاده کنید، همچنین در تگ form در رویداد onsubmit باید تابع خود را به صورت نمونه زیر تنظیم کنید:

<form action="#" method="post" onsubmit="return ajaxFunc();">

در تابع نتیجه سرور را در بلاک div چاپ کرده و در نهایت

return false;

را برگردانید تا فرم ارسال نشود.

الهام

۰۰:۲۷ ۱۳۹۳/۱۰/۱۲

سلام، من يه سوال درباره مخفی كردن تگ مطلب داشتم... من دوست ندارم تگ های مطالبم در زير مطالب مشخص باشه و پنهانشون كردم... در اينصورت از ديد رباتهای جستجو كه پنهان نميشه درسته؟ ممنون ميشم جواب بدين...

سلام
اگر با CSS یا JavaScript باشد، خیر! اما پنهان کردن محتوای حاوی لینک در وب از نظر SEO توصیه نمی شود و ممکن است باعث مسدود شدن وبلاگ شما در موتورهای جستجوگر شود، توصیه می کنیم اگر واقعا به برچسب ها نیازی ندارید، به طور کامل آنها را از خروجی وبلاگ حذف کنید.

محسن

۱۴:۰۸ ۱۳۹۳/۰۳/۲۸

با عرض سلام
اينجانب نياز دارم كه براي خودكار نمودن يكسري محاسبات، به سورس سايتي دسترسي داشته باشم. در حالتي كه بر روي سايت كليك راست نموده و گزينه ديدن سورس سايت را مي زنم، به اطلاعات كامل سايت با تكست باكس هايي كه توسط كاربر پر شده، دسترسي دارم. ولي هنگامي كه توسط برنامه نويسي مي خواهم به محتويات سايت دسترسي داشته باشم، متاسفانه اطلاعات پر شده در تكست باكس ها كه توسط كاربر پر شده اند در سورس سايت ديده نمي شود.
آيا مي توان كدي به انتهاي سايت مورد نظر اضافه كرد كه در صورت گرفتن محتواي سورس سايت، تمامي اطلاعات توسط برنامه نويسي در اختيارمان قرار گيرد؟
با تشكر

سلام
پاسخ کوتاه: خیر!
توضیح: اگر به سایت مورد نظر دسترسی مدیریتی دارید، می توانید به روش دیگری اطلاعات را از سمت کاربر به سرور ارسال کنید، به طور مثال با Ajax، در غیر این صورت نمی توان از سمت سرور اطلاعات صفحه مرورگر را دریافت کرد، مگر اینکه کاربر فرم را پر و ارسال نماید.

مهدی

۰۰:۴۲ ۱۳۹۳/۰۳/۰۱

آقا دمت گرم خیلی ممنون

صفحه 3 از 4

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.