مخفی کردن جعبه ای از Css با کمک Js. زمانی که رزولیشن تغییر میکند.

echessdesign · Apr 11, 2007

درود بر شما
چند روز پیش که در حال وبگردی بودم و نگاهی خریدارانه به وب سایت ها می نداختم سپس سایت هایی به ظاهر از نظر طراحی جالب رو زخیره می کردم. پس از آن نگاهی به کد ها می نداختم، متوجه شدم که یکی از این وب سایت ها ،زمانی که رزولیشن صفحه من 800 *600 هست در اندازه 780px ظاهر میشه. اما زمانی که رزولیشن صفحه به 1024*768 تغییر میکنه، اندازه صفحه به 980px تغییر میکنه!!!!!!!!!
و در این زمانی قسمتی از صفحه ظاهر میشه که در رزولشن کوچکتر مخفی بوده!!!!
با بررسی کد ها متوجه شدم که طراح با استفاده از جاوا اسکریپت دست به کنترل اندازه صفحه زده و با قراردادن Div مشخصی در داخل توابع جاوا اسکریپت، آن را در رزولیشن های مختلف، مخفی یا نمایان میکنه!!!
برای من آماتور این تلفیق Css و Js بسیار جذاب بود.
استادان طراح وبی هستند که به این شیوه اشنا بوده و آن را در طراحی وب سایتی به کار برده باشند؟ لطفا زحمت آموزش رو بکشید. سپاسسگزارم

mohseni12345 · Apr 12, 2007

کد:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Page 3</title>
<script language="JavaScript1.2">
<!--
function setstyle(){
if (screen.width==800||screen.height==600) //if 800x600
document.getElementById('m').className='m800';
else if (screen.width==1024||screen.height==768) //if 640x480
document.getElementById('m').className='m1024';
else if (screen.width==1600||screen.height==1200) //if 1024x768
document.getElementById('m').className='m1600';
else
document.getElementById('m').className='m';
}
//-->
</script>
<style>
.m1600{
width:600;
border:1px solid red;
}
.m800{
width:200;
border:1px solid red;
}
.m1024{
width:300;
border:1px solid red;
}
.m{
width:500;
border:1px solid red;
}
</style>
</head>

<body onclick="setstyle()">
<div class="m" id="m">m</div>
</body>

</html>

niyaz be tozih hast?

echessdesign · Apr 12, 2007

محسن جان
متشکرم از زحمتی که کشیدی
اما منظور بنده این هم بود که در رزولیشن 800*600 یکی از DIV های صفحه محو بشه display:none
و اینکه من وقتی ساختار صفحه رو داخل m1600 قرار میدهم، با تغییر رزولیشن ، یک div با نام دیگری فراخوانی میشه!!!! پس تغییری در سایت من اصلا دیده نمیشه!!
همچنین تصور کنم خصیصه onclick در اینجا نا مناسب بوده و باید خصیصه onload به کار بره.
متشکرم

mohseni12345 · Apr 12, 2007

ببخشید عجله داشتم به خاطر همین کد رو کامل نکردم
الان کاملش می کنم و میزارم

mohseni12345 · Apr 12, 2007

محسن جان

مرتضی محسنی

و اینکه من وقتی ساختار صفحه رو داخل m1600 قرار میدهم، با تغییر رزولیشن ، یک div با نام دیگری فراخوانی میشه!!!! پس تغییری در سایت من اصلا دیده نمیشه!!

منظورتو متوجه نمی شم

همچنین تصور کنم خصیصه onclick در اینجا نا مناسب بوده و باید خصیصه onload به کار بره.
متشکرم

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

به هر حال من یه خورده تغییرش دادم اگه با اینم مشکل داشتی بگو تا خط به خط توضیح بدم

در ضمن اگه سورس اون صفحه ای رو که میگی بزاری بهت می تونم کمکت کنم

HTML:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mnmnmnmnmm</title>
<script language="JavaScript1.2">
<!--
function setstyle(){

if (screen.width==800||screen.height==600){ //if 800x600
document.getElementById('hiddenbox').className='hiddenbox800';
document.getElementById('main').className='main800';
}else{  //if 1024x768 & other
document.getElementById('hiddenbox').className='hidddenbox1024';
document.getElementById('main').className='main1024';
}

}
//-->
</script>
<style>
.main800{
width:780px;
border:1px solid red;
}
.main1024{
width:980px;
border:1px solid red;
}
.hiddenbox800{
display:none;
}
.hidddenbox1024{
display:inline ;
border:1px dashed red;
width: 82px;
 height: 56px
}
</style>
</head>

<body onload="setstyle()"  >
	<div id="main" >
		mnmnmnmnmm
		<div  id="hiddenbox" >
			m
		</div>
	</div>
</body>

</html>

VFV · Apr 12, 2007

جناب مرتضی محسنی اسکریپ رو برای زمانی که صفحه لود می شود و به عباتی اجرا برای یک بار نوشتند
اما اگه از Event تغییر سایز صفحه استفاده کنیم و البته سایز داخلی بروز رو بگیریم درست تر و حرفه ای تر ه

PHP:

	function resizeOther()
	{
		
		if (parseInt(navigator.appVersion)>3) {
	 		if (navigator.appName=="Netscape") {
 	 			__w = window.innerWidth ;
	 		
			}
	 		if (navigator.appName.indexOf("Microsoft")!=-1) {
 				__w = document.body.offsetWidth ;

 			}
		}
	
	if (__w was...)//Your Condition
		document.getElementById("thistext").style.display ="block"
	else if (__w was...)//Your Other Condition
    	document.getElementById("thistext").style.display ="none"

	}

	window.onresize = resizeOther;

امیدوارم کمکی کرده باشم دوست من جناب echess البته onresize برای IE فورا و البته بعضی وقتها چندبار پشت سر هم که بهتر هم
است :wink:

اجرا میشه اما در Firefox متاسفانه کمی تاخیر داره و خوب یکمی مشکل افرین است
در هر صورت با کمی کار کردن رو event هم می توانید این مشکل رو حل کنید

اگه مسئله دیگری بود در خدمتم .

echessdesign · Apr 13, 2007

مرتضی جان متشکرم
منظور بنده این است که من تمام محتویات صفحه را داخل یک div به نام main800 هست. و دیگر هیچ div دیگری ندارم. پس با تغییر رزولیشن، این طول div هست که باید تغییر کند و نه div دیگری فراخوانی شود.
همچنین در صورت تغییر رزولیشن یک div به نام mainX می خواهم مخفی بشه.
همچنان در انتظار راهنمایی شما هستم.

echessdesign · Apr 13, 2007

Vfv جان، متشکرم
سوال اینجاست که این اسکریپت شما چه کاری انجام میده؟

mohseni12345 · Apr 15, 2007

منظور بنده این است که من تمام محتویات صفحه را داخل یک div به نام main800 هست. و دیگر هیچ div دیگری ندارم. پس با تغییر رزولیشن، این طول div هست که باید تغییر کند و نه div دیگری فراخوانی شود.

اینو که درستش کردم بازم مشکلی هست؟