الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

من يستخرج لي هذه الحركة ؟

بدأه apt في 1 أكتوبر 2009 · 20 رد · 2,414 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم،

لقد حاولت مرار وتكرارا ان استخرج هذه الحركة الجميلة الموجودة على هذا الموقع :

http://alawsati.com/world_news.php

ولكن واجهتني اخطاء في ملف الكود يطلب مني برنامج Expression Web 2 ان اصلحها.

من ذلك، في آخر كود الملف وجود هذه السطور :

</body>

</body>

</html></tr></table></div>

* ايعقل ان يتكون ملف html من وسمين لـ body ؟

* ايعقل ان يغلق ملف html ثم نجد بعد ذلك بقية لكود الصفحة ؟ ثم يشتغل هذا الملف بصورة عادية وبدون اخطاء ؟

لذا ارتايت ان اصحح السطور الى ما يلي :

</body>

</html>

ولكن في الاخير خرب الملف ولم استطع صياغة كود الحركة منه crazy.gif

فهل منكم من يقدر ان يصلح الامر ويستخرج هذه الحركة الجميلة من هذا الملف ؟

جزاكم الله خيراً.

#2

جرب برنامج Expression Web 2 فهو جميل ومتوفر

ربما تنجح الحركة معك

#3

الحركة انة لمن تاتي الفارة على الرابط تتغير الصورة من الجانب يمكنك فعل هذي بالجافا سكربت و امرها بسيط

ابحث في النت و سوف تجدها مليئة اما انا كانت حركة اخرى فوضح و سوف يساعدك الجميع اما من ناحية ال tag فلم اجرب و لا اتوقع يوكن ال boddy اثنان الا في حالة واحدة اذا كان فيها frameset و الله اعلم

Mail : pc-moon@hotmail.com

من تواضع لله رفعه

قل خيرا أو اصمت

#4

بحثت ولم اجد.

اظن ان الاجاكس يستطيع القيام بها بسهولة ولكن ليس لدي فكرة الآن.

هل من مساعدة ؟

#5

أنظر إلى الدورة المثبته في هذا القسم ستجد أن الأمر بسيط جدا لعمل مثل هذه الحركة وبالتحديد درس ألبوم الصور

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#6

الحركة بسيطة اذا توفرت وتبلورت الفكرة جيدا في الذهن

وصعبة اذا تاه الواحد منا في البحث والتنقيب ...

#7

هذا مثال من احد المنتديات الاجنبية قمت بتعديله حسب الحاجة.

فاشتغل للمرة الاولى ببلوك واحد.

ولما اردت مضاعفة الكود الى بلوكين (لاني احتاج الى عدة بلوكات في صفحة واحدة) توقف عن الاشتغال.

بالمرفقات الملف كامل مع طلب اجراء التعديلات اللازمة عليه ليشتغل بصورة جيدة.

شكراً.

div_onmouse_link_image.rar

تم تعديل هذه المشاركة بواسطة apt في 30 ديسمبر 2009 في 15:47

#8

تم تغيير الـ id الى كلاس articles.

اشتغل الامر ولكن هناك مشكلة صغيرة ما زالت قائمة :

عند تمرير الفارة على الديف الاول والانتقال الى الديف الثاني تختفي آخر صورة تم اظهارها من الديف الاول.

كيف يتم تصحيح الكود في هذه الحالة ؟

شكراً.

divs_onmouse2.zip

#9

alsalam alekom

this is your file after updates

divs_onmouse2.html

تم تعديل هذه المشاركة بواسطة Mo7eb_Alrasool في 1 يناير 2010 في 23:41

سبحانك اللهم وبحمدك أشهد ان لا اله الا أنت

أستغفرك وأتوب اليك

الهم صلي وسلم وبارك على سيدنا وحبيبنا محمد

#10

شكرا لك أخي محب الرسول.

إذا اردت استعمال مثل اأكثر من بلوكين لهذه الحركة، كيف يكتب السطر التالي :

var indx = this.parentNode.parentNode.id == 'articles1' ? 1 : 2;

هذه صورة توضيحية لما اريد الحصول عليه :

454129110.jpg

:)

#11 
var indx = this.parentNode.parentNode.id.substring(8);
but you have to name  articles1,articles2,articles3....

تم تعديل هذه المشاركة بواسطة Mo7eb_Alrasool في 2 يناير 2010 في 04:21

سبحانك اللهم وبحمدك أشهد ان لا اله الا أنت

أستغفرك وأتوب اليك

الهم صلي وسلم وبارك على سيدنا وحبيبنا محمد

#12

نعم الرقم 8 اذا كانت الجملة معلومة كما في حاتنا هاته "articlesX"

كنت قد جربت الكود التالي بصورة عامة ولكنه لم ينجح :

var v = this.parentNode.parentNode.id; 
var indx = v.charAt(lenght(v)-1);

#13 
            var divId = this.parentNode.parentNode.id;
            if (!divId) {
                if (window.__news_container == undefined) {
                    window.__news_container = 0;
                }
                window.__news_container++;
                this.parentNode.parentNode.id = '__news_container_' + (window.__news_container)
                divId = this.parentNode.parentNode.id
            }
            //onhover h3
            $("#" + divId + " div.show").removeClass("show");
            $("#" + divId + " h3.selected").removeClass("selected");

سبحانك اللهم وبحمدك أشهد ان لا اله الا أنت

