Search the Community
Showing results for tags 'javascript'.
Found 7 results
-
Bonjour, je suis musicien et je commence à coder mon propre site, car il se trouve que, comme la plupart d'entre vous, j'adore coder (bref). En tous cas, je viens de terminer la maquette du design, et il se trouve que suis incompétent à réaliser certaines bases du site... Il se trouve que j'aimerais séparer (en gros) la page web en deux, avec une grande ligne diagonale. Dans un vieux tutoriel, j'avais lu qu'en Javascript, l'on pouvait dessiner tout ce qu'on voulait sur des calques avec canvas... Problème : je n'ai que quelques bases en Javascript qui ne me permettront surement pas d'atteindre mon objectif. Je sollicite donc votre aide pour m'indiquer ne serait-ce qu'un lien ou ce que j'aimerais réaliser est expliqué ou si vous connaissez certaines balises... Merci d'avance, Elnin
-
Bonjour, Contexte : Utilisation d'un script d'annuaire en PHP MySQL avec un affichage d'une carte via API Gmaps et des coordonnées contenu dans une des table de la bd MySQL. Pour cela j'ai suivi le tuto google pour afficher la carte suite à une génération d'une sortie au format KML/XML par un script PHP, je vous laisse découvrir : https://developers.google.com/maps/articles/phpsqlajax_v3 Le code pour l'affichage de la carte est celui-ci : <!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>PHP/MySQL & Google Maps Example</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> <script type="text/javascript"> //<![CDATA[ var customIcons = { restaurant: { icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' }, bar: { icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' } }; function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(47.6145, -122.3418), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("phpsqlajax_genxml.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<b>" + name + "</b> <br/>" + address; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html> Je souhaiterais que les markers soit regroupés sous forme de clusters, j'ai trouvé la solution ici : https://developers.google.com/maps/a...arkerclusterer Les sources sur GitHUB et plus d'exemples https://googlemaps.github.io/js-mark.../examples.html Bref, en gros je pense qu'il faut intégrer le code suivant au précédent : var center = new google.maps.LatLng(37.4419, -122.1419);var options = {'zoom': 13,'center': center,'mapTypeId': google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("map"), options);var markers = [];for (var i = 0; i < 100; i++) {var latLng = new google.maps.LatLng(data.photos[i].latitude,data.photos[i].longitude);var marker = new google.maps.Marker({'position': latLng});markers.push(marker);}var markerCluster = new MarkerClusterer(map, markers); Je ne maîtrise pas le JavaScript, et je n'arrive pas à compiler les deux fonctions... De l'aide serait la bienvenue.. Merci d'avance ! -
Salut à tous, je vous soumets ici une solution que j'ai utilisé pour rendre un site responsive web design sans me prendre la tête avec les em, vw, % et tout ce binz. Le problème étant qu'en utilisant autre chose que des unités en px, il est très difficile d'avoir le même rendu sur tout les écrans, voir impossible ... telle tablette affiche des textes plus gros qu'une autre, les images (qui sont toujours en pixels faut'il le rappeler) s'affichent différemment en fonction du ration device-pixel-ratio du device, bref c'est le bordel ... Quand on cherche des solutions sur le net, tout le monde dit : ha ben facile pour re-déclare des styles CSS en fonction de la résolution du device, utilise un viewport avec initial-scale, maximum-scale ... bref pour moi c'est en retour en arrière, vers les années 1998 ou l'on devait presque coder un site par navigateur (netscape, ie et compagnie), vive le progrès ... Donc ma solution simple et facile est celle-ci : > Tu intègres ton site en pixels (px) comme ca tout est bien calé > Tu redimensionnes le site avec une fonction javascript qui change le style:zoom sur le site en fonction de la largeur ou la hauteur (comme tu préfères) de l'écran du device > Et voila c'est fait, le rendu est le même quelque soit l'écran ! Donc j'aimerais savoir ce que vous pensez de cette solution ? Est-ce que j'ai raté un truc ou cette solution vous semble plus simple et efficace que d'avoir à gérer : > plusieurs fichiers CSS en fonction du device > des viewport avec des scales pour chaque device > des images qui s'affichent différemment en fonction du device-pixel-ratio Merci pour vos retours. Voila le code : <!DOCTYPE html> <html lang="fr"> <head> <title>Titre</title> <meta charset="utf-8"> <style> html, body { margin : 0 ; padding : 0 ; } #FSite { position : absolute ; width : 1300px ; height : 640px ; top : 50% ; left : 50% ; margin : -320px 0 0 -650px ; background : #FFCC00 ; } </style> <script type="text/javascript"> function XLViewport() { var SiteW = 1300 // Largeur du site source ; var SiteH = 640 // Hauteur du site source ; var ScreenW = getWindowWidth() ; var ScreenH = getWindowHeight() ; // Je veux que le site fit en fonction de sa hauteur PercentH = 100 ; if (SiteH > ScreenH) PercentH = (ScreenH * 100) / SiteH ; PercentW = 100 ; if (SiteW > ScreenW) PercentW = (ScreenW * 100) / SiteW ; if (PercentW <= PercentH) Percent = PercentW ; else Percent = PercentH ; Scale = Percent / 100 ; FFrame = document.getElementById('FSite') ; FFrame.style['-webkit-transform'] = 'scale(' + Scale + ')'; FFrame.style['-moz-transform'] = 'scale(' + Scale + ')'; FFrame.style['-ms-transform'] = 'scale(' + Scale + ')' ; FFrame.style['transform'] = 'scale(' + Scale + ')'; } function getWindowHeight() { var windowHeight=0; if (typeof(window.innerHeight)=='number') { windowHeight=window.innerHeight; } else { if (document.documentElement&& document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight; } else { if (document.body&&document.body.clientHeight) { windowHeight=document.body.clientHeight; } } } return windowHeight; } function getWindowWidth() { var windowWidth=0; if (typeof(window.innerWidth)=='number') { windowWidth=window.innerWidth; } else { if (document.documentElement&& document.documentElement.clientWidth) { windowWidth = document.documentElement.clientWidth; } else { if (document.body&&document.body.clientWidth) { windowWidth=document.body.clientWidth; } } } return windowWidth; } window.onload = function(){ XLViewport() ; }; window.onresize = function(){ XLViewport() ; }; </script> </head> <body> <div id="FSite"> CONTENU DU SITE </div> </body> </html>
-
Bonjour à tous, voilà mon problème, je souhaite faire appel à une fonction ($(".action_suppression_type_libre")) lors d'un clic sur un div (class="action_suppression_type_libre") d'une autre fonction jquery. ($(".suppressionchamps")). Cela ne fonctionne pas, je ne sais pas comment m'y prendre, j'ai essayé de nombreuses méthodes mais rien y fait, je n'arrive pas à trouver comment faire. (en gros, je veux exécuter du jquery au clic sur un élément qui a lui même été créé via du jquery. <script> $(function() { $(".suppressionchamps").click(function(){ $('#valeur1').html('<div class="action_suppression_type_libre">OUI</div>'); return false; }); $(".action_suppression_type_libre").click(function(){ alert('test'); return false; }); }); </script> <div id="valeur1"> <span class="suppressionchamps">cliquer ici</span> </div> Merci d'avance pour votre précieuse aide ! Vincent
-
Bonjour à tous, J'essaie de faire un site avec une superbe function que j'ai trouvée et qui me permet de faire la mise en forme que je veux... J'ai énormément cherché pour obtenir cette fonction, parce que ma mise en forme est impossible sans! Regardez dans mon site, c'est la fonction chk Mais quand je mets un DOCTYPE à mon site, n'importe lequel, ça annule cette fonction! Quelqu'un peut m'aider? <!-- saved from url=(0014)about:internet --><HTML><HEAD><TITLE>Mon site</TITLE><script type="text/javascript">function chk(){my_div=document.getElementById("textecentre")top_space=document.getElementById("textecentre").offsetTopbottom_space=4my_div.style.height=document.body.clientHeight-top_space-bottom_space}onresize=chk</script><style type="text/css">html {height:100%;}body {text-align:center; height:100%;}#overall {margin:auto; width:990px; position:relative; height:100%; background-color:#6699CC;}#textecentre {position:absolute; top:10px; right:260px; width:450px; height:auto; background-color:#99CCFF; overflow:auto;}#footer {width:990px; height:68px; margin:auto; background-color:#006699;}</style></HEAD><BODY onload="chk();"><div id="overall"><div id="textecentre"><div id="IDpres"><pre>présentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentation</pre></div></div></div><div id="footer"></div></BODY></HTML>
-
Aujourd'hui, voici une petite portion de code javascript qui vous aidera à creer dynamiquement, à partir d'un premier select, la liste des valeurs éligible sur le 2e select qui lui dépend. Ici, par exemple, nous allons créer dynamiquement la liste des départements correspondant à une région. (Je vous ai mis les valeurs des 2 premières régions seulement) <html> <head> <title>test</title> <script language="JavaScript"> function defRegion() { var frmRegion = document.getElementById("inscription"); var selRegion = document.getElementById("bc_reg"); var selDpt = document.getElementById("bc_dpt"); var indiceRegion = bc_reg.value; // Temps que selDpt contient des noeuds... while (selDpt.hasChildNodes()) { // Supprime le premier noeud. selDpt.removeChild(selDpt.firstChild); } //choix vide var opt = document.createElement("option"); opt.setAttribute("value", ""); var itmText = document.createTextNode("Faites votre choix"); opt.appendChild(itmText); selDpt.appendChild(opt); // Suivant la région sélectionnée... switch (indiceRegion) { case "1_s": // Créé un noeud pour la liste. var opt = document.createElement("option"); opt.setAttribute("value", 167); var itmText = document.createTextNode("Bas-Rhin"); opt.appendChild(itmText); selDpt.appendChild(opt); var opt = document.createElement("option"); opt.setAttribute("value", 168); var itmText = document.createTextNode("Haut-Rhin"); opt.appendChild(itmText); selDpt.appendChild(opt); break; case "2_s": // Créé un noeud pour la liste. var opt = document.createElement("option"); opt.setAttribute("value", 124); var itmText = document.createTextNode("Dordogne"); opt.appendChild(itmText); selDpt.appendChild(opt); var opt = document.createElement("option"); opt.setAttribute("value", 133); var itmText = document.createTextNode("Gironde"); opt.appendChild(itmText); selDpt.appendChild(opt); var opt = document.createElement("option"); opt.setAttribute("value", 140); var itmText = document.createTextNode("Landes"); opt.appendChild(itmText); selDpt.appendChild(opt); var opt = document.createElement("option"); opt.setAttribute("value", 147); var itmText = document.createTextNode("Lot-et-Garonne"); opt.appendChild(itmText); selDpt.appendChild(opt); var opt = document.createElement("option"); opt.setAttribute("value", 164); var itmText = document.createTextNode("Pyrénées-atlantiques"); opt.appendChild(itmText); selDpt.appendChild(opt); break; } } </script> </head> <body onLoad="java script:defRegion();"> <FORM id="inscription" name="inscription"> <SELECT id="bc_reg" name="bc_reg" onChange="java script:defRegion();"> <optgroup label="Région"> <option value="1_s" selected="Selected">Alsace</option> <option value="2_s">Aquitaine</option> </SELECT> <SELECT id="bc_dpt" name="bc_dpt"> </SELECT> </FORM> </body> </html>
-
Pour éviter de permettre à vos visiteurs de lancer une recherche dans vos tables avec 1 seul caractère comme critère, vous pouvez les obliger a saisir un minimum de caracteres en faisant un rapide contrôle en javascript : <html> <head> <script> function valider(monchamps){ var mini = 3 var maxi = 20 if ( mini != 0 ) { // Si la longueur de la saisie est inférieure au minimum demandé if ( monchamps.value.length < mini ) { // Envoi d'une alerte alert('Vous devez saisir au moins ' + mini + ' caracteres.'); return false } } // Si la longueur de la saisie est supérieure au maximum demandé if ( maxi != 0 ) { if ( monchamps.value.length > maxi ) { alert('Vous ne devez pas saisir plus de ' + maxi + ' caracteres.'); return false } } } </script> </head> <body> <form name="form1" method="post" action="moteur.html"> <input type="text" name="motsclef" id="search" onBlur="valider(this)"> <input type="submit" value="Rechercher"> </form> </body> </html> (et vous pouvez faire le meme controle en php du coté serveur pour les petits malins qui ont désactivé le javascript)
