دسته بندی
دسترسی سریع
نحوه متحرک ساختن متن با تگ marquee در HTML
تگ marquee چیست و چه کاربردی دارد؟
چرا نباید از تگ marquee استفاده کنیم؟
دلایل و ضرورت استفاده از تگ marquee
نحوه استفاده از تگ marquee
ویژگی behavior
ویژگی bgcolor
ویژگی dir
ویژگی direction
ویژگی height و width
ویژگی loop
ویژگی scrollamount
ویژگی scrolldelay
کنترل اسکرول متن با جاوا اسکریپت
استفاده از CSS و JavaScript برای ایجاد متن متحرک
مثال و پیش نمایش آنلاین
تگ marquee چیست و چه کاربردی دارد؟
چرا نباید از تگ marquee استفاده کنیم؟
دلایل و ضرورت استفاده از تگ marquee
نحوه استفاده از تگ marquee
ویژگی behavior
ویژگی bgcolor
ویژگی dir
ویژگی direction
ویژگی height و width
ویژگی loop
ویژگی scrollamount
ویژگی scrolldelay
کنترل اسکرول متن با جاوا اسکریپت
استفاده از CSS و JavaScript برای ایجاد متن متحرک
مثال و پیش نمایش آنلاین

نحوه متحرک ساختن متن با تگ marquee در HTML