أستغفرك وأتوب اليك

الهم صلي وسلم وبارك على سيدنا وحبيبنا محمد

#14

هذا الكود معقد نوعا ما ...

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

var v = this.parentNode.parentNode.id; 
var indx = v.charAt(lenght(v)-1);

#15

السلا عليكم 

var v = this.parentNode.parentNode.id;

var indx = v.substring(v.length - 1);

or you can use this one 

var divId = this.parentNode.parentNode.id;
//onhover h3
$("#" + divId + " div.show").removeClass("show");

$("#" + divId + " h3.selected").removeClass("selected");

تم تعديل هذه المشاركة بواسطة Mo7eb_Alrasool في 2 يناير 2010 في 18:41

سبحانك اللهم وبحمدك أشهد ان لا اله الا أنت

أستغفرك وأتوب اليك

الهم صلي وسلم وبارك على سيدنا وحبيبنا محمد

#16

هذا الكود النهائي وهو يعمل.

هل ممكن ترك السطريين الاوليين اللذين استعمل فيهما كلاس articles بدل id كما هما ::

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //التنقل بلوحة الكتابة
        $(".articles h3").attr("tabindex", "0");
        $(".articles h3").focus(function() {
        var divId = this.parentNode.parentNode.id;
		//onhover h3
		$("#" + divId + " div.show").removeClass("show");
		$("#" + divId + " h3.selected").removeClass("selected");
        $(this).next("div").addClass("show");
        $(this).addClass("selected");
        });

        // hover on h3 : 
        $("div.article h3").hover(function() {
        	var divId = this.parentNode.parentNode.id;
			//onhover h3
			$("#" + divId + " div.show").removeClass("show");
			$("#" + divId + " h3.selected").removeClass("selected");            
            $(this).next("div").addClass("show");
            $(this).addClass("selected");
        },
			function() {
                        //out : h3
            });
    });
</script>

#17

السلام عليكم

ممكن توضح اكثر

سبحانك اللهم وبحمدك أشهد ان لا اله الا أنت

أستغفرك وأتوب اليك

الهم صلي وسلم وبارك على سيدنا وحبيبنا محمد

#18

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

اردت تحسين الكود السابق فكان التالي :

<script type="text/javascript">
    $(document).ready(function() {
	var divId = this.parentNode.parentNode.id;
        //التنقل بلوحة الكتابة
        $("." + divId + " h3").attr("tabindex", "0");

		$("." + divId + " h3").focus(function() {
		//on focus h3
		$("#" + divId + " div.show").removeClass("show");
		$("#" + divId + " h3.selected").removeClass("selected");
        $(this).next("div").addClass("show");
        $(this).addClass("selected");
        });

        // hover on h3 : 
        $("div.article h3").hover(function() {
        	//onhover h3
			$("#" + divId + " div.show").removeClass("show");
			$("#" + divId + " h3.selected").removeClass("selected");            
            $(this).next("div").addClass("show");
            $(this).addClass("selected");
        },
			function() {
                        //out : h3
            });
    });
</script>

حيث قمت ياستبدال 

.articles

بـ 

"." + divId + "

ثم نقلت المتغيرة divId الى اول الدالة :

    $(document).ready(function() {
	var divId = this.parentNode.parentNode.id;

2 ) ماذا ساكتب داخل هذه الدالة او هل يمكنني ان ازيلها فقط اذا كانت بدون فائدة (لانني وجدتها في الكود الاصلي ولم اعرف فائدتها) :

function() {
                        //out : h3
            });

ما اريده عموما هو تحسين الكود ليس الا (لان الموجود حاليا يعمل بصورة جيدة)

شكراً.

تم تعديل هذه المشاركة بواسطة apt في 3 يناير 2010 في 04:16

#19

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

/index.php?showtopic=206040&view=findpost&p=1049577

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#20

اطلعت على درسك 11 وهو جميل.

ولقد ذكرني بتساؤلي حول احد الحركات الجميلة والمشابهة قليلا لدرسك ومعقدة عليها الا وهي حركة السلايد شو لعرض الاخبار :

حركة السلايد شو - سو تناكا -

ومثلها حركة السلايد في موقع الجزيرة التي قام احد الاصدقاء باستخراج كودها ولكن هو يحاول بمعرفته المحدودة برمجتها.

وكنت اريد ان اعرض عليك القيام بدرس حول tabbed-box وتسهيلها للمتعلمين الجدد.

وكذا الـ menu tree اين يجب الضغط على اشارة الزائد (+) لفتخ وعرض محتوى العنوان في قائمة تحت ثم الضغط على (-) لغلق الفائمة.

فهل ستقوم بتقديم دروس الحركات (السلايد شو +tabbed content و menu tree) ؟

بارك الله فيك.

#21

سؤال حيرني :

هذا الكود :

.hasJS .articles div div {
	position: absolute;
	top: -5000px;
	right: -5000px;
	padding-right: 5px;
}

1 - ما معنى absolute وما الفرق بينها وبين relative ومتى نضعها او لا نضعها ؟ (قرات على الموضوع كثيرا ولم استطع فهم الامر لحد الآن !!!)

2 - ما الغرض من وضع قيم تموضع خارج الصفحة ؟ وكيف هي div خارج الصفحة بـ -5000 فوق و -5000 من اليمين ورغم ذلك نراها في استعراض الصفحة !!!!؟

شكرا للمساعدة.

مواضيع مشابهة