Forum : Zoombox centré

Réponse acceptée

Bonjour.

Je confirme ce qu'a dit jbou43.
Mais tu peux aussi le faire en jquery si tu veux animé le "recentrage".

CSS

.zoomBox{
    position:fixed;
}

Jquery

//avec une div de style
        <div id="zoombox" style="height:50px; width:50px; position:relative; left:50%; top:400px; background-color:red;"></div>
        //code js
    $(function(){
        $(this).bind('scroll',function(event){
        var newPosition = 400+window.pageYOffset+'px';
            $('#zoombox').animate({'top':newPosition});
        });
    });

P.S: J'ai utiliser un petit carré rouge comme zoombox, il va de soit que tu dois ajouté la zoombox. Je ne t'ai montrer qu'une solution pour centré un element.
Attention, ne pas oublis d'ajouté jquery UI j'ai utilisé .animate() pour donner un effet visuel sympas.

Digikube

Auteur

Réponse acceptée

Voilà je ce que j'ai pu faire grâce à Golendercaria :

function center(){  
    $(this).bind('scroll',function(){
        var height = $('#zoombox .container').height();
        var css = {
        top : (windowH() - height) / 2,
        marginTop : scrollY(),
    };
        $('#container').animate(css,0);
    });   
}

MrGuillou

pas vraiment besoin de javascript.

je ne connais pas zoombox mais à mon avis il suffi d'ajouter en css un position:fixed sur le container principal

Digikube

Auteur

Je n'y avais pas pensé c'est pourtant la chose la plus simple qui existe c'est vrai, je vais voir si je peux trouver ça.

<u>Edit :</u> Je n'ai pas trouvé je suis toujours preneur de solution ...

Digikube

Auteur

Ce code ne fixerait pas juste les images dans la pages plutôt ?

.zoomBox{  
        position:fixed;  
    }

golendercaria

Ce code fixe un élément tous court. Sa peut fixé un contenaire par exemple (div).
Si tu as des conflits je t'invite a démarrer d'un exemple plus symple pour le mieux le comprendre et ensuite d’intégrer ta zoombox.
Oublis pas que tu peux appliquer du CSS avec Jquery quand bon te semble (ex: quand l'image est bien centré).

Digikube

Auteur

En fait je sais utiliser position:fixed mais je l'ai testé à différents endroits dans le CSS de zoombox. Je suis pas foutu de trouver où le mettre car même dans la div.container comme elle est en position:absolute ça veut dire que ça va interagir avec une autre div qui elle sera en position:relative.

J'espère avoir été assez clair ...

Merci pour ton aide en tout cas.

golendercaria

Sans exemple dure de dire mais si ton bloc parent est en absolue pas de problème. En relative il faut alors jouer sur des flottants.
Montre ton code.

Digikube

Auteur

Le bloc .container est bien en absolute mais on ne peut pas combiné un postion:absolute et un position:fixed ou je me trompe ?

golendercaria

Bonjour,

Pour l'exemple d'un contenante déplaçable j'avais utilisé de l'absolute. Mais tu peux utilisé "fixed" normalement tu ne perturbe pas le flux.

golendercaria

J'ai jeter un rapide coup d'oeil sur la version de grafiakrt.
J'ai ajouter ligne 36 dans la generation de code html

<div class="container" id="containerX">\

Dans la fonction

function load(){}

j'ai ajotué en dessous du timer une fonction

centrage();

Et toute à la fin du code:

function centrage(){
        $(this).bind('scroll',function(event){
            //récupération la valeur du scrool + adition du top
            var POS = $('html').scrollTop()+118+'px';
            $('#containerX').animate({'top':POS},250);
        }); 
}

A retravailler bien sur ! étant donner qu'il faut le rendre compatible; recalculer la valeur du Top de la nouvelle boite (lors du changement d'image).
Mais avec un peu de travail et une bonne relecture/comprehension du code tu devrais arriver au rendu que tu veux.

Digikube

Auteur

Ah cool je crois avoir compris et je vais essayer de bidouiller ça, si ce n'est la fonction "bind()" sert a quoi ?

golendercaria

C'est une fonction qui permet d'attacher un gestionnaire d’événement, je le préfère car il permet de faire par exemple,

$(this).bind('mouseover mouseout', fonctionOnOff);

Digikube

Auteur

Très bien j'arrive à saisir alors le "event" qui en entre parenthèse dans "function()" est obligatoire ?

golendercaria

He je n'ai pas compris ta question.

Digikube

Auteur

Dans ce début de code est-ce que "event" est obligatoire entre parenthèse ?

$(this).bind('scroll',function(event)

golendercaria

Ha nn ^^ j'avais pas vus que je l'avais laisser.
Non pas du tout, sauf si tu en as besoins. Mais dans l'exemple du dessus pas obliger.

Digikube

Auteur

Très bien je te remercie je vais essayer de faire ça alors et je poste une solution si j'en obtiens une.

chesnel

Afin de fixer l'image il suffit d'ajouter ce code dans le css

#zoombox .zoombox_container{
    position:fixed;
        margin-top:0!important;
    z-index:100;
}

Le important permet de prendre le dessus sur la valeur margin-top qui est défini dans zoombox.js. Il est tout à fait possible d'aller aussi supprimer le margin-top dans le code javascript. Mais je penses que c'est plus simple ainsi :)

Zoombox centré

19 réponses