PDA

View Full Version : مخفی کردن یک div


pedram_ns
چهارشنبه 29 دی 1389, 15:46 عصر
با سلام
با کدهای زیر با کلیک روی یک دیو به عنوان لینک، دیو دیگری رو مخفی می کنم در همه مرورگرها کار می کنه ولی برای firefox و netscape جواب نمی ده مشکل چیه و چطور رفع می شه؟


function tabjob() {

job.style.display = "none";


}

<div onclick="tabjob()">job</div>

<div style="display: inline;" id="job">Job list</div> با سپاس
hossin.esm
چهارشنبه 29 دی 1389, 15:57 عصر
function tabjob() {

document.getElementById('job').style.display = "none";

}
pedram_ns
چهارشنبه 29 دی 1389, 16:23 عصر
ممنون.
من در واقع یک دیو رو مخفی و یکی دیگه رو جای اون نمایش می دم که الان به درستی کار می کنه.حالا اگر بخوام اون دیوی که نمایش داده می شه از سمت راست به چب حرکت کنه و جای دیو قبلی رو بگیره چه کدی رو باید بنویسم؟
hossin.esm
چهارشنبه 29 دی 1389, 16:43 عصر
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function tabjob() {

document.getElementById('job').style.display = "none";
document.getElementById('job2').style.display = "inline";
movejob2();
}
var p=0;
function movejob2() {
p+=10;

if(p!=document.body.offsetWidth)
{
document.getElementById('job2').style.right=p+'px' ;
setTimeout(" movejob2()",10);
}


}
</script>
</head>
<body>
<div onclick="tabjob()">job</div>
<div style="display: inline;position:absolute;" id="job">Job 1</div>
<div style="display:none;position:absolute;right:0px;" id="job2">Job 2</div>
</body>
</html>
pedram_ns
چهارشنبه 29 دی 1389, 21:27 عصر
باز هم ممنون.
نمی شه کاریش کرد که بعد از حرکت کردن در جایی که باید ثابت بشه. این کد شما به حرکت ادامه می ده از صفحه خارج می شه و دیگه کار نمی کنه.
در واقع من دو تا دیو دارم با اطلاعات درون اون می خوام وقتی روی لینک اول کلیک می شه اطلاعات دیو اول حرکت کنه و در جای خودش قرار بگیره و با کلیک لینک دوم این اتفاق برای دیو دوم بیافته و همیشه این دو لینک این کار رو انجام بده.
مثل این لینک که با moo tools انجام شده البته این صفحه بطور خودکار هم تب ها رو عوض می کنه ولی من فقط می خوام با کلیک هر لینک عوض بشه.

http://nayaab.github.com/MooTabs/

کتاب اول هم همینطوره(قسمت دایرکتوری ها)

http://ketabeavval.ir/
hossin.esm
پنج شنبه 30 دی 1389, 01:32 صبح
باز هم ممنون.
نمی شه کاریش کرد که بعد از حرکت کردن در جایی که باید ثابت بشه. این کد شما به حرکت ادامه می ده از صفحه خارج می شه و دیگه کار نمی کنه.

"] ("http://ketabeavval.ir/[/URL)
این قسمت را اصلاح کن

if(p<=document.body.offsetWidth)
pedram_ns
پنج شنبه 30 دی 1389, 09:39 صبح
ممنون.
این لینک ها فقط یکبار کار می کنه.چطور می شه همیشه کار کنن یعنی وقتی روی job1 می زنی دیو مربوطه با حرکت ظاهر بشه و وقتی روی job2 بزنی دیو اون حرکت کنه؟
hossin.esm
پنج شنبه 30 دی 1389, 13:49 عصر
شاید کامل نباشه


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#warper{position:relative;overflow:hidden; height:100px; width:200px;}
ul{position:absolute;list-style:none;margin:0px;padding:0px;width:400px;left :0px;}
li{width:198px;float:left; border:#F00 thin solid;margin:0px;padding:0px;}
</style>
<script type="text/javascript">

function movejob(m)
{

var j=document.getElementById('job');
var pl=j.parentNode.offsetLeft;
p=-1*m*200;
move(p);
}
function move(p)
{
var j=document.getElementById('job');
var l=getStyle(j,'left').replace('px','');
if(p>l)
{
l=Number(l)+10;
}
else if(p<l)
{
l=Number(l)-10;
}
else
{
return (false);

}

document.getElementById('job').style.left=l+'px';
setTimeout(" move("+p+")",0.1);
}
function getStyle(el,styleProp)
{
if (el.currentStyle)
var y = el.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(el,null).get PropertyValue(styleProp);
return y;
}
</script>
</head>
<body>
<a href="#" onclick="movejob(0)">div1</a>
<a href="#" onclick="movejob(1)">div2</a>
<div id="warper">
<ul id="job">
<li >job1</li>
<li >job2</li>
</ul>

</div>
</body>
</html>
pedram_ns
پنج شنبه 30 دی 1389, 21:02 عصر
واقعا زحمت کشیدید. دم شما گرم ممنون.