Hi all,

I'm trying to use jCarousel with Drupal 6.3. I've been able to produce a working carousel but I cannot prevent the list items from displaying a bullet (just the same as in the navigation menu). When I look at my page using Firefox's DOM inspector, it tells me that UL and LI elements are configured with "list-style-type=none" and "list-style-image=none". But I do see the bullets! :-(

Does anyone has some hint about this problem?

Many thanks in advance.
Franck

Just in case it can help: I've installed the module nodeCarousel in order to have the PHP function jcarousel_add, then I've create a PHP node with the following content (don't joke at me, this is really my first use of PHP and JavaScript, advices are welcome):

<?php jcarousel_add(); ?>

<ul id="mycarousel" class="jcarousel-skin-tango">
<?php
$img = array("http://static.flickr.com/66/199481236_dc98b5abb3",
	     "http://static.flickr.com/75/199481072_b4a0d09597",
	     "http://static.flickr.com/57/199481087_33ae73a8de",
	     "http://static.flickr.com/77/199481108_4359e6b971",
	     "http://static.flickr.com/58/199481143_3c148d9dd3",
	     "http://static.flickr.com/72/199481203_ad4cdcf109",
	     "http://static.flickr.com/58/199481218_264ce20da0",
	     "http://static.flickr.com/69/199481255_fdfe885f87",
	     "http://static.flickr.com/60/199480111_87d4cb3e38",
	     "http://static.flickr.com/70/229228324_08223b70fa");

for ($i=0; $i<count($img); $i++) {
    echo "<li><img src='$img[$i]_s.jpg' id='thumb$i' width='75' height='75' alt=''/></li>";
}
echo '</ul>';
echo "<p><img src='$img[0]_m.jpg' id='mypict'>";
?>
<script type="text/javascript">
jQuery(document).ready(function(){jQuery("#mycarousel").jcarousel({initCallback: function(){jQuery("#mycarousel").css("list-style-type", "none"); jQuery("#mycarousel").find("li").css("list-style", "none none inside");}});});
function update_mypict(image, target) {
    jQuery(image).click(function(){jQuery('#mypict').attr('src', target);});
}
<?php
for ($i=0; $i<count($img); $i++) {
    echo "jQuery(document).ready(function(){update_mypict('#thumb$i','$img[$i]_m.jpg');});";
}
?></script>

Comments

WorldFallz’s picture

you don't say which theme you are using, but try adding "list-style-image=none;" to your css file.

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime."
-- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

f_p’s picture

In themes/garland/style.css, there is already "list-style-type: none" and "list-style-image: none" for ul and li.

WorldFallz’s picture

duh-- i just saw that you said that in your op-- sorry I must have had a momentary brain spasm. Did you change the color of your garland theme? If so, the CSS file you need to change is going to be in the files/color directory.

Also, try using a very specific selector-- there must be a cascade somewhere responsible for this.

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime."
-- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

f_p’s picture

I did not change the color. More precisely, I've played with the colors but never selected another one. In the directory color, I only see a file preview.css that only set properties for objects "#preview ...". I've just tried to insert something about UL and LI but it did not change anything.

About the cascading, Firefox's DOM inspector (CSS Style Rules) tells me that list-style-type and list-style-image are set several times for LI:

  • rule "ul li, ul.menu li, .item-list ul li, li.leaf" in "themes/garland/style.css?y" => "none"
  • rule ".jcarousel-list li, .jcarousel_item" in "sites/all/modules/nodecarousel/jcarousel/lib/jquery.css?y" => "none"
  • rule 'style=""' with no file given (I suppose this is my JavaScript) => "none"

Concerning UL, it gives:

  • rule "ul, menu, dir" in "resource://gre/res/html.css" => "list-style-type=disc"
  • rule 'style=""' with no file => "none"

I tried to add "list-style: none;" in the rule ".jcarousel-list" of "sites/all/modules/nodecarousel/jcarousel/lib/jquery.jcarousel.css" that sets many properties for UL, but it does not solve the problem.

But what I don't understand is that DOM inspector is not consistent with what I can see on the screen: I see "disc" style while DOM inspector tells me its set to "none" (in Computed style) for both UL and LI.

What do you mean by using a very specific selector? Because each LI as an id "thumb$i", I also tried

jQuery(document).ready(function(){jQuery("#thumb$i").css("list-style-type", "none");});

in my PHP loop, in order to set each LI individually, but this neither solver the problem. I'm getting mad...

By the way, the bug occurs in FireFox Linux 2.0 and 3.0, Epiphany, FireFox Windows 2.0 and IE6.

f_p’s picture

Instead of trying to remove the bullet, I've done:

jQuery(document).ready(function(){jQuery("#mycarousel").jcarousel({initCallback:
    function(){jQuery("#mycarousel").find("li").css("background", "#FFFFFF");}});});

And it works: I don't see the bullets anymore. :-)

But I'd be really happy to find a real solution because it becomes dependent on the page background (especially for color gradient or an image).

To be precise: I've changed tango skin in order to have white background, no frame and 100% width for the carousel. But I did not mention that since the problem is exactly the same with original tango skin.

WorldFallz’s picture

That's wierd-- what happens if you use the exact same statement as above, but instead of setting "background" set the list-style-type and list-style-image properties there?

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime."
-- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

f_p’s picture

I've tried but it didn't hide the bullets... I'm really lost with this problem. :-(

WorldFallz’s picture

i'm afraid i'm out of ideas unless you can provide a link....

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime."
-- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

f_p’s picture

Thanks for you attention anyway!

f_p’s picture

Hi all,

I just discovered that some themes, including Barlow, use background images in order to render bullets. So, my problem can be solved by adding one rule in jcarousel/skins/tango/skin.css as follows:

.jcarousel-skin-tango .jcarousel-item {
    background: transparent none;
}

Cheers,
Franck

barry_fisher’s picture

Thanks f_p

That worked for me! Took me an hour messing about with css, and now it finally works!

--
reallifedesign.co.uk

--
Barry Fisher

Pivale

danilo_04’s picture

Hey thanks a lot. The solution is right

tummytimmy’s picture

I used simple css to remove the bullets.

#main .content .jcarousel-clip .jcarousel-item {list-style-image:none; list-style-type:none;}

kristat’s picture

thanks