full background + problème css

ddd
Eléphanteau du PHP | 13 Messages

20 oct. 2011, 15:10

bonjour à tous,
J'ai un petit soucis avec mes images de fond en full background, celles-ci s'adaptent à la page que lorsqu'on redimensionne la fenètre du navigateur.

Lors du téléchargement de la page ou de son rafraichissement, elles ne se placent pas bien.

voir exemple:
http://www.treesign.eu/index.php?/theatre/

J'ai vérifer le pluging .php et .js tout semble normal, le problème vient donc du code css (je pense).
Voici le code que j'utilise:

Code : Tout sélectionner

#the-background { position:fixed; width:100%; height:100%; top:0px; left:0px; opacity: 0.5; overflow: hidden; z-index:-3; }
Lorsque que je change #the-background par #the-background img, l'image s'adapte à la fenètre mais elle est déformée (étirée)

Code : Tout sélectionner

#the-background img{ position:fixed; width:100%; height:100%; top:0px; left:0px; opacity: 0.5; overflow: hidden; z-index:-3; }
Quelqu'un aurait-il une idée ? une solution ?
Merci pour vos réponses futures !!

ViPHP
xTG
ViPHP | 7331 Messages

20 oct. 2011, 16:03

Aucun souci sous Firefox 7.0 pour ma part. :)
Quel navigateur utilises-tu ?

Mammouth du PHP | 568 Messages

20 oct. 2011, 16:33

J'ai le même problème que toi, l'image est dans le coin haut gauche et s'applique à toute la page au redimensionnement de la fenêtre.

En même temps ton javascript crash:

Code : Tout sélectionner

jQuery.fx.step is undefined jQuery.fx.step[attr] = function(fx){
et

Code : Tout sélectionner

unterminated string literal
EDIT: regarde en fin de script JS, il y a un truc bizarre

Code : Tout sélectionner

});})(); "
RE EDIT: impressionnant le nombre de script js que tu charge dans ta page, tu devrais re vérifier tout ça je pense (triple chargement de jquery - et en version différente-, etc...), et mise à part ton carousel, je ne vois pas l'utilité de tous ces fichiers

Code : Tout sélectionner

<script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/cookie.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.effects.core.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.supersized.2.0.js'></script> <!-- début script javascript slideviewer--> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.slideviewer.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.slideviewer-no_caption.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.easing.1.3.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.cycle.all.js'></script> <!-- fin script javascript slideviewer--> <!-- début script javascript full background --> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/full_background.js'></script> <!-- fin script javascript full background --> <!-- debut liens effet opacité --> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery-1.3.2.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery-1.2.6.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.effects.core.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.dwFadingLinks.js'></script> <!-- fin liens effet opacité --> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/cookie.js'></script> <!-- lien js déroulement menu -expandingMenus --> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/expandingMenus.js'></script> <script type='text/javascript' src='http://www.treesign.eu/ndxz-studio/site/js/jquery.dwFadingLinks.js'></script> <!-- fin lien js déroulement menu -expandingMenus --> <!-- jQuery library --> <script type="text/javascript" src="http://www.treesign.eu/ndxz-studio/site/js/jcarousel/jquery-1.4.2.min.js"></script> <!-- jCarousel library --> <script type="text/javascript" src="http://www.treesign.eu/ndxz-studio/site/js/jcarousel/jquery.jcarousel.min.js"></script>

ddd
Eléphanteau du PHP | 13 Messages

21 oct. 2011, 00:09

Merci pour cette rapidité !
le ( " ) dans le pluging jquery-1.2.6.js à été supprimer;
mais le problème reste le même

voici le script .js et .php du full background peut-être qu'ils éclaireront quelqu'un.
/**
* Full Size Backgrounded
* 
* @version 1.0
* @author Vaska 
*/
function bg_img_resize() 
{
    var w = $(window).width();
    var h = $(window).height();
    var iw = $('#the-background img').attr('width');
    var ih = $('#the-background img').attr('height');
    var rw = iw / ih;
    var rh = ih / iw;
    var sc = h * rw;
    if (sc >= w) {
        nh = h;
        nw = sc;
    } else {
        sc = w * rh;
        nh = sc;
        nw = w;
    }

    $('#the-background img').css({height: nh, width: nw});
}

$(document).ready(function(){ bg_img_resize(); });
$(window).resize(function(){ bg_img_resize(); });

$(window).resize(function(){ 
    bg_img_resize(); 
    $('#the-background').css({ 'top' : 0, 'left' : 0 }); 
});
$(window).scroll(function(){ 
    bg_img_resize(); 
    $('#the-background').css({ 'top' : 0, 'left' : 0 }); 
});
et le code php:
<?php if (!defined('SITE')) exit('No direct script access allowed');

/**
* Full Size Backgrounded
* 
* @version 1.0
* @author Vaska 
*/
function full_background()
{
	// we'll just get it from the page background image
	global $rs;
		if ($rs['bgimg'] != '') {
		// get the dimensions
		$size = getimagesize(DIRNAME . '/files/' . $rs['bgimg']);
		return "<img src='" . BASEURL . "/files/$rs[bgimg]' width='$size[0]' height='$size[1]' alt=''/>";
		}
	return;
}

?>
pour le reste des scripts .js, je vais devoir éclaircir tout ça !

ddd
Eléphanteau du PHP | 13 Messages

21 oct. 2011, 13:08

le problème a été résolu en supprimant les doublons jquery.js et en téléchargant la dernière version
(version: http://jquery.com/)

Merci pour ton aide !

Mammouth du PHP | 568 Messages

21 oct. 2011, 14:00

le problème a été résolu en supprimant les doublons jquery.js et en téléchargant la dernière version
(version: http://jquery.com/)

Merci pour ton aide !
Non, c'est pas fini...

Ton image s'étire bien, effectivement.

par contre tu a encore une erreur JS

Code : Tout sélectionner

expandingAllMenus is not defined
Et ça plante ici:

Code : Tout sélectionner

<!-- jCarousel skin stylesheet --> <link rel='stylesheet' href='http://www.treesign.eu/ndxz-studio/site/js/jcarousel/skins/ie7/skin.css' type='text/css' /> <script type='text/javascript'> path = 'http://www.treesign.eu/files/gimgs/'; $(document).ready(function() { setTimeout('move_up()', 1); expandingAllMenus(); }); </script>
Et tu as encore trop de fichier JS à mon goût.

Un bon nettoyage s'impose.

ddd
Eléphanteau du PHP | 13 Messages

21 oct. 2011, 14:18

Salut,

Quelle est le problème avec l'expandingMenu ?
Pour le jcaroussel, je n'arrive pas à le faire fonctionner, si tu as des indications à donner sur ce sujet je suis intéressé !

Pour le reste des scripts, il y en à trop, c'est sûr, certains fonctionnent avec d'autres plugings, et d'autres sont inutiles, je vais vérifier quels sont les scripts qui sont appellés par les pluging.php et supprimer les autres.

bonne journée

Mammouth du PHP | 568 Messages

21 oct. 2011, 14:21

Salut,

Quelle est le problème avec l'expandingMenu ?
Pour le jcaroussel, je n'arrive pas à le faire fonctionner, si tu as des indications à donner sur ce sujet je suis intéressé !

Pour le reste des scripts, il y en à trop, c'est sûr, certains fonctionnent avec d'autres plugings, et d'autres sont inutiles, je vais vérifier quels sont les scripts qui sont appellés par les pluging.php et supprimer les autres.

bonne journée
Une seul réponse pour toi, Firebug est ton ami.