js works locally but not on server

Question

davit_91 0 Newbie Poster

11 Years Ago

<!DOCTYPE html PUBLIC >
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/main.css"  />
    <script src="js/jsimageslider.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href= "css/generic.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
</head>
<body>
    <div id="dm1">
        <div id="dm1Inner">

<h1 class="first">hello people</h1>
    <div id="sliderFrame">
     <div id="ribbon"></div>
        <div id="slider">
            <img src="images/sl-1.jpg" alt="Welcome to Design3d.nl"  />
            <img src="images/sl-2.jpg" alt="Customizable Transition Effects" />
            <img src="images/sl-3.jpg" alt="Easy to use" />
            <img src="images/sl-4.jpg" alt="Pure Javascript. No jQuery. No flash." />
            <img src="images/sl-5.jpg" alt="#htmlcaption" />
            <img src="images/sl-6.jpg" alt="Most light weight Image Slider"/>
            <img src="images/sl-7.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-8.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-9.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-10.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-11.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-12.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-13.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-14.jpg" alt="Fine tuned. Sleek & Smooth" />

        </div>


        <div id="thumbs">
            <div class="thumb"><img src="images/sl-1-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-2-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-3-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-4-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-5-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-6-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-7-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-8-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-9-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-10-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-11-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-12-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-13-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-14-96x41.jpg" /></div>

        </div>
</div>




</body>
</html>


#sliderFrame 
{
    width:1540px;
    margin:20px auto; 
    margin-top:0px;
    margin-bottom:5px;
    padding:20px;
    background:#191919;
    border:1px solid #667;
    text-align:center;

}



#slider {
    width:1520px;
    height:700px;/* Make it the same size as your images */
    background:black url(loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;/*make the image slider center-aligned */
}
#slider img {
    position:absolute ;
    border:none;
    margin:0;
    padding:0;
    visibility:hidden;
    text-align:center;

}
img { text-align: center}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
    z-index:2;
    display:none;position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
    position:absolute;
    width:100%;
    height:auto;
    padding:10px;
    left: 20px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
    bottom: -40px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
    z-index:3;
    overflow:hidden;
    font-size:0;
}
div.mc-caption-bg {
    background:transparent; /*Caption background color. Can be set to "background:transparent;", or set to semi-transparent through the sliderOptions.captionOpacity setting in the javascript.*/
}
div.mc-caption {
    font:bold 13px/16px Arial;
    color:#ccc;
    z-index:4;
    text-align:center;
}
div.mc-caption a { 
    color:#66FFFF;
}


/* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/
div.navBulletsWrapper  {
    display:none;
}


/*thumbnails*/
#thumbs 
{
    margin-top:50px;
    text-align:center;
    font-size:0;
}
#thumbs .thumb 
{
    display:inline-block;
    *display:inline;zoom:1;/*IE6, IE7 hack*/
    margin:0 1px;/*this determins the distance between each thumbnail*/
    border:1px solid #333;
    padding:4px;
    background:black;
}

#thumbs .thumb img{border:1px solid #555; cursor:pointer; width:70px; height:44px; opacity:0.5;filter:alpha(opacity:50);}
#thumbs .thumb-on img{border:1px solid #999; opacity:1;filter:alpha(opacity:100);}

/* --------- Others ------- */

javascript

4 Contributors
16 Replies
3K Views
10 Years Discussion Span
Latest Post 1 Year Ago Latest Post by Dani

All 16 Replies

JorgeM 958 Problem Solver

11 Years Ago

Your reference to the ajax file seems to be incorrect. you are missing "http:"

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Also, make sure you upload the script to the js folder on the server.

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

Edited 11 Years Ago by JorgeM

Dani commented: The http part isn’t missing. It’s intentionally left out to work with either http or https -8

JorgeM 958 Problem Solver

11 Years Ago

Do you have the URL where this is online to take a look? You've only provide the HTML and CSS. There may be some other issues within the JS file.

JorgeM 958 Problem Solver

11 Years Ago

The page does not come up. Did you fix this in your local solution and upload it to the server?

change
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

to

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

when the "http:" is not included in the URL, even the local copy that I have will not load. Once the http: is included, at least the page comes up even though I dont have access to your javascript file.

On the internet, the page doesnt come up which leads me to beleive that you havent corrected this.

JorgeM 958 Problem Solver

11 Years Ago

I just tried again, and you r website online is not coming up. My browser gives me a "connection reset error". Yes, you can zip your project and upload it hear, or you can a working copy on jsfiddle.net which is really helpful as well.

Edited 11 Years Ago by JorgeM

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

The http part isn’t missing. It’s intentionally left out to work with either http or https

davit_91 0 Newbie Poster · Answer 1 · 2013-01-18T19:31:35+00:00

on server doesn't works only #thumbs effect, main gallerys sliding effect works perffectly

davit_91 0 Newbie Poster · Answer 2 · 2013-01-18T20:04:34+00:00

