Étiquette : Javascript

Javascript : Fonction masquer / afficher un bloc

Lien qui masque ou affiche un élément dans une page web.
Voici comment faire pour créer un lien qui masque ou affiche un élément dans la page :
– Créer le lien : <a href="#" onclick="javascript:ShowOrHide('MonPanel')" >Masquer / Afficher</a>
– Donner le bon ID à l’élément à masquer / afficher : <div ID="MonPanel">Bla bla</div>
– Insérer cette fonction dans la page :
function ShowOrHide(CtrlID)
{
oCtrl = document.getElementById(CtrlID);
if (oCtrl)
{
if (oCtrl.style.display == "none" || oCtrl.style.display == "")
{
oCtrl.style.display = "block";
}
else
{
oCtrl.style.display = "none";
}
}
}

Javascript : fonction isNumeric

Inspiré de cette page. J’y ai ajouté la vérification qu’il n’y ait qu’un seul point « . ».

function isNumeric(sText)
{
        var sValidChars = "0123456789.";
	var isNumber = true;
	var iNumDots = 0;
	var c;
	for (i = 0; i < sText.length && isNumber == true; i++)
	{
		c = sText.charAt(i);
		if (c == ".") iNumDots++;
		if (sValidChars.indexOf(c) == -1
				|| iNumDots > 1)
		{
			isNumber = false;
		}
	}
	return isNumber ;
}

Javascript : Restaurer le scroll au rechargement d’un écran

Ca remonte tout le temps ! Comment garder une page dans son état initial lors d’un « postback » ?
Article inspiré de cette page de forum.
Lors d’un postback d’une page, le scroll revient toujours à sa position initiale… Si on était situé en bas de page, il faut donc re-« moletter » jusqu’en bas. C’est très désagréable.
Voici donc un bout de javascript qui fonctionne de la façon suivant :

  • On enregistre (dans un champ caché, hidden) la position de l’écran sur certains « onchange » de contrôles.
  • La page se recharge
  • On récupère la valeur cachée, qu’on applique dès le window.onload…

Du coup la page revient à sa position initiale !
Fonction à appeler à chaque fois qu’un contrôle gagne le focus, ou voit sa valeur changer, etc :

function SaveScroll()
{
    oHidden = document.getElementById("hdScrollPosition");
    if (oHidden)
    {
        var sScroll;
        // Test navigateur
        if (document.documentElement && document.documentElement.scrollTop)
            { sScroll = document.documentElement.scrollTop; }
        else if (document.body)
            { sScroll = document.body.scrollTop; }
        else
            { sScroll = 0; }
        oHidden.value = sScroll;
    }
}

Fonction à appeler sur le onload de la page :

function RestoreScroll()
{
    oHidden = document.getElementById("hdScrollPosition");
    if (oHidden)
    {
        var sScroll = oHidden.value;
        if (sScroll > 0)
        {
            if (document.documentElement && document.documentElement.scrollTop)
                { document.documentElement.scrollTop = sScroll;}
            else if (document.body)
            {
                if (window.navigator.appName == ’Netscape’)
                    { window.scroll(0, sScroll); }
                else
                    {
                        // Restauration du scroll
                        document.body.scrollTop = sScroll;
                        // Cas ASP.NET : si la page en question est incluse dans une masterpage :
                        // document.body.parentElement.scrollTop = sScroll;
                    }
            }
            else
            {
                window.scroll(0, sScroll);
            }
        }
        oHidden.value = 0;
    }
}

Maintenant, il suffit d’ajouter dans les pages :

  • Le contrôle caché qui sauve la position : <input id="Hidden1" type="hidden" />
  • La restauration du scroll au chargement de la page : 
    <script type="text/javascript" language="javascript">
        window.onload = RestoreScroll();
</script>