Using JavaScript in webpage

**DoubleDee** · Mar 12, 2011 17:16

How do you install JavaScript so you can use it in a webpage?

I downloaded a copy of JQuery but can't get it working in my web page.

This is what I have in my HTML, which I thought was all that was needed...

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
	<link rel="stylesheet" href="css/slideshow.css" type="text/css" media="screen" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.cycle.js"></script>
	<script type="text/javascript" src="js/slideshow.js"></script>
</head>

Thanks,

Debbie

**chris.upjohn** · Mar 12, 2011 18:54

What happens when you open the page? Is there a demonstration of the page online that we can see?

**DoubleDee** · Mar 12, 2011 19:13

Originally Posted by SgtLegend

What happens when you open the page?

Well, my HTML and CSS display a page, but the JavaScript part isn't working.

Is there a demonstration of the page online that we can see?

Here is the tutorial that I following:
Build an Auto-Scrolling Slideshow That Works With and Without JavaScript | Nettuts+

Do you want me to paste my code as well?

Debbie

**DoubleDee** · Mar 12, 2011 19:38

SgtLegend,

Since you'll probably need to see it to help, here is my code...

slideshow.html

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Tabbed jQuery slideshow</title>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.cycle.js"></script>
	<script type="text/javascript" src="js/slideshow.js"></script>
</head>
<body>
	<div id="slideshow">
		<div class="slides">
			<ul>
				<li id="slide-one">
					<h2>Slide one</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Donec pretium arcu non velit. Phasellus adipiscing auctor
						lorem. Curabitur in urna ut purus consequat sollicitudin.
						Phasellus ut diam. Cras magna libero, tempor id, venenatis
						sit amet, venenatis et, dui.
					</p>
				</li>
				<li id="slide-two">
					<h2>Slide two</h2>
					<p>
						Nam ac nibh sit amet augue ultricies sagittis. Donec sit
						amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus
						nisi condimentum urna, sit amet molestie odio dolor non lectus.
						Cum sociis natoque penatibus et magnis dis parturient montes,
						nascetur ridiculus mus.
					</p>
				</li>
				<li id="slide-three">
					<h2>Slide three</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Suspendisse adipiscing dui a nibh. Integer tristique lorem
						vitae massa. Etiam dapibus, eros sit amet euismod semper,
						felis erat congue lacus, sed aliquam metus libero sed elit.
					</p>
				</li>
			</ul>
		</div>
		<ul class="slides-nav">
			<li><a href="#slide-one">Slide one</a></li>
			<li><a href="#slide-two">Slide two</a></li>
			<li><a href="#slide-three">Slide three</a></li>
		</ul>
	</div>
</body>
 
</html>

slideshow.css
I'll assume you don't need to see this...

slideshow.js

Code JavaScript:

$slideshow = {
    context: false,
    tabs: false,
    timeout: 1000,      // time before next slide appears (in ms)
    slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
    tabSpeed: 300,      // time it takes to slide in each slide (in ms) when clicking through tabs
    fx: 'scrollLeft',   // the slide effect to use
 
    init: function() {
        // set the context to help speed up selectors/improve performance
        this.context = $('#slideshow');
 
        // set tabs to current hard coded navigation items
        this.tabs = $('ul.slides-nav li', this.context);
 
        // remove hard coded navigation items from DOM
        // because they aren't hooked up to jQuery cycle
        this.tabs.remove();
 
        // prepare slideshow and jQuery cycle tabs
        this.prepareSlideshow();
    },
 
    prepareSlideshow: function() {
        // initialise the jquery cycle plugin -
        // for information on the options set below go to:
        // [url=http://malsup.com/jquery/cycle/options.html]JQuery Cycle Plugin - Option Reference[/url]
        $("div.slides > ul", $slideshow.context).cycle({
            fx: $slideshow.fx,
            timeout: $slideshow.timeout,
            speed: $slideshow.slideSpeed,
            fastOnEvent: $slideshow.tabSpeed,
            pager: $("ul.slides-nav", $slideshow.context),
            pagerAnchorBuilder: $slideshow.prepareTabs,
            before: $slideshow.activateTab,
            pauseOnPagerHover: true,
            pause: true
        });
    },
 
    prepareTabs: function(i, slide) {
        // return markup from hardcoded tabs for use as jQuery cycle tabs
        // (attaches necessary jQuery cycle events to tabs)
        return $slideshow.tabs.eq(i);
    },
 
    activateTab: function(currentSlide, nextSlide) {
        // get the active tab
        var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
 
        // if there is an active tab
        if(activeTab.length) {
            // remove active styling from all other tabs
            $slideshow.tabs.removeClass('on');
 
            // add active styling to active button
            activeTab.parent().addClass('on');
        }
    }
};
 
