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

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

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


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


يمكن اخفاءها


هنا

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>
<!-- /////////// --> 

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

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

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

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

[beshoo]

الكود رائع بحق ولكن .

قد جربتة وبشكل موسع والمشكلة انه احيانا عم يغلق المتصفح فجئة مع ظهور رسالة قام الجهاز باداء عملية غير شرعية

تكررت المشكلة 4 مرات على اكثر من حاسب..
ارجو الاحاطة ....


الكود مازال معقد قليلا .
المشطلة التي ربما نعاني منها هي تحديد اماكن الجداول يدويا من خلال النسب .... لا احب هذة الطريقة ولكن ربما سوف نعتاد عليها

ارجو الافادة في حال وجود اي طريقة اخرى .
ower:

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

المشطلة التي ربما نعاني منها

المشكلة

[beshoo]

على فكرة العملية فاشلة في حال احببنا ان نراعي دقة الشاشة

انا اكره التعامل مع ال DIV جدا . حيث انك لو فرضا عم تصمم على 1024 وعرضت على ال 800*600 سوف تظهر مشاكل جما على خلاف ال Table

[Zizwar]

قد جربتة وبشكل موسع والمشكلة انه احيانا عم يغلق المتصفح فجئة مع ظهور رسالة قام الجهاز باداء عملية غير شرعية

تكررت المشكلة 4 مرات على اكثر من حاسب..
ارجو الاحاطة ....

ower:

هل من الممكن أن تطبع الخطأ الذي يظهر لك ، لأني بدوري جربته على أكثر من جهاز ولم يحدث شيء أتمنى من الأعضاء الأخرين أن يجربو
قد يكون جهازك مضروب بv يروس من نوع VbTerrorist إن كان كذالك فالله يعين جميع ملفات html

===============

على فكرة العملية فاشلة في حال احببنا ان نراعي دقة الشاشة

انا اكره التعامل مع ال DIV جدا . حيث انك لو فرضا عم تصمم على 1024 وعرضت على ال 800*600 سوف تظهر مشاكل جما على خلاف ال Table

فعلا Table بها خاصية التمدد التلقائي و لها ميزات يصعب على div منافستها فيها خصوصا إدا إستعمل معها الأنماط الخاصة بها ب CSS لكن مشكلتها أن خلاياها td+tr لا يقبلا

position:absolute 

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

 if(Ttop>Ftop && Ttop<Ftop+ImgH && Tleft>Fleft && Tleft<Fleft+ImgW){ 
                    forDiv.className = "eventDiv"; 
                    divId = forDiv.id; 
                    per = true 
                    } 

عندها نغير class الخاص به إلى eventDiv و نأخد ال ID الخاص بها و نعطي للمتغير per قيمى صحيح ، و هنا

  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 
        } 

عند رفع الضغط على الزر onmouseup يتأكد هل المتغير per يحمل قيمة صحيح و إدا توافق الشرط
يفوم بتغيير جميع المحتويات من العنصر للآخر و يعيد ال class إلى وضعيته الإعتيادية normalDiv

======
كما قلت لك الكل يتوقف على و ضعية

position:absolute 

يعني في الأخير حلها هي div أما بخصوص مشكلة دقة الشاشة فأعتقد أن حلها قد يتجاوز بالدالة

window.onresize

:con2:
على ذكرك المشاكل التي نواجهها في تحديد أماكن العناصر يدويا أذكرك أن المعلم Dreamweaver أحسن واحد ترسم به صناديق div وهو يعطيك تلقائيا مستواها و فيه ضع المحتويات و لا تنسى اعطاء قيمة متسلسلة لل ID

[beshoo]

يا أخي
اكتر شي حبيتة كلمة "تموضع" يا رجل حسيتك دكتور بجامعه هارفرد
هههههههههههههههههه

المهم الله يعطيك الف عافية ...

بالنسبة لموضوع الدقة تبع الشاشة هو موضوع ازلي يجب علينا ان نجد الحل المناسب له ...
كم اتمنى أن ارسم موقعي عن طريق الDIV لو تصدق النتائج المذهلة التي يحدنا عنها ال Table ولكن نعود لموضوع التموضع إن صح لي التعبير حيث ان "تموضعها" ثابت "بيد أن" التموضع الجديد يختلف على شاشة اخرى حيث إختلفت الدقة ...

واتوقع لو قمنا بعمل داله تقوم بحساب "التموضعات" من شاشة إلى أخرى حيث نقوم بحساب الفرق بين 1024 و ال 800*600 وعلى ذلك نتنج لنا قيمة وحيدة هي تكون الفارق الذي يؤثر على الـ"تموضعية" (يا رجلال شطحنا شطهة قوية هنا ) هههههههههه
المهم .... اوقع ان الموضوع بدء يكتمل .... وماشاء الله عليك ...

[random_X]

فعلتها يا إبارهيم ...

فعلتها ايها البطل :nice: ، أنت كما أنت عند ثقتنا بك دائماً ...


الى كل مشاركي سوالف المحترمين ، إننا بمثل هؤلاء المبدعين نفخر و نعتز ...

فلك التحية كل التحية من قلوبنا العامرة لك بالخب يا إبراهيم ...

أخوك ...

-----------------

و قفة هنا يا شباب :eek2: :eek2:


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

[2600ma]

:nice:
لعبة شيقة
هل ممكن أن أضع صورة أخرى غير هذه

[2600ma]

ربحت

[AntiServer]

بصراحه اول شي بشكر الي رفع الموضوع



تعجبنيي يا زيزوارر ..

ما بدي امدحك لانهم مدحوك كتيير :nice:

[2600ma]

بصراحه اول شي بشكر الي رفع الموضوع

:nice:

لا شكر على واجب :nice:

Game Over