آگهی
article

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

css-display-none

گاهی مواقع در طراحی صفحات وب و کدنویسی 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.
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
» ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
» حذف اسکرول افقی (Horizontal Scroll) با CSS
» چسبیدن فوتر قالب به پائین صفحه با CSS
» آموزش استفاده از فونت فارسی در وب با CSS
commentنظرات (۴۰ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: ali
زمان: ۱۳:۱۸:۵۳ - تاریخ: ۱۳۹۳/۱۰/۱۲
سلام خسته نباشید.
من یه فرم دارم که کاربر یه سری اطلاعات رو باید وارد کنه و وقتی دکمه جستجو رو میزنه اطلاعاتی که از دیتابیس میاورد رو داخل یک div که در ابتدا مخفی است نمایش دهد.
این کار با یک دکمه معمولی امکان پذیر است ولی چون دکمه من از نوع submit است، وقتی کلیک می شود یه لحظه div مورد نظر میاد و میره، رو صفحه نمیمونه. چطور میشه که با زدن دکمه submit مثل یه دکمه معمولی div رو صفحه بمونه و اطلاعات من رو نشون بده؟
ممنون میشم کمکم کنید
پاسخ: 
سلام
برای این کار باید از Ajax استفاده کنید، همچنین در تگ form در رویداد onsubmit باید تابع خود را به صورت نمونه زیر تنظیم کنید:
<form action="#" method="post" onsubmit="return ajaxFunc();">
در تابع نتیجه سرور را در بلاک div چاپ کرده و در نهایت
return false;
را برگردانید تا فرم ارسال نشود.
نویسنده: ali
زمان: ۱۲:۰۸:۱۲ - تاریخ: ۱۳۹۳/۱۰/۱۴
خیلی ممنون
میشه لطف کنید یه مثال کوچیک هم خودتون با فرم و submit اجرا کنید کدش رو برام بذارید؟
چون بازم درست نشد.
پاسخ: 
لطفا عبارت "اعتبار سنجی هم زمان فرم با Ajax" و "اعتبار سنجی فرم های وب با JavaScript"را در وب جستجو کنید، آموزش ها و نمونه کدهای جداگانه ای در این رابطه وجود دارد.
نویسنده: لیلا
زمان: ۱۵:۱۹:۰۶ - تاریخ: ۱۳۹۳/۱۱/۱۹
با سلام
چطوری میتونم با استفاده از این روش عناصری که نمیخوام برای پرینت مخفی کنم. میخوام مثلا دکمه ی ثبت و هدر و بقیه چیزهای غیرضروری موقع پرینت نباشه. خیلی فوریه لطفا کمکم کنید :(
پاسخ: 
سلام
برای تنظیم صفحه مناسب پرینت، از استایل مخصوص آن به صورت زیر استفاده کنید.
<link rel="stylesheet" href="print.css" type="text/css" media="print">
نویسنده: لیلا
زمان: ۱۶:۴۸:۱۰ - تاریخ: ۱۳۹۳/۱۱/۲۵
سلام
عذر میخوام من نمیدونم کد بالا رو و چه جوری و کجا استفاده کنم در ضمن دکمه هایی که تو صفحه هست موقع پرینت نشون داده میشه. تو رو خدا کمک کنید
پاسخ: 
سلام
یک استایل CSS با نام print.css در صفحه (در قسمت head) وارد کنید و داخل آن عناصری مانند input و... که نمی خواهید نمایش داده شوند را بر اساس روش های بالا مخفی کنید، به فرض برای پنهان کردن تمام تگ های input (که شامل دکمه ها نیز می شود) کد زیر را داخل فایل CSS مخصوص پرینت تعریف کنید.
input{
display:none;
}
همچنین می توانید به صورت مستقیم (بدون استفاده از فایل جداگانه) مانند نمونه استایل زیر این کار را در صفحه HTML انجام دهید.
<style type="text/css" media="print">
input{
display:none;
}
</style>
نویسنده: لیلا
زمان: ۰۹:۴۸:۵۹ - تاریخ: ۱۳۹۳/۱۱/۲۶
بازم سلام
خوب الان این میشه css داخلی برای فراخوانی باید از کلمه کلیدی class یا id به این صورت استفاده کنم؟
مثلا توی دکمه ی submit
<"input name=sabt  type=submit class="input >
باید فراخوانیش کنیم؟
بعدش ما که دکمه ای برای پرینت نداریم که با زدنش بتونیم ببینیم چه اتفاقی میوفته من توی css ضعیفم
پاسخ: 
سلام
برای مواقعی که اسم یک تگ (به فرض input) در CSS استفاده می شود، نیازی به تعریف class یا id نیست، به این صورت استایل تعریف شده به تمام تگ های input تعلق می گیرد، class و id برای مواقعی است که بخواهیم تگ های خاصی استایل متفاوت داشته باشند، در مورد دکمه پرینت، می توانید از منوی مرورگر استفاده و گزینه Print را انتخاب کنید!
نویسنده: sara
زمان: ۱۳:۲۹:۰۶ - تاریخ: ۱۳۹۳/۱۲/۱۲
سلام خسته نباشید ببخشید من میخوام وقتی روی یک لینک کلیک کردیم بعد از visited شدن، اون لینک دیگه نمایش داده نشه .
پاسخ: 
سلام
اگر منظور عدم چاپ لینک در خروجی است، راه حل کوتاهی وجود ندارد، باید این فرآیند را در کدهای سمت سرور (PHP و...) تعریف کنید!
نویسنده: meysam
زمان: ۱۱:۰۴:۴۷ - تاریخ: ۱۳۹۴/۰۹/۲۰
سلام خسته نباشید من تو وب سایتم یه موزیک پلیره با تگ اسکریپت میخوام این پلیرو مخفی کنم باید چیکار کرد
پاسخ: 
سلام، کدهایتان را درون بلاک زیر قرار دهید:
<div style="position:absolute; top:-9999px; left:-9999px;">Code!</div>
نویسنده: معین
زمان: ۲۲:۱۶:۴۱ - تاریخ: ۱۳۹۴/۰۹/۲۸
با سلام و احترام
میخواستم بدونم چطور میشه با استفاده از کدی یک منو رو در حالت موبایل فقط نمایش بدیم و در حالت دسکتاب نمایش ندیم. و برعکس ...
ممنون میشم راهنمایی بفرمایید.
با تشکر
پاسخ: 
سلام
برای این موضوع کد ساده ای وجود ندارد، در سمت کاربر می توانید با جاوا اسکریپت این کار را انجام دهید، کد آماده:
<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;
?>
نویسنده: معین
زمان: ۱۹:۴۳:۵۸ - تاریخ: ۱۳۹۴/۰۹/۲۹
سلام مجدد
قربان فکر کنم سوالمو خوب مطرح نکردم.
من میخوام یک منو رو با استفاده از یک کد (ترجیحا css) تو حالت موبایل از نمایشش جلوگیری بشه. یا برعکسش فقط رو حالت دسکتاب نشون داده بشه.
ممنون از پاسختون.
پاسخ: 
سلام
تشخیص حالت موبایل یا دستکتاپ بودن با کدهای HTML یا CSS امکانپذیر نیست، باید ابتدا با همان روش های توضیح داده شده موبایل بودن یا دستکتاپ بودن سیستم کاربر را تشخیص داده و متناسب با آن، خروجی مورد نظرتان را چاپ کنید (قاعدتا نیازمند آشنایی قبلی با JavaScript یا PHP است!).
نویسنده: پری
زمان: ۱۶:۲۷:۵۹ - تاریخ: ۱۳۹۴/۱۱/۲۲
سلام
وقتی روی یک عکس کلیک می کنم میخوام عکس مورد نظر بره و بک گراند دیده بشه
عکس و بک گراند روی هم قرار دارند (اندازه مساوی)
(بک گراند ی لینک هست)
کدهای css و html رو میخواستم
ممنون
پاسخ: 
متاسفانه کد آماده ای برای این مورد در اختیار نداریم!
نویسنده: پری
زمان: ۱۲:۱۲:۳۰ - تاریخ: ۱۳۹۴/۱۱/۲۳
سلام
این حالت برای محصولات بکار میره
وقتی موس روی عکس میره ، عکس پنهان میشه و بک گراند که لینک خرید هستش دیده میشه و کاربر میتونه پروسه خرید رو انجام بده
کدشو نوشتم ولی ایراد داره
چطور میتونم کدها رو بفرستم ؟
ممنون
پاسخ: 
کدها را در قالب فایل zip به آدرس ایمیل ما (موجود در بخش تماس) ارسال نمائید.
نویسنده: دانیال
زمان: ۲۱:۴۸:۰۳ - تاریخ: ۱۳۹۴/۱۲/۰۹
سلام; ببخشید.
فرض کنیم که تو صفحه ی دو تا عنصر کنار هم داریم که عرض یک از اون را مثلا 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 صفحه شما نیاز به تغییرات دیگری نیز داشته باشد.
نویسنده: mahdi.pi
زمان: ۱۳:۰۵:۲۶ - تاریخ: ۱۳۹۵/۰۱/۰۸
با سلام و عرض خسته نباشید.
اقا یه سوال داشتم اینکه من کلمات کلیدی بسیاری برای چت رومم پیدا کردم مشکلم اینجا که کسای دیگه میان کپی میکنند و خودشون استفاده میکنند الان فهمیدم میتونم مخفی کنم
سوال اولم اینه کدوم روش به سئو سایتم لطمه نمیزنه؟
سوال دومم اینه چطوری این کد ها رو تو پنل چت روم بنویسم یعنی یه جای تو پنل چت روم هست که محل نوشتن تگ ها و کلمات کلیدی هست حالا چطوری این کد ها رو وارد کنم؟
سوال سومم اینه مخفی کردن کلمات کلیدی با مخفی کردن تگ چه فرقی داره؟
سوال اخرم اینه ایا روش دیگه ای برای برطرف کردن مشکل من دارید؟
با تشکر از زحمات شما ببخشین که خیلی بلند شد متنم مرسی بابت سایت خوبتون
پاسخ: 
- روش position:absolute و left از نظر سئو مناسب تر است.
- این موضوع نیاز به بررسی دارد، قاعدتا بدون اطلاع از امکانات و چند و چون کدنویسی سیستم مدیریت چت روم نمی توان نظر خاصی ارائه کرد.
- سوال واضح نیست! تگ هم می تواند اشاره به تگ های HTML داشته باشد هم به برچسب هایی که در سایت ها و وبلاگ ها برای دسته بندی بهتر مطالب استفاده می شود، با فرض اینکه منظورتان مورد دوم باشد، تقریبا مشابه کلمات کلیدی است، با این تفاوت که برچسب ها معمولا از سوی نویسنده (مدیر سایت) تعیین می شود (تقسیم بندی موضوعی)، اما کلمات کلیدی معمولا از طریق تحلیل اطلاعات جستجو شده بدست می آیند، البته این تحلیل صرفا تجربی است و مرز مشخصی بین این دو اصطلاح وجود ندارد!
- بحث سئو کمی گسترده است و نمی توان در قالب یک پاسخ موضوع را خلاصه کرد، صرفا جهت راهنمایی، استفاده صرف از کلمات کلیدی بدون اینکه محتوای متنی مرتبط با کلمات کلیدی در صفحه وجود داشته باشد از نظر سئو صحیح نیست، بهتر است در خصوص موضوعات مرتبط با سایتتان محتوای متنی در لینک ها (صفحات) مختلف داشته باشد که کلمات کلیدی به آنها ارجاع دهند، این روش در کنار تگ های کلیدی می تواند راه حل مناسبی باشد.
نویسنده: mehrdad
زمان: ۱۳:۴۰:۰۹ - تاریخ: ۱۳۹۵/۰۱/۲۹
سلام خسته نباشید
بطور مثال من یه تصویر توی صفحه html دارم و میخوام با موس که روی تصویر اومدم یه ذره کم رنگ شه و متن مخفی پشت سرش نمایش داده بشه بعد که موس از روی تصویر کنار رفت متن مخفی شه و تصویر پر رنگ شه دوباره . ممنون میشم یه راهنمایی درباره چگونگی مخفی کردن این متن و نمایشش بدید.
پاسخ: 
لطفا به آموزش صفحه زیر مراجعه کنید:
http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/
نویسنده: محسن
زمان: ۰۱:۴۲:۰۳ - تاریخ: ۱۳۹۵/۰۱/۳۱
من با استفاده از display:none یک کادر متن رو مخفی کردم . اما در سورس صفحه میتونم اون متن رو ببینم. روشی وجود داره که وقتی سورس صفحه رو باز میکنم اون قسمت حتی از داخل سورس هم مخفی بشه ؟
پاسخ: 
تا آنجا که اطلاع داریم چنین روشی عملا وجود ندارد و در نهایت کاربر قادر به دیدن سورس ارسالی به مرورگر می باشد، البته می توانید با روش های جایگزین مانند استفاده از جاوا اسکریپت و... موارد را از حالت کدهای ساده HTML خارج کنید که بستگی به شرایط و هدف شما دارد، اما در کل راه حل کاربردی برای بحث مطرح شده وجود ندارد.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




2 × 8
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form حامد
در:
عالی بود
۲۱:۳۸:۳۱ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام خیلی ممنون بابت پاسخ سریعتون خیلی دنبال همین دو خط کد بودم برای یادگیری سریع ریجکس ولی با سرچ پیدا نکردم و...
۱۸:۰۳:۴۳ ۱۳۹۸/۱۱/۰۷

form فرید
در:
درود بشما، میخواستم بدونم مثل کلمه @، کلمه ایی ساین هم داریم؟ با تشکر
۱۲:۱۹:۰۷ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام میشه لطفا به سوالم جواب بدید من می خوام با استفاده از عبارات با قاعده تمام تگ های html رو تشخیص بدم...
۱۰:۱۳:۰۵ ۱۳۹۸/۱۱/۰۷

form PewDiePie
در:
سلام چطور می تونم این کد رو یه لینک هم بهش اضافه کنم یعنی این که وقتی عکس رو می بینی طرف بتونه...
۲۳:۳۶:۲۶ ۱۳۹۸/۱۱/۰۶

form رسول
در:
سلام میخوام بجای نمایش متن، متن موجود در یه لینکو بهم نشون بده ممنون میشم کمکم کنید
۱۳:۳۸:۱۸ ۱۳۹۸/۱۱/۰۶

form حسن
در:
من مطابق کد نوشته شده شما میخواستم آدرس
۱۴:۱۰:۱۳ ۱۳۹۸/۱۱/۰۵

form saemrezaei
در:
سلام واقعا عالییه خیلی استفاده کردم به وبلاگم سر بزن لطفا.
۱۳:۳۷:۳۴ ۱۳۹۸/۱۱/۰۵

form نصراله رضایی
در:
سلام در ادمین های گذشته که باز می کنم تصاویر مشاهده نمی شود و من را به آدرس Huge domains.com ارجاع می...
۲۲:۳۹:۵۳ ۱۳۹۸/۱۱/۰۴

form نقدی زاده
در:
واقعا مرسی یه overflow-y:hidden به body دادم اسکرل افقی برای صفحه نمایش تبلت از بین رفت
۱۴:۴۴:۱۳ ۱۳۹۸/۱۱/۰۴

form وحید پوربشیری
در:
سلام لطفا یکی که خوب جاوا اسکریپت بلده بیاد به این آیدی ت.ل.گ.ر.ا.م Alpha2020@ یه کد برام بنویسه پول هم میدم
۱۱:۱۲:۳۲ ۱۳۹۸/۱۱/۰۲

form امین
در:
سلام تشکر بابت راهنماییتون. منظور من این بود که: الان با ثبت نام کاربر a در سایت اطلاعاتش در دیتابیس ثبت میشه و یک پوشه...
۰۳:۱۲:۴۰ ۱۳۹۸/۱۱/۰۲

form شریفی
در:
سلام معنی متن زیر چیست؟
۱۸:۲۸:۰۹ ۱۳۹۸/۱۱/۰۱

form امین
در:
سلام خسته نباشید یه اسکریپت دارم که وقتی کاربر ثبت نام میکنه یه پوشه و محتواش ایجاد میشه. میخوام یه صفحه با هر ثبت نام...
۱۴:۱۸:۵۱ ۱۳۹۸/۱۰/۳۰

form Admin
در:
سلام دوست عزیز. میشه بگویید چگونه میتوان در وبلاگ کادری را باز کرد که بازدید کنندگان بتوانند در آن چیزی بنویسند. ممنون میشم...
۱۱:۲۸:۵۰ ۱۳۹۸/۱۰/۳۰
آگهی