[Résolu] Tous les widgets à l'intérieur d'un widget ? Est-ce possible

[FANCH 56]

Bonjour

Actuellement j'ai tous mes widgets à gauche de mon forum.

Quand je parcours le forum avec la roulette, les widgets suivent le mouvement.

Y-a-t-il possibilité de regrouper TOUS les widgets à l'intérieur d'un widget, avec une barre de défilement latérale, et que ce widget unique, reste fixe et que le forum défile sans faire bouger le widget ?

Je sais c'est mal exprimé, mais l'idée est là !

[FANCH 56]

Je fais remonter

[FANCH 56]

Je fais remonter

[FANCH 56]

Je fais remonter

[FANCH 56]

J'ai réussi à mettre mes widgets perso dans un seul widget avec scrollbar, mais comment faire pour les widget d'origine

[FANCH 56]

Je fais remonter

[Invité]

Salut FANCH 56,
oui bien sûre et simplement en un clic ,
Dans ta feuille de style colle et adapte selon la largeur de tes widgets ceci:

Code:


#content-container #content #left
{
position:fixed;
top:5px;
left:5px;
height:100%;
width:200px;
overflow:auto;
}


top 5px correspond à la marge du haut donc à 5px du haut.
left:5px correspond à la marge de gauche donc à 5px de la gauche.
height:100%; correspond à la hauteur de tout le bloc.
Possibilité de diminuer cette hauteur, mais pas très esthétique .
width:200px; correspond à la largeur de tout le bloc.
overflow:auto; Le scroll
Voilà mon ami, en espérant avoir répondu à ta question .
a++

[FANCH 56]

Merci

J'avais réussi à mettre mes widget perso, mais je voudrais inclure les widget d'origine.

Alors cela fonctionne, MAIS : mon cache widgets ne fonctionne plus, Et le widget mange ma page

Code:

$(function() {
          var c = $("#left,#right"), d, e = function(a) {
            var a = a.direct ? 0 : 1E3, b = $(this).data("side");
            window.localStorage && localStorage[("none" == $("#" + b).css("display") ? "remove" : "set") + "Item"]("wid" + b, "1");
            $("#" + b).stop(!0, !0).animate({width:"toggle", height:"toggle", opacity:"toggle"}, a);
            $(this).toggleClass("isopened isclosed")
          };
          c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"><div style="clear:both"></div></div>')), c.each(function() {
            $(this).find("script").remove();
            var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>');
            "right" == a && $("#content").prepend($("#right").css("padding", "0 10px")).css("margin-right", 0);
            b.data("side", a).appendTo(d).click(e);
            window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger({type:"click", direct:!0})
          }))
        });

[Invité]

Re,

alors là les scripts et moi ça fait deux .
Par contre les widgets persos et ceux d'origine s'affiche chez moi .

a++

[FANCH 56]

Oui à ce niveau c'est nickel, là ou le bât blesse, c'est que mon panneau cache widget ne fonctionne plus, et que les widgets recouvrent la partie gauche du forum.

Mais........je l'aurais...........je l'aurais

[Invité]

Re,
je cherche de mon côté Fanch ,
tu peux commencer à décalé ton forum pour de plus avoir la partie gauche recouverte en placant ceci dans ta css:

Code:

#ipbwrapper{left: 10%;}

Modifie le 10 si besoin .
a++

[FANCH 56]

Ce code ne modifie rien !

[Invité]

Re,
me suis planté :

Code:

#ipbwrapper{float:right;}

Edit tu as trouvé ce script pour rétracter les widgets ou stp

a++

[FANCH 56]

Sur FA Cache widget

https://forum.forumactif.com/t338000-resolucode-css-cache-widget-petit-probleme-de-mise-en-place?highlight=CACHE

[Invité]

Salut FANCH 56,

Tu veux toujours en position fixed?
Le seul truc que j'ai pu définir avec un fixed c'est l'affichage des Widgets à droite avec le bouton qui reste
à gauche par contre .
Voir sur mon forum de tests:
http://invision.bbactif.com/
a

[FANCH 56]

Bonjour Milouze

Affirmatif je veux bien tenter, du moment que je peux fermer ou ouvrir le cache widget. Car les membres ayant un écran étroit, ne sont pas pénalisés ainsi.

[Invité]

Re,
mon exemple a aussi un défaut c'est qu'il cache une partie (droite )
du forum quand le module de Widgets est activé .

