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
you don't say which theme
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
Garland is my theme
In themes/garland/style.css, there is already "list-style-type: none" and "list-style-image: none" for ul and li.
duh-- i just saw that you
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
According to DOM inspector, CSS is OK
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:
Concerning UL, it gives:
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
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.
Just found a workaround!
Instead of trying to remove the bullet, I've done:
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.
That's wierd-- what happens
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
That's wierd indeed!
I've tried but it didn't hide the bullets... I'm really lost with this problem. :-(
i'm afraid i'm out of ideas
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
No problem
Thanks for you attention anyway!
Solved!
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.cssas follows:Cheers,
Franck
Sorted
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
Hey thanks
Hey thanks a lot. The solution is right
Removed bullets using css
I used simple css to remove the bullets.
#main .content .jcarousel-clip .jcarousel-item {list-style-image:none; list-style-type:none;}
thanks
thanks