در گستره تگ های مختلف HTML در صفحات وب بعضا به مواردی برمی خوریم که علی رغم کارایی و به اصطلاح کار راه انداز بودن توسط کنسرسیوم جهانی وب (W3C) غیراستاندارد ارزیابی شده اند، یکی از این موارد که توسط بسیاری از کاربران نیز مورد استفاده قرار می گیرد تگ Marquee است که برای متحرک سازی متن در صفحات HTML کاربرد دارد، به طور مثال در وبلاگ ها و سایت های مختلف برای به حرکت درآوردن لیستی از لینک ها در باکس های کناری یا نمایش عناوین اخبار و آخرین مطالب به صورت اسکرول افقی و خیلی ایده های جالب دیگر از تگ Marquee استفاده می شود، از این جهت با وجود غیر استاندارد بودن این تگ از نظر W3C اما به سبب کاربرد بسیارش قصد داریم در این آموزش به بررسی آن و همچنین سایر روش های جایگزین برای نمایش متن متحرک در صفحات وب بپردازیم.
تگ marquee چیست و چه کاربردی دارد؟
marquee نام تگی است که اولین بار توسط مرورگر اینترنت اکسپلورر (Internet Explorer) معرفی شد، این تگ با هدف متحرک سازی متن، تصویر و... در صفحات HTML به صورت های مختلف، از جمله اسکرول در جهت عمودی، افقی، چپ و راست، با قابلیت تنظیم سرعت، رنگ و برخی ویژگی های دیگر ارائه گردید و در حال حاضر توسط اکثر مرورگرهای وب پشتیبانی می شود، برخی آن را با تگ مشابه blink مقایسه می کنند که البته marquee با blink تفاوت دارد، چرا که از تگ blink صرفا جهت ایجاد متون و لینک های چشمک زن استفاده می شود اما تگ marquee کاربرد متفاوت دارد و برای اسکرول متن یا تصویر با قابلیت های بیشتر به کار می رود، با وجود کاربردی بودن این تگ کنسرسیوم جهانی وب W3C به دلایلی توصیه می کند که از آن در کدنویسی و طراحی صفحات وب استفاده نشود که جای تامل دارد.
چرا نباید از تگ marquee استفاده کنیم؟
چند دلیل برای اینکه نباید از تگ marquee استفاده کنیم ارائه شده است، نخست اینکه متن های متحرک توجه انسان را به خود جلب می کنند و باعث می شوند که تمرکز کاربر از روی محتوای اصلی به موارد جانبی معطوف شود، از طرفی لینک هایی که به صورت متحرک در صفحه در حرکت هستند قدرت مانور کمتری در اختیار کاربران قرار می دهند، چرا که معمولا کاربر مدت زمان کمی فرصت دارد تا روی یک لینک مد نظر کلیک کند یا باید زمانی را در انتظار اسکرول مجدد آن صبر نماید، دلیل دیگر می تواند منسوخ شدن این تگ توسط کنسرسیوم جهانی وب یا W3C باشد که ممکن است در آینده باعث عدم پشتیبانی صحیح مرورگرها از این تگ شود، از طرفی اگر می خواهیم کدنویسی معتبر از نظر سرویس اعتبار سنجی validator.w3.org داشته باشیم نیز استفاده از این تگ توصیه نمی شود.
دلایل و ضرورت استفاده از تگ marquee
علی رغم مواردی که به عنوان معایب این تگ عنوان کردیم هنوز هم می توان marquee را ساده ترین روش برای ایجاد متن متحرک در وب لقب داد، از این گذشته گاهی مواقع به طور مثال در وبلاگ و سایت هایی که به تعداد زیادی لینک خروجی می دهند، استفاده از تگ marquee می تواند به اصطلاح به جمع و جور شدن کار تا حدود زیادی کمک کند، یا در مورد سایت ها و وبلاگ هایی که مسائل مربوط به سئو و بهینه سازی برایشان دارای اهمیت چندانی نیست (به طور مثال پایگاه های اداری، سازمانی، شخصی و...) استفاده از این تگ مشکل خاصی محسوب نمی شود، برخی نیز به جهت زیباتر شدن کار از marquee استفاده می کنند، در هر حال گاهی استفاده از متن متحرک به دلایل مختلف اجتناب ناپذیر است به همین دلیل در این آموزش سعی می کنیم علاوه بر تگ پیش فرض marquee سایر روش های جایگزین را نیز بررسی کنیم.
نحوه استفاده از تگ marquee
استفاده از این تگ بسیار آسان است، کافی است متن مورد نظر خود را به صورت زیر تنظیم کنیم:
<marquee>متن متحرک</marquee>
این تگ ویژگی هایی دارد که جهت اعمال تنظیمات دلخواه می توانیم از آنها استفاده کنیم.ویژگی behavior
مثال بالا تنها حالت پیش فرض متن متحرک را ایجاد می کند، اما اگر بخواهیم تنظیمات بیشتری بر روی نحوه حرکت، سرعت، رنگ پس زمینه و ... اعمال کنیم باید ویژگی های بیشتری را به کار ببریم، یکی از این خاصیت ها behavior است، این ویژگی در واقع نوع اسکرول را نشان می دهد و دارای سه مقدار است:
alternate: متن متحرک با برخورد به انتهای بلاک در جهت عکس و به صورت پینگ پنگی حرکت می کند.
scroll: متن از یک سمت وارد شده و از سمت دیگر بلاک خارج می شود.
slide: متن از یک سمت وارد شده و در سمت دیگر، در انتهای بلاک متوقف می شود.
مثال:
<marquee behavior="slide">متن متحرک</marquee>
با توجه به مقدار ویژگی behavior در این نمونه کد متن متحرک از یک سمت وارد شده و در انتهای بلاک متوقف می شود.ویژگی bgcolor
تگ marquee را می توان با ویژگی bgcolor به صورت سفارشی تنظیم کرد، همانطور که از نام این ویژگی مشخص است برای تعیین رنگ پس زمینه کاربرد دارد که مقادیر کدهای هگز را در خود جای می دهد.
<marquee behavior="slide" bgcolor="#CCCCCC">متن متحرک</marquee>
کدهای رنگی هگز را می توانیم از برنامه های گرافیکی نظیر فتوشاپ یا ابزارهایی که بدین منظور در وب وجود دارد دریافت کنیم، ابزار زیر در سایت بدین منظور در نظر گرفته شده است:https://webgoo.ir/tool/hex-rgb-color
ویژگی dir
اگر متن به زبان فارسی یا در کل به زبان هایی است که از راست به چپ نوشته می شوند بهتر است از ویژگی dir و مقادیر rtl استفاده کنیم تا جهت چینش متن به نحو صحیح نمایش داده شود، dir دو مقدار ltr (برای حروف انگلیسی و از چپ به راست) و rtl (برای حروف فارسی و از راست به چپ) دارد.
<marquee behavior="slide" bgcolor="#CCCCCC" dir="rtl">متن متحرک</marquee>
عبارت LTR مخفف Left To Right و عبارت RTL مخفف Right To Left است.ویژگی direction
از خاصیت direction برای تعیین جهت اسکرول استفاده می شود، چهار جهت اصلی یعنی بالا، پائین، چپ و راست را می توانیم به صورت مقادیر زیر در نظر بگیریم.
down: پائین
up: بالا
left: چپ
right: راست
به عنوان مثال:
<marquee behavior="slide" bgcolor="#CCCCCC" dir="rtl" direction="down">متن متحرک</marquee>
با توجه به مقادیر down برای خاصیت direction اسکرول از بالا به پائین صورت می گیرد.ویژگی height و width
برای تعیین ارتفاع و عرض بلاکی که متن متحرک را در خود نمایش می دهد از دو خاصیت height و width با مقادیر پیکسلی یا به صورت درصد استفاده می کنیم.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200">متن متحرک</marquee>
با توجه به این نمونه کد بلاکی که متن متحرک را در خود نمایش می دهد 200 پیکس عرض خواهد داشت.ویژگی loop
برخی مواقع ممکن است بخواهیم تعداد دفعات اسکرول ها را در چند دور محدود کنیم، بدین منظور از ویژگی loop و یک عدد به عنوان مقادیر استفاده می کنیم، مقادیر 1- در واقع همان حالت پیش فرض و دور تکرار بینهایت است.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1">متن متحرک</marquee>
ویژگی scrollamount
برای تعیین سرعت اسکرول (طی کردن تعداد پیکسل در هر فریم) از ویژگی scrollamount با یک عدد (معمولا بین 1 تا 10) به عنوان مقادیر استفاده می شود، هر چه عدد کوچکتر باشد سرعت اسکرول و تعداد پیکسل طی شده کم تر است و هرچه عدد بزرگتر باشد سرعت اسکرول و تعداد پیکسل در هر فریم بیشتر است.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="3">متن متحرک</marquee>
ویژگی scrolldelay
ویژگی scrolldelay در واقع تکمیل کننده scrollamount است، از scrolldelay برای تعیین وقفه ها (به میلی ثانیه) استفاده می شود، برای ایجاد بهینه ترین حالت اسکرول بهتر است برای هر دو خاصیت مقادیر 1 را در نظر بگیریم.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1">متن متحرک</marquee>
کنترل اسکرول متن با جاوا اسکریپت
علاوه بر ویژگی هایی که تا این لحظه در تگ marquee بررسی کردیم از دو خاصیت پرکاربرد مبتنی بر جاوا اسکریپت نیز می توانیم برای کنترل حرکت متن زمانی که نشانه گر ماوس را روی آن می بریم استفاده کنیم، بر این اساس با رویدادهای onmouseover و onmouseout می توانیم کنترل رفتار بلاک را در هنگامی که کاربر ماوس را جهت کلیک کردن بر روی باکس متحرک می برد در اختیار داشته باشیم، به این صورت که پس از بردن ماوس در محدوده بلاک متن متحرک متوقف شود و با خارج شدن ماوس از محدوده بلاک دوباره متن به حرکت اسکرولی خود ادامه دهد، بدین منظور باید مقادیر زیر را برای پارامتر onmouseover و onmouseout تنظیم کنیم:
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1" onmouseover="this.setAttribute('scrollAmount', 0, 0)" onmouseout="this.setAttribute('scrollAmount', 1, 0)">متن متحرک</marquee>
دقت کنیم مقادیر تعریف شده برای خاصیت های onmouseover و onmouseout به حروف بزرگ و کوچک حساس هستند.استفاده از CSS و JavaScript برای ایجاد متن متحرک
همان طور که گفتیم علی رغم ساده و سریع بودن استفاده از تگ marquee برای ایجاد متن متحرک در صفحات HTML، کمیسیون جهانی وب W3C به دلایلی استفاده از این تگ را بد و منسوخ شده عنوان کرده است (هرچند مرورگرها در حال حاضر از این تگ تا حدود زیادی پشتیبانی می کنند)، به همین دلیل و به عنوان روش جایگزین می توانیم از قابلیت های CSS و در صورت نیاز کدهای JavaScript برای ایجاد و کنترل متن متحرک استفاده کنیم، یکی از پرکاربردترین این قابلیت ها استفاده از animation و ایجاد فریم های کلیدی (keyframes یا گام های انیمیشن که فرم کار از نقطه ای به نقطه دیگر تغییر می کند) است، برای این منظور چند نمونه زیر بسته به هدف کاربرد دارند:
- کد CSS + HTML متن متحرک (Scrolling Text)، شروع خودکار، حرکت از راست به چپ (مناسب برای نمایش جملات فارسی):
<style>
#marquee-block {
width: 500px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
background: #ccc;
direction: rtl;
}
#marquee-text {
display: inline-block;
padding-right: 100%;
animation: marquee 12s linear infinite;
}
#marquee-text:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(100%, 0);
}
}
</style>
<div id="marquee-block">
<span id="marquee-text">اين متن متحرک فارسی جهت نمونه است ... برای بررسی امکان توقف انیمیشن ماوس را روی متن ببرید.</span>
</div>
با اعمال تغییرات در قسمت keyframes به صورت نمونه زیر می توانیم حالت انیمیشن را به صورت پینگ پنگی (Bouncing) تغییر دهیم:@keyframes marquee {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(100%, 0);
}
100% {
transform: translate(0, 0);
}
}
در واقع به جای دو نقطه کلیدی سه نقطه (0، 50، 100 درصد) در نظر گرفته ایم.- کد CSS + HTML متن متحرک (Scrolling Text)، شروع خودکار، حرکت از چپ به راست (مناسب برای نمایش جملات انگلیسی):
<style>
#marquee-block {
width: 500px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
background: #ccc;
direction: ltr;
}
#marquee-text {
display: inline-block;
padding-left: 100%;
animation: marquee 12s linear infinite;
}
#marquee-text:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
</style>
<div id="marquee-block">
<span id="marquee-text">this is an English animated text for example ... hover over the text to check the animation pause ability.</span>
</div>
- کد CSS + HTML متن متحرک (Scrolling Text)، شروع خودکار، حرکت از بالا به پائین:<style>
#marquee-block {
width: 300px;
height: 200px;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
background: #ccc;
direction: rtl;
}
#marquee-text {
display: inline-block;
padding-bottom: 100%;
animation: marquee 8s linear infinite;
}
#marquee-text:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
transform: translateY(-10%);
}
100% {
transform: translateY(60%);
}
}
</style>
<div id="marquee-block">
<span id="marquee-text">اين متن متحرک جهت نمونه است ... برای بررسی امکان توقف انیمیشن ماوس را روی متن ببرید.</span>
</div>
در این حالت برای پارامتر transform از مقدار translateY (حرکت در راستای محور Yها) استفاده کرده ایم.برای ایجاد حالت اسکرول از پائین به بالا کافی است قسمت keyframes را به صورت زیر تغییر دهیم:
@keyframes marquee {
0% {
transform: translateY(60%);
}
100% {
transform: translateY(-10%);
}
}
با کم و زیاد کردن مقادیر translateY در هر فریم کلیدی می توانیم اثر آن را روی نحوه اسکرول متن بررسی کنیم.- کد CSS + JavaScript + HTML متن متحرک (Slide-In Text)، شروع با کلیک، حرکت از چپ به راست (مناسب برای نمایش جملات فارسی):
<style>
#marquee-block {
position: relative;
width: 500px;
height: 50px;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
background: #ccc;
direction: rtl;
}
#marquee-text {
position: absolute;
width: 100%;
height: 100%;
animation: marquee 3s ease-out infinite;
animation-play-state: paused;
text-align: left;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(65%);
}
}
</style>
<script>
function toggleSlideText(id, type){
var elm = document.getElementById(id);
if(type == 'run'){
elm.style.animationPlayState = 'running';
} else if(type == 'pause'){
elm.style.animationPlayState = 'paused';
}
}
</script>
<div id="marquee-block">
<span id="marquee-text">اين متن متحرک فارسی جهت نمونه است.</span>
</div>
برای بررسی حالت اسلاید بر روی دکمه کلیک کنید:
<button onclick="toggleSlideText('marquee-text', 'run');">اسلاید</button>
<button onclick="toggleSlideText('marquee-text', 'pause');">توقف</button>
همان طور که مشخص است در این روش برای کنترل شروع و توقف حالت اسلاید انیمیشن از دکمه (button) و تابع جاوا اسکریپتی (toggleSlideText) استفاده کرده ایم.- کد CSS + JavaScript + HTML متن متحرک (Slide-In Text)، شروع با کلیک، حرکت از راست به چپ (مناسب برای نمایش جملات انگلیسی):
<style>
#marquee-block {
position: relative;
width: 500px;
height: 50px;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
background: #ccc;
direction: ltr;
}
#marquee-text {
position: absolute;
width: 100%;
height: 100%;
animation: marquee 3s ease-out infinite;
animation-play-state: paused;
text-align: left;
}
@keyframes marquee {
0% {
transform: translateX(50%);
}
100% {
transform: translateX(0);
}
}
</style>
<script>
function toggleSlideText(id, type){
var elm = document.getElementById(id);
if(type == 'run'){
elm.style.animationPlayState = 'running';
} else if(type == 'pause'){
elm.style.animationPlayState = 'paused';
}
}
</script>
<div id="marquee-block">
<span id="marquee-text">this is an English animated text for example.</span>
</div>
برای بررسی حالت اسلاید بر روی دکمه کلیک کنید:
<button onclick="toggleSlideText('marquee-text', 'run');">اسلاید</button>
<button onclick="toggleSlideText('marquee-text', 'pause');">توقف</button>
مثال و پیش نمایش آنلاین
جهت کمک به درک بهتر مبحث، نمونه کدهایی را که در این آموزش درج کردیم با مثال و پیش نمایش آنلاین بررسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ايجاد متن متحرک با تگ marquee، CSS و جاوا اسکريپت</title>
<!-- Webgoo.ir -->
<style>
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
direction: rtl;
line-height: 22px;
}
#marquee-block-1 {
width: 200px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
background: #ccc;
direction: rtl;
}
#marquee-block-2 {
width: 500px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
background: #ccc;
direction: rtl;
}
#marquee-text-2 {
display: inline-block;
padding-right: 100%;
animation: marquee-2 12s linear infinite;
}
#marquee-text-2:hover {
animation-play-state: paused;
}
@keyframes marquee-2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(100%, 0);
}
}
#marquee-block-3 {
position: relative;
width: 500px;
height: 50px;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
background: #ccc;
direction: ltr;
}
#marquee-text-3 {
position: absolute;
width: 100%;
height: 100%;
animation: marquee-3 3s ease-out infinite;
animation-play-state: paused;
text-align: left;
}
@keyframes marquee-3 {
0% {
transform: translateX(50%);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>
متن متحرک با تگ marquee:<br>
<div id="marquee-block-1">
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="right" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1" onmouseover="this.setAttribute('scrollAmount', 0, 0)" onmouseout="this.setAttribute('scrollAmount', 1, 0)">متن متحرک</marquee>
</div>
<hr>
متن متحرک به صورت اسکرول با CSS:<br>
<div id="marquee-block-2">
<span id="marquee-text-2">اين متن متحرک فارسی جهت نمونه است ... برای بررسی امکان توقف انیمیشن ماوس را روی متن ببرید.</span>
</div>
<hr>
متن متحرک به صورت اسلاید با CSS:<br>
<script>
function toggleSlideText(id, type){
var elm = document.getElementById(id);
if(type == 'run'){
elm.style.animationPlayState = 'running';
} else if(type == 'pause'){
elm.style.animationPlayState = 'paused';
}
}
</script>
<div id="marquee-block-3">
<span id="marquee-text-3">this is an English animated text for example.</span>
</div>
برای بررسی حالت اسلاید بر روی دکمه کلیک کنید:
<button onclick="toggleSlideText('marquee-text-3', 'run');">اسلاید</button>
<button onclick="toggleSlideText('marquee-text-3', 'pause');">توقف</button>
</body>
</html>
پیش نمایش آنلاین
» نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
» کاربرد متاتگ refresh در صفحات وب (HTML)
» نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
» نحوه درج علامت های خاص در HTML
» چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟


نویسنده: بهرام
۱۳:۲۰ ۱۳۹۶/۱۱/۰۹
با سلام خدمت شما عزیز
اینکه من از دستور marquee استفاده میکنم و کار میکنه ولی یه مشکل دارم اونم اینه هشت تا خبر با تصویر به صورت متحرک از پایین به بالا نوشتم ولی موقعی که کار میکنه چهارتا خبرو نشون میده از نصفه به بعد قطع میشه و از اول میاد چهار تا خبر بعدی نمیاد مشکل از چیه باید دستور jquery بنویسم چیکار کنم راهنمایی ام کنین ممنون میشم
اینکه من از دستور marquee استفاده میکنم و کار میکنه ولی یه مشکل دارم اونم اینه هشت تا خبر با تصویر به صورت متحرک از پایین به بالا نوشتم ولی موقعی که کار میکنه چهارتا خبرو نشون میده از نصفه به بعد قطع میشه و از اول میاد چهار تا خبر بعدی نمیاد مشکل از چیه باید دستور jquery بنویسم چیکار کنم راهنمایی ام کنین ممنون میشم
این آموزش قدیمی است و صرفا جهت اطلاع بیشتر از سایت حذف نشده، در مرورگرهای جدید تگ marquee بعضا با چنین مشکلاتی روبرو است، بهتر است از جی کئوری استفاده کنید.
نویسنده: امین
۱۵:۲۷ ۱۳۹۷/۰۲/۰۳
با سلام و تشکر فراوان خدمت شما
من از کدهای شما استفاده کردم فقط اگر محبت بفرمایید بنده رو راهنمایی کنید که چطور رنگ خوده متن رو تغییر بدم ممنون میشم
من از کدهای شما استفاده کردم فقط اگر محبت بفرمایید بنده رو راهنمایی کنید که چطور رنگ خوده متن رو تغییر بدم ممنون میشم
<style>
.my-marquee {
color:#FF0004;
}
</style>
<marquee class="my-marquee">متن متحرک</marquee>
نویسنده: omid
۱۹:۰۵ ۱۳۹۷/۰۲/۰۸
سلام
عالی بود
خداقوت
عالی بود
خداقوت
نویسنده: مجتبی
۱۴:۳۸ ۱۳۹۷/۰۵/۱۳
با سلام خدمت شما دوست عزیز من از کدهای onmouseover و onmouseout برای اینکه با حرکت ماوس تصویر متوقف نشه و ادامه پیدا کنه استفاده کردم ولی نمیدونم چرا این قضیه فقط تو مرورگر کروم جواب میده بقیه مرورگرها جواب نمیده لطفا راهنمایی بفرمایید
لطفا نمونه کدها را در سایتتان یا در یک صفحه تست آنلاین قرار داده و سپس اطلاع دهید تا بررسی گردد.
نویسنده: مهارت خوب زیستن
۰۸:۰۴ ۱۳۹۷/۰۷/۰۳
سلام خسته نباشید ممنون از مطلب عالیتون خیلی بدرد خورد
من یه سوال داشتم بی زحمت این وبلاگ رو نگاه کنید
من یه سوال داشتم بی زحمت این وبلاگ رو نگاه کنید
http://ekramehteram.mihanblog.com
از یه کدی استفاده کردن که هر چی میریم پایین مطالب و باکس ها میان یعنی اول نیستن و وقتی میریم پایین یکی یکی میان ایشون از چه کدی استفاده کردن میشه راهنمایی کنید ممنونhttps://codepen.io/chriscoyier/pen/DjmJe
https://css-tricks.com/aos-css-driven-scroll-animation-library
نویسنده: امیر
۱۶:۳۳ ۱۳۹۷/۰۸/۱۷
سلام ببخشید یه سوال...
من از html5 استفاده میکنم و میخوام یه اسکرول بار کوچولو وسط صفحه بزارم (مثل همینایی که شما بعضی وقتا کدایی که خیلی طولانین رو توشون میزارین و کدا اون تو اسکرول میشن) اما متاسفاه html5 از marquee ساپورت نمیکنه... میشه بگین باید چیکار کنم؟؟؟ خیلی واجبه
من از html5 استفاده میکنم و میخوام یه اسکرول بار کوچولو وسط صفحه بزارم (مثل همینایی که شما بعضی وقتا کدایی که خیلی طولانین رو توشون میزارین و کدا اون تو اسکرول میشن) اما متاسفاه html5 از marquee ساپورت نمیکنه... میشه بگین باید چیکار کنم؟؟؟ خیلی واجبه
<style>
.code{
display: block;
padding: 4px;
margin: 0px;
direction: ltr;
width: auto;
border: #69C 1px solid;
word-wrap: break-word;
white-space: pre-line;
max-height: 300px;
overflow-y: scroll;
overflow-x: hidden;
color: #333;
background-color: #FBFBFB;
text-align: left;
}
</style>
<div class="code"></div>
نویسنده: Moradyan
۱۶:۰۲ ۱۳۹۸/۰۹/۲۵
سلام خیلی ممنون بابت سایت خوبتون. چجوری وقتی یه اهنگ تو صفحه میزاریم کوچیک کنیم.
<audio controls="controls" height="50px" width="100px">
همچنین می توانیم با استفاده از CSS یک کلاس برای تگ audio در نظر بگیریم:<audio class="player">
نکته: مرورگرهای موبایل ممکن است از این قابلیت ها پیروی نکنند!نویسنده: saemrezaei
۱۳:۳۷ ۱۳۹۸/۱۱/۰۵
سلام واقعا عالییه خیلی استفاده کردم به وبلاگم سر بزن لطفا.
نویسنده: رضا
۱۱:۱۷ ۱۳۹۹/۰۱/۳۱
خیلی عالی بود ما در سایتمون از این کد استفاده کردیم.
نویسنده: ام
۰۱:۵۹ ۱۳۹۹/۰۳/۱۶
سلام و درود و خسته نباشید به این همت و اراده و کار خیری که میکنید من میخواستم در سایتم سه تا عکس با ارتفاع و عرض برابر بصورتی کاربر وارد اون بشه و تغییر کنه و متحرک باشه بزارم ولی هر کاری میکنم قبول نمیکنه میشه کمکم کنید
https://jsfiddle.net/dk6f3snf/6
نکته 1: برای استفاده از کتابخانه جی کئوری باید آن را در قسمت head صفحه وارد کرده باشید، مثال:<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
نکته 2: کدهای جاوا اسکریپت را بین تگ های script درج کنید، مثال:<script>
کدهای جاوا اسکریپت
</script>
نویسنده: سجاد
۱۳:۴۳ ۱۳۹۹/۰۴/۲۰
دمتون گرم. خیلی زحمت کشیدید
نویسنده: ا
۱۵:۳۲ ۱۳۹۹/۰۴/۲۳
ببخشید کدها رو کجا میزنیم؟
کدها در وبلاگ ها معمولا در بخش ویرایش قالب یا اسکریپت های اختصاصی کاربر قابل نوشتن است و در سایت ها باید قالب سایت ویرایش شود.
نویسنده: علی
۰۱:۵۱ ۱۳۹۹/۱۰/۱۸
سلام و ممنون بابت وبسایت عالیتون
داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد محو میشه و متن بعدی رو شروع می کنه به تایپ کردن. آیا همچین چیزی رو میشه با html درست کرد؟
یا مثلا افزونه ای در وردپرس هست که این کارو بکنه؟
داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد محو میشه و متن بعدی رو شروع می کنه به تایپ کردن. آیا همچین چیزی رو میشه با html درست کرد؟
یا مثلا افزونه ای در وردپرس هست که این کارو بکنه؟
https://www.jqueryscript.net/animation/aeo-typewriter.html

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


در:
سلام ا ز راهنماییتون ممنونم من تازه وبلاگم رو درست کردم ۱۲ سالمه هر کاری می کنم فیلم در اون قرار نمیگیره همش این خطا...۱۳۹۹/۱۰/۲۹

در:
سلام و خسته نباشید من بخوام داده ای که از قبل موجوده رو با متد پست به یک فایل ارسال کنم چجور میشه؟ یعنی...۱۳۹۹/۱۰/۲۷

در:
سلام ما یه وبلاگ گروهی داریم مختص املاک فایل های جدید و حتی قالب جدید اصلا اعمال نمیشه . حتی راهنمایی که کرده...۱۳۹۹/۱۰/۲۷

در:
من در یک سایت سازی سایت ساختم یه بخش داره به نام اسکریپت دلخواه می خوام یه اسکریپتی بذارم که مثلا یه موسیقی وقتی کاربر...۱۳۹۹/۱۰/۲۷

در:
بله استاد خیلی ممنون، نمیدونستم خودش Optimize رو انجام میده در کل من بعد از ایندکس گذاری ها همیشه سعی کردم جوری که با...۱۳۹۹/۱۰/۲۶

در:
ُسلام وقت بخیر این کووری هم چون اول قسمت WHERE انجام میشه بعد قسمت ON پس این کووری هم با حالت کووری قبلی برابره۱۳۹۹/۱۰/۲۶

در:
سلام استاد وقت بخیر ممنون از پاسخ گویی های قبلی یه سوال دیگه داشتم: این هم هیچ مشکلی نداره و کار میکنه، ایا...۱۳۹۹/۱۰/۲۵

در:
سلام خسته نباشید ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو...۱۳۹۹/۱۰/۲۵

در:
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه نه اینکه...۱۳۹۹/۱۰/۲۴

در:
سلام وبسایتم را نگاه کنید از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط...۱۳۹۹/۱۰/۲۴

در:
سلام. خسته نباشید. خیلی گشتم درباره یک خطا یا ایراد فنی که چند روز هست در سایت نوشته شده با پی اچ پی (اسکریپت اولوشن)...۱۳۹۹/۱۰/۲۴

در:
سلام. من هنوز نمیدونم تو تنظیمات باید کجا رو بگردم تا قالب وبلاگم رو با عکس مورد علاقه ام تغییر بدم. یا نمیتونم...۱۳۹۹/۱۰/۲۳

در:
این روش خیلی طولانیه در فروشگاه من یک برنامه گرفتم که یه عکس توش اپلود کن بهت یک لینک میده در ظرف چند ثانیه و...۱۳۹۹/۱۰/۲۱

در:
باسلام خدمت شما عزیز زحمت کش، من مطلب را تا آخر مطالعه کردم. من وبلاگم بازدیدای زیادی داره چون تمام مطالبش رو خودم مینویسم و...۱۳۹۹/۱۰/۲۱

در:
سلام و عرض ادب من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند....۱۳۹۹/۱۰/۲۱

در:
سلام خسته نباشید ببخشید من می خواستم کد جدید در وبلاگم بزارم بعد اشتباهی رفتم در قسمت ویرایش کدها و بعد بیشتر کدها را پاک...۱۳۹۹/۱۰/۲۰

در:
سلام. من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ای کلیک کرد، یک کد تصادفی برای شمارش ارسال...۱۳۹۹/۱۰/۲۰

در:
سلام خسته نباشید، ممنونم بابت توضیحات خوبتون، یه مشکلی داشتم میخواستم ببینم امکانش هست راهنمایی کنید؟ فرض کنید یه اینطور متنی داریم: ...۱۳۹۹/۱۰/۱۹

در:
سلام خسته نباشید من سایتمو طراحی کردم اما به این مشکلات بر میخورم اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد...۱۳۹۹/۱۰/۱۹

در:
سلام. ممنون بابت مطالب مفیدتون. این نوع جستجو به سئو سایت لطمه نمیزنه؟؟؟ چون در این مدل جستجو، مقدار impression میره بالا ولی...۱۳۹۹/۱۰/۱۹

در:
سلام استاد عزیز ، پس بنظرتون بجای وقت گذاشتن برای یادگیری لاراول و وردپرس ، وقت بزارم که عمیق تر php و ساختار mvc...۱۳۹۹/۱۰/۱۹

در:
سلام و ممنون بابت وبسایت عالیتون داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد...۱۳۹۹/۱۰/۱۸

در:
سلام خدمت شما دوست عزیز سوالم این بود میخاستم چندتا مثال از این تابع و چند تابع دیگه از خودتون رو برام مثال بزنید...۱۳۹۹/۱۰/۱۸

در:
سلام برادر مشکل من تو همین سایتی هست که فرستادم وقتی گزینه خانه رو کلیک میکنم و بعد دکمه بک گوشی رو میزنم بالای صفحه...۱۳۹۹/۱۰/۱۷

در:
سلام استاد عزیز ، بعد از آموزس php با لاراول کار کنیم بهتره ؟۱۳۹۹/۱۰/۱۶

در:
آدرس رو براتون گذاشتم دامنه قبلا روی یه وبلاگ میهن بلاگ بود چند ماه میشه که از میهن بلاگ خداحافظی کردم ولی هنوز که هنوزه...۱۳۹۹/۱۰/۱۴

در:
سلام... ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟۱۳۹۹/۱۰/۱۳

در:
سلام من یه فرمی طراحی کردم که توش قراره تعداد زیاد (حدود 10 الی 50) فیلد رو تو دیتابیس اینسرت کنم. آیا باید...۱۳۹۹/۱۰/۰۸

در:
سلام لطفا راهنمایی بفرمایید که چه زمانی قبل از متغیر @ استفاده می شه و کاربردش چیه؟ با تشکر۱۳۹۹/۱۰/۰۶

در:
سلام ممنون از سایت خوبتون ایکون سایتم رو توی دسکتاپ درست نشون میده ولی تو گوشی مشکل داره طبق اموزش شما هم انجام دادم...۱۳۹۹/۱۰/۰۶

در:
سلام من خیلی دوست دارم روی وبلاگم کد اهنگ بزارم ولی هیچ کدوم نمی یاد بهم گفتن از این کدها دیگه پشتیبانی نمی شه شما...۱۳۹۹/۱۰/۰۵

در:
سلام من وقتی میزنم روی مشاهده وبلاگ صفحه فیلتر برام میاد و نمیتونم وبلاگمو ببینم۱۳۹۹/۱۰/۰۵

در:
سلام من وبلاگ بلاگفا دارم کدها و جاوا استیکرها رو میزارم تو قسمتشون ولی همه ی کدها رو یکطرف وبلاگ نشون میده چطوری سمت...۱۳۹۹/۱۰/۰۵

در:
سلام ممنون بابت سایت خوبتو من یه مشکلی دارم می خواستم کدی برای این مثال زیر بنویسم ولی بلد نیستم ممنون میشم کمک کنید. ...۱۳۹۹/۱۰/۰۲

در:
سلام وقت بخیر چطور میتونم در برنامه نویسی سی شارپ هنگام ایجاد پایگاه داده ی MySql نام پایگاه داده رو از txetbox دریافت کنم؟۱۳۹۹/۱۰/۰۱
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.