By fresh-off on

Hello!
I've got a nice slide animation from jQuerry for designers that i'd like to add to a block in my custom theme. I've searched around and *think* i'm getting close to figuring it out. i've added scripts[] = scripts.js to my .info file.

here's the working script i want to use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; font-size: 16px; line-height: 20px; padding: 20px; }
a { line-height: 40px; }
#container { width: 260px; }
#test { background: #c00; color: #fff; }
#test p { margin: 0; margin-bottom: 16px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
    var $div = $('#test');
    var height = $div.height();
    $div.hide().css({ height : 0 });

    $('a').click(function () {
        if ($div.is(':visible')) {
            $div.animate({ height: 0 }, { duration: 2500, complete: function () {
                $div.hide();
            } });
        } else {
            $div.show().animate({ height : height }, { duration: 2500 });
        }
        
        return false;
    });
});
</script>
</head>
<body>
  <div><a href="#test">reveal</a></div>

  <div id="container">
    <div id="test">
<p>As distinguished clients of Indigo, our members get to also have exclusive access to our hosted events at renowned lounges, restaurants and luxurious hotels.  Our members who represent professionals and trend setters are guaranteed to be presented with a hip but yet savvy social ambiance for the ultimate social experience. Wherever influential socialites are, then so are we.  We are the new face of the urban social scene.</p>
    </div>
  </div>

</body>
</html>

From what i can tell, i just need to place this part:

$(document).ready(function () {
    var $div = $('#test');
    var height = $div.height();
    $div.hide().css({ height : 0 });

    $('a').click(function () {
        if ($div.is(':visible')) {
            $div.animate({ height: 0 }, { duration: 2500, complete: function () {
                $div.hide();
            } });
        } else {
            $div.show().animate({ height : height }, { duration: 2500 });
        }
        
        return false;
    });
});

to a .js file saved in ..sites/all/js/my_script.js is that correct?

and what do i do about these parts:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">   ...</script>

Thanks for any help!!

⋅ Categories: Drupal 6.x

Comments

fresh-off’s picture

fresh-off commented

here's what i did.

1. created a file called scripts.js and included this code:

$(document).ready(function () {
    var $div = $('#test');
    var height = $div.height();
    $div.hide().css({ height : 0 });

    $('a#reveal').click(function () {
        if ($div.is(':visible')) {
            $div.animate({ height: 0 }, { duration: 2500, complete: function () {
                $div.hide();
            } });
        } else {
            $div.show().animate({ height : height }, { duration: 2500 });
        }
        
        return false;
    });
});

2. added scripts[] = scripts.js to my .info file.

3. added an ID to the anchor <a id="reveal" href="#test">reveal</a>, and changed the script $('a#reveal') so that it targeted the correct anchor and ID. (at first, it was targeting EVERY link on the page...)

4. switched the Input Format to "full html" and added the following to my block:

<div><a href="#test">reveal</a></div>

<div id="container">
    <div id="test">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor, neque vitae ornare consequat, velit ligula lobortis nisi, in tincidunt odio nisl vitae felis.</p>
    </div>
</div>

5. added the CSS to my styles.css.
6. adjusted the CSS to my liking.
7. to do: take out some of the extra DIVS in the code...

[note to newbies like me] - styles.css and scripts.js were both saved to 

...sites/all/themes/YOUR_THEME/style.css 
...sites/all/themes/YOUR_THEME/scripts.css

hope that helps someone in how to add a script to a Drupal 6 theme. please correct me if i made any mistakes!

IAmCorbin’s picture

IAmCorbin commented

I've added "scripts[] = javascript.js" to my .info file in my theme directory and my javascript.js file consists of:
$(document).ready(function() {
alert('Hi, This Javascript File is Working!');
});

...I get nothing?

What am I doing incorrectly?

IAmCorbin’s picture

IAmCorbin commented

ok...strange...it just started working and I didn't change anything.

mustardman’s picture

mustardman commented

You have to reload your theme after you add the *.js file (Admin>Site Building>Themes>YourTheme>Save Configuration)

You can confirm your *.js file is loading by viewing the "page source" of your drupal page in your browser. You should see your *.js file listed near the top.