SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Using JavaScript in webpage

    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

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    What happens when you open the page? Is there a demonstration of the page online that we can see?

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    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

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.
    Attached Files Attached Files

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    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

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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
    Attached Images Attached Images

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    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

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Finally figured out what the issue was!

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

    <!-- include jQuery library -->
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <!-- include jQuery Cycle plugin -->
    <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

  11. #11
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    That's very strange as i downloaded the source directly from that tutorial and it worked fine for me.

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •