SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Novice unable to make jQuery plugin work (Backstretch)

    Hi all,

    Issue
    I cannot make the "Backstretch" jQuery plugin work for me.

    For further information about the plugin see developer Scott Robbins' Backstretch webpage and the github Backstretch read me.

    To rule out any issues with my own image, I'm first trying to make the query work with the Backstretch demo image (link to path).

    As the Backstretch tutorial suggests, I have positioned the query just above the closing BODY tag.

    I cannot see what I've done wrong. Also, because I have no understanding of Javascript, I'm unable to troubleshoot this. For your reference I've attached the HTML and CSS that I'm trying to apply the jQuery with.

    Here's my HTML

    Code HTML4Strict:
     
    <!DOCTYPE html>
     
    <html>
     
    <head>
     
     
        <title>Beijing Cottage | Chinese Restaurant & Takeaway, Croydon, London</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
     
    </head>
     
    <body>
     
        <div id="logo">
     
            <h1>Beijing Cottage</h1>
     
        </div> 
     
        <ul id="navbar">
            <li><a href="menu.html">Menu</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="find.html">Find Us</a></li>
            <li><a href="faq.html">FAQ</a></li>
        </ul>
     
        <div id="content">
     
            <div id="lcol">
                <h2>Croydon's favourite Chinese restaurant and takeaway</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed quam sit amet arcu volutpat mattis. Morbi mauris nibh, euismod id bibendum ac, iaculis quis augue. Aliquam scelerisque purus et leo pellentesque pellentesque.</p>
            </div>
     
            <div id="ccol">
                <h2>Croydon's favourite Chinese restaurant and takeaway</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed quam sit amet arcu volutpat mattis. Morbi mauris nibh, euismod id bibendum ac, iaculis quis augue. Aliquam scelerisque purus et leo pellentesque pellentesque.</p>
            </div>
     
            <div id="rcol">
                <h2>Croydon's favourite Chinese restaurant and takeaway</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed quam sit amet arcu volutpat mattis. Morbi mauris nibh, euismod id bibendum ac, iaculis quis augue. Aliquam scelerisque purus et leo pellentesque pellentesque.</p>
            </div>
     
        </div>
     
        <div id="footer">
     
            <div id="contact">
                        <h4>Telephone</h4>
                        <p>020 8688 2046</p>
                        <p>or</p>
                        <p>020 8688 1092</p>
                        <p>We regret to say to you <em>can't</em> reach us via email. Don't be shy about calling! We promise you'll hear a happy, great English-speaking voice if you phone anytime during our opening hours.</p>
            </div>
     
            <div id="location">
                        <h4>Location</h4>
                        <p>49 Southend, Croydon, CR0 1BF</p>
                        <p><a href="find.html">Info about parking, directions and public transport can be found on our Find Us page</a></p>
            </div>
     
            <div id="hours">
     
                        <table id="schedule" summary="Restaurant opening hours">
                            <caption>Opening Hours</caption>
                            <thead>
                                <tr>
                                    <th></th>
                                    <th class="opening" scope="col">Lunch</th>
                                    <th class="opening" scope="col">Dinner</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th class="day" scope="row">Monday</th>
                                    <td>12:00 - 14:30</td>
                                    <td>18:00 - 23:30</td>
                                </tr>
                                <tr>
                                    <th class="day" scope="row">Tuesday</th>
                                    <td>12:00 - 14:30</td>
                                    <td>18:00 - 23:30</td>
                                </tr>
                                <tr>
                                    <th class="day" scope="row">Wednesday</th>
                                    <td>12:00 - 14:30</td>
                                    <td>18:00 - 23:30</td>
                                </tr>
                                <tr>
                                    <th class="day" scope="row">Thursday</th>
                                    <td>12:00 - 14:30</td>
                                    <td>18:00 - 23:30</td>
                                </tr>
                                <tr>
                                    <th class="day" scope="row">Friday</th>
                                    <td>12:00 - 14:30</td>
                                    <td>18:00 - 23:30</td>
                                </tr>
                                <tr>
                                    <th class="day" scope="row">Saturday</th>
                                    <td>12:00 - 14:30</td>
                                    <td>18:00 - midnight</td>
                                </tr>
                                <tr>
                                    <th class="day" scope="row">Sunday</th>
                                    <td>closed</td>
                                    <td>18:00 - midnight</td>
                                </tr>
                            </tbody>
                        </table>
     
                    </div>
     
        </div>
     
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="jquery.backstretch.min.js"></script>
    <script>
     
      $.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
     
    </script>
     
    </body>
     
    </html>

    Here's my CSS

    Code CSS:
     
    /************************************************
                body
    ************************************************/
     
    body {
    margin: 0;
    padding: 0;
    }
     
     
     
    /************************************************
                masthead
    ************************************************/
     
    #logo {
    overflow: hidden;
    width: 7em;
    margin-left: 4em;
    padding: 0em 1em 0em 1em;
    background-color: black;
    }
     
    h1 {
    float: left;
    margin: 0;
    color: #FFFFFF;
    padding: 3em 0em 3em 0em;
    background-color: black;
    border-style: solid;
    border-width: 0em 0.1em 0em 0.1em;
    border-color: white;
    width: 4.5em;
    font: Helvetica;
    font-size: 1.5em;
    text-align: center;
    }
     
    #navbar {
    background-color: black;
    margin: 2em 0em 8em 0em;
    padding: 1em 0em 1em 8em;
    font: myriad;
    font-size: 1em;
    text-transform: uppercase;
    list-style: none;
    text-align: center;
    }
     
    #navbar li {
    display: inline;
    }
     
    #navbar a {
    display: block-inline;
    text-decoration: none;
    padding: 0.2em;
    margin: 0.5em 0.5em 0.5em 0.5em;
    }
     
    #navbar a:link {color: white;}      /* unvisited link */
    #navbar a:visited {color:white;}  /* visited link */
    #navbar a:hover {color: purple;}  /* mouse over link */
    #navbar a:active {color: red;}  /* selected link */ 
     
    /************************************************
                content
    ************************************************/
     
    #content {
    overflow: hidden;
    margin: 0 auto;
    background-color: pink;
    padding: 2em;
    width: 45em;
    }
     
     
    #lcol {
    float: left;
    width: 15em;
    background-color: yellow;
    }
     
    #ccol {
    float: left;
    width: 15em;
    background-color: red;
    }
     
    #rcol {
    width: 15em;
    float: left;
    background-color: blue;
    }
     
     
    #lcol rcol h2 {
    font: myriad;
    font-size: 0.9em;
    color: black;
    }
     
    #lcol rcol p {
    font: myriad;
    font-size: 0.6em;
    color: black;
    }
     
    /************************************************
                footer
    ************************************************/
     
    #footer {
    clear: both;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 5em;
    background-color: pink;
    padding: 2em;
    width: 45em;
    }
     
     
    #contact {
    float: left;
    width: 15em;
    background-color: white;
    }
     
    #location {
    float: left;
    width: 15em;
    background-color: white;
    }
     
    #hours {
    float: left;
    width: 15em;
    background-color: white;
    border-collapse: collapse;
    }
     
    .day {
    text-align: left;
    }

    Background
    After extensive Googling, the "Backstretch" jQuery plugin appears to be the best solution for a fluid, responsive design oriented around a large background image.

    About me
    I'm a novice trying to go about website design the right way. Although I consider myself literate in HTML and CSS, I have no idea about JavaScript.

    Any help would be kindly received.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    This may be a red herring, but my first question would be: Where is the jquery.backstretch.min.js located on your site? At the moment, this link:

    Code:
    <script src="jquery.backstretch.min.js"></script>
    is telling your browser to look for it in the same folder at the page that's requesting it. It would be better to have it in a folder for scripts, say /js/, and reference it like this:

    Code:
    <script src="/js/jquery.backstretch.min.js"></script>


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
  •