Gularu.fr

Cueillir l'actu, l'insolite du web et d'autres trucs

 

Mot-clé ‘js’

Ajouter/insérer une vidéo Youtube, Dailymotion ou Viméo avec TinyMce (pas besoin de plugin)Le 10 mai 2010

Partager

Ajouter/insérer une vidéo Youtube, Dailymotion ou Viméo avec TinyMce (pas besoin de plugin)

Désolé pour les blogueurs ou blogueuses non concernés par ce que je dis mais je soigne tous mes visiteurs.

Ce code a été réalisé par mon ami Camyo.

Après des recherches longues et en anglais (oui c’est mon fort…), j’ai enfin réussi à trouver le code qui permet d’ajouter des vidéos Youtube, Dailymotion, Google Vidéo et Viméo avec TinyMce. Il faut tout simplement télécharger le plugin media (il est mis par défaut dans l’archive que vous téléchargez sur le site TinyMce). Il faut le mettre dans votre barre wysiwyg de TinyMce.

Dans le dossier media > js, vous avez un fichier media.js, ouvrez-le et allez à la ligne 322.

Là, copier coller ce bout de code :

	// dailymotion
    if ( v.match(/dailymotion\.com\/video\/(.+)(.*)/)) {
		f.width.value = '425';
		f.height.value = '350';
		f.src.value = 'http://www.dailymotion.com/swf/' + v.match(/video\/(.*)(.*)/)[0].split('video/')[1];
		return 'flash';
	}
 
	// Vimeo
    if ( v.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/) ) {
        f.width.value = '400';
        f.height.value = '321';
        f.src.value = 'http://vimeo.com/moogaloop.swf?clip_id=' + v.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/)[1];
        return 'flash';
    }

Cela donne alors :

function getType(v) {
	var fo, i, c, el, x, f = document.forms[0];
 
	fo = ed.getParam("media_types", "flash=swf;flv=flv;shockwave=dcr;qt=mov,qt,mpg,mp3,mp4,mpeg;shockwave=dcr;wmp=avi,wmv,wm,asf,asx,wmx,wvx;rmp=rm,ra,ram").split(';');
 
	// YouTube
	if (v.match(/watch\?v=(.+)(.*)/)) {
		f.width.value = '425';
		f.height.value = '350';
		f.src.value = 'http://www.youtube.com/v/' + v.match(/v=(.*)(.*)/)[0].split('=')[1];
		return 'flash';
	}
 
	// Google video
	if (v.indexOf('http://video.google.com/videoplay?docid=') == 0) {
		f.width.value = '425';
		f.height.value = '326';
		f.src.value = 'http://video.google.com/googleplayer.swf?docId=' + v.substring('http://video.google.com/videoplay?docid='.length) + '&hl=en';
		return 'flash';
	}
 
	// dailymotion
    if ( v.match(/dailymotion\.com\/video\/(.+)(.*)/)) {
		f.width.value = '425';
		f.height.value = '350';
		f.src.value = 'http://www.dailymotion.com/swf/' + v.match(/video\/(.*)(.*)/)[0].split('video/')[1];
		return 'flash';
	}
 
	// Vimeo
    if ( v.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/) ) {
        f.width.value = '400';
        f.height.value = '321';
        f.src.value = 'http://vimeo.com/moogaloop.swf?clip_id=' + v.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/)[1];
        return 'flash';
    }