davit_91 0 Newbie Poster

11 Years Ago

it doesn't works anyway

davit_91 0 Newbie Poster · Answer 3 · 2013-01-18T20:09:18+00:00

davit_91 0 Newbie Poster

11 Years Ago

http://design3d.bugs3.com/

davit_91 0 Newbie Poster · Answer 4 · 2013-01-18T20:32:00+00:00

yes i have done it. you can see it in view source and also it is possible, to go to the page http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js , from my source wich is on the server http://design3d.bugs3.com/

davit_91 0 Newbie Poster · Answer 5 · 2013-01-18T20:32:25+00:00

davit_91 0 Newbie Poster

11 Years Ago

if it is possible i can upload my files here

davit_91 0 Newbie Poster · Answer 6 · 2013-01-18T21:02:59+00:00

davit_91 0 Newbie Poster

11 Years Ago

i can't upload photos

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

css.zip (3.02 KB)

index.html (3.14 KB)

<!DOCTYPE html PUBLIC >
<html>
<head>
    <title>Design3dnl</title>
    <link rel="stylesheet" type="text/css" href="css/main.css"  />
    <script src="js/jsimageslider.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href= "css/generic.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
  

<h1 class="first">hello people</h1>
    <div id="sliderFrame">
     <div id="ribbon"></div>
        <div id="slider">
            <img src="images/sl-1.jpg" alt="Welcome to Design3d.nl"  />
            <img src="images/sl-2.jpg" alt="Customizable Transition Effects" />
            <img src="images/sl-3.jpg" alt="Easy to use" />
            <img src="images/sl-4.jpg" alt="Pure Javascript. No jQuery. No flash." />
            <img src="images/sl-5.jpg" alt="#htmlcaption" />
            <img src="images/sl-6.jpg" alt="Most light weight Image Slider"/>
            <img src="images/sl-7.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-8.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-9.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-10.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-11.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-12.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-13.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-14.jpg" alt="Fine tuned. Sleek & Smooth" />
            
        </div>
  
                
        <div id="thumbs">
            <div class="thumb"><img src="images/sl-1-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-2-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-3-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-4-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-5-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-6-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-7-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-8-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-9-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-10-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-11-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-12-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-13-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-14-96x41.jpg" /></div>
    
        </div>
</div>
    
    <div id="will">
    <a href="http://wilmsag.de"><img src="images/wilmsaglogo.png"></a>
    <p>Wilms AG</p>
    <p>Frankfurter Allee 286 | 10317 Berlin</p>
    <p>Tauentzienstr. 12 | 10789 Berlin</p>
    <p>Bahnhofsplatz 8 | 15526 Bad Saarow</p>
    <p>Telefon: (030) 522 955-0 </p>
    <p>Telefax: (030) 522 955-18</p>
    <p>Oderverwenden Sie dazu unsere</p>
    <p>Kostenlose hotline:</p>
    <p>0800 522 955-0</p>
    
    
    </div>


</body>
</html>

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

js.zip (5.39 KB)

davit_91 0 Newbie Poster · Answer 7 · 2013-01-18T21:04:03+00:00

davit_91 0 Newbie Poster

11 Years Ago

here is full

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

public_html.zip (9.24 KB)

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 8 · 2013-01-18T23:25:45+00:00

When I run your site using my browser's developer's tools, I only come accross two issues.

First, you refer to a loading.gif reference in your CSS and so the browser is expecting to find this file and cannot in the CSS folder.

Secondly, since I do not have the images, the tool reports that the images are unreachable, thats fine for testing.

I went ahead and created some test images, and uploaded the site to one of my webs. The web app ran without any issues. The images I uploaded where display both in the thumbnail strip as well as in the main screen moving from one picture to the next.

There is something about your hosting, or the way you are uploading your project. You have validated that it works locally as well as I and all of your references seem to be correct with the exception of the loading.gif image.

Are you sure you are uploading the files properly into the correct structure on your hosting provider's site?

davit_91 0 Newbie Poster · Answer 9 · 2013-01-21T11:19:34+00:00

http://design3d.nl/360/c/ if you can see it pleas

davit_91 0 Newbie Poster · Answer 10 · 2013-01-21T13:00:49+00:00

davit_91 0 Newbie Poster

11 Years Ago

i thin there is something wrong with js

SanSoft InfoTec 0 Newbie Poster · Answer 11 · 2023-02-13T17:06:40+00:00

if your page is hosted on https then use
<script src="https//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
else us
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Dani 4,084 The Queen of DaniWeb Administrator Featured Poster Premium Member · Answer 12 · 2023-02-13T18:21:38+00:00

if your page is hosted on https then use
<script src="https//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
else us
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

I think you meant https:// vs http:// (you forgot the colon)

Alternatively, you can just use

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

(which is correct without the colon) and it will use whichever scheme the URL containing that script tag has.

js works locally but not on server

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers