Bonjour à tous,
J'ai récemment mis en ligne une mise à jour pour mon portfolio en ligne, visible à cette adresse.
A priori, tout est opérationnel (j'ai testé jusqu'en 1024*768, pour les versions récentes de Firefox, Chrome et IE), mais je viens de remarquer un bug, dont je n'arrive pas à trouver l'origine... Etant encore débutant en jQuery, je me tourne donc vers la communauté d'Alsa, pour savoir si quelqu'un pourrait m'aider à trouver une solution
En bref, lorsque l'on navigue dans les pages de références (pages 'single'), chacune permet de voir les visuels sous forme de slideshow, dont la largeur de sous-conteneur est calculée via jQuery, en fonction du nombre d'enfants.
Le problème, à l'heure actuelle, est que par moments ce script ne semble plus fonctionner, d'une page à l'autre ! J'imagine donc qu'il doit y avoir un problème dans mon code js... mais encore une fois, je ne suis pas encore assez aguerri pour pouvoir le résoudre seul, je pense
Voici donc le code concerné (en dessous, le js complet) :
Il s'agit peut-être de l'ordre dans lequel sont appelés les différents scripts... Malheureusement, après quelques essais, je ne parviens pas à trouver de solution.
Merci donc par avance, à celles/ceux qui pourront m'aider à 'réparer' mon js !
Modifié par soykje (24 May 2013 - 21:35)
J'ai récemment mis en ligne une mise à jour pour mon portfolio en ligne, visible à cette adresse.
A priori, tout est opérationnel (j'ai testé jusqu'en 1024*768, pour les versions récentes de Firefox, Chrome et IE), mais je viens de remarquer un bug, dont je n'arrive pas à trouver l'origine... Etant encore débutant en jQuery, je me tourne donc vers la communauté d'Alsa, pour savoir si quelqu'un pourrait m'aider à trouver une solution
En bref, lorsque l'on navigue dans les pages de références (pages 'single'), chacune permet de voir les visuels sous forme de slideshow, dont la largeur de sous-conteneur est calculée via jQuery, en fonction du nombre d'enfants.
Le problème, à l'heure actuelle, est que par moments ce script ne semble plus fonctionner, d'une page à l'autre ! J'imagine donc qu'il doit y avoir un problème dans mon code js... mais encore une fois, je ne suis pas encore assez aguerri pour pouvoir le résoudre seul, je pense
Voici donc le code concerné (en dessous, le js complet) :
var length = 0;
$('.container > .entry-content p').each(function(){
length += $(this).outerWidth(true);
});
$('.container > .entry-content').css('width', length);
$('article .container').scrollTo('0px', 600, {axis:'x'});
$('.slides a.nextnav').click(function(){
$('article .container').scrollTo('+=430px', 600, {axis:'x'});
});
$('.slides a.prevnav').click(function(){
$('article .container').scrollTo('-=430px', 600, {axis:'x'});
});$(document).ready(function(){
// Responsive
jResponsive = function(){
var columnWidth = $('p.def-3').width();
if(columnWidth <= 215){
$('p.def-1 > span.txt').replaceWith('<span class="txt">Le <em>mot</em> ne veut absolument rien dire. C\'est un résumé, plus qu\'autre chose, d\'un certain état d\'esprit : opposé à l\'apparence comme fin en soi, pour privilégier les intentions</span>');
$('p.def-2').replaceWith('<p class="def-2">premières. Une condition nécessaire à une expression plus juste.<br/>Une idée est un projet, un potentiel créatif, qui n\'existe que par l\'objet qui lui correspond (et inversement).<br/>A l\'inverse du mot écrit qui se dévoile (sans pour autant nous en dire</p>');
$('p.def-3').replaceWith('<p class="def-3">davantage quant à sa signification véritable...), la forme rendue étrangère au langage parlé, devient ce qu\'elle est : <em>un signe</em>, transmettant simplement un message, une idée.<br/><em>Soykje</em> ne veut absolument rien dire, et c\'est exactement là tout son sens.</p>');
}else if(columnWidth <= 225){
$('p.def-2').replaceWith('<p class="def-2">Une condition nécessaire à une expression plus juste.<br/>Une idée est un projet, un potentiel créatif, qui n\'existe que par l\'objet qui lui correspond (et inversement).<br/>A l\'inverse du mot écrit qui se dévoile (sans pour autant nous en dire</p>');
$('p.def-3').replaceWith('<p class="def-3">davantage quant à sa signification véritable...), la forme rendue étrangère au langage parlé, devient ce qu\'elle est : <em>un signe</em>, transmettant simplement un message, une idée.<br/><em>Soykje</em> ne veut absolument rien dire, et c\'est exactement là tout son sens.</p>');
}else if(columnWidth > 270){
$('p.def-1 > span.txt').replaceWith('<span class="txt">Le <em>mot</em> ne veut absolument rien dire. C\'est un résumé, plus qu\'autre chose, d\'un certain état d\'esprit : opposé à l\'apparence comme fin en soi,</span>');
$('p.def-2').replaceWith('<p class="def-2">pour privilégier les intentions premières. Une condition nécessaire à une expression plus juste. Une idée est un projet, un potentiel créatif, qui n\'existe que par l\'objet qui lui correspond (et inversement).<br/>A l\'inverse du mot écrit qui se dévoile (sans pour autant nous en</p>');
$('p.def-3').replaceWith('<p class="def-3">dire davantage quant à sa signification véritable...), la forme rendue étrangère au langage parlé, devient ce qu\'elle est : <em>un signe</em>, transmettant simplement un message, une idée.<br/><em>Soykje</em> ne veut absolument rien dire, et c\'est exactement là tout son sens.</p>');
$('p.about span.nom').replaceWith('<span>J Paul Lescouzères,</span>');
}else{
$('p.def-1 > span.txt').replaceWith('<span class="txt">Le <em>mot</em> ne veut absolument rien dire. C\'est un résumé, plus qu\'autre chose, d\'un certain état d\'esprit : opposé à l\'apparence comme fin en soi, pour privilégier les intentions premières.</span>');
$('p.def-2').replaceWith('<p class="def-2">Une condition nécessaire à une expression plus juste.<br/>Une idée est un projet, un potentiel créatif, qui n\'existe que par l\'objet qui lui correspond (et inversement).<br/>A l\'inverse du mot écrit qui se dévoile (sans pour autant nous en dire davantage quant</p>');
$('p.def-3').replaceWith('<p class="def-3">à sa signification véritable...), la forme rendue étrangère au langage parlé, devient ce qu\'elle est : <em>un signe</em>, transmettant simplement un message, une idée.<br/><br/><em>Soykje</em> ne veut absolument rien dire, et c\'est exactement là tout son sens.</p>');
$('p.about span.nom').replaceWith('<span>Jean-Paul Lescouzères,</span>');
}
};
jResponsive();
// Responsive résolutions < 1440*900
qResponsive = function(){
var win2height = $(window).height();
if(win2height < 786 || $(window).width() < 1215){
$('#edito p span:not(.premiermot)').replaceWith('<span> je suis graphiste indépendant. J\'aime l\'image, et par-dessus tout les intentions. Le graphisme ne se limite pas à un support : il est — doit être — une volonté de (se) montrer, de s\'exprimer. </span>');
$('p.def-1, p.def-2, p.def-3').hide();
$('#contact .aword p').replaceWith('<p><span class="premiermot">Vous avez un projet ?</span> N\’hésitez pas à me contacter, et nous en parlerons.</p>');
}else{
$('#edito p span:not(.premiermot)').replaceWith('<span> je suis graphiste indépendant. J\'aime l\'image, et par-dessus tout les intentions : ce sont elles qui permettent à un projet de prendre forme, qu\'il s\'agisse d\'un simple visuel, ou d\’une interface complexe. Le graphisme ne se limite pas à un support : il est — doit être — une volonté de (se) montrer, de s\'exprimer. </span>');
$('p.def-1, p.def-2, p.def-3').show();
$('#contact .aword p').replaceWith('<p><span class="premiermot">Vous avez un projet ?</span> N\’hésitez pas à me contacter, et nous en parlerons. Je suis toujours heureux de relever les nouveaux défis, et d\'accompagner les personnes qui le souhaitent dans leur projet graphique, qu\'il soit web ou papier.</p>');
}
};
qResponsive();
// Hauteur header overwrite (pour scroll)
Headeroverwrite = function(){
var contenuHeight = $('#header-content').children().height();
$('header#main').css({height:contenuHeight});
$('nav#header-nav').css({top:contenuHeight-50});
if(contenuHeight >= 165){
$('section#services').children().css({height:contenuHeight});
}else{
$('section#services').children().css({height:165});
};
};
Headeroverwrite();
// On Resize
$(window).resize(function(){
jResponsive();
qResponsive();
Headeroverwrite();
});
// Nav header
$('nav#header-nav ul li p').hide();
$('nav#header-nav ul li').mouseenter(function() {
$(this).children('p').animate({width: 'toggle'}, 300);
}).mouseleave(function(){
$(this).children('p').animate({width: 'toggle'}, 300);
});
// Scroll header
$('header#main').scrollTo('#edito', 900, {axis:'x'});
$('nav#header-nav li.pannel-1').click(function(){
$('header#main').scrollTo('#edito', 900, {axis:'x'});
});
$('nav#header-nav li.pannel-2').click(function(){
$('header#main').scrollTo('#apropos', 900, {axis:'x'});
});
$('nav#header-nav li.pannel-3').click(function(){
$('header#main').scrollTo('#contact', 900, {axis:'x'});
});
// Services
$('section#services hgroup').hide();
$('section#services .cell').mouseenter(function(){
$(this).children('hgroup').animate({height: 'toggle'}, 200);
}).mouseleave(function(){
$(this).children('hgroup').animate({height: 'toggle'}, 200);
});
// Articles index
$('section#content article .entry-footer').hide();
$('section#content article a').mouseenter(function(){
$(this).children('.entry-footer').animate({height: 'toggle'}, 400);
}).mouseleave(function(){
$(this).children('.entry-footer').animate({height: 'toggle'}, 600);
});
// Scroll des images(single)
var length = 0;
$('.container > .entry-content p').each(function(){
length += $(this).outerWidth(true);
});
$('.container > .entry-content').css('width', length);
$('article .container').scrollTo('0px', 600, {axis:'x'});
$('.slides a.nextnav').click(function(){
$('article .container').scrollTo('+=430px', 600, {axis:'x'});
});
$('.slides a.prevnav').click(function(){
$('article .container').scrollTo('-=430px', 600, {axis:'x'});
});
// Retour haut de page
$('a.returnTop').hide();
var winHeight = $(window).height();
$(window).scroll(function(){
if($(this).scrollTop() > (winHeight / 4)) {
$('a.returnTop').fadeIn();
}else{
$('a.returnTop').fadeOut();
};
});
$('a.returnTop').click(function(i){
i.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 300);
});
// Formulaire de contact
$('input, textarea').placeholder();
$('form#cform').submit(function() {
$('form#cform .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if($.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$('span.error').remove();
$(this).parent().append('<span class="error">Veuillez compléter les champs requis.</span>');
$(this).addClass('inputError');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test($.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$('span.error').remove();
$(this).parent().append('<span class="error">Veuillez compléter les champs requis.</span>');
$(this).addClass('inputError');
hasError = true;
}
}
});
if(!hasError) {
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('p.succes').animate({width: 'toggle'}, 175);
});
}
return false;
});
});Il s'agit peut-être de l'ordre dans lequel sont appelés les différents scripts... Malheureusement, après quelques essais, je ne parviens pas à trouver de solution.
Merci donc par avance, à celles/ceux qui pourront m'aider à 'réparer' mon js !
Modifié par soykje (24 May 2013 - 21:35)
)
J'ai malgré tout intégré le calcul dans le resize, par acquis de conscience 
