Problème javascript

Fermé
kush91170 Messages postés 57 Date d'inscription mercredi 8 janvier 2014 Statut Membre Dernière intervention 22 juillet 2015 - 31 mars 2014 à 16:56
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 1 avril 2014 à 13:17
Bonjour tout le monde,

Voilà, mon problème doit-être simple mais bon je suis bloqué depuis pas mal de temps dessus.
Donc je voudrais intégrer le script "response.min.js" à mon code HTML, c'est un script pour le responsive design de ma page. Voilà mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>RENTMAT BTP - Location et négoce de matériel BTP</title>
        <link rel="stylesheet" href="Siteweb.css"/>
		<script src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="js/response.min.js"></script>
	</head>
	<div class="logo_haut">
		<img src="Contenu/logo-rentmat.png" height="4%" width="30%"/>
	</div>
	<section class="corps">
		<body>
			<header>
				<div class="banniere_photos">
					<div class="slider_next2">
						<img src="Contenu/elements_graphiques/slider_next2.png"/></a>
					</div>
					<div class="slider_prev2">
						<img src="Contenu/elements_graphiques/slider_prev2.png"/></a>
					</div>
					<div class="slider_next1">
						<a href="#"><img src="Contenu/elements_graphiques/slider_next.png"/></a>
					</div>
					<div class="slider_prev1">
						<a href="#"><img src="Contenu/elements_graphiques/slider_prev.png"/></a>
					</div>
				</div>
				<div class="nav_left">
					<img src="Contenu/elements_graphiques/nav_left.png"/>
				</div>
				<div class="nav_right">
					<img src="Contenu/elements_graphiques/nav_right.png"/>
				</div>
				<div id="menu">
					<nav>
						<ul>
							<img src="Contenu/elements_graphiques/nav_a_right.png"/>
							<li class="accueil_nav"><a href="#">Accueil</a></li>
							<li class="securite_nav"><a href="#">Sécurité <span style="font-size:0.5em;color:gray"></br>et accès</span></a>
								<ul>
									<li><a href="#">Exemple 1</a></li>
									<li><a href="#">Exemple 2</a></li>
								</ul>
							</li>
							<li class="etaiement_nav"><a href="#">Etaiement</a></li>
							<li class="panneaux_nav"><a href="#"><span class="item2">Panneaux</span><span class="item1" style="font-size:0.5em;color:gray"></br>de coffrage</span></a></li>
							<li class="materiel_nav"><a href="#">Matériel<span style="font-size:0.5em;color:gray"></br>spécifique</span></a></li>
							<li class="contact_nav"><a href="#">Contact<span style="font-size:0.5em;color:gray"></br>et localisation</span></a></li>
						</ul>
					</nav>
				</div>
			</header>
			<section class="nos_produits">
				<h2>Nos produits</h2>
					<div class="securite">
						<div class="photo_securite">
							<a href="#"><img src="Contenu/tour_escalier.png" height="200" width="200"/></a>
							<span style="font-weight:bold;">Sécurité et accès</span></br>
							<span style="font-size:12px;color:grey">Praesent egestas leo in pede</span>
						</div>
					</div>
					<div class="panneaux">
						<div class="photo_coffrage">
							<a href="#"><img src="Contenu/coffrage.png" height="200" width="200"/></a>
							<span style="font-weight:bold;">Panneaux de coffrage</span></br>
							<span style="font-size:12px;color:grey">Pellentesque congue.</span>
						</div>
					</div>
					<div class="etaiement">
						<div class="photo_etaiement">
							<a href="#"><img src="Contenu/photo_etaiement.png" height="240" width="200"/></a>
							<span style="font-weight:bold;">Etaiement</span></br>
							<span style="font-size:12px;color:grey">Praesent blandit odio eu enim.</span>
						</div>
					</div>
					<div class="materiel_spe">
						<div class="photo_materiel_spe">
							<a href="#"><img src="Contenu/materielspe_photo.png" height="200" width="200"/></a>
							<span style="font-weight:bold;">Matériel spécifique</span></br>
							<span style="font-size:12px;color:grey">Cras vestibulum bibendum augue.</span>
						</div>
					</div>
			</section>
			<section class="contenu">
				<aside>
					<h2>Chantiers</h2>
						<div class="chantier1">
							<a href="#">Chantier#1</a>
						</div>
						<div class="chantier2">
							<a href="#">Chantier#2</a>
						</div>
						<div class="chantier2">
							<a href="#">Chantier#3</a>
						</div>
					<div class="image_chantier">	
						<img src="Contenu/chantier_1_photo.png" width="180" height="200" border="0" />
					</div>
					<div class="infos_chantier1">
						<span style="font-size:18px;font-weight:bold;">Chantier #1</span>
						<span style="font-size:13px;color:grey;"><p>Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p></span>
						<br><br><a href="#"><span style="font-weight:bold;font-size:16px;"><p class="infos"><br><br>+ D'INFOS</p></span></a>
					</div>
				</aside>
				<article>
					<p><span style="font-size:25px;font-weight:bold;">Présentation</span></p>
					<span style="color:#e26305;font-size:20px;font-weight:bold;">Praesent egestas leo in pede.</span>
					<span style="font-weight:bold;font-size:13px;letter-spacing:0.1px;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
					Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
					Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
					Duis semper. Duis arcu massa, scel erisque vitae, consequat in, pretium a, enim. Pellentesque congue.
					Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
					Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.</p></span>
					<span style="font-size:14px;color:grey;"><p>Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.
					Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
					Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.</p></span>
				</article>
			</section>
		<footer>
			<div class="logo">
				<img src="Contenu/vignette-rentmat.png"/>
			</div>
			<div class="coordonnees">
				<p>7, rue des pochets<br>
				91170 Viry-Châtillon<br>
				Tél.: <span style="color: red">+33 (0)1 60 84 88 30</span><br>
				Fax: +33(0)1 80 72 90 97<br>
				Mail: Aklea@orange.fr<p>
			</div>
		</footer>
	</section>
		</body>
