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

**المبرمجون العرب** · 25-12-2004

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

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

يمكن اخفاءها

هنا

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

-

**beshoo** · 25-12-2004

ower:

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

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

**مدمن أنترنت** · 25-12-2004

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

**مدمن أنترنت** · 28-12-2004

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

**Zizwar** · 29-12-2004

مبروك عودة سوالف :nice: و مبروك عودتي

بيشو نمت لكن أحلم به دائما
المبرمجون العرب شكرا أخي على الكود و قد رأيت موضوعك المنفرد بخصوصه سأرد عليك هناك و لدي لك بعد الإقتراحات
مدمن أنترنيت و أين تريدني أن أختفي في هذا البرد ، بطبيعة الحال في أحسن غطاء ساخن

آسف إخوان على التأخر و شاكر للإدارة على بقاء الثتبيت

الله يعيني على الشرح لكن قبلا أقترح عليكم لعبة برمجتها بنفس الكود السالف وضعه في هذا الموضوع
http://www.winoscript.com/js/dragdiv/SwalifGame.html

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

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

كود PHP:




<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** · 30-12-2004

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

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

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

**مدمن أنترنت** · 30-12-2004

ممتاز أخي

لعبة شيقة

**beshoo** · 31-12-2004

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

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

**Zizwar** · 31-12-2004

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

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

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

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

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

**beshoo** · 01-01-2005

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

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

**مدمن أنترنت** · 01-01-2005

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

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

**مدمن أنترنت** · 05-01-2005

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

**Zizwar** · 06-01-2005

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

كود PHP:


<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;

كود PHP:


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 أو كتابة . و فقط
وهذا مثال عن صندوق بمحركه

كود PHP:


<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 و هي المفضلة كون الكوكي سيقتصر على التغيرات في الجهاز اما بالأخيرة فأفضل .. و أنت لها يا بشار

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

مدمن أنترنيت أريد التطبيق حالا

و السلام

كود 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>

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

**مدمن أنترنت** · 06-01-2005

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

**مدمن أنترنت** · 09-01-2005

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

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

أدوات الموضوع

بحث في الموضوع

المواضيع المتشابهه

زيزوار لا هنت دقيقة سوال في الجافا سكريبت

سكريبت طرب – نقاش وفنجان قهوة ساخن.

الأخ زيزوار و محترفين الجافا ( ورينا منافساتكم )

زيزوار - وعشاق الجافا سكريبت - ممكن مساعدة

جلسة نقاش حول خدمة الـ SMS

ضوابط المشاركة