Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] Volet d'accueil, fluidité et abeilles
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] Volet d'accueil, fluidité et abeilles

 Répondre Répondre Page  <1234 8>
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 8797
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Dec 2014 à 19:01
pas bien de se moquer!!!! Clown
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2077
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 06 Dec 2014 à 15:48
Message posté par Larsene Larsene a écrit:

Merci Big smile ! Bon va falloir que je me remette au travail alors ....

Bon en tout cas, j'espère que ça va bien aider les gens à se lancer à utiliser Open Element ! Je trouve que voir faire en vidéo, ça aide pas mal ...

Ce forum est extraordinaire, du fait de ceux qui l'animent ! Tongue OE est un logiciel super (extraordinaire aussi), mais en plus de la connaissance qui en transpire, il émane, par les sujets qui y sont démontré par ceux cités ci-en-haut, une envie de créer, et c'est vrai que les tutos vidéos de Larsene parlent deux même et paraissent à la porté des plus novicesThumbs Up Clap Continuez
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
michael84320 allez vers le bas
Newbie
Newbie


Depuis le: 24 Juil 2014
Status: Inactif
Points: 8
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer michael84320 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Feb 2015 à 08:57
Bonjour,
et felicitation pour ce tuto et tous les autres qui me permettent de progressser.

j'ai appliqué scrupuleusement le tuto et cela fonctionne parfaitement.
j'essaye d'adapter a mes besoins  et là je n'y arrive plus..
ma fenetre de menu fait 200px de haut, quels sont les ajustements à faire ?

merci 


Edité par michael84320 - 05 Feb 2015 à 08:57
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5407
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Feb 2015 à 09:28
Il faut juste modifier la hauteur dans le script JAVASCRIPT :

[code]/*redimensionnement panneau élément photo*/
    $("#panneauhaut").css({width:largeur,height:(hauteur-40200),top:'0px',left:'0px','z-index':'0','position':'absolute'});
 
/*redimensionnement corps de page*/
  var top = hauteur-40200;
    $("#corpspage").css({top:(top+40200)+'px',left:'0px'});
Haut de la page
nuckhy allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 03 Mar 2015
Status: Inactif
Points: 7
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nuckhy Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mar 2015 à 02:39
Bonsoir à tous (ou bonjour ?),

Merci beaucoup pour ce tuto vraiment bien expliqué et facile à reproduire.
Cependant après diverses tentatives de modifications du code, je n'ai malhereusement pas réussis à faire ce que je voulais.

Ma question est donc:

Est il possible avec les codes fournis de faire la même chose, mais que le #panneauhaut ne prenne pas toute la fenêtre ? (Je me doute que c'est possible, mais je n'ai pas réussis à trouvé ce qu'il fallait modifier).

J'ai essayé de suprimer / modifier un peut tout, mais sans une réel connaissance du java, j'ai juste réussis à tout positionner comme je le voulais, sauf que le menu ne bougeait plus Stern Smile


En gros:

Je n'arrive pas à cromprendre comment modifier la taille du #panneauhaut, sans qu'il y ai un vide entre celui-ci et le #panneaumenu.


Désolé pour ce message cafouillie, n'hésiter pas si je n'ai pas été assez précis !

Merci
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5407
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mar 2015 à 09:05
Hello !

Il faut effectivement une petite connaissance du javascript (attention, rien à voir avec Java)

Pour le dimensionnement du panneau haut :

/*redimensionnement panneau élément photo*/
    $("#panneauhaut").css({width:largeur,height:(hauteur-40),top:'0px',left:'0px','z-index':'0','position':'absolute'});


il faut modifier les variables largeur et hauteur. Le 40 ici représente la hauteur du menu.


Haut de la page
nuckhy allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 03 Mar 2015
Status: Inactif
Points: 7
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nuckhy Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mar 2015 à 15:24
J'allais dire que j'avais déjà essayé, mais je ne devais pas avoir les idées claire hier soir...
Je remplacais "les +/-40" par le même chiffre à chaque fois !
J'ai donc réussis à faire ce que je voulais, mais n'y a t'il pas un moyen plus "sûr" que ce code ?

