9 Replies - 1447 Views - Last Post: 10 April 2014 - 12:15 PM

#1 agent46   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Strategy for using Image Map with jQuery Includes instead of links?

Posted 01 April 2014 - 12:25 PM

Hello Dream.In.Coders,

Today, I need suggestions for a coding strategy. I want to use a kind of a selection grid to trigger jQuery include statements.

Here's the design:
  • I have a paint color "selection grid" on one side of my web page and a paint product information <div> container on the other side.
  • The "selection grid" appears as a single image with different paint product colors arranged in a grid pattern (see attachment).
  • When the customer hovers over, or clicks on, a color on the grid, I want to apply a CSS transition to that particular color to make it pop.
  • When the customer clicks on a particular color, it activates a JQuery include statement.
  • The jQuery include statement pulls in the HTML for that particular product info, sample photos, specs, buy button etc. into the the product information <div>.


This is my first HTML/CSS coding project so it's all new territory for me. Although I understand the languages pretty well at this point, I have a lot to learn about coding strategy and technique. So, I'm hoping for some suggestions on how best to set up the color selection grid.

I don't have a problem getting the jQuery includes to populate the product info <div> with the right HTML. (Thanks to some great people on this forum.) I'm also okay now with coding psuedo-classes for mouse states - including the transitions I want, so all that is good.

The problem I'm trying to solve is how to code the actual selection grid. I'm not using <a> links the way I'd normally do using a sprite for navigation, so I'm not sure how psuedo-classes and the jQuery include call would be applied here.

Here's two ideas I have so far - but I don't know if either is doable:
  • Use the solidFlakeSelectionGrid.png (attached) as a background sprite for cells in a table.
  • Display each color as the background for individual cells so the selection grid display on the page looks identical to the original selection grid .png image.
  • Apply pseudo classes (somehow) to each cell for the transitions.
  • On active - apply the jQuery include to call the product info HTML into the product info <div>.


Alternatively, would it be possible to do this using the solidFlakeSelectionGrid.png as an image map? If so, can I code the transitions and the jQuery call into an image map rather than the usual <a> link?

Any thoughts, observations, corrections, or discussion of better strategies for this design are much appreciated.

Thanks in Advance,
Mick

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Strategy for using Image Map with jQuery Includes instead of links?

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Strategy for using Image Map with jQuery Includes instead of links?

Posted 01 April 2014 - 01:25 PM

Image-maps are a pain. Your picture is very tabular so I like the idea of setting it as the background to a table. You just need to get all the metrics correct so it fits neatly behind the table. However..

Quote

I want to apply a CSS transition to that particular color to make it pop.

if you are talking about an effect that applies to the clicked cell (and the image behind it) then I would probably cut up the image and use the images as backgrounds to the individual cells (tds).

When you apply a click-event to the cell(s) you can, within the event, determine which cell was clicked. That is, which row and column the cell is in. This information is enough to work out what you need to then display.

So it isn't necessary to give each cell a class. (Each class-name would presumably be unique on the page anyway, so you would use ids in preference to class-names. Class-names are to group similar elements.)
Was This Post Helpful? 1
  • +
  • -

#3 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Strategy for using Image Map with jQuery Includes instead of links?

Posted 01 April 2014 - 01:42 PM

Actually, you don't need to know the row and column numbers specifically:
$('#tableid').on('click', 'td', function (e) {
    alert($('#tableid td').index(this));
});

This gives the index number of the clicked 'td' within the table, which will range from 0 upwards. This is sufficient information to be able to display the correct content.
Was This Post Helpful? 1
  • +
  • -

#4 agent46   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: Strategy for using Image Map with jQuery Includes instead of links?

Posted 01 April 2014 - 02:06 PM

Andrewsw,

Thanks for your reply. I like your perspective, so I'm going to go ahead and implement the table strategy and see how far I get with it.

About the css transitions: I may be able to get the effects I want by playing around with borders and so forth - techniques that don't rely on switching out the sprite background co-ordinates. We shall see...

I want to get back to some of this information you posted above. I have some questions about it. Hope you can look for my new posts on this thread tomorrow or following.

Thanks again.

:rockon:/>/>

Cheers!
Mick

This post has been edited by agent46: 01 April 2014 - 02:10 PM

Was This Post Helpful? 0
  • +
  • -

#5 agent46   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: Strategy for using Image Map with jQuery Includes instead of links?

Posted 08 April 2014 - 11:53 AM

Well ok. I've pretty much finished coding the sprite into the backgrounds of the table TDs and added a hover effect. (See attached screen shot.) All the page elements aren't completely styled yet but we're making progress. Now I want to include the jQuery code to get the on click event to pull in the appropriate HTML and display in the <div> on the left side of the page. The default contents, the picture of Lil' Daddy in his hot rod (and all the text), will be replaced by product information, pictures and buy buttons for the color selected from the table on the right. (Note that the page header and footer are called in using PHP require statements.)

Here is the (simplified)HTML code for the page:
<!-- The php brings in the page header -->
<?php  require("../_php_include/header2.php");?>

<!-- This div is the container for the product information selected from the color grid. It starts with default content called in using php -->
   <div id="productBuyBox">
   	<?php  require("../_page/_solids/solidDefault.php");?>
  </div>
 
<!-- This article contains a general description of the Solid Flake products. --> 
  <article id="productInfoBox"> 
      <h3>SOLID COLORS</h3>
      <h6>The classics that started it all!</h6>
      <p class="articleText">Lorem ipsum dolor sit amet...</p>
  </article>

<!-- This table is the selection grid for the colors. -->
  <table id="productSelectTable">
   <tr>
      <td id="td11"><p class="productSelectText"><span class="prodTextBk">Beatnik Purple</span></p></td>
      <td id="td12"><p class="productSelectText"><span class="prodTextBk">Sublime Green</span></p></td>
      <td id="td13"><p class="productSelectText"><span class="prodTextBk">Odd Ball Orange</span></p></td>
      <td id="td14"><p class="productSelectText"><span class="prodTextBk">Blue Balls</span></p></td>
   </tr>
   <tr>
      <td id="td21"><p class="productSelectText"><span class="prodTextBk">Surfite Silver</span></p></td>
      <td id="td22"><p class="productSelectText"><span class="prodTextBk">Ruined Retina Red</span></p></td>
      <td id="td23"><p class="productSelectText"><span class="prodTextBk">Freekin' Fuschia</span></p></td>
      <td id="td24"><p class="productSelectText"><span class="prodTextBk">Greasy Black</span></p></td>
   </tr>
   <tr>
      <td id="td31"><p class="productSelectText"><span class="prodTextBk">Gang Green</span></p></td>
      <td id="td32"><p class="productSelectText"><span class="prodTextBk">Machine Gun Grey</span></p></td>
      <td id="td33"><p class="productSelectText"><span class="prodTextBk">Bad Azz Blue</span></p></td>
      <td id="td34"><p class="productSelectText"><span class="prodTextBk">Warm Beer</span></p></td>
   </tr>
   <tr>
      <td id="td41"><p class="productSelectText"><span class="prodTextBk">Dog Pecker Pink</span></p></td>
      <td id="td42"><p class="productSelectText"><span class="prodTextBk">Cherrie Pie</span></p></td>
      <td id="td43"><p class="productSelectText"><span class="prodTextBk">Lime Squeezer</span></p></td>
      <td id="td44"><p class="productSelectText"><span class="prodTextBk">Tropi Cali</span></p></td>
   </tr>
      <tr>
      <td id="td51"><p class="productSelectText"><span class="prodTextBk">Beever Brown</span></p></td>
      <td id="td52"><p class="productSelectText"><span class="prodTextBk">Custard Pie</span></p></td>
      <td id="td53"><p class="productSelectText"><span class="prodTextBk">Purp-A-Trator</span></p></td>
      <td id="td54"><p class="productSelectText"><span class="prodTextBk">Ko-Balls</span></p></td>
   </tr>
</table>

<!-- The php brings in the page footer -->
<?php require("../_php_include/footer2.php");?>



In a previous post, andrewsw provided me with some generic jQuery code to work with. I've installed the jQuery library on the server and now have some beginner's questions about the code itself and its placement on the page.

As a beginner, here's what (I think) I understand about this JQuery code:
  • It selects the table by its id tag (#productSelectTable)
  • it grabs the index value of the table <td> cell selected by the on 'click' event and passes it to a variable (I'm not clear on which one.)
  • I will need to take that variable value and use it to call in the HTML associated with the color in that cell.


Here is the jQuery code:
    <script type="text/javascript">
$('#productSelectTable').on('click', 'td', function (e) {
    alert($('#productSelectTable td').index(this));
});
    </script>



My first questions are:
  • Does this code look correct to you?
  • What does the "alert" function do here?
  • Which variable contains the <td> cell index?
  • Where on the page should I insert the <script> block?
  • Does the <script> block belong in the header after the link to the jQuery library?
  • Or does it belong at the bottom of the page just above the call for the footer?


Any help with this is much appreciated.

Thanks in Advance,
Mick

Attached image(s)

  • Attached Image

This post has been edited by agent46: 08 April 2014 - 12:05 PM

Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Strategy for using Image Map with jQuery Includes instead of links?

Posted 08 April 2014 - 08:52 PM

Hey there,

I wanted to let you know that while you are accomplishing your goal, you may want to look at some alternative methods. For example, since you are basically displaying a list of items that happen to be in a grid, you should use markup that represents that. Then you can make each list item clickable. This not only achieves your result, but will give you better performance (especially in layout) and also allow you to adjust it's dimensions in the future if you decide to use this methodology in a mobile context. Since that is a mouthful I decided to rig up your system into a fiddle with comments so you can see how it all works together, I also explained what jQuery is doing for you. Just for DIC archiving I'm going to place all of the code here as well:

HTML
<div id="products" class="item-one">
    <h1>Item 1</h1>
</div>
<div id="selection">
    <ul>
        <li data-item="one" class="current">Item 1</li>
        <li data-item="two">Item 2</li>
        <li data-item="three">Item 3</li>
        <li data-item="four">Item 4</li>
        <li data-item="five">Item 5</li>
        <li data-item="six">Item 6</li>
    </ul>
</div>


Javascript
// This will be a variable that will keep
// track of which product is currently selected
var currentProduct = "one";

// This is saying that when you click on a list-item (li) that is
// contained within an unordered list (ul) that is within an elemente
// with an id of #selection, run this function. For debugging purposes
// I have named it swapProducts
$('#selection ul li').click(function swapProducts() {
    
    // For debugging purposes only
    // To open debugging, press F12
    console.log("Previous product is: " + currentProduct);    
    
    // This will remove the class that is currently selected
    $('#products').removeClass('item-' + currentProduct);
    
    // $(this) represents the li element that was clicked
    // Here we are setting the value of the current li to our
    // currentProduct variable.
    currentProduct = $(this).data("item");
    console.log("Current product is: " + currentProduct);
    
    // This will add our newly selected item class to our
    // products div, which will allow us to custom style the
    // container.
    $('#products').addClass('item-' + currentProduct);
    
    // This will update the text with the new content
    // You could also, have this content already in the
    // products container and choose to simply hide/show it
    var titleText = $(this).text();
    $('#products h1').text(titleText);
    
    $('#selection ul li').removeClass('current');
    $(this).addClass('current'); 
});


CSS
html, body {
    font-family: sans-serif;    
}

#products,
#selection {
    float: left;
    width: 45%;
}

#selection {
    margin-left: 3%;
}

#selection ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#selection ul li {
    float: left;
    width: 30%;
    height: 100px;
    background: #ccc;
    line-height: 100px;
    text-align: center;
}

#selection ul li:hover,
#selection ul li.current {
    color: white;
    background: green;    
}

