زيزوار ..... تفضل معي لهنا جلسة نقاش على قهوة الجافا سكريبت .

[المبرمجون العرب]

جافا سكربت - صناعة النوافذ العائمة بكل سهولة


تتحرك في كل مكان


يمكن اخفاءها


هنا

http://www.swalif.net/softs/showthread.php?t=99520









-

[beshoo]

ower:

مبروك عودة سوالف .......زز ظننتها تبخرت ونطالب بمعرفة ما حدث....

زيزوا شو نمت ؟؟؟ :con2:

[مدمن أنترنت]

نعم نطالب بفتح تحقيق في الموضوع لمعرفة كافة ملابسات اختفاء سوالف
تحياتي

[مدمن أنترنت]

أين اختفيت أخي إبراهيم ؟

[Zizwar]

مبروك عودة سوالف :nice: و مبروك عودتي
بيشو نمت لكن أحلم به دائما
المبرمجون العرب شكرا أخي على الكود و قد رأيت موضوعك المنفرد بخصوصه سأرد عليك هناك و لدي لك بعد الإقتراحات
مدمن أنترنيت و أين تريدني أن أختفي في هذا البرد ، بطبيعة الحال في أحسن غطاء ساخن
آسف إخوان على التأخر و شاكر للإدارة على بقاء الثتبيت
الله يعيني على الشرح لكن قبلا أقترح عليكم لعبة برمجتها بنفس الكود السالف وضعه في هذا الموضوع
http://www.winoscript.com/js/dragdiv/SwalifGame.html

أنتظر رأيكم فيها

سأدرج الكود كاملا لأرى كيف ستظهر مع هذه النسخة الجديدة

<style>
body{background-color:#CCCCFF;}
.Place{position:relative;cursor:hand}
</style>

<script language="JavaScript">
var numDiv = 9;
var wino=0,X,Y,T,L,x,y,i,g,t,m,actif,time=0,tagDiv,S=1,oldTop,OldLeft,forDiv,divId='1div',per=false;wink=0;

function Places(){
if (event.srcElement.className=="Place"){

    wino = 1;
    ///
    Img=event.srcElement;
    ///
    tagDiv = document.getElementById(parseInt(Img.id)+'div');
    oldTop = tagDiv.style.top;
    oldLeft = tagDiv.style.left;
    ///
    tagDiv.style.zIndex = S;
    S++;
    ///
    Img.style.filter = 'alpha(opacity=77)';
        ///

    L=tagDiv.style.pixelLeft;
    T=tagDiv.style.pixelTop;
    x=event.clientX;
    y=event.clientY;

    document.onmousemove = function(){
        if(!wino)return
        if(event.button==1){
            X=event.clientX;
            Y=event.clientY;
            var tagDivS = tagDiv.style;
            tagDivS.pixelLeft = L+X-x
            tagDivS.pixelTop = T+Y-y;
            var Ttop = tagDivS.pixelTop;
            var Tleft = tagDivS.pixelLeft;
            ///
            

            for(i=1;i<numDiv+1;i++){
                forDiv = document.getElementById(i+'div');
                var forDivS = forDiv.style;
                ///////////////
                forDivS.filter = '';
                var Ftop = forDivS.pixelTop;
                var Fleft = forDivS.pixelLeft;
                ///////
                var ImgW = Img.width;
                var ImgH = Img.height;
            
                if(Ttop>Ftop && Ttop<Ftop+ImgH && Tleft>Fleft && Tleft<Fleft+ImgW){
                    //////////////
                    forDivS.filter = 'Xray';
                    divId = forDiv.id;
                    per = false
                    }else{per = true}
                }
            return false
            }
        }
    }
}
window.onunload = function(){
var msg = "\
************************** \n\
Dev: Ibrahim Bidi \n\
Url: www.WinoScript.com \n\
Email: Zizwar@hotmail.com \n\
Username: Zizwar` \n\
************************** \
";
alert(msg)
}
document.onmousedown = Places
document.onmouseup = function(){FuncWino();wino = 0}
FuncWino = function(){
m = numDiv;
if(wino){

    /////////////////////
    Img.style.filter = 'alpha(opacity=100)';
    /*forDivS.filter*/ 
    tagDiv.style.top = oldTop;
    tagDiv.style.left = oldLeft;
        ///
    if(per){
        var DivIds = document.getElementById(divId);
        var oldHtml = tagDiv.innerHTML;
        var oldId = tagDiv.id
        ////
        tagDiv.innerHTML = DivIds.innerHTML;
        DivIds.innerHTML = oldHtml;
        tagDiv.id = DivIds.id;
        DivIds.id = oldId;
        DivIds.style.filter = ''
        per = true
        ////////
        
        }
    ///
        for(t=1;t<numDiv+1;t++){
        var forDivT = document.getElementById(t+'div');
        var forImgT = document.getElementById(t+'img');

        if(forDivT.wino != forImgT.wino){m--};
        }
    var total = (m * 100/numDiv);
        //alert(total)
        var pseint = parseInt(total)
        document.getElementById('pino').innerHTML = pseint+'%';
        if(pseint == 100){
            window.clearInterval(actif);
            alert('You Win :)')
            }
        }
    }
var ImgRandom = new Array(0,3,9,5,4,1,8,6,2,7,7);
window.onload = function(){
for(g=1;g<numDiv+1;g++){
    var forImg = document.getElementById(g+'img');
    var forDivN = document.getElementById(g+'div');
    forImg.wino = ImgRandom[g]
    forDivN.wino = g
    forDivN.name = ImgRandom[g]+"div";
    forImg.src = "images/"+ImgRandom[g]+".gif"
    forImg.className = "Place";
    }
    actif = window.setInterval("starTime()",300);

}
starTime = function(){
document.getElementById('tdino').style.width = time;
time++;
if(time>250){
    window.clearInterval(actif);
    alert('Game Over :(')
    }
}

</script>


                <!-- ///////////////HTML//////////////// -->




<div wino="1" id="1div" name="1div" style="position:absolute; left:100px; top:23px">
<img id="1img">

</div>
<!-- /////////// -->

<div  wino="2" id="2div" name="2div" style="position:absolute; left:200px; top:23px">
<img id="2img">
</div>
<!-- /////////// -->

<div  wino="3" id="3div" name="3div" style="position:absolute; left:300px; top:23px">
<img id="3img">
</div>
<!-- \\\\\\\\\//////\\\\\\\//////// -->
<div  wino="4" id="4div" name="4div" style="position:absolute; left:100px; top:123px">
<img id="4img">

</div>
<!-- /////////// -->

<div  wino="5" id="5div" name="5div" style="position:absolute; left:200px; top:123px">
<img id="5img">
</div>
<!-- /////////// -->

<div  wino="6" id="6div" name="6div" style="position:absolute; left:300px; top:123px">
<img id="6img">
</div>
<!-- \\\\\\\\\//////\\\\\\\//////// -->
<div  wino="7" id="7div" name="7div" style="position:absolute; left:100px; top:223px">
<img src="images/7.gif" id="7img">

</div>
<!-- /////////// -->

<div wino="8" id="8div" name="8div" style="position:absolute; left:200px; top:223px">
<img id="8img">
</div>
<!-- /////////// -->

<div wino="9" id="9div" name="9div" style="position:absolute; left:300px; top:223px">
<img id="9img">
</div>
<TABLE style='position:absolute; left:100px; top:330px' border="1" bordercolor="#336699" id="tablino">
<TR><TD><CENTER><a style="color:#336699" id="pino">0%</a>
</TR><TD><div id="tdino" style="position:relative;width:1%;background-color:#336699"></div></TD>
</TR></TABLE>
<!-- \\\\\\\\\//////\\\\\\\//////// --> 

http://www.winoscript.com/js/dragdiv/SwalifGame.html

[beshoo]

رائع بكل المقايسس

ولالان بقي ان نتعلم كيف نخدمها ضمن مواقعنا

بالمناسبة الافضل ان تصنع موضوع النقل تماما ك MSN كان يظهر خط بين الخلية والاخرى يخبر بمكان النقل بدلا من ان تغير لون الخلية .

[مدمن أنترنت]

ممتاز أخي

لعبة شيقة

[beshoo]

طيب زيزوا ما في نوم

وين ما شفنا موقع متل MSN

[Zizwar]

بيشو أنا لحد هذه الساعة ماشفت قهوة و لا بن :anger1:
خلاص سأقلبها شاي سكريبت

شوف معي هذي الوصلة

http://www.winoscript.com/js/dragdiv/DragMove99.html

أكملو الباقي من عندكم



هل أبدأ بالشرح أم أكمل اللمسات :con2:

[beshoo]

اللمسات يا زيزو ومن ثم الشرح .

لحد الان لم اتجرء لعرض الكود المصدري

[مدمن أنترنت]

للأن لم أفهم الكود


فقط استمتعت باللعبة قبل الأخيرة

[مدمن أنترنت]

كالعادة حماس ثم نوم عيق من طرف الأعضاء
ما أحلى المواضيع في سوالف

[Zizwar]

آسف شباب على الغياب طول :shy:
لقد غيرت في الكود و اخرجت بعض المتغيرات الازمة حتى يسهل التعديل والتحكم في التصميم من خلال css

<style>
.normalDiv{
filter:alpha(opacity=100);
}
.clickDiv{
filter:alpha(opacity=77);
}

.eventDiv{
border:thin #000000 solid; 
}
</style> 

-normalDiv نضع هنا التصميم لل div أو لنقل الصندوق في الحالة العادية
-clickDiv تصميم للصندوق عند الضغط عليه و مثالنا هنا انه يكون شفافا

filter:alpha(opacity=77);

-eventDiv تصميم للصندوق في عند ملامسته بالعنصر المتحرك و مثالنا عنا أنه يصبح له اطار بلون أسود

border:thin #000000 solid;

هذا في ما يخص التغيرات اللازمة في ال Style
نأتي الى الكود هناك ثبلث متغيرات فقط هما الذان يستوجبان التغيير

border:thin #000000 solid;

var numDiv = 4; 
var cursorEvent = "all-scroll"; 
var cursorClick = "move"; 

numDiv هنا تضع عدد ألصناديق او العناصر التي تود تحريكها و مثالنا هنا أربعة عناصر فوضعنا رقم 4
cursorEvent هنا شكل مؤشر الفأرة عند ملامسة العنصر
cursorClick هنا شكل مؤشر الفأرة عند الضغط العنصر
و هذه الصفحة بها لائحة أشكال متغيرات المؤشر وأيضا بعض ستيل تأثيرات فلترات css
http://www.ksurf.net/~bermania/web/c...ro_divers.html

أي عنصر أو وسم div أو span نريد تحريكه و تحريك العناصر التي يحتويها علينا أن نعطي لل id الخاص بها 1div و نعطي لل style الخاص به position:absolute و يجب و بالضرورة أن نحدد مستواها من خلا top و left و هذا مثال

<div id="1div" style="position:absolute; left:41px; top:17px">

وداخل هذا الصندوق نعطي لأي عنصر أردناه ان يحركه id=1img بغض النظر عن كونه صورة أو div أو كتابة . و فقط
وهذا مثال عن صندوق بمحركه

<div id="1div" style="position:absolute; left:41px; top:17px">
<image src="img/w.JPG" id="1img">
<BR>Salam All
</div> 

و اذا أردنا فتح أكثر من صندوق ما علينا الا تتبع ما ذكرت أعلاه مع مراعات تسلسل ال id ك 1div 2div 3div ... 1img 2img 3img
و أيضا تحديد المستوى و اعطاء البوزيشن absolute
تبقى في الأخير مشكلة كيف سيتذكر المتصفح وضعية العناصر عند تغيرهما في حالة اذا استدعينا الصفحة من جديد ..
هناك حلان اما عن طريق الكوكيز بجافاسكريبت او عن طريق php و هي المفضلة كون الكوكي سيقتصر على التغيرات في الجهاز اما بالأخيرة فأفضل .. و أنت لها يا بشار

أعتقد أن الموضوع قد نال حقه من الثتبيث أتمنى فسح الجال أمام باقي المواضيع الأخرى التي تستحق <<< ناوي يهرب
مدمن أنترنيت أريد التطبيق حالا

و السلام

<style>
.clickDiv{
filter:alpha(opacity=77);
}
.normalDiv{
filter:alpha(opacity=100);
}
.eventDiv{
border:thin #000000 solid; 
}
</style>

<script>
//////////////////////
var numDiv = 4; // change 
var cursorEvent = "all-scroll"; // change 
var cursorClick = "move"; // change 
/////////////////////
var wino=0,X,Y,T,L,x,y,i,tagDiv,S=1,oldTop,OldLeft,forDiv,divId,per=false,TagImage,tgs;
drags = function(){
if (event.srcElement.className=="drag"){

    wino = 1;
    ///
    Img=event.srcElement;
    ///
    tagDiv = document.getElementById(parseInt(Img.id)+'div');
    oldTop = tagDiv.style.top;
    oldLeft = tagDiv.style.left;
    ///
    tagDiv.style.zIndex = S;
    S++;
    ///
    tagDiv.className = "ClickDiv";
    Img.style.cursor = cursorClick;

        ///

    L=tagDiv.style.pixelLeft;
    T=tagDiv.style.pixelTop;
    x=event.clientX;
    y=event.clientY;

    document.onmousemove = function(){
        if(event.button==1&&wino){
            X=event.clientX;
            Y=event.clientY;
            var tagDivS = tagDiv.style;
            tagDivS.pixelLeft = L+X-x
            tagDivS.pixelTop = T+Y-y;
            var Ttop = tagDivS.pixelTop;
            var Tleft = tagDivS.pixelLeft;
            ///*
            

            for(i=1;i<numDiv+1;i++){
                forDiv = document.getElementById(i+'div');
                var forDivS = forDiv.style;
                forDiv.className = "normalDiv";
                tagDiv.className = "clickDiv";
                var Ftop = forDivS.pixelTop;
                var Fleft = forDivS.pixelLeft;
                ///////
                var ImgW = Img.width;
                var ImgH = Img.height;
            
                if(Ttop>Ftop && Ttop<Ftop+ImgH && Tleft>Fleft && Tleft<Fleft+ImgW){
                    forDiv.className = "eventDiv";
                    //forDivS.border = 'thin #000000 solid';
                    divId = forDiv.id;
                    per = true
                    }
                }
            return false
            }
        }
    }
}
document.onmousedown = drags
window.onunload = function(){
/*
var msg = "\
**************************    \n\
Dev: Ibrahim Bidi        \n\
Url: www.WinoScript.com        \n\
Email: Zizwar@hotmail.com    \n\
Username: Zizwar`        \n\
**************************    \n\
";
alert(msg)
*/
}
document.onmouseup = function(){FuncWino();wino = 0}
FuncWino = function(){

if(wino){
    //tagDiv.style.filter = 'alpha(opacity=100)';
    tagDiv.className = 'normalDiv';
    Img.style.cursor = cursorEvent;
    tagDiv.style.top = oldTop;
    tagDiv.style.left = oldLeft;
        ///
    if(per){
        var DivIds = document.getElementById(divId);
        var oldHtml = tagDiv.innerHTML;
        var oldId = tagDiv.id
        ////
        tagDiv.innerHTML = DivIds.innerHTML;
        DivIds.innerHTML = oldHtml;
        tagDiv.id = DivIds.id;
        DivIds.id = oldId;
        DivIds.className = 'normalDiv';
        per = false
        }
    ///
    }
}
window.onload = function(){
for(i=1;i<numDiv+1;i++){
    TagImage = document.getElementById(i+'img');
    TagImage.className = "drag";
    tgs = TagImage.style;
    tgs.position = "relative";
    tgs.cursor = cursorEvent;
    }
}
</script>


                <!-- ///////////////HTML//////////////// -->
<div id="1div" style="position:absolute; left:41px; top:17px">
<image src="img/w.JPG" id="1img">
<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
</div>
<!-- /////////// -->

<div id="2div" style="position:absolute; left:328px; top:17px;">
 <image src="img/b.JPG" id="2img">
 <BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>

</div>
<!-- /////////// -->

<div id="3div" style="position:absolute; left:47px; top:250px">
   <image src="img/r.JPG" id="3img">
   <BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>

</div>
<!-- /////////// -->

<div id="4div" style="position:absolute; left:328px; top:250px">
<image src="img/s.JPG" id="4img">
<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>

</div>
<!-- /////////// --> 

[مدمن أنترنت]

شكرا أخي إبراهيم
كود رائع

[مدمن أنترنت]

وينك إبراهيم ؟