</html>


Mon problème est que rien ne se passe, j'ai pourtant vérifié plusieurs fois mon url vers le dossier "js". J'ai aussi téléchargé la bibliothèque Jquery car je travail en local.
J'ai tenté avec d'autres script mais c'est la même chose : rien ne se passe.
Je précise que je ne suis pas un spécialiste du Javascript.

Merci d'avance pour vos réponses.

A+



1 réponse

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
31 mars 2014 à 19:09
salut

déjà dans le html la balise <body> est mal placée elle devrait être juste après </head>

ensuite déclare ta page en html5 car tu as mis un doctype xhtml1.0 mais ta page contient des balises html5

évite de mettre des styles intégrés a la page (balises span style=") fais plutot p class=" ou span class="
et mets la classe dans ton css (on dirait du dreamweaver wysiwyg ou autre du meme accabit)

pour ton problème
essaie au lieu de <body>

<body data-responsejs='{
"create": [{
"prop": "width"
, "prefix": "min-width- r src"
, "breakpoints": [0, 320, 481, 641, 961, 1025, 1281]
}]
}'>

après je ne connais pas ce plugin donc je ne peux pas plus t'aider
http://responsejs.com/

moi perso le responsive jai pas besoin de js
essaie avec les media queries (c'est du css) et cest reconnu par tous les navigateurs androides ipad et autres joyeusetés tactiles et mobiles
0
kush91170 Messages postés 57 Date d'inscription mercredi 8 janvier 2014 Statut Membre Dernière intervention 22 juillet 2015 3
1 avril 2014 à 09:27
Merci pour ta réponse mais malheureusement ça ne fonctionne toujours pas, j'ai déjà essayé de faire mon responsive design en css ce n'est pas évident pour moi qui suis débutant en la matière.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
1 avril 2014 à 13:17
il faut juste te donner le temps d'apprendre et de maitriser un peu mieux css
0