كيف أعمل تصغير وتكبير لمحتوى بالجافا سكربت

الأخ / حسام المقحم

السلام عليكم ورحمة الله وبركاته

حتى تتوصل لي مبتغاك، يمكنك إستخدام CSS مع javascript. كل ما عليك فعله هو فقط معرفة الخاصية التي تعطيك التأثير المطلوب، بالنسبة للتصغير والتكبير يمكنك التلاعب بكل من الـ width والـ height أما إذا أردت المحتوى أن يظهر ويختفي (Expand/Collapse) فيمكنك إستخدام الخاصية display حيث أنها لو كانت none هذا سيخفي المحتوى أما لو كانت block هذا سيجعلها تظهر على السطر كاملا (أو على حسب عرض العنصر الأب)، هذا بالنسبة للجانب المتعلق بالـ CSS. أما جانب الـ javascript فلدي خمسة كلمات لك: document.getElementById. حتى تتضح الصورة لك، لقد أعددت شرحا عمليا يبين لك الفكرة بداية بإستخدام الـ CSS ونهاية بإستخدام javascript وتفاعلها مع الـ CSS، إليك الكود التالي (لا تقرأه في البداية، قم بنسخه، ثم أحفظه في ملف بإمتداد html أو htm ثم جربه وفي الاخير أقراء الكود لكل حالة) :

<html>
<head>
	<title>Expandable Contents</title>
	<style>
		* { font-family: Tahoma; }
		div { padding: 5px; }

		.greenBackground { background: #0f0; }
	</style>

	<script type="text/javascript">
		function changeDiv1Class() {
			var d = document.getElementById("div1");
			if(d.className == "")
				d.className = "greenBackground";
			else d.className = "";
		}

		function changeBackground(element) {
			if(element.className == "")
				element.className = "greenBackground";
			else element.className = "";
		}

		function toggleExpand(button) {
			var panel = document.getElementById("mypanel");
			if(panel.style.display == "none") {				
				panel.style.display = "block";
				button.innerHTML = "Click to collapse /\\";
			}

			else {
				panel.style.display = "none";
				button.innerHTML = "Click to expand \\/";
			}
		}
	</script>

</head>
<body>
	<h3>Just a simple div tag</h3>
	<div style="border: 1px dashed #fc0;">This is a div tag, you can use it to display or contain contents</div>

	<h3>Here is a div but we want to change the cursor into pointer so it will give us the feeling that it is clickable. Try to rool over it</h3>
	<div style="border: 1px dashed #00f; cursor: pointer">In this div we set the property "cursor" in the style attribute to "pointer" to get the hand pointer whenever the mouse rollover (No javascript, only magic, oops I mean CSS)</div>

	<h3>Here is a button and a div, we want to change the "style" or "class" of the div only if a user clicks on the button</h3>
	<div id="div1" class="">This is a div with id "div1", initially the class is set to nothing but when you click on the below button you will set give it a class with green background, click on it again you will toggle it back</div>
<input type="button" value="toogle div1 background on/off (using javascript)" onclick="changeDiv1Class();" />

<h3>Now we will do the same as the above but instead of clicking on a button we will click on the div it self</h3>
<div class="" style="cursor: pointer;" onclick="changeBackground(this);">Click me so I can toggle my background green/white !</div>

<h3>Note:</h3>
<p style="text-align: justify;">Now that you've seen how to deal with divs, and how you can give it a style or hooking it with CSS, and how can you it make interact with javascript. It is a good idea to point out that the secret is in <b><i>"document.getElementById"</i></b>. Through it you can manupolate an element any way you like. you can change it's style, class, width, height, position, display mode ... etc. Now we will do what you have asked. We will create two divs, one is clickable which will serve as a button or something, the other will serve as panel which will contain some contents and will be displayed or not using it's <b><i>"display style property"</i></b> depending on the clickable one. </p>

<h3>Expanding/Collasping a panel (Though it is a div)</h3>

<div style="border: 1px dashed #68c; color: #68c; cursor: pointer; font-weight: bold;" onclick="toggleExpand(this);">Click to expand \/</div>

<div id="mypanel" style="text-align: justify; background: #68c; color: #fff; display: none;">
Back in 2001 I started work on an ASP.NET online messageboard application called WebForums.NET. The idea was to create an ASP.NET-based messageboard system that could easily be plugged into an existing website. One particular challenge building such an end-to-end application was providing a means for customers to be able to integrate it within their system. For example, clearly an online forum needs some sort of data store to store user information, forums, posts, and so on, but what's important is not to lock the customer into a particular data store. That is, you shouldn't say, "I'm going to have my application use Microsoft SQL Server 2000," because at that point, how are customers who use Oracle or Access going to be able to use your software? 
</div>
</body>
</html>

أتمنى لك التوفيق

الله ينفع بعلمك ويبارك فيك

شكرا ما قصرت