/*redimensionnement panneau élément photo*/
    $("#WEe5977f6820").css({width:largeur,height:(hauteur-865),top:'0px',left:'0px','z-index':'0','position':'absolute'});
    
/*redimensionnement corps de page*/
  var top = hauteur-830;
    $("#WEdc7ca2a3c8").css({top:(top+100)+'px',left:'0px'});


Je suis pas sûr des -830 / -865, j'y suis allé un peut à taton.
Haut de la page
nuckhy allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 03 Mar 2015
Status: Inactif
Points: 7
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nuckhy Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mar 2015 à 15:45
Voilà ce que donne le site avec le code:


Code Javascrip:

function larsene() {
  
  var hauteur = $(window).height();
  var largeur = $(window).width();
  
/*redimensionnement panneau élément photo*/
    $("#WEe5977f6820").css({width:largeur,height:(hauteur-865),top:'0px',left:'0px','z-index':'0','position':'absolute'});
    
/*redimensionnement corps de page*/
  var top = hauteur-830;
    $("#WEdc7ca2a3c8").css({top:(top+100)+'px',left:'0px'});
  
    /* div ancre ancre*/
    $("#WE1e49788a95").css({top:top+'px',left:'0px'}); 
  
  /*placement menu*/
   $("#WEe8056c63ff").css({width:largeur,top:top+'px',left:'0px'});

  /*dimensionnement de xBody*/
  var hauteurXBody = $("#WEdc7ca2a3c8").height();
  if (hauteurXBody<(2*hauteur)){
    $("#XBody").css({height:(2*hauteur)+'px'});
  }
  
  /*repositionnement correct du menu*/
        var scroll = $(window).scrollTop();
        var positioninitiale=$("#WE1e49788a95").position().top - scroll;

        if (positioninitiale<0){
         $("#WEe8056c63ff").css({position: "fixed", top: 0});
        }
        
        if (positioninitiale>0){
          $("#WEe8056c63ff").css({position: "relative",top :positioninitiale+scroll});
        
        }
  

}

$(document).ready(function() {
        larsene();

      $(document).on('scroll', function(){
        var scroll = $(window).scrollTop();
        var positioninitiale=$("#WE1e49788a95").position().top - scroll;

        if (positioninitiale<0){
         $("#WEe8056c63ff").css({position: "fixed", top: 0});
        }
        if (positioninitiale>0){
          $("#WEe8056c63ff").css({position: "relative",top :positioninitiale+scroll});
        
        }       

        
});    

});


Code Css:

.hand{
cursor:pointer;
}


.menu{
-moz-box-shadow: 0px 05px 5px 0px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 05px 5px 0px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0px 05px 5px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 05px 5px 0px rgba(0, 0, 0, 0.8);
z-index:100000 !important; 
}


Edité par nuckhy - 03 Mar 2015 à 15:46
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5407
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mar 2015 à 15:47
Non, c'est trop ! ça veut dire que la taille de ton menu haut ferait 830 pixels de haut ?!!

Cela ne rendrait pas bien sur la plupart des écrans d'affichages en dessous du 27" !
Haut de la page
nuckhy allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 03 Mar 2015
Status: Inactif
Points: 7
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nuckhy Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mar 2015 à 15:56
En fait, je pense que ce code n'est pas du tout ce qu'il me faut, j'ai essayé de le modifier, mais rien à faire.
En fait je voudrais seulement la partie menu qui scroll et qui bloque sur le #panneauhaut.
Avec ce code, le #paneauhaut prend toute la fenêtre alors que je voudrais un #panneauhaut de +/-100px
Haut de la page
 Répondre Répondre Page  <1234 8>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Réserver en ligne un taxi, vtc, navette