Discussion :

[fastone]

Bonjour à tous !

Je suis en train de tester un composant JQuery plus précisément un Carousel ( une liste de lien qui apparait avec la possibilité de slider avec des flèches).

En fait, j’ai un problème de comportement du composant sur Internet Explorer : quand je clique sur la flèche gauche ou droite pour avoir les liens suivants,et plus précisement quand je sors la sourie de la balise(<a class="previ" href="#">). le div (navigation-carousel) qui contient les liens et les images clignote et les boutons( comme une sorte de refresh du div).

Voilà le code html généré:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<div id="nav-container" style="display: none;">
     <div id="navigation-carousel" class="carousel module">
        <div class="mask" style="height: 304px;">
           <ul id="list" style="width: 760px;">
             <li class="element">
              <a href=" ">
                 <img src=" http://ahguemmi:82//Liens/Apple.jpg " alt="">
              </a>
              <h3 class="inner_title"></h3>
              <p class="inner_element"></p>
             </li>
            <li class="element">
              <a href=" ">
                 <img src=" http://ahguemmi:82//Liens/Apple.jpg " alt="">
              </a>
              <h3 class="inner_title"></h3>
              <p class="inner_element"></p>
            </li>
         </ul>
       </div>
    <div class="prevmask">
      <a class="previ" href="#"></a>
    </div>
    <div class="nextmask">
      <a class="nexti" href="#"></a>
    </div>
   </div>
</div>

le code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
.carousel .disabled {
    cursor: default;
    background-position: -96px 0 !important;
}
 
.carousel .previ {
    left: 5px;
	height: 32px;
    position: absolute;
    top: 160px;
    width: 32px;
     background: transparent url("/Style Library/Images/prev-horizontal.png") no-repeat 0 0;
}
 
.carousel .previ:hover,
.carousel .previ:focus {
    background-position: -32px 0;
}
.carousel .previ:active 
{
    background-position: -64px 0;
}
 
.carousel .nexti {
	height: 32px;
    position: absolute;
    right: 5px;
    top: 160px;
    width: 32px;
    background: transparent url("/Style Library/Images/next-horizontal.png") no-repeat 0 0;
}
 
.carousel .nexti:hover,
.carousel .nexti:focus {
    background-position: -32px 0;
}
.carousel .nexti:active 
{
    background-position: -64px 0;
}

Code Jquery jquery.carousel.js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
(function (jQuery) {
    // ie alias
    var headache = jQuery.browser.msie && jQuery.browser.version.substr(0, 1) < 9;
 
    // carousel
    var Carousel = {
        settings: {
            itemsPerPage: 1,
            itemsPerTransition: 1,
            noOfRows: 1,
            pagination: true,
            nextPrevLinks: true,
            speed: 'normal',
            easing: 'swing'
        },
        init: function (el, options) {
            if (!el.length) { return false; }
            this.options = jQuery.extend({}, this.settings, options);
            this.itemIndex = 0;
            this.container = el;
            this.runner = this.container.find('ul');
            this.items = this.runner.children('li');
            this.noOfItems = this.items.length;
            this.setRunnerWidth();
            this.insertMask();
            if (this.noOfItems <= this.options.itemsPerPage) { return false; } // bail if there are too few items to paginate
            this.noOfPages = Math.ceil((this.noOfItems - this.options.itemsPerPage) / this.options.itemsPerTransition) + 1;
            if (this.options.pagination) { this.insertPagination(); }
            if (this.options.nextPrevLinks) { this.insertNextPrevLinks().wrap('<div class="boutons"></div>'); }
            this.updateBtnStyles();
        },
        insertMask: function () {
            this.runner.wrap('<div class="mask" />');
            this.mask = this.container.find('div.mask');
 
            // set mask height so items can be of varying height
            var maskHeight = this.runner.outerHeight(true);
            this.mask = this.container.find('div.mask');
            this.mask.height(maskHeight);
        },
        setRunnerWidth: function () {
            this.noOfItems = Math.round(this.noOfItems / this.options.noOfRows);
            var width = this.items.outerWidth(true) * this.noOfItems;
            this.runner.width(width);
        },
        insertPagination: function () {
            var i, links = [];
            this.paginationLinks = jQuery('<ol class="pagination-links" />');
            for (i = 0; i < this.noOfPages; i++) {
                links[i] = '<li><a href="#item-' + i + '">' + (i + 1) + '</a></li>';
            }
            this.paginationLinks
				.append(links.join(''))
				.appendTo(this.container)
				.find('a')
					.bind('click.carousel', jQuery.proxy(this, 'paginationHandler'));
        },
        paginationHandler: function (e) {
            this.itemIndex = e.target.hash.substr(1).split('-')[1] * this.options.itemsPerTransition;
            this.animate();
            return false;
        },
        insertNextPrevLinks: function () {
            this.prevLink = jQuery('<a href="#" class="previ"></a>')
								.bind('click.carousel', jQuery.proxy(this, 'prevItem'))
								.appendTo(this.container);
 
            this.nextLink = jQuery('<a href="#" class="nexti"></a>')
								.bind('click.carousel', jQuery.proxy(this, 'nextItem'))
								.appendTo(this.container)
 
 
        },
        nextItem: function () {
            this.itemIndex = this.itemIndex + this.options.itemsPerTransition;
            this.animate();
            return false;
        },
        prevItem: function () {
            this.itemIndex = this.itemIndex - this.options.itemsPerTransition;
            this.animate();
            return false;
        },
        updateBtnStyles: function () {
            if (this.options.pagination) {
                this.paginationLinks
					.children('li')
						.removeClass('current')
						.eq(Math.ceil(this.itemIndex / this.options.itemsPerTransition))
							.addClass('current');
            }
 
            if (this.options.nextPrevLinks) {
                this.nextLink
					.add(this.prevLink)
						.removeClass('disabled');
                if (this.itemIndex === (this.noOfItems - this.options.itemsPerPage)) {
                    this.nextLink.addClass('disabled');
                }
                else if (this.itemIndex === 0) {
                    this.prevLink.addClass('disabled');
                }
            }
        },
        animate: function () {
            var nextItem, pos;
            // check whether there are enough items to animate to
            if (this.itemIndex > (this.noOfItems - this.options.itemsPerPage)) {
                this.itemIndex = this.noOfItems - this.options.itemsPerPage; // go to last panel - items per transition
            }
            if (this.itemIndex < 0) {
                this.itemIndex = 0; // go to first
            }
            nextItem = this.items.eq(this.itemIndex);
            pos = nextItem.position();
 
            if (headache) {
                this.runner
					.stop()
					.animate({ left: -pos.left }, this.options.speed, this.options.easing);
            }
            else {
                this.mask
					.stop()
					.animate({ scrollLeft: pos.left }, this.options.speed, this.options.easing);
            }
            this.updateBtnStyles();
        }
    };
 
    // bridge
    jQuery.fn.carousel = function (options) {
        return this.each(function () {
            var obj = Object.create(Carousel);
            obj.init(jQuery(this), options);
            jQuery.data(this, 'carousel', obj);
        });
    };
})(jQuery);

