ماهو سبب تكرار الصورة في موقع الويب Html

Ahmed Ebrahim11 · 4 سبتمبر 2021

السلام عليكم عندي تدربي عل هذا الموقع حدثت معي بعض المشاكل

1- عند النزول في الصفحات اجد وجود خلفيتين كما في الصوره ولم استطع حلها وهذا يحدث عند الضغط عل احد الازرار

2- مكتبه validate لم تعمل معي رساله الخطا اي انها لم تعمل وايضا" الشيفره الاخيره في js لكي اضف صنف التنسيقات active لعنصر في اخر nav عند الضغط عليه لم تعمل .

templete_1.zip

أسامة زيادة · 4 سبتمبر 2021

سبب ظهور الصورتين أنك تقوم بوضع الصورة خلفية لوسم <body>

body {
    background-image: url(../images/diagoona-bg-1.jpg); 
    direction: ltr;
}

لذلك يجب حذف الصورة في الخلفية والبقاء على صور slideshow . وجعلها مناسبة لحجم الصفحة.

اقتباس

2- مكتبه validate لم تعمل معي رساله الخطا اي انها لم تعمل وايضا" الشيفره الاخيره في js لكي اضف صنف التنسيقات active لعنصر في اخر nav عند الضغط عليه لم تعمل .

2- لم تقم بتضمين مكتبة validate.js بداخل ملف index.html لذلك يجب عليك إضافة السطر التالي

<script src="assest/jquery.validate/jquery.validate.min.js"></script>

ليتم تضمين المكتبة بشكل سليم, بخصوص كود الجافاسكريبت الخاطئ لاحظ انه تقوم باستخدام دالة onClick وهذا خاطئ يجب أن تكون الدالة click فيرجى تعديل الكود التالي

$('.nav-link').onClick(function () {
        $(".navbar-nav").removeClass("active");
        $("this").addClass("active");
    });
});

ليصبح

$('.nav-link').click(function () {
        $(".nav-link").removeClass("active");
        $(this).addClass("active");
    });
});

ايضا يجب حذف علامات التنصيص الموجودة حول كلمة this, كما في الكود السابق.

Ahmed Ebrahim11 · 5 سبتمبر 2021

بتاريخ 19 ساعات قال أسامة زيادة:
سبب ظهور الصورتين أنك تقوم بوضع الصورة خلفية لوسم <body>
body {
    background-image: url(../images/diagoona-bg-1.jpg); 
    direction: ltr;
}
لذلك يجب حذف الصورة في الخلفية والبقاء على صور slideshow . وجعلها مناسبة لحجم الصفحة.

2- لم تقم بتضمين مكتبة validate.js بداخل ملف index.html لذلك يجب عليك إضافة السطر التالي
<script src="assest/jquery.validate/jquery.validate.min.js"></script>
ليتم تضمين المكتبة بشكل سليم, بخصوص كود الجافاسكريبت الخاطئ لاحظ انه تقوم باستخدام دالة onClick وهذا خاطئ يجب أن تكون الدالة click فيرجى تعديل الكود التالي
$('.nav-link').onClick(function () {
        $(".navbar-nav").removeClass("active");
        $("this").addClass("active");
    });
});
ليصبح
$('.nav-link').click(function () {
        $(".nav-link").removeClass("active");
        $(this).addClass("active");
    });
});
ايضا يجب حذف علامات التنصيص الموجودة حول كلمة this, كما في الكود السابق.

استاذي بالنسبه لاستدعاء المكتبه فقد قمت باستدعائها بالفعل ولكن في contacts لاني احتاجها هناك فقط ولم تعمل

2-قد قمت بتجربه ما قلته بالفعل ولكن عند ازاله الخلفيه لن يظهر شي ولا استطيع موائمه الخلفيه لحجم الشاشه

وشيفره الجافا قمت بلصقها ولم تعمل ايضا" لانه عند النظر للصوره لن تجد اي عنصر للnav مفعل بلون كما اعطيته

قمت بارفاق صوره.

templete_1.zip

أسامة زيادة · 5 سبتمبر 2021

المشكلة في الصور أنك قمت بوضح 3 صور لوسم <body> تتغير كل 3 ثواني وهي بالفعل مناسبة لحجم الشاشة ، وأيضا واضع slideshow فيه نفس الصور ولكن حجمها صغير لذلك تظهر صورتين في الشاشة، لذلك يجب الإبقاء على أحد منهما.

يبدو أنك لم تكمل كتابة كود التحقق من الحقول لذلك يجب كتابة الكود التالي أسفل الصفحة ، وحذف خاصية required من inputs

<script>
	$(function() {
		$("#commenForm").validate({
			rules: {
			  // The key name on the left side is the name attribute
			  // of an input field. Validation rules are defined
			  // on the right side
			  name: "required",
			  email: {
				required: true,
				// Specify that email should be validated
				// by the built-in "email" rule
				email: true
			  },
			  comment: "required",
			},
			// Specify validation error messages
			messages: {
			  name: "Please enter your firstname",
			  email: "Please enter a valid email address",
			  comment: "Please enter your lastname",
			},
			// Make sure the form is submitted to the destination defined
			// in the "action" attribute of the form when valid
			submitHandler: function(form) {
			  form.submit();
			}
	});
	});
	</script>

وهذا الملف تم تصحيح جميع الأخطاء فيه templete 1.zip

ماهو سبب تكرار الصورة في موقع الويب Html

السؤال

Ahmed Ebrahim11

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

أسامة زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Ahmed Ebrahim11

رابط هذا التعليق

شارك على الشبكات الإجتماعية

أسامة زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية