Mettre mon panneau coulissant à droite.
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Mettre mon panneau coulissant à droite.
Bonjour tout le monde!
J'ai ajouté un panneau coulissant sur mon forum à l'aide de ce sujet (https://forum.forumactif.com/t314153-panneaux-coullisant-qui-ne-fonctionne-pas) mais je voudrais savoir comment le mettre à droite comme l'indique mon titre! J'ai essayé de changer plusieurs mais cela ne marchait pas >< Que dois-je changer dans mon js ou autre code?
Merci d'avance pour vos réponses! (:
Edit > Et aussi, je voudrais qu'il soit fixe! C'est-à-dire qu'il s'affiche toujours lorsqu'on descend.
J'ai ajouté un panneau coulissant sur mon forum à l'aide de ce sujet (https://forum.forumactif.com/t314153-panneaux-coullisant-qui-ne-fonctionne-pas) mais je voudrais savoir comment le mettre à droite comme l'indique mon titre! J'ai essayé de changer plusieurs mais cela ne marchait pas >< Que dois-je changer dans mon js ou autre code?
Merci d'avance pour vos réponses! (:
Edit > Et aussi, je voudrais qu'il soit fixe! C'est-à-dire qu'il s'affiche toujours lorsqu'on descend.
Dernière édition par Stanislava le Mar 13 Mar 2012 - 11:55, édité 1 fois
Re: Mettre mon panneau coulissant à droite.
Bonjour,
Peux tu fournir les codes HTML et CSS que tu as pour ce panneau ?
Peux tu fournir les codes HTML et CSS que tu as pour ce panneau ?
Re: Mettre mon panneau coulissant à droite.
Bien sûr!
Le premier code Javascript:
Le deuxième code Javascript:
Le code css:
Le code html sur la page d'acceuil:
J'ai réussi à changer le js pour que le panneau glisse lorsque je passe le curseur sur l'image.
Merci de votre aide o/
Le premier code Javascript:
- Code:
/*
tabSlideOUt v1.3
By William Paoli: http://wpaoli.building58.com
To use you must have an image ready to go as your tab
Make sure to pass in at minimum the path to the image and its dimensions:
example:
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab -doesnt have to be an anchor
pathToTabImage: 'images/contact_tab.gif', //relative path to the image for the tab
imageHeight: '133px', //height of tab image
imageWidth: '44px', //width of tab image
});
or you can leave out these options
and set the image properties using css
*/
(function($){
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: 'left',
topPos: '200px',
leftPos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
onLoadSlideOut: false
}, callerSettings||{});
settings.tabHandle = $(settings.tabHandle);
var obj = this;
if (settings.fixedPosition === true) {
settings.positioning = 'fixed';
} else {
settings.positioning = 'absolute';
}
//ie6 doesn't do well with the fixed option
if (document.all && !window.opera && !window.XMLHttpRequest) {
settings.positioning = 'absolute';
}
//set initial tabHandle css
if (settings.pathToTabImage != null) {
settings.tabHandle.css({
'background' : 'url('+settings.pathToTabImage+') no-repeat',
'width' : settings.imageWidth,
'height': settings.imageHeight
});
}
settings.tabHandle.css({
'display': 'block',
'textIndent' : '-99999px',
'outline' : 'none',
'position' : 'absolute'
});
obj.css({
'line-height' : '1',
'position' : settings.positioning
});
var properties = {
containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
};
//set calculated css
if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
obj.css({'left' : settings.leftPos});
settings.tabHandle.css({'right' : 0});
}
if(settings.tabLocation === 'top') {
obj.css({'top' : '-' + properties.containerHeight});
settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
}
if(settings.tabLocation === 'bottom') {
obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
settings.tabHandle.css({'top' : '-' + properties.tabHeight});
}
if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
obj.css({
'height' : properties.containerHeight,
'top' : settings.topPos
});
settings.tabHandle.css({'top' : 0});
}
if(settings.tabLocation === 'left') {
obj.css({ 'left': '-' + properties.containerWidth});
settings.tabHandle.css({'right' : '-' + properties.tabWidth});
}
if(settings.tabLocation === 'right') {
obj.css({ 'right': '-' + properties.containerWidth});
settings.tabHandle.css({'left' : '-' + properties.tabWidth});
$('html').css('overflow-x', 'hidden');
}
//functions for animation events
settings.tabHandle.click(function(event){
event.preventDefault();
});
var slideIn = function() {
if (settings.tabLocation === 'top') {
obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'left') {
obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'right') {
obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'bottom') {
obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
}
};
var slideOut = function() {
if (settings.tabLocation == 'top') {
obj.animate({top:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'left') {
obj.animate({left:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'right') {
obj.animate({right:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'bottom') {
obj.animate({bottom:'-3px'}, settings.speed).addClass('open');
}
};
var clickScreenToClose = function() {
obj.click(function(event){
event.stopPropagation();
});
$(document).click(function(){
slideIn();
});
};
var clickAction = function(){
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
} else {
slideOut();
}
});
clickScreenToClose();
};
var hoverAction = function(){
obj.hover(
function(){
slideOut();
},
function(){
slideIn();
});
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
}
});
clickScreenToClose();
};
var slideOutOnLoad = function(){
slideIn();
setTimeout(slideOut, 500);
};
//choose which type of action to bind
if (settings.action === 'click') {
clickAction();
}
if (settings.action === 'hover') {
hoverAction();
}
if (settings.onLoadSlideOut) {
slideOutOnLoad();
};
};
})(jQuery);
Le deuxième code Javascript:
- Code:
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://img15.hostingpics.net/pics/803858paresseux.png', //path to the image for the tab //Optionally can be set using css
imageHeight: '200px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'hover', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
rightPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
Le code css:
- Code:
.slide-out-div {
padding: 20px;
width: 250px;
background-image: url("http://www.heberger-image.fr/data/images/97684_ta.jpeg");
moz-border-radius: 16px 16px 16px 16px;
border: 2px dashed #EA001B;
border-radius: 20px 20px 20px 20px;
text-shadow: 1px 1px 2px black;
}
Le code html sur la page d'acceuil:
- Code:
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
J'ai réussi à changer le js pour que le panneau glisse lorsque je passe le curseur sur l'image.
Merci de votre aide o/
Re: Mettre mon panneau coulissant à droite.
Je ne suis pas très au fait en matière de JS, mais déjà dans le premier JS, Toutefois, essaie de modifier :
toutes les propriétés left en right,
celles right en left des deux JS.
Pour ce faire :
- Tout en ayant ton JS du forum dans un onglet (ou fenêtre), ici effectue une recherche (Ctrl+F) avec le mot left et corrige en right dans celui de ton forum.
- Lis bien le code, car plusieurs fois tu trouveras plus loin le right qu'il faudra aussi inverser avec left.
Je te laisse faire car c'est exactement ce que j'aurais fait si j'avais installé ce panneau sur mon forum.
Dans le CSS je ne vois rien correspondant au positionnement, sauf que l'on ne met de guillemets autour du lien-image dans les parenthèsea en CSS, on ne met rien, juste les parenthèses.
Le HTML me parait correct.
Je reste à "l'écoute" pour savoir si ça a marché et le cas échéant, je verrai pour l'installer sur mon FT (qui en a déjà un en place).
toutes les propriétés left en right,
celles right en left des deux JS.
Pour ce faire :
- Tout en ayant ton JS du forum dans un onglet (ou fenêtre), ici effectue une recherche (Ctrl+F) avec le mot left et corrige en right dans celui de ton forum.
- Lis bien le code, car plusieurs fois tu trouveras plus loin le right qu'il faudra aussi inverser avec left.
Je te laisse faire car c'est exactement ce que j'aurais fait si j'avais installé ce panneau sur mon forum.
Dans le CSS je ne vois rien correspondant au positionnement, sauf que l'on ne met de guillemets autour du lien-image dans les parenthèsea en CSS, on ne met rien, juste les parenthèses.
Le HTML me parait correct.
Je reste à "l'écoute" pour savoir si ça a marché et le cas échéant, je verrai pour l'installer sur mon FT (qui en a déjà un en place).
Re: Mettre mon panneau coulissant à droite.
EDIT > pardon, j'ai réussi xD Il fallait juste modifier deux left dans le premier et un autre dans le second javascript
Comme ceci:
- Code:
(function($){
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: '[color=red]right[/color]',
topPos: '200px',
[color=red]right[/color]Pos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
- Code:
tabLocation: '[color=red]right[/color]', //side of screen where tab lives, top, right, bottom, or left
J'ai changé ce qu'il fallait en rouge!
Re: Mettre mon panneau coulissant à droite.
Stanislava a écrit:Malheureusement, le panneau reste toujours à gauche >.<
EDIT > pardon, j'ai réussi xD Il fallait juste modifier deux left dans le premier et un autre dans le second javascript
Comme ceci:
- Code:
(function($){
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: '[color=red]right[/color]',
topPos: '200px',
[color=red]right[/color]Pos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
- Code:
tabLocation: '[color=red]right[/color]', //side of screen where tab lives, top, right, bottom, or left
J'ai changé ce qu'il fallait en rouge!
Merci pour le conseil, je n'y avais pas songé :3 Je mets le sujet en résolu!
Sujets similaires
» Panneau coulissant à droite
» panneau latérale coulissant ( option droite et gauche et plusieurs )
» comment mettre des photo sur un panneau coulissant
» Mettre un second panneau latéral coulissant sur le forum
» Panneau latéral
» panneau latérale coulissant ( option droite et gauche et plusieurs )
» comment mettre des photo sur un panneau coulissant
» Mettre un second panneau latéral coulissant sur le forum
» Panneau latéral
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum