[PhpBB2] Installe rmarque ligne

[canelle]

• Version du forum :
  PhpBB2
• Templates modifiés :
  -
• Navigateur :
  Chrome

Bonjour
Je possède un forum de graphisme
avec beaucoup de cours et de tutoriels
je voudrais pour la facilité de mes membres
installer un marque ligne pour bien suivre
un tuto.
https://i.servimg.com/u/f35/19/38/25/34/fleche10.gif
Est il possible d'avoir ça?
Merci de votre aide

[Milouze14Fondateur]

Coucou Martine,

cela doit être réalisable mais à quel endroit désires tu déposer cette flèche ?

[Neptunia]

Coucou Martine et Philippe


-> Cherche Sript pour déplacer un objet (stylo ou flèche) dans un cours

[canelle]

Bonjour Milouze
Soit en script à placer
soit un code que je placerais au dessus
du tuto et que mes membres pourraient déplacer
 Merci Neptunia, je vais voir.

[Splash]

Hi,
Sur le lien donné par Hélène le script est celui-ci à placer sur les sujets :

Code:

(function($) {
    $.fn.drags = function(opt) {
 
        opt = $.extend({handle:"",cursor:"move"}, opt);
 
        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }
 
        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });
 
    }
})(jQuery);
 
$( document ).ready(function() {
$('.post-options:first').before('<div id="myDiv" style="margin-top:8px;"><img src="http://www.icone-png.com/png/22/21757.png" /></div>');
$('#myDiv').drags();
 
});

Sur cette ligne tu pourras changer l'image :

Code:

src="http://www.icone-png.com/png/22/21757.png"

Tu as un rendu de l'astuce ici :
https://phpbb2world.forumactif.com/t29-image-de-fond-de-forum-qui-s-adapte-a-toutes-les-resolution-d-ecran

[canelle]

ok, merci je vais voir et je vous dis
le résultat merci pour tout et surtout
de la rapidité de vos réponses.

[canelle]

Voilà je viens de placer ce script mais j'ai un probléme
La flèche se met en haut à droite devant les boutons
de modération du coup maintenant le 1er post est plus centré
il est complètement que la gauche...au secours...!

[Splash]

Dans le script tu a ceci :

Code:

div id="myDiv" style="margin-top:8px;"

Modifie selon tes besoins

Et modifie ceci :

Code:

$('.post-options:first').before

Par ceci :

Code:

$('.post-options:first').after

Le bouton sera positionné après les boutons de modération

[canelle]

ok tout est bien en place après les boutons
le 1er que tu donnes, qu'il faut modifier ça change quoi?
merci de ton aide.

[Splash]

C'est la position du bouton par rapport au haut

[canelle]

Ok!donc si je veux le positionner complètement
à gauche c'est possible? et que mettre comme chiffre?
Merci.

[Splash]

Oui tu peux bouger ce bouton sur la gauche avec un margin-left :

Code:

<div id="myDiv" style="margin-top:2px;margin-left:10px;">

[canelle]

Que je rajoute devant le script?

[Splash]

La ligne que je poste au-dessus est déjà dans le script, j'ai juste ajouté le margin-left
Cette ligne se trouve en fin de script juste après ceci :

Code:

$( document ).ready(function() {

[canelle]

ça ne la déplace pas elle est toujours à droite
après les boutons! j'espère n'avoir rien effacé.

[Splash]

Voici le script tel qu'il est sur mon forum test, supprime celui que tu as placé pour le remplacer par celui-ci :

Code:

(function($) {
    $.fn.drags = function(opt) {
 
        opt = $.extend({handle:"",cursor:"move"}, opt);
 
        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }
 
        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });
 
    }
})(jQuery);
 
$( document ).ready(function() {
  $('.post-options:first').after('<div id="myDiv" style="margin-top:2px;margin-left:10px;"><img src="https://i.servimg.com/u/f28/19/98/40/78/i_fold14.png" /></div>');
$('#myDiv').drags();
 
});

[canelle]

Merci mais il est toujours à la même place lol!
il s'incruste 

[Splash]

Comment ça toujours à la même place ?
Tu as une capture d'écran à fournir vu que ton forum est verrouillé ?

[canelle]

oui voilà elle est à droite

https://i.servimg.com/u/f35/19/38/25/34/captur68.jpg

[Splash]

C'est parfait ça, non ?

[canelle]

je le voudrais à gauche

[Splash]

Hum... c'est un bouton que l'on place ou l'on veut pour une aide à la lecture, son positionnement initiale n'a guère d'importance. À chaque fois que la page sera actualisée ce bouton reprendra sa place initiale

[Splash]

Ce placement initial te conviendrait ?



https://phpbb2world.forumactif.com/t29-image-de-fond-de-forum-qui-s-adapte-a-toutes-les-resolution-d-ecran

[canelle]

Bonjour
Oui je vais garder le 1er ,merci beaucoup pour ton aide
Au plaisir
Bonne journée.

[Splash]

Au cas ou, voici le script pour le placement sous les infos de profil :

Code:

(function($) {
    $.fn.drags = function(opt) {
 
        opt = $.extend({handle:"",cursor:"move"}, opt);
 
        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }
 
        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });
 
    }
})(jQuery);
 
$( document ).ready(function() {
  $('.postdetails:first').after('<div id="myDiv" style="margin-top:12px;margin-left:60px;"><img src="https://i.servimg.com/u/f34/19/98/45/29/right10.png" /></div>');
$('#myDiv').drags();
 
});

Bonne journée à toi