$(function() {
    // initialise the slideshow when the DOM is ready
    $slideshow.init();
});

If I take the following line out of my HTML, then the page and tabs display, but there is no automated "slide show"...

Code:

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

If I put that line back in, then I just the page appears, and the tabs disappear and there is still no "slide show".

I even tried using a direct link to JQuery like this, but same issue...

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Hope that is enough to help...

Thanks,

Debbie

**chris.upjohn** · Mar 12, 2011 21:12

I downloaded the slideshow source and your created a HTML file with your source code and without the CSS included it worked but it didn't look nice, simply add the following line before the <script> elements.

HTML Code:

<link rel="stylesheet" href="css/slideshow.css" media="screen" />

Apart from that it works fine for me, you can download the source im using below if that helps once its approved.

**DoubleDee** · Mar 12, 2011 21:50

Originally Posted by SgtLegend

I downloaded the slideshow source and your created a HTML file with your source code and without the CSS included it worked but it didn't look nice, simply add the following line before the <script> elements.

HTML Code:

<link rel="stylesheet" href="css/slideshow.css" media="screen" />

I have that line in my code - must have accidentally deleted when pasting my code.

Would screen-shots of what I am seeing help?

Apart from that it works fine for me, you can download the source im using below if that helps once its approved.

Yes I can do that.

In the mean time, I think the issue is that I don't have the right plug-in or have it installed properly.

You saw the website I am following along with.

I got Steps 1-3 working, which means that I see a web page with three tabs at the bottom, and when I click on each tab I see a new page. However, when I created "slideshow.js" and tried installing JQuery and referencing the files like this...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Tabbed jQuery slideshow</title>

	<link rel="stylesheet" href="css/slideshow.css" type="text/css" media="screen" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.cycle.js"></script>
	<script type="text/javascript" src="js/slideshow.js"></script>
</head>

<body>

in Step 4, I lose the three tabs and there isn't any auto-advancing of tabs.

Where are you getting the JQuery file?

I tried copying the source from this link:

"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"

and then pasting it in a file called "jquery.min.js" located in my "js" directory in my web root, but that didn't work.

Not sure if you are following me?!

Debbie

**chris.upjohn** · Mar 12, 2011 22:00

I link my jQuery scripts either using a local copy of http://code.jquery.com/jquery-1.5.1.min.js or using the script tag to reference it.

HTML Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

I don't think screenshots would be needed as this may just be a simple case of incorrect file paths, once the attachment i posted above is approved you will be able to cross reference the files to see if yours is any different.

**DoubleDee** · Mar 12, 2011 22:07

Attached are two screen-shots to show you the problem I am having...

Scenario #1:
I take out the reference to "Query.min.js" as follows...

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Tabbed jQuery slideshow</title>
	<link rel="stylesheet" href="css/slideshow.css" type="text/css" media="screen" />
	<script type="text/javascript" src="js/jquery.cycle.js"></script>
	<script type="text/javascript" src="js/slideshow.js"></script>
</head>

and the end result is Attachment #1.

Scenario #2:
I put in either reference to "JQuery.min.js" (i.e. local reference or the one on Google) as follows...

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Tabbed jQuery slideshow</title>
	<link rel="stylesheet" href="css/slideshow.css" type="text/css" media="screen" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.cycle.js"></script>
	<script type="text/javascript" src="js/slideshow.js"></script>
</head>

and the end result is Attachment #2.

Problems:
1.) Putting in reference to "jquery.min.js" breaks the three tabs on the bottom.

2.) In neither scenario is the automated sliding working.

Thanks,

Debbie

**DoubleDee** · Mar 12, 2011 22:10

Originally Posted by SgtLegend

HTML Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

I inserted this into my code in place of my reference and I have the same issues that I just described after your last response.

Debbie

**DoubleDee** · Mar 13, 2011 00:06

Finally figured out what the issue was!

Apparently I needed a different file from what the tutorial said...

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


<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>

Way past my bedtime with an hour less to sleep because of Daylight Saving Time, so I'll have to pick up tomorrow...

Debbie

**chris.upjohn** · Mar 13, 2011 00:42

That's very strange as i downloaded the source directly from that tutorial and it worked fine for me.

**DoubleDee** · Mar 13, 2011 09:29

Originally Posted by SgtLegend

That's very strange as i downloaded the source directly from that tutorial and it worked fine for me.

I didn't download the source. I copied and pasted the code she had listed on the website, and then went out and found the JQuery and JQuery SLide stuff. (Apparently a bad idea!)

Thanks,

Debbie

User Tag List

Thread: Using JavaScript in webpage

Thread Tools

Display

Using JavaScript in webpage

Bookmarks

Bookmarks

Posting Permissions