JavaScript - My Carousel Not Showing In Safari

Hello,

I was wondering if anyone knew how to alter SmoothGallery to move the thumbnail carousel from a horizontal one along the top to a vertical one along the right side. It's supposedly possible within the core code, and I've seen it done, but it's not in the documentation and no one on the SmoothGallery forums seems to know how to do it.

Ultimately, I'd like to move the carousel to the right side, make it static so that it's always overlaying the main image (rather than clicking to unhide it), and make sure the slideInfoZone is adjusted so as to not overlap with the carousel.

I'm assuming that anyone who knows how to do it has SmoothGallery and has made the carousel vertical before... but if not, and someone wants to take a crack at it anyway, the SmoothGallery files are HERE. Thanks for your help in advance!

Hi, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...

My website is: ERBoH.com
I have no experience with JS, just general knowledge of html/css.
I had someone else write the site for me. They didn't know how to do this and pretty much just stopped talking to me...

On my site, I have a video carousel (4 video thumbnails in a row, you press the > arrow, and it shows the next 4 video thumbnails, you click 1 video thumbnail, and it shows you the video above the carousel).

The problem is, when you click on one of the thumbnails, it reloads the page, and the video carousel goes back to the beginning. So if you clicked the > arrow 3 times (ur on the 3rd set of thumbnails), then it brings you back to the 1st set.

This is pretty annoying, especially if your planning on watching each video.

My question is, is it possible to make some type of cookie or something to remember which set of thumbnails you were on in the carousel?

So that, if your on the 3rd set, and click a video, instead of resetting to the 1st set, it keeps you on the 3rd set.

If it is possible... how hard would it be to do? Is it something where I could just copy/paste a string of code, or would this be a huge project?

Thanks for the advice.

Hello,

I have been noticing a really cool trend on the web and it is called the javascript carousel. Not the one from dynamic Drive. Here is an example of what I am talking about; carousel http://food.yahoo.com/;_ylt=AtuShzEA...hz75HDg9VIY.Y5 check on the bottom of the page where it says "try these recipes" I just love the circle indicating how many "pages there are. Do you know where I can find the tutorial or script for this effect?

Thanks,

Creations_Kash

I'm having the same trouble with adding an ALT tag to the last image:

var imageList = [
"images/banner/banner1.jpg",
"images/banner/banner2.jpg",
"images/banner/banner3.jpg",
"images/banner/banner4.jpg",
"images/banner/banner4.jpg",
];

Can anyone help?

Hi Javascript geeks. I am hoping you can help with my shakey images on my carousel. Basically I have a lovely moving carousel on this web page http://www.turningworm.co.uk/nudgegl...nge/icons.html but the images kind of shudder as they come to a stand still before the pause. Does anyone know of a way to smooth the movement out so they glide round better and then pause? The speed is correct, it is just the shakiness of the images that is the problem.

Many thanks for looking.

Zena

I am trying to install a simple slider/carousel in the middle of a web page. I opted for the JCarouselLite plug-in but can't seem to get it working.

When the page loads, the images tile vertically(as opposed to line up horizontally) and the nav buttons sit below them.

I have included necessary links to jQuery,the Carousel plug-in and also a custom.js file that includes a call to the plug-in to activate it(i think). I also have linked to a custom.css file to style the bar.

I am wondering if my call to the plug-in is coded correctly. Beyond that, I can't understand why it isen't working. It is probably obvious but I'm a bit stuck!

Could anyone help? I have attached the code showing the html, the custom.js function and the css.

Thanks,

nevblanc79

HTML:
Code:

           
<div id="carousel"> 
                    <h3>Our Titles</h3>  
                    
                    	<div class="carousel">
                        <ul>
                            <li><a href="portfolio_item.html"><img width="198" height="130" src="img/pictures/1.jpg" alt></a></li>
                            <li><a href="portfolio_item.html"><img src="img/pictures/2.jpg" alt="" width="198" height="130" ></a></li>
                            <li><a href="portfolio_item.html"><img src="img/pictures/3.jpg" alt="" width="198" height="130" ></a></li>
                            <li><a href="portfolio_item.html"><img src="img/pictures/4.jpg" alt="" width="198" height="130" ></a></li>
                            <li><a href="portfolio_item.html"><img src="img/pictures/5.jpg" alt="" width="198" height="130" ></a></li>
                            <li><a href="portfolio_item.html"><img src="img/pictures/6.jpg" alt="" width="198" height="130" ></a></li>
                        </ul>
                    </div>
                    
                    <button class="prev"><</button>
                    <button class="next">></button>
                
                </div>

Javascript:
Code:

$(function() {
    $(".carousel").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

CSS:
Code:

#carousel {
	width:900px;
	overflow:hidden;
	margin-bottom:30px;
}

.carousel ul li {	
	width:198px;
	margin-right:36px;
}

#carousel .next, #carousel .prev {
	margin:0px;
	font-size:15px;
	padding:4px 10px;
}

#carousel .next {
	float:right;
}

#carousel .prev {
	float:left;
}

Carousel Slideshow (http://www.dynamicdrive.com/dynamicindex14/carousel.htm) in Internet Explorer functions all right (top center of screen).

But same Carousel in Firefox and Chrome is shown top left of screen and I do not know how to center it.

How can I solve this problem ?

Thank you very much for your help.

pro298

Hello!

A client of mine wanted a picture slideshow like this website.

http://themeforest.net/item/dark-atl..._preview/50415

I have looked through many different slideshows and carousel and have had no luck trying to find just a nice simple one like this.

Can anyone help?

I did find this:

http://sorgalla.com/jcarousel/

but it deals with JQuery and I'm not sure how to use it. If it's simple and I can change that script to the one above then that's great. Any feedback is greatly appreciated

Kristen
http://www.twitter.com/kris10ized

I cant seem to get the top picture carousel to work i think this is my problem but Im not sure what in th coding needs to change:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3)
Timestamp: Tue, 26 Jul 2011 23:59:17 UTC


Message: Object required
Line: 456
Char: 26
Code: 0
URI: http://maps.gstatic.com/intl/en_us/m...s2.api/main.js


Message: Object doesn't support this property or method
Line: 825
Char: 5
Code: 0
URI: http://yourozarksrealtor.com/wp-cont...ts/carousel.js



Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3)
Timestamp: Tue, 26 Jul 2011 23:59:28 UTC


Message: Object required
Line: 456
Char: 26
Code: 0
URI: http://maps.gstatic.com/intl/en_us/m...s2.api/main.js


Message: Object doesn't support this property or method
Line: 825
Char: 5
Code: 0
URI: http://yourozarksrealtor.com/wp-cont...ts/carousel.js

Hello! I am new to the boards, I am a graphic and web designer. Been designing and developing web sites since 2001. I have fun doing it and was lucky enough to have someone hire me to do it and get paid for it. The reason I signed up to the boards is so that I can search for some help since I am starting to learn jQuery I am having a little bit of trouble with a page I am working on and was hoping someone would be able to help me out!

The problem: I have a spry collapsable panel with 4 panels, in the panels I have jQuery carousel plugins with the thumbs plugin. The problem I am having is that I want the carousel in the 4 panels like I mentioned before but I can only get one of the panels to function fully. The other three loses their forward back functions. I tried copying the code for the first one and just renaming the classes and functions so it would separate the two. The thumbs plugin will still work, I just can not get the carousel function to repeat on another one. I will post the code I have left off with. If you need to see the page you can message me. Thanks for reading and if you can help it will be great!

Here is the java:

Code:

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();

});
$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), 
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        
        $wrapper.scrollLeft(singleWidth * visible);
        
        
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};
//Carousel 2
  $('.infiniteCarouselTwo').infiniteCarouselTwo();

