Bonjour !
Premier message sur le forum !
Je suis actuellement en stage pour faire un site web sauf que dans mon entreprise je suis le seul a maîtriser un le langage web.
J'ai fais une page avec plusieurs onglet grâce à l'outil Tabulous.JS ce qui me donne un résultat comme ceci :
Les différents onglets sont composés de formulaire. Le problème est que (je crois avoir compris) que mes différents formulaire se superpose du premier au dernier (donc le 3 éme est tout en haut). Je ne peux alors saisir ni dans le deuxième ni dans le troisième.
La solution que j'ai trouvé via mes recherche serait soit de mettre un z-index de 2 pour celle active et un z-index de 1 pour celle non active. Cependant n'ayant aucune connaissance en JS je n'arrive pas a parvenir a mon résultat final.
Je précise que en mettant un z-index de 2 sur mon premier formulaire (onglet 1) dans mon CSS cela fonctionne TRES bien pour le premier formulaire (cependant les deux autres ne sont donc plus remplissable).
Je vous donne le code css si jamais vous pouvez m'indiquer ou mettre ces deux propriétés !
Si jamais il vous manque des informations ou vous avez des questions je serais ravis de vous compléter (c'est la première fois que je poste sur un forum).
Merci à vous
Premier message sur le forum !
Je suis actuellement en stage pour faire un site web sauf que dans mon entreprise je suis le seul a maîtriser un le langage web.
J'ai fais une page avec plusieurs onglet grâce à l'outil Tabulous.JS ce qui me donne un résultat comme ceci :
Les différents onglets sont composés de formulaire. Le problème est que (je crois avoir compris) que mes différents formulaire se superpose du premier au dernier (donc le 3 éme est tout en haut). Je ne peux alors saisir ni dans le deuxième ni dans le troisième.
La solution que j'ai trouvé via mes recherche serait soit de mettre un z-index de 2 pour celle active et un z-index de 1 pour celle non active. Cependant n'ayant aucune connaissance en JS je n'arrive pas a parvenir a mon résultat final.
Je précise que en mettant un z-index de 2 sur mon premier formulaire (onglet 1) dans mon CSS cela fonctionne TRES bien pour le premier formulaire (cependant les deux autres ne sont donc plus remplissable).
Je vous donne le code css si jamais vous pouvez m'indiquer ou mettre ces deux propriétés !
/*!
* strength.js
* Original author: @aaronlumsden
* Further changes, comments: @aaronlumsden
* Licensed under the MIT license
*/
;(function ( $, window, document, undefined ) {
var pluginName = "tabulous",
defaults = {
effect: 'scale'
};
// $('<style>body { background-color: red; color: white; }</style>').appendTo('head');
function Plugin( element, options ) {
this.element = element;
this.$elem = $(this.element);
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var links = this.$elem.find('a');
var firstchild = this.$elem.find('li:first-child').find('a');
var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');
if (this.options.effect == 'scale') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
} else if (this.options.effect == 'slideLeft') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
} else if (this.options.effect == 'scaleUp') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
} else if (this.options.effect == 'flip') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
}
var firstdiv = this.$elem.find('#tabs_container');
var firstdivheight = firstdiv.find('div:first').height();
var alldivs = this.$elem.find('div:first').find('div');
alldivs.css({'position': 'absolute','top':'40px'});
firstdiv.css('height',firstdivheight+'px');
firstchild.addClass('tabulous_active');
links.bind('click', {myOptions: this.options}, function(e) {
e.preventDefault();
var $options = e.data.myOptions;
var effect = $options.effect;
var mythis = $(this);
var thisform = mythis.parent().parent().parent();
var thislink = mythis.attr('href');
firstdiv.addClass('transition');
links.removeClass('tabulous_active');
mythis.addClass('tabulous_active');
thisdivwidth = thisform.find('div'+thislink).height();
if (effect == 'scale') {
alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
} else if (effect == 'slideLeft') {
alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
} else if (effect == 'scaleUp') {
alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
} else if (effect == 'flip') {
alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
}
firstdiv.css('height',thisdivwidth+'px');
});
},
yourOtherFunction: function(el, options) {
// some logic
}
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
new Plugin( this, options );
});
};
})( jQuery, window, document );
Si jamais il vous manque des informations ou vous avez des questions je serais ravis de vous compléter (c'est la première fois que je poste sur un forum).
Merci à vous
).