Web Site Extreme Makeover, Part 6 of 7

Time To Get Serious with some Actual jQuery Code

At the half a dozen point in the installments, it's time to get (a little) serious with some actual jQuery code. Actually, it won't be very much code; but that's a good thing. jQuery makes it very easy to spiffify (so I'm a neologist - sue me!) your site, and I'll prove it now. Let's go to the Images page and add a widget that will contain and display the images we want to add

First, I add the references to jQuery and jQueryUI to that page (download the jQueryUI files if you need to from http://jqueryui.com/; another option is to use a CDN (a hosted version of the files), but I don't think I'll do that with this example):

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script>
    $(document).ready(function () {
    });
</script>
<h2>We will show some false feet here (faux toes)</h2>

Perhaps you noticed that I also added an empty jQuery "ready" handler – I will give it some code pretty soon, I reckon. Finally, I added some placeholder text just so we know we got to the right page when navigating during the testing period.

Now for the widget that will display the photos. I decide to give “Anything Slider” a try, as it is talked up and its usage documented in a book I own and enjoy, namely: .

So, using the instructions in the book (starts on page 312 for those following along at home), I download the zipped repository from https://github.com/ProLoser/AnythingSlider/ and then add the CSS and jQuery files below the Content and Scripts folders, respectively. I add anythingslider.css to the former and jquery.anythingslider.min.js to the latter.

I add three photos for now to test it out. The code in Photos.aspx between the asp:Content tags is:

<link href="Content/anythingslider.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="Scripts/jquery.anythingslider.min.js"></script>
<script>
    $(document).ready(function () {
        $('#slider').anythingSlider();
    });
</script>
<div id="slider">
    <div><img src="Images/JPoolGetty.JPG" /></div>
    <div><img src="Images/Billiards.JPG" /></div>
    <div><img src="Images/PoolHarder.JPG" /></div>
</div>
<h2>We will show some false feet here (faux toes)</h2>

This works fine, as you can see with your very own peepers:

...so I add the rest of the images that I have so far.

As Rod Price () used to say, “Slide On!”

Eye Scream Social Buttons

Now let's add some “social buttons” namely for Twitter tweets and Facebook likes. This way if somebody sees the site and wants to let their friends or followers -- who may be in the market for a pool or pool work – know about it, they can tweet or like the page and help advertise it.

To accomplish this, I add the following code:

<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

        <div style="display:inline-block;vertical-align:top">
            <a href="https://twitter.com/share" class="twitter-share-button" 
              data-url="http://www.replaster.azurewebsites.net" 
              data-text="Look at this Pool plastering company serving Central California!" 
              data-via="BClayShannon">Tweet</a>
            <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], 
              p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { 
              js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; 
              fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
        </div>
        <div style="display:inline-block;vertical-align:top" class="fb-like" 
          data-href="http://www.replaster.azurewebsites.net" data-send="false" 
          data-width="450" data-show-faces="false" data-font="segoe ui"></div>

And now here it is in context:

<asp:Content ID="BodyContent" 
   ContentPlaceHolderID="MainContent" runat="server">

<div id="fb-root"></div>
<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

    <div class="jumbotron backgroundcolorLightSkyBlue" >
        <h1>Hartt's Pool Plastering</h1>
        <p class="lead fontcolorAzure">Serving Central California 
          from Stockton to Madera and from Sonora to Tracy</p>
        <img src="Images/Logo-BannerSmall_1_.gif" />
        <div style="display:inline-block;vertical-align:top">
            <a href="https://twitter.com/share" class="twitter-share-button" 
              data-url="http://www.replaster.azurewebsites.net" 
              data-text="Look at this Pool plastering company serving Central California!" 
              data-via="BClayShannon">Tweet</a>
            <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], 
              p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { 
              js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; 
              fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
        </div>
        <div style="display:inline-block;vertical-align:top" class="fb-like" 
          data-href="http://www.replaster.azurewebsites.net" data-send="false" 
          data-width="450" data-show-faces="false" 
          data-font="segoe ui"></div>
    </div>

        <div class="row">
        <div class="col-md-4">
            <h2>Services We Provide</h2>
            <ul>
                <li>Plastering & Replastering</li>
		. . .

...so that the top part of the page now looks like this:

That's enough for this go-round. Next time we'll add some CSS to cause the H1 text (“Hartt's Pool and Plastering”) to cycle between various shades of blue when the page is first loaded, and then try to beautify the other pages a bit by changing font faces and such.