Jump to content

Load script in header, but it doesn't load... PLEASE help!


B0b

Recommended Posts

Hi guys,

 

I have a big problem, but quite simple I'd like you to help please...

 

I am using sliders from Scriptaculous in a project and it was working well when I had everything is a single file (index.html).

I then tried to split it in 2 iles: index.php and scripts.js so all the functions won't be visible in page's source.

 

What I must do it load "prototype.js" and "scriptaculous.js" in index.php header then I will build the sliders in script.js

 

Index.php strats like this:

 

<?php

//-----------------------------------------
// Build our HTML template
//-----------------------------------------

$to_print .= <<<HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Untitled Document</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="all">@import url(style.css);</style>
	<script type="text/javascript" src="script.js"></script>
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript" src="scriptaculous.js"></script>
</head>

<body>

 

And the slider is built in script.js like this:

 

var cqcslidder = new Control.Slider(current_level_handle, current_level_track, 
{
range: $R(1, 100),
    values: $R(1, 100),
    onSlide: function(value) 
{ .................

 

As I said, it was working before I split the files. Now, I get the error ""Control" is undefined", even though I load the files in Index.php header. As I said, it was working before so yes the SRC are all good and all the files are there.

 

What's wrong?

 

I'm stuck there....an help will be GREATLY appreciated.

 

PS: I am a total beginer  :-\

Not sure to understand what you mean...

 

I tried changing the order the scripts are loaded, unsuccessfully.

script.js is where I create the slider and to work the slider needs prorotype.js and scriptaculous.js.

 

Would you like to see the 2 full files (1000 some lines)?

 

Thank you very much.

Haaah, you we're right!  :)

It works in this order:

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

 

But now, the slider doesn't work anymore....the handle can't be slidded.

 

Now, in Index.php I have this:

 

<div id="current_level_track" class="slider_track"> <!-- Curent Level Track -->
    	<div id="current_level_handle" style="width:10px; height:20px;"><img src="slider_handle.png" alt="" style="float: left;" /></div>
    </div>

 

The class "slider_track" is in style.css and is:

 

.slider_track {
position: absolute;
width: 300px;
height: 5px;
background-image:url(slider_track.png);
}

 

 

And in script.js the slider is created this way:

 

new Control.Slider(document.getElementById("current_level_handle"), document.getElementById("current_level_track"), 
{
range: $R(1, 100),
    values: $R(1, 100),
    onSlide: function(value) 
{........

 

I see everything, but if I click and drag the handle, it's just a normal image that doesn't move.

 

Here's scriptaculous page about the slider: http://wiki.github.com/madrobby/scriptaculous/slider

 

Please...help me.

 

 

 

 

do not double post topics simply because one thread is not being replied to. that is against forum rules.

 

what else have you changed since you split the files up? have you changed any element names? have you changed anything that you've moved into script.js? have you check any error consoles (in firefox there is a javascript error console)?

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.