#selection ul li:hover {
    cursor: pointer;
}

#products.item-one {
    border: 1px solid red;
}

#products.item-two {
    border: 1px solid blue;
}

#products.item-three {
    border: 1px solid green;
}

#products.item-four {
    border: 1px solid purple;
}

#products.item-five {
    border: 1px solid orange;
}

#products.item-six {
    border: 1px solid teal;
}

Was This Post Helpful? 1
  • +
  • -

#7 agent46   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: Strategy for using Image Map with jQuery Includes instead of links?

Posted 09 April 2014 - 10:29 AM

gregwhitworth,

Thanks for taking the time to document your reply so thoroughly. I think it sets the gold standard for how these forums can help people learn and understand. These topics can be far ranging and complex - and people like me just getting started have lots of questions. A good teacher anticipates questions when offering an answer.

I'm going to work with your strategy today and tomorrow. Will reply back for more dialog and to give you some feedback. Have a great day.

Many thanks again,
Mick

This post has been edited by agent46: 09 April 2014 - 10:30 AM

Was This Post Helpful? 0
  • +
  • -

#8 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Strategy for using Image Map with jQuery Includes instead of links?

Posted 09 April 2014 - 01:36 PM

Sounds good! Let us know if you have any further questions.
Was This Post Helpful? 0
  • +
  • -

#9 agent46   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: Strategy for using Image Map with jQuery Includes instead of links?

Posted 10 April 2014 - 11:45 AM

gregwhitworth,

Looking good so far. I've re-coded the html for the table selection grid and used your strategy for an unordered list. You are right about the styling. The table's response to some of the pseudo-class styles I tried was dodgy at best. The unordered list is much cleaner.

I'm following the logic of your jscript code pretty well I think. (Thanks for those excellent comments.) The script works nicely by changing the class of the <div> (id="products") based on the selection item I click. You've written the code to apply different css stylings to the content of the <div>. Great. This is a good lesson in jscript.

Now, in my scenario, instead of triggering style changes to the content of the "products" <div> like you do in your example, I want to switch out the actual HTML in there and reuse some (but not all) of the same styles I have. I'm thinking of applying the HTML() function to swap out the entire HTML contents of the "products" <div> at one time. Doing this would change the last part of your script scenario.

So, I have twenty different product choices on this selection grid. Here are my ideas, and I'm all ears if anyone is willing to comment on their practicability.

Scenario 1:
I'm thinking to apply the HTML()function to switch out the HTML in the "products" <div> based on the current class designation (following the logic of your code example). It seems like I'd have to have some kind of drop through loop with 20 different possible sets of HTML to be passed by the HTML() function.

Scenario 2:
In this scenario, I'd use the same strategy as scenario 1 but instead of listing all the HTML in my script (about 2200 lines), I'd pull in the HTML using a PHP require call. I like this idea because it allows me to keep each product HTML in a separate file - easier to edit and maintain. Easier to read. Can this be done? I don't know.

Scenario 3:
I think this is Greg's suggestion. In this scenario, I'd code all the different products' HTML into the "products" <div> at page load. When a selection is clicked, the current class would cause the selected HTML to display in the "products" <div> while switching off the previous selection. I've never attempted doing this before but, I'm assuming there are css methods for it.

I'm favoring Scenario 2 at the moment, but would enjoy learning from responses to any of these three strategies by more experienced people here.

Thanks in Advance,
Mick

This post has been edited by agent46: 10 April 2014 - 11:57 AM

Was This Post Helpful? 0
  • +
  • -

#10 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Strategy for using Image Map with jQuery Includes instead of links?

Posted 10 April 2014 - 12:15 PM

hmmm... like you said there are a bunch of different ways to achieve the same thing. Is most of the content that is changing just text? If that is the case then I would just load them all up and toggle them. Hitting the server again will only cause unnecessary delays and storing text in memory is a piece of cake even for low end devices. Now you may have no desire to have them all in one page for developing with, and that is fine but in production I would opt to display them all in one container.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1