Code script.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
/// <reference path="C:\Users\Administrator\Desktop\jquery-1.6.2.js" />
 
/**
* @author abouroub
 
var mycarousel_itemList = [
{url: "img/mannequin_1.png", title: "Flower1"},
{url: "img/mannequin_2.png", title: "Flower2"},
{url: "img/mannequin_3.png", title: "Flower3"},
{url: "img/mannequin_4.png", title: "Flower4"},
{url: "img/mannequin_5.png", title: "Flower5"},
{url: "img/Collines.jpg", title: "Flower6"},
{url: "img/mannequin_.png", title: "Flower7"},
{url: "img/mannequin_.png", title: "Flower8"},
{url: "img/mannequin5.png", title: "Flower9"}
];
*/
 
if (!mycarousel_itemList)
    var mycarousel_itemList = [];
 
function mycarousel_getItemHTML(item) {
    return '<li class="element"> <a  href="' + item.link + '"><img alt="' + item.title + '" src=" ' + item.url + ' "/></a><h3 class="inner_title">' + item.title + '</h3> <p class="inner_element">' + item.description + '</p> </li>';
};
 
function mycarousel_itemLoadCallback() {
 
    for (var i = 0; i < mycarousel_itemList.length; i++) {
        jQuery("#list").append(mycarousel_getItemHTML(mycarousel_itemList[i]));
    }
};
 
 
jQuery(document).ready(function () {
 
    var itemsPage = 3;
 
    var rowsNbr = 2;
    if (mycarousel_itemList.length < 4)
        rowsNbr = 1;
 
    mycarousel_itemLoadCallback();
 
    jQuery("#navigation-carousel").carousel({
        itemsPerPage: itemsPage,
        itemsPerTransition: itemsPage,
        easing: 'linear',
        noOfRows: rowsNbr,
        pagination: false
    });
 
    if (mycarousel_itemList.length == 0) {
        jQuery("#nav-container").html('<h1 id="no-links"> Aucun lien configur&eacute </h1>');
    }
    else if (mycarousel_itemList.length == 4) {
        var nbrItems = 3;
        var width = 152 * nbrItems;
        jQuery(".mask").width(width);
        jQuery("#list").width(width);
    }
    else if (mycarousel_itemList.length <= 6) {
        var nbrItems = Math.round(mycarousel_itemList.length / rowsNbr);
        var width = 152 * nbrItems;
        jQuery(".mask").width(width);
    }
 
 
    // When mouse rolls over
    jQuery("#master-navigation").mouseover(function () {
        jQuery("#nav-container").toggle();
    });
    // When mouse is removed
    jQuery("#master-navigation").mouseout(function () {
        jQuery("#nav-container").toggle();
    });
 
    // Inverse zIndex for IE7
    if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) == 7) {
        var zIndexNumber = 100;
        jQuery("div").each(function () {
            if (zIndexNumber < 0)
                zIndexNumber = 0;
            if (!jQuery(this).hasClass("no-zindex")) {
                jQuery(this).css("zIndex", zIndexNumber);
                zIndexNumber -= 1;
            }
        });
    }
 
    //end
 
    jQuery("#nav-container").hide();
});

Merci d'avance pour votre aide.

[Ethyde]

Bonsoir,

hum tu aurais pas un lien pour voir directement, ça serait plus simple