Le script et la css de base ne change pas (c'est la bonne nouvelle ) ,



Pour le placement du module on va dans la feuille de style:
colle ceci:

Code:


/*on positionne le module*/
#content-container #content #left
{
position:fixed;
display:block;
top:0;
right:0;
height:100%;
width:200px;
overflow-y:scroll;
}
/*On donne une largeur et son placement au forum*/
#ipbwrapper {width:98%;float:left;}


Pour #ipbwrapper

le left est obligatoire ensuite si tu désires diminuer la largeur,
modifies le 98 .

a++

[FANCH 56]

Cela fonctionne, mais il va falloir que je trouve la solution pour le cache widget à droite et surtout le bouton d'ouverture à droite

[Invité]

Re, tu peux me donner ta css stp .

Edit:
je viens de prendre ton image (du bouton cacher) et
je viens de la déposer sur mon forum test.
Tu peux actualiser la page et regarder l'effet stp.
J'ai même donné un effet sur le bouton .

a++

[FANCH 56]

Cela à l'air superbe, il faudrait le décaler un peu plus à droite.

Je n'arrive pas à faire un copier de mon CSS, il y a quelque chose qui empêche, quelque soir le navigateur.

Je vais poser un sujet ou alors envois ton css spécifique pour ce qui me concerne.

[Invité]

Re,
tiens c'est assez étonnant ce qu'il t'arrive,
mais sous Firefox plus de possibilité de sélectionner quoique
ce soit avec la souris tout se passe au clavier désormais .

Je viens de déplacer l'image pour qu'elle soit au bord .
La position précédente était voulue pour avoir encore un autre effet de survol .
Pour la feuille de style
supprimes tout le contenu correspondant au script:
C'est à dire ceci:

/* ****************CACHE WIDGETS******** */


#widget-arrows {
height: 30px;
}
.widget-arrow {
height: 30px;
width: 35px;
border-radius: 90px;
float: left;
cursor: pointer;
background: #f5ebf7 url(http://colsbleus.fr/cb/boutons/clic.gif) no-repeat 0 -13px;
}
.widget-arrow.isright {
float: right;
}
.widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened {
background-position: 0 0;
}

puis inséres celui-ci:

Code:

#widget-arrows
{
 height: 140px;
}
.widget-arrow
{
height: 140px;
width: 140px;
border-radius: 4px;
top:50px;
left:5px;
position:fixed;
cursor: pointer;
display:block;
background: url(http://colsbleus.fr/cb/techno/ouvrir5.jpg) no-repeat;
-o-transition-timing-function: ease-in;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.widget-arrow:hover
{
height: 140px;
width: 140px;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
top:100px;
}

a++

[FANCH 56]

J'ai réussi avec CTRL+C CTRL+V

[FANCH 56]

Y-a-t-il moyen de mettre l'image ici :

[Invité]

Re,
oui, mais je dois me sauver,
je donne tout çà demain matin de bonne heure et de bonne humeur comme dab .

a++

[Invité]

Re,
me voici plus tôt que prévu .

Est ce que cela te convient comme ceci :
http://invision.bbactif.com/

a++

[FANCH 56]

Ha voilà, çà c'est parfait.

J'avais fais l'essai cet après-midi, et évidemment les petits écrans ont râlés.

J'ai remis mon ancien CSS ici :

Code:

    /* ****************CACHE WIDGETS******** */
             
                #widget-arrows {
                height: 38px;
          position: fixed;
          bottom: 140px;
       
                }
                .widget-arrow {
                height: 137px;
                width: 40px;
                border-radius: 00px;
                float: left;
                cursor: pointer;
                background: #f5ebf7 url(http://colsbleus.fr/cb/techno/ouvrir5.jpg) no-repeat 0 0;
                }
                .widget-arrow.isright {
                float: right;
                }
                .widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened {
                background-position: 0px 0px;

Et le java

Code:

$(function() {
          var c = $("#left,#right"), d, e = function(a) {
            var a = a.direct ? 0 : 1E3, b = $(this).data("side");
            window.localStorage && localStorage[("none" == $("#" + b).css("display") ? "remove" : "set") + "Item"]("wid" + b, "1");
            $("#" + b).stop(!0, !0).animate({width:"toggle", height:"toggle", opacity:"toggle"}, a);
            $(this).toggleClass("isopened isclosed")
          };
          c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"><div style="clear:both"></div></div>')), c.each(function() {
            $(this).find("script").remove();
            var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>');
            "right" == a && $("#content").prepend($("#right").css("padding", "0 10px")).css("margin-right", 0);
            b.data("side", a).appendTo(d).click(e);
            window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger({type:"click", direct:!0})
          }))
        });

[Invité]

Salut FANCH 56,
voilà pour la CSS:

Code:

#widget-arrows
{
height: 37px;
position:fixed;
}
.widget-arrow
{
height: 40px;
width: 137px;
top:5px;
right:200px;
position:fixed;
cursor: pointer;
display:block;
background: url(http://i46.servimg.com/u/f46/11/26/21/37/ouvrir10.jpg) no-repeat;
-webkit-border-radius: 4px;
border-radius: 4px;
}

Et ..c'est tout .

a++

[FANCH 56]

Bonjour de bonne heure et de bonne hmeur

Le bouton jaune reste en bas à gauche

[Invité]

Re,
actualise ton navigateur FANCH ,



Edit pour le menu des Widgets:

Code:

#content-container #content #left
{
position:fixed;
display:block;
top:0;
right:0;
height:100%;
width:200px;
overflow-y:scroll;

}

a++

[FANCH 56]

Le panneau est bien passé à droite, mais le bouton a dispparu