Voilà, maintenant lorsque vous insérez le permalien (genre http://www.youtube.com/watch?v=DKlMSOEIYT4) dans la zone Fichier / Url, automatiquement une zone de vidéo va se créer. Efficace et rapide !

9 commentaires »

Publié dans Informatique

Mots-clés : , , , , , , , , , , , , , , , , ,

Problème IE 7 et IE8 en javascript – Initialisez vos variables !Le 10 mai 2010

Partager

Problème IE 7 et IE8 en javascript – Initialisez vos variables !

N’oubliez pas, comme je viens de le faire, d’initialiser vos variables dans votre code javascript !

Je viens de perdre une heure à chercher pourquoi Internet Explorer 7 et 8 me plantait mon code javascript utilisant un sortable de Scriptaculous et Prototype, les deux frameworks js. Sur les autres navigateurs (Safari, Chrome et Firefox), cela fonctionnait parfaitement !

J’avais tout simplement zappé le petit var devant ma variable…

2 commentaires »

Publié dans Informatique

Mots-clés : , , , , , , , , , , ,

Comment stopper un PeriodicalExecuter, en dehors de toute fonction – PrototypeLe 21 jan 2010

Partager

Comment stopper un PeriodicalExecuter, en dehors de toute fonction – Prototype

Ce soir, c’est noël pour certain. Voici un cadeau qui vous simplifiera sûrement la vie car si vous oubliez d’initialiser la variable du PeriodicalExecuter, vous ne pourrez plus l’arrêter !
Fâcheux si vous voulez le coupler à un diaporama sensé s’arrêter au clic ^^

Voici le code :

// MAIN DE L'APPLICATION
new Event.observe(window, "load", function (evt) {
	var leTimer;
	leTimer = new PeriodicalExecuter(diaporamaChange, 8);
 
	new Event.observe("navDroite","click", function(evt) {
		new Event.stop(evt);
		leTimer.stop();
		diaporamaChange();
	});
});

Pas de commentaire »

Publié dans Informatique

Mots-clés : , , , , , , , , , , , ,

Petit diaporama simple en ajax / javascript avec Prototype jsLe 21 jan 2010

Partager

Petit diaporama simple en ajax / javascript avec Prototype js

Je viens de me tirer les cheveux sur 20 lignes de code donc je tiens à vous les filer. Cela ne doit pas être optimal (je connais les puristes qui vont crier au scandale). Disons que cela marche très bien tel quel !

C’est tout simple. Vous avez une liste à puce sur lequel vous voulez brancher un diaporama en passant d’une ligne à l’autre simplement.

Voici la liste à puce en HTML :

<ul id="actualitesUl">
	<li class="itemActualite actif"></li>
	<li class="itemActualite" style="display: none;"></li>
	<li class="itemActualite" style="display: none;"></li>
</ul>

Ici, il y en a trois, mais le code que j’ai fait fonctionne pour un nombre illimité. On va donc passer du premier li au suivant avec un effet simple de disparition et d’apparition grâce à la librairie js : Scriptaculous.
Pour ceux qui sont déjà perdus : révisez vos classiques.

Voici donc les 20 lignes de javascript qui m’ont données du fil à retordre (sachez que je n’avez pas codé en js depuis 6 mois !) :

// MAIN DE L'APPLICATION
new Event.observe(window, "load", function (evt) {
	leTimer = new PeriodicalExecuter(diaporamaChange, 10);
});
 
function diaporamaChange() {
	var tabLi = $("actualitesUl").childElements();
 
	$$(".actif").each(function(el) {
		el.hide('appear');
		el.removeClassName('actif');
		for(var i=0; i < tabLi.length; i++) if (el == tabLi[i]) if (i + 1 < tabLi.length ) tabLi[i+1].addClassName('actif'); else tabLi[0].addClassName('actif');
		$$(".actif").each(function(el2) { new Effect.toggle(el2, 'appear'); });
	});
}

1 commentaire »

Publié dans Ajax, Informatique

Mots-clés : , , , , , , , , , , , ,

Ajax : les erreurs js, prototype et scriptaculous les plus courantes, fréquentes et les problèmes d’affichage Google MapsLe 05 nov 2008

Partager

Aujourd’hui, un petit post sur les erreurs les plus courantes ou fréquentes qui peuvent vous laisser patois devant votre ordinateur parfois pendant des heures alors que c’est souvent facile à résoudre :

Google maps :
- Fonctionne, marche sous [shal]Firefox[/shal] mais pas sous [shal]IE[/shal] : attention aux noms de variables pour le nom de la maps ou des markers ou marker manager. En effet, certains noms sont déjà utilisé par IE donc ça plante.

- Carte à moitié [shal]visible[/shal], carré gris à la place de la carte, ou [shal]carte[/shal] décalée. Revoyez toutes vos div, p ou span et fermeture de balise.

Ou (merci Fabien)

Ne pas instancier la gmap dans une fonction de type :

Event.observe(window, ‘load’, function() {
carte = new GMap2(document.getElementById(”carte”));
});

Mais plutot placer un fragment de js directement sous l’élément qui va contenir la carte (ou en bas de body); Comme ceci :

//gMap
carte = new GMap2(document.getElementById(”carte”));

- Marker qui n’apparaît pas sur la carte avec le marker manager : attention, lors de la création du groupe, vous devez spécifier sur quel zoom les markers vont apparaître. J’ai perdu énormément de temps sur deux points. Trompé de zoom, du coup ils étaient bien créés mais je ne les voyais pas. Second point, problème de latitude et longitude, du coup ils étaient à un autre endroit.

Prototype :

- example is not defined : erreurs lorsque l’[shal]objet[/shal] ou variable, ici example, que vous ciblez n’existe pas.

- $(« example ») is null : erreurs lorsque l’objet, ici example, que vous ciblez n’existe pas.

- missing ) after argument list : Vous avez oublié de fermer une parenthèse, généralement pour le observe.

- missing } after property list : Vous avez oublié de fermer une parenthèse ou généralement vous avez oublié de mettre une virgule entre des paramètres. Exemple :

new Ajax.Updater("tableEditeur", "xhr/xhr_editeur_tri.php", {
      method: 'post',
      parameters: "modeTri="+modeTri+"&triSur="+triSur,
      evalScripts: true
});

- The requested URL /example/xhr/xr_menu.php was not found on this server. : l’url que vous avez spécifié n’existe pas. Le fichier n’a donc pas été importé en appel Ajax.

Scriptaculous :

- missing ) after argument list : oublie des crochets pour des options d’effets. Exemple :

new Effect.Appear('menu_cote', {from:0.0, to:0.45});

- element is null : l’élément spécifié pour l’effet n’existe pas.

- $(« .example ») is null : attention, pour cibler les classes, vous devez utiliser les doubles dollars $$. Ici cela donnera :

$$(".example").each(function(el) {
});

D’autres erreurs seront rajoutées au fur et à mesure et n’hésitez pas à me les donner pour que je debbug votre code. Mettez l’erreur en commentaire de ce billet.

10 commentaires »

Publié dans Ajax, Informatique

Mots-clés : , , , , , , , , , , , , , , , , , , ,

 
« Articles plus anciens