Doing a jQuery slideshow - I get a ? mark

**moonman239** · Feb 17th, 2012, 07:41 PM

I am building a slideshow using jQuery 1.7.1. There's one annoying bug. I see a little question mark in the top-left of the slideshow. The slideshow seems to be unaffected otherwise, but I do want to get rid of the question mark.

I took code from a related blog post on JonRaasch.com and altered the code so that

Code:

$(function() {

became

Code:

$(document).ready(function() {

because my browser was complaining that it could not find the variable $. Now, it's not complaining.

Other than that & using different image URLs, I did not alter the code.

The slideshow div is wrapped in another div, which is wrapped in another div. But as far as I know, that's completely irrelevant.

**SambaNeko** · Feb 17th, 2012, 07:58 PM

Can you post either your [complete] code, or a URL to view your implementation? "$(function() {" and "$(document).ready(function() {" are synonymous in jQuery, so changing from one to the other should have no discernable effect.

**moonman239** · Feb 21st, 2012, 12:07 PM

Originally Posted by SambaNeko

Can you post either your [complete] code, or a URL to view your implementation? "$(function() {" and "$(document).ready(function() {" are synonymous in jQuery, so changing from one to the other should have no discernable effect.

Sure.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>******</title>
    <!--[if IE]><script>document.write('<base href="' + location.protocol + '//' + location.host + location.pathname.replace(/\/[^\/]*$/, '/mobile/') + '"/>')</script><![endif]-->
    <base href="mobile/">
    <script id="DC_baseScript">if(navigator.userAgent.indexOf('AppleWebKit/') == -1) document.write('<base href="' + location.protocol + '//' + location.host + location.pathname.replace(/\/[^\/]*$/, '/mobile/') + '"/>')</script>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.6">
    <meta name="apple-mobile-web-app-capable" content="YES">
    <link rel="apple-touch-icon" href="Images/WebClipIcon.png">
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="Parts/parts.js" charset="utf-8"></script>
    <script type="text/javascript" src="main.js" charset="utf-8"></script>
    <script type="text/javascript" src="mobile/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script language="javascript">
    function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(document).ready(function() {
    setInterval( "slideSwitch()", 5000 );
});
</script>
</head>
<body onload="load();">
    <div id="content">
        <div id="top">
            <img src="../Images/******TransparentBanner.png" style="height: 24px; z-index: 11; position: absolute; " id="banner">
            <div id="slideshow">
                <img src="../Images/******.png" class="active">
                <img src="../Images/******.png">
                <img src="../Images/******.png">
                <img src="../Images/******.png">
                <img src="../Images/******.jpg">
            </div>
        </div>
    </div>
</body>
</html>

I masked some parts with asterisks because I don't want anyone who isn't involved in the project to know what the project is.

**SambaNeko** · Feb 21st, 2012, 12:57 PM

Not sure if it'll fix things, but some observations:

You've got two versions of jQuery; if both are being loaded successfully, then the latter overrides the former, and you're using jQuery 1.4.2 on your page (not 1.7.1). But, this error - "my browser was complaining that it could not find the variable $" - is indicative of the library not being loaded successfully. So I think perhaps that 1.7.1 was never being loaded, and when you added 1.4.2, the error resolved because it did load, and $ was now found.

Why 1.7.1 didn't load may be the result of your using the <base> tag. It affects any relative paths, so src="mobile/jquery-1.7.1.min.js" would be interpreted as "mobile/mobile/jquery-1.7.1.min.js". Too many "mobile"s?

As an aside (and I can see this was Jon Raasch's choice rather than yours), I personally wouldn't name my variables with $ - it's distracting when using libraries that designate special purpose to the character.

**szlamany** · Feb 21st, 2012, 12:57 PM

Run your page with Firefox - using Firebug - and look at the .Net tab - it will tell you what didn't load.

I'm guessing the ? mark is all about that fact.

**penagate** · Feb 21st, 2012, 07:22 PM

Hard to say without seeing parts.js and main.js as well.
I can't see the load() function, for example. (And you shouldn't use onload anyway: it's poor practice.)

**moonman239** · Feb 21st, 2012, 07:31 PM

Originally Posted by SambaNeko

Not sure if it'll fix things, but some observations:

You've got two versions of jQuery; if both are being loaded successfully, then the latter overrides the former, and you're using jQuery 1.4.2 on your page (not 1.7.1). But, this error - "my browser was complaining that it could not find the variable $" - is indicative of the library not being loaded successfully. So I think perhaps that 1.7.1 was never being loaded, and when you added 1.4.2, the error resolved because it did load, and $ was now found.

Why 1.7.1 didn't load may be the result of your using the <base> tag. It affects any relative paths, so src="mobile/jquery-1.7.1.min.js" would be interpreted as "mobile/mobile/jquery-1.7.1.min.js". Too many "mobile"s?

As an aside (and I can see this was Jon Raasch's choice rather than yours), I personally wouldn't name my variables with $ - it's distracting when using libraries that designate special purpose to the character.

I just changed the code so that instead of pointing to 1.4.2 on Google's server it points to /mobile/jquery.min.js in the project folder. I think Jon Raasch should update his code so that it points to 1.7.1. It's more secure than 1.4.2 and is probably also backwards-compatible. And he should tell people to download jQuery right from jQuery.com instead of referring to the copy on Google's server, to reduce the load on their server.

Anyways, I think that question mark disappeared, even before I removed the reference to jQuery 1.4.2.

**szlamany** · Feb 21st, 2012, 07:45 PM

It is intentional to use GOOGLE server for the source of jQuery - it is highly recommended to use the minified versions that they host.

But for development you should be using a non-minified version so you can step into it with FireBug and find out what isn't working.

Do you use Firebug?

**moonman239** · Feb 23rd, 2012, 12:35 AM

Originally Posted by szlamany

It is intentional to use GOOGLE server for the source of jQuery - it is highly recommended to use the minified versions that they host.

But for development you should be using a non-minified version so you can step into it with FireBug and find out what isn't working.

Do you use Firebug?

No. It's an iPhone thing I'm working on.

Thread: Doing a jQuery slideshow - I get a ? mark

Thread Tools

Display

Doing a jQuery slideshow - I get a ? mark

Re: Doing a jQuery slideshow - I get a ? mark

Re: Doing a jQuery slideshow - I get a ? mark

Re: Doing a jQuery slideshow - I get a ? mark

Re: Doing a jQuery slideshow - I get a ? mark

Re: Doing a jQuery slideshow - I get a ? mark

Re: Doing a jQuery slideshow - I get a ? mark

Re: Doing a jQuery slideshow - I get a ? mark

Re: Doing a jQuery slideshow - I get a ? mark

Posting Permissions