$.fn.infiniteCarouselTwo = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapperTwo = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapperTwo.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapperTwo.innerWidth() / singleWidth), 
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        
        $wrapperTwo.scrollLeft(singleWidth * visible);
        
        
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapperTwo.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapperTwo.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapperTwo.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapperTwo.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

Here is the CSS:
Code:

.infiniteCarousel {
	width: 395px;
	position: relative;
}
.infiniteCarousel .wrapper {
	width: 825px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	overflow: auto;
	min-height: 10em;
	position: absolute;
	top: 0;
	margin-top: 0;
	margin-right: 40px;
	margin-bottom: 0;
	margin-left: 40px;
	left: 20px;
}
.infiniteCarousel ul a img {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.infiniteCarousel .wrapper ul {
	width: 9999px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
.infiniteCarousel ul.thumb li {
	display:block;
	float:left;
	padding: 10px;
	height: 85px;
	width: 85px;
	-ms-interpolation-mode: bicubic;
}
.infiniteCarousel ul.thumb li a img {
	display:block;
}
.infiniteCarousel .arrow {
	display: block;
	height: 36px;
	width: 37px;
	text-indent: -999px;
	position: absolute;
	top: 25px;
	cursor: pointer;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.infiniteCarousel .forward {
	background-position: 0 0;
	right: 0;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	left: 910px;
}
.infiniteCarousel .back {
	background-position: 0 0px;
	left: 0;
	background-image: url(../images/arrow-back.png);
	background-repeat: no-repeat;
}
.infiniteCarousel .forward:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
}
.infiniteCarousel .back:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow-back.png);
}
ul.thumb li img.hover {
	background:url(thumb_bg.png) no-repeat center center;
	border: none;
}
#main_view {
}

/* Carousel Two */
.infiniteCarouselTwo {
	width: 395px;
	position: relative;
}
.infiniteCarouselTwo .wrapperTwo {
	width: 825px; /* .infiniteCarouselTwo width - (.wrapperTwo margin-left + .wrapperTwo margin-right) */
	overflow: auto;
	min-height: 10em;
	position: absolute;
	top: 0;
	margin-top: 0;
	margin-right: 40px;
	margin-bottom: 0;
	margin-left: 40px;
	left: 20px;
}
.infiniteCarouselTwo ul a img {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.infiniteCarouselTwo .wrapperTwo ul {
	width: 9999px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
.infiniteCarouselTwo ul.thumbTwo li {
	display:block;
	float:left;
	padding: 10px;
	height: 85px;
	width: 85px;
	-ms-interpolation-mode: bicubic;
}
.infiniteCarouselTwo ul.thumbTwo li a img {
	display:block;
}
.infiniteCarouselTwo .arrow {
	display: block;
	height: 36px;
	width: 37px;
	text-indent: -999px;
	position: absolute;
	top: 25px;
	cursor: pointer;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.infiniteCarouselTwo .forward {
	background-position: 0 0;
	right: 0;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	left: 910px;
}
.infiniteCarouselTwo .back {
	background-position: 0 0px;
	left: 0;
	background-image: url(../images/arrow-back.png);
	background-repeat: no-repeat;
}
.infiniteCarouselTwo .forward:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
}
.infiniteCarouselTwo .back:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow-back.png);
}
ul.thumbTwo li img.hover {
	background:url(thumb_bg.png) no-repeat center center;
	border: none;
}
#main_viewTwo {
}

Here is the HTML:

