Bonjour à tous !
Je cherche à créer un site avec une ouverture, c'est à dire un effet de rideau qui s'ouvre lorsqu'on clique sur le logo (pour illustrer mon idée http://buildinternet.com/live/curtains/), uniquement sur la page d'accueil (genre de slide qui affiche en dessous le site). J'ai pu créer ce que je voulais, tout fonctionne parfaitement en html mais je n'arrive malheureusement pas à l'intégrer sur Joomla, rien ne se passe lorsque je clique sur mon logo...
La console m'affiche des erreurs tels que
Uncaught TypeError: Object #<Object> has no method 'tooltip' (index):29
Uncaught TypeError: Object #<Object> has no method 'on' tabs-state.js:16
Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'stop'
Et n'ayant pas des connaissances très évoluées en javascript, je dois avouer que je suis perdu et j'ai besoin d'aide.
Voici mon code si besoin est :
Y aurait-il une âme charitable qui puisse m'aider ou m'aiguiller ? Merci d'avance pour vos réponses
Je cherche à créer un site avec une ouverture, c'est à dire un effet de rideau qui s'ouvre lorsqu'on clique sur le logo (pour illustrer mon idée http://buildinternet.com/live/curtains/), uniquement sur la page d'accueil (genre de slide qui affiche en dessous le site). J'ai pu créer ce que je voulais, tout fonctionne parfaitement en html mais je n'arrive malheureusement pas à l'intégrer sur Joomla, rien ne se passe lorsque je clique sur mon logo...
La console m'affiche des erreurs tels que
Uncaught TypeError: Object #<Object> has no method 'tooltip' (index):29
Uncaught TypeError: Object #<Object> has no method 'on' tabs-state.js:16
Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'stop'
Et n'ayant pas des connaissances très évoluées en javascript, je dois avouer que je suis perdu et j'ai besoin d'aide.
Voici mon code si besoin est :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Animate a Curtain Opening with jQuery | Build Internet</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$curtainopen = false;
$(".button").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '-20%' }, {queue:false, duration:2000, easing:'easeOutBack'});
$(".leftcurtain").stop().animate({left:'-50%', opacity:'0'}, {queue:false, duration:2000, easing:'easeOutBack'} );
$(".rightcurtain").stop().animate({right:'-50%', opacity:'0'}, {queue:false, duration:2000, easing:'easeOutBack'} );
$curtainopen = true;
}
return false;
});
});
</script>
<style type="text/css">
.leftcurtain{
width: 50%;
height: 100%;
top: 0px;
left: -5px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 100%;
right: -5px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.logo{
margin: 0px auto;
margin-top: 150px;
}
.button{
position: absolute;
top: 25%;
left: 46%;
z-index: 4;
}
</style>
</head>
<body>
<div class="leftcurtain"><img src="images/leftcurtain.jpg"/></div>
<div class="rightcurtain"><img src="images/rightcurtain.jpg"/></div>
<img class="logo" src="images/buildinter.png"/>
<a class="button" href="#">
<img src="images/logo.jpg"/>
</a>
</body>Y aurait-il une âme charitable qui puisse m'aider ou m'aiguiller ? Merci d'avance pour vos réponses