DevBlog

Un caroussel horizontal qui peut faire défiler des images ou du html.
Plusieurs carrousels possibles sur la même page.
Très facile à customiser.
(Lire la suite…)

Après avoir téléchargé le sandbox de la version 1.4 de Symfony, impossible de générer mon modèle avec Propel : Task “propel-build-model” is not defined.

(Lire la suite…)

Un captcha est une image générée par un script, qui contient des lettres et des chiffres selectionnées au hasard. Ces caractères sont lisibles par des humains mais pas par des robots. (Lire la suite…)

La fin des prises de tête avec les email html ! Petite découverte intéressante sur CampaignMonitor. 30 gabarits d’email html plutôt réussis et compatible avec un grand nombre d’outils de messagerie. Parmi lequels Yahoo, Hotmail, Gmail et Outlook. Les templates sont disponibles en téléchargement gratuit à cette adresse : http://www.campaignmonitor.com/templates/

Wordpress, le plus célèbre et peut-être le meilleur outil de gestion de contenu open source est désormais disponible en version 2.9 (et même 2.9.1 depuis quelques heures). Entièrement localisé en français , il intègre de nouvelles fonctionnalités bien sympathiques comme un éditeur d’images et une corbeille.

L’éditeur d’images, disponible lors de l’upload ou directement via le gestionnaire de médias, permet notamment de rogner et de redimensionner les images uploadées. Simple et convivial l’éditeur apporte un vrai plus en supprimant l’étape souvent longue et ennuyeuse de la préparation de ses illustrations via son logiciel de retouche habituel.

Concernant la corbeille, c’était quelque chose d’évidement attendu puisque déjà disponible sur bon nombre de CMS.

Rayon déception, on attendra encore pour une meilleure prise en charge de la gestion de l’ordre des pages et un gestionnaire de média plus professionnel.  A quand la gestion de répertoires ? Peut-être pour la version 3.0, annoncée pour mars prochain.

Aide-mémoire : expression régulière pour vérifier le format d’un e-mail en php.

(Lire la suite…)

Lorsque l’on a un champ de type entier dans notre modèle (exemple : champ publié pour une actualité), la champ par défaut de l’admin-generator est un input type text classique, alors qu’un checkbox serait plus approprié.

Pour transformer en checkbox, il suffit de mettre dans le fichier generator.yml le type à “checkbox tag” ainsi :

generator:
class: sfPropelAdminGenerator
param:
model_class:      Actualite
theme:            default

edit:
fields:
publie: { type: checkbox_tag }

Le problème, c’est que  si la valeur par défaut de “publié” dans mon modèle vaut 1, la modification de la checkbox ne sera pas prise en compte lors de l’enregistrement. Pourquoi ?

Parce qu’un checkbox non coché n’a pas la valeur de 0 mais de null. Or, dans la base de données, le null est interdit pour ce champ, c’est donc la valeur par défaut (1) qui est mise à la place.

Il faut donc qu’on force la valeur à 0 quand la case n’est pas cochée.

Pour cela, dans monapp/modules/actualites/actions/actions.class.php, il faut ajouter :

//redéfinition de la fonction d'update de la classe parente
protected function updateActualiteFromRequest()
{
//publié vaut 1 ou null
$publie = $this->getRequestParameter('publie');
if (isset($publie))
{ //s'il vaut 1
$this->actualite->setPublie(1);
}else{
//s'il vaut null, on force 0
$this->actualite->setPublie(0);
}

// Appel de la fonction parente pour gérer le reste de l'update
parent::updateActualiteFromRequest();
}

Voici une petite fonction qui permet de centrer un élément dans une page Web ou, plus exactement, dans le “viewport”.

Mais qu’est-ce que c’est le “viewport” ? Il s’agit de la partie visible d’une page dans un navigateur.

Ainsi, quelle que soit la position de l’internaute dans la page, l’élément sera centré…

Voyons cette fonction…

function centerThis(element) {
	$(element).css({
		'top': (($(window).height() - $(element).height()) / 2) + $(window).scrollTop(),
		'left': (($(window).width() - $(element).width()) / 2) + $(window).scrollLeft()
	});
}

À utiliser comme ceci :

centerThis('#ZoomPhoto');

Attention, cette fonction ne fait que déterminer la position de l’élément concerné. S’il est caché (display: none), n’oubliez pas de le montrer suite à l’appel de cette fonction…

Mais attendez… “Houston ? We have a problem…”

En effet, pour l’instant, si le viewport est plus petit que l’élément à centrer, certaines parties de l’élément se retrouvent en dehors du viewport et ne sont donc pas visibles… C’est le genre de problème qui ne saute pas tout de suite aux yeux lorsque le bureau arbore fièrement un écran de 20 pouces et plus…

Corrigeons donc cette anomalie, pour le bien des mobinautes et de leurs écrans 7 pouces…

function centerThis(element) {
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var elementHeight = $(element).height();
	var elementWidth = $(element).width();

	var elementTop, elementLeft;

	if (windowHeight <= elementHeight) {
		elementTop = $(window).scrollTop();
	} else {
		elementTop = ((windowHeight - elementHeight) / 2) + $(window).scrollTop();
	}

	if (windowWidth <= elementWidth) {
		elementLeft = $(window).scrollLeft();
	} else {
		elementLeft = ((windowWidth - elementWidth) / 2) + $(window).scrollLeft();
	}

	$(element).css({
		'top': elementTop,
		'left': elementLeft
	});
}

Et voilà ! L’élément est centré, quelle que soit la taille du viewport…

Une dernière chose, ça fonctionne sous IE6…

Vous avez un menu déroulant en CSS et une animation Flash en dessous, et quand vous déroulez votre menu, celui-ci passe sous l’animation… Pas de panique, voici une solution.

(Lire la suite…)