Code:

   <div id="around" class="CollapsiblePanel">
      <div class="CollapsiblePanelTabBlue" tabindex="1">Around town</div>
      <div class="CollapsiblePanelContent">
     <div id="main_viewTwo"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
       <!-- Start Carousel -->
        <div class="infiniteCarouselTwo">
          <div class="wrapperTwo">
            <ul class="thumbTwo">
              <li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
              <li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
              <li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
              <li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
              <li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
              <li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
              <li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
              <li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
              <li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
              <li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
              <li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
              <li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
              <li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
              <li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
              <li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
              <li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
            </ul>
          </div>
        </div>
        <!--End Carousel-->
      </div>
    </div>
    <div id="campus" class="CollapsiblePanel">
      <div class="CollapsiblePanelTabGreen" tabindex="1">Campus life</div>
      <div class="CollapsiblePanelContent">
        <div id="main_view"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
       <!-- Start Carousel -->
        <div class="infiniteCarousel">
          <div class="wrapper">
            <ul class="thumb">
              <li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
              <li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
              <li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
              <li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
              <li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
              <li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
              <li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
              <li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
              <li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
              <li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
              <li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
              <li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
              <li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
              <li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
              <li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
              <li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
            </ul>
          </div>
        </div>
        <!--End Carousel-->
      </div>
    </div>

Ask me if you need any more information from me. Like I said if you need to see the page message me! It is not a site I want to make too public at the moment for some reasons of who I work for.

This seems to work ok to serve css to Opera:
Code:

if(history.navigationMode){
document.write('<link rel="stylesheet" type="text/css" href="opera.css">') }

Is there a way to use
Code:

@media screen and (-webkit-min-device-pixel-ratio:0){}

to serve css to Safari? ie, without having to use it on each tag in the main stylesheet?

Tried
Code:

if(@media screen and (-webkit-min-device-pixel-ratio:0)){
document.write('<link rel="stylesheet" type="text/css" href="safari.css">') }

but I think it's missing an 'is true' phrase... ? and this one
Code:

if('@media screen' && '(-webkit-min-device-pixel-ratio:0)'){
document.write('<link rel="stylesheet" type="text/css" href="safari.css">')}

picks up Firefox and Opera as well.

the page in question is
http://martysimpson.com

In firefox search the source code for

Code:

<script language="javascript" type="text/javascript">
				<!--
					function submitacajoommod1(formname) {
						var form = eval('document.'+formname);var place = form.email.value.indexOf("@",1);var point = form.email.value.indexOf(".",place+1);
						if (form.name.value == "" || form.name.value == "Name") {
							alert( "Please enter your name." );return false;
						} else
				 if (form.email.value == "" || form.email.value == "E-mail") {alert( "Please enter a valid e-mail address." );return false;
						} else {if ((place > -1)&&(form.email.value.length >2)&&(point > 1)){form.submit();return true;
							} else {alert( "Please enter a valid e-mail address." );return false;}}}
				 //--> 
				</script><form action="http://martysimpson.com/component/acajoom/" method="post" name="modacajoomForm1">

I am on a mac using osx.4.11
firefox version 3.5 renders the above just fine.

Safari version 3.04 just does not show the javascript at all which then makes the input fields on the sign-up for newsletter simply not show up.

Any ideas?

I had a client specifically request that no matter the size of the browser he wants it to immediately enlarge to full screen onload of the flash site. I put this in the header:
Code:

<script type="text/javascript"> 
window.moveTo(0,0); 
if (document.all) {window.resizeTo(screen.availWidth,screen.availHeight)} 
else {window.outerHeight = screen.availHeight; window.outerWidth = screen.availWidth} 
</script>

However, this specific code doesn't work in Safari on a mac. Is there any way I can make this compatible?

My webpage won't load at all in Safari, unless I open it as a link from anbother site or if I manually type in the index.html after the url.

when I take out the javascript though, it work perfectly.

I always works in Firefox though.

Any hints:


<script type="text/javascript" src="stuff/x_core.js"></script><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="stuff/ga.js" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-*******-*");
pageTracker._trackPageview();
} catch(err) {}</script>

<script type="text/javascript">
var start_z_index = 3000;
function bringtotop( item )
{
item.style.zIndex = start_z_index++;
}

</script>

<script type="text/javascript" src="stuff/x_event.js"></script>

<script type="text/javascript" src="stuff/xenabledrag.js"></script>
<script type="text/javascript" src="stuff/xenabledrag2.js"></script>