Dropdown select with images - javascript

I wanted to create a dropdown select which has images instead of text as the options. I've done some Googling and searching here on Stack Overflow, and the answer generally given is to use the jQuery combobox.
The problem with this solution, it seems to me, is that you have to provide text. It looks like the images are just icons that accompany that text on the left. Correct me if I'm wrong, but this solution wouldn't cover what I'm trying to do-- which is completely replace the text with images.
Some background on what I'm trying to do-- I'm trying to create a dropdown for users to select line thickness on an online painting/doodling app. The images would be lines of different thickness, kind of like mspaint.

You don't even need javascript to do this!
I hope this got you intrigued so here it goes. First, the html structure:
<div id="image-dropdown">
<input type="radio" id="line1" name="line-style" value="1" checked="checked" />
<label for="line1"></label>
<input type="radio" id="line2" name="line-style" value="2" />
<label for="line2"></label>
...
</div>
Whaaat? Radio buttons? Correct. We'll style them to look like a dropdown list with images, because that's what you're after! The trick is in knowing that when labels are correctly linked to inputs (that "for" attribute and target element id), the input will implicitly become active; click on a label = click on a radio button. Here comes comes slightly abbreviated css with comments inline:
#image-dropdown {
/*style the "box" in its minimzed state*/
border:1px solid black; width:200px; height:50px; overflow:hidden;
/*animate the dropdown collapsing*/
transition: height 0.1s;
}
#image-dropdown:hover {
/*when expanded, the dropdown will get native means of scrolling*/
height:200px; overflow-y:scroll;
/*animate the dropdown expanding*/
transition: height 0.5s;
}
#image-dropdown input {
/*hide the nasty default radio buttons!*/
position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown label {
/*style the labels to look like dropdown options*/
display:none; margin:2px; height:46px; opacity:0.2;
background:url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;}
#image-dropdown:hover label{
/*this is how labels render in the "expanded" state.
we want to see only the selected radio button in the collapsed menu,
and all of them when expanded*/
display:block;
}
#image-dropdown input:checked + label {
/*tricky! labels immediately following a checked radio button
(with our markup they are semantically related) should be fully opaque
and visible even in the collapsed menu*/
opacity:1 !important; display:block;
}
Full example here: http://jsfiddle.net/NDCSR/1/
NB1: you'll probably need to use it with position:absolute inside a container with position:relative +high z-index.
NB2: when adding more backgrounds for individual line styles, consider having the selectors based on the "for" attribute of the label like so:
label[for=linestyle2] {background-image:url(...);}

Check this example .. everything has been done easily http://jsfiddle.net/GHzfD/
EDIT: Updated/working as of 2013, July 02: jsfiddle.net/GHzfD/357
#webmenu{
width:340px;
}
<select name="webmenu" id="webmenu">
<option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
<option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
<option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
<option value="email" selected="selected" title="http://annualreport.tacomaartmuseum.org/sites/default/files/L_AnnualReport_300x60.png"></option>
<option value="faq" title="http://fleetfootmarketing.com/wp-content/uploads/2013/01/Wichita-Apartment-Video-Tours-CTA60-300x50.png"></option>
<option value="games" title="http://krishnapatrika.com/images/300x50/pellipandiri300-50.gif"></option>
</select>
$("body select").msDropDown();

Seems like a straightforward html menu would be simpler. Use html5 data attributes for values or whatever method you want to store them and css to handle images as backgrounds or put them in the html itself.
Edit: If you are forced to convert from an existing select that you can't get rid of, there are some good plugins as well to modify a select to html. Wijmo and Chosen are a couple that come to mind

If you think about it the concept behind a dropdown select it's pretty simple. For what you're trying to accomplish, a simple <ul> will do.
<ul id="menu">
<li>
<img src="" alt=""/> <!-- Selected -->
<ul>
<li><img src="" alt=""/></li>
<li><img src="" alt=""/></li>
<li><img src="" alt=""/></li>
<li><img src="" alt=""/></li>
</ul>
</li>
</ul>
You style it with css and then some simple jQuery will do. I haven't tried this tho:
$('#menu ul li').click(function(){
var $a = $(this).find('a');
$(this).parents('#menu').children('li a').replaceWith($a).
});

PLAIN JAVASCRIPT:
DEMO: http://codepen.io/tazotodua/pen/orhdp
var shownnn = "yes";
var dropd = document.getElementById("image-dropdown");
function showww() {
dropd.style.height = "auto";
dropd.style.overflow = "y-scroll";
}
function hideee() {
dropd.style.height = "30px";
dropd.style.overflow = "hidden";
}
//dropd.addEventListener('mouseover', showOrHide, false);
//dropd.addEventListener('click',showOrHide , false);
function myfuunc(imgParent) {
hideee();
var mainDIVV = document.getElementById("image-dropdown");
imgParent.parentNode.removeChild(imgParent);
mainDIVV.insertBefore(imgParent, mainDIVV.childNodes[0]);
}
#image-dropdown {
display: inline-block;
border: 1px solid;
}
#image-dropdown {
height: 30px;
overflow: hidden;
}
/*#image-dropdown:hover {} */
#image-dropdown .img_holder {
cursor: pointer;
}
#image-dropdown img.flagimgs {
height: 30px;
}
#image-dropdown span.iTEXT {
position: relative;
top: -8px;
}
<!-- not tested in mobiles -->
<div id="image-dropdown" onmouseleave="hideee();">
<div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
<img class="flagimgs first" src="http://www.google.com/tv/images/socialyoutube.png" /> <span class="iTEXT">First</span>
</div>
<div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
<img class="flagimgs second" src="http://www.google.com/cloudprint/learn/images/icons/fiabee.png" /> <span class="iTEXT">Second</span>
</div>
<div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
<img class="flagimgs second" src="http://www.google.com/tv/images/lplay.png" /> <span class="iTEXT">Third</span>
</div>
<div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
<img class="flagimgs second" src="http://www.google.com/cloudprint/learn/images/icons/cloudprintlite.png" /> <span class="iTEXT">Fourth</span>
</div>
</div>

This is using ms-Dropdown : https://github.com/marghoobsuleman/ms-Dropdown
But data resource is json.
Example : http://jsfiddle.net/tcibikci/w3rdhj4s/6
HTML
<div id="byjson"></div>
Script
<script>
var jsonData = [
{description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
{image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
{image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
{image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
{image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
{image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
{image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
];
$("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
}
</script>

Use combobox and add the following css .ddTitleText{ display : none; }
No more text, just images.

I am a little to late on this, but you can do this using a simple bootstrap drop down and then do your code on select change event in any language or framework. (This is just a very basic solution, for other people like me who are just starting out and looking for a solution for a small simple project.)
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Image
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li>
<li role="separator" class="divider"></li>
<li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li>
</ul>
</div>

Years gone and such things is possible to create using pure javascript and css without jquery, here is an example: Selectron23
Example:
let data1 = {
options: [
{
value: 'usd',
title: 'USD',
text: 'United States Dollar',
img: 'https://pluginus.net/wp-content/uploads/2021/03/united_states_of_america.gif'
},
{
value: 'eur',
title: 'EUR',
text: 'European Euro',
img: 'https://pluginus.net/wp-content/uploads/2021/03/european_union.gif'
},
{
value: 'uah',
title: 'UAH',
text: 'Украинская гривна',
img: 'https://pluginus.net/wp-content/uploads/2021/03/ukraine.gif'
},
{
value: 'gbp',
title: 'GBP',
text: 'Great Britain pound',
img: 'https://pluginus.net/wp-content/uploads/2021/03/united_kingdom.gif'
}
],
label: 'Select currency',
selected: 'uah',
width: '100%',
imgpos: 'right',
//name: 'my_value', //hidden input name
fusion: false, //use if wrap to fuse titles by keys with options description here
max_open_height: 200, //max height (px) of opened drop-down when vertical scroll appears
};
var selector1 = new Selectron23(document.querySelector('#block-example'), data1);
Result:

I tried several jquery based custom select with images, but none worked in responsive layouts. Finally i came across Bootstrap-Select. After some modifications i was able to produce this code.
github repo link here

Related

How Do I Get the Selected Value from a Dropdown to Appear at the Top and Replace the Header?

I am using a dropdown for filters and want the selected value from the dropdown to appear at the top so users can see what their selection is when the dropdown closes and they continue browsing.
In this scenario, let's say I select "Option 2", I would want the span section value of "Category" to be replaced by "Option 2". ( I tried using the HTML select and option tags but they just don't work to trigger the filter.)
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
width: 50px;
padding: 4px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
p {
font-size: 16px;
}
<div class="dropdown">
<span>Category</span>
<div class="dropdown-content">
<a href="www.site.com/option1">
<p>Option 1</p>
</a>
<a href="www.site.com/option2">
<p>Option 2</p>
</a>
<a href="www.site.com/option3">
<p>Option 3</p>
</a>
</div>
</div>
Question is taggged [jQuery], therefore, without needing to change the HTML ...
$('a', '.dropdown-content').on('click', function() {
$(this).closest('.dropdown').find('span').text(this.text());
});
This expression will give all similarly constructed dropdowns on the page the required behaviour.
By traversing the DOM from the clicked element to the span element, there's no fear of cross-talk between different dropdowns.
Pretty simple stuff. To make it easier, I would add a class to each of the links and probably one to the span too for good measure. All in all, you would have something that looks like this:
<div class="dropdown">
<span class="selected-category">Category</span>
<div class="dropdown-content">
<a class="dropdown-option" href="www.site.com/option1"><p>Option 1</p></a>
<a class="dropdown-option" href="www.site.com/option2"><p>Option 2</p></a>
<a class="dropdown-option" href="www.site.com/option3"><p>Option 3</p></a>
</div>
</div>
document.querySelector('.dropdown-option').forEach(el => el.onclick = (e) => document.querySelector('.dropdown .selected-category').innerText = e.currentTarget.innerText);
if you can't add a class name, you just need to build a good selector using the element types instead.
const categorySpan = document.querySelector('.dropdown span');
const dropdownItems = document.querySelector('.dropdown div a');
then it's the same thing as with the class.
Edit: Updated based on comments from Heretic Monkey (thanks!)

Why does the selected element not always pop out during my Bootstrap Tour?

This is the HTML that my Bootstrap Tour is working on:
<body class="top-navigation">
<div id="wrapper">
<div id="page-wrapper">
<div class="row border-bottom">
<nav class="navbar navbar-static-top">
<div class="navbar-header">
<a href="/">
<img class="navbar-brand" alt="image" src="logo.png" />
</a>
<form class="navbar-form-custom" action="/profiles" accept-charset="UTF-8" method="get">
<input type="text" name="q" id="top-search" class="form-control"/>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<a class="coach-dashboard" href="/dashboard">
<i class="fa fa-dashboard"></i> My Dashboard
</a>
</li>
<li>
<a class="my-favorites" href="/profiles?filter=favorites">
<i class="fa fa-list"></i> My Favorites
</a>
</li>
<li>
<a class="settings" href="/users/registration/edit">
<i class="fa fa-sliders"></i> My Settings
</a>
</li>
</ul>
</nav>
</div>
<div class="row wrapper border-bottom gray-bg page-heading">
<h2><span class="num-players">14 Players - Tryouts One 2016</span</h2>
</div>
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="contact-box profile-24">
<a href="/profiles/24">
<div class="col-lg-offset-1 col-lg-4 col-xs-4">
<div class="text-center">
<img alt="image" src="profile-24.jpg" />
Age: 30
</div>
</div>
<div class="col-lg-offset-1 col-lg-6 col-xs-8">
<h3><strong>Jimmy Choos</strong></h3>
<address>
<strong>St. George's College</strong><br>
Grade: <br>
Height: N/A<br>
Weight: N/A<br>
</address>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
This is the JS that triggers that the tour:
<script type="text/javascript">
$(document).on('turbolinks:load', function() {
var tour = new Tour({
storage: false,
backdrop: true,
steps: [
{
element: "div.navbar-header input#top-search",
title: "Search",
content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
},
{
element: "div.page-heading h2 span.num-players",
title: "Number of Players",
content: "This is the number of players are in our database for this Tournament"
},
{
element: '#page-wrapper div.contact-box.profile-<%= #profiles.first.id %>',
title: "Player Info",
content: "Here we have a quick snapshot of the player stats"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
});
</script>
Here is how the tour looks with the backdrop:
This is rendered correctly:
These two are not rendered correctly with the highlighted element not visible:
How do I get all of the elements to render like the top one, where the highlighted element is visible?
Edit 1
Here is a JSFiddle that shows the behavior:
https://jsfiddle.net/nrkry27p/
Specifically, pay attention to the 2nd step where it doesn't get highlighted like the search in the demo gets highlighted. Except in my real code, search doesn't get highlighted...but you should be able to get an understanding of what's happening.
Final Edit
After many rounds of edits, constant backing and forthing, we finally figured it out. So, I have decided to clean up all of the edits that don't really add value to understanding the problem and the solution.
Currently the .tour-step-background element has a background-color:inherit property, which is inheriting transparent from the body. The reason the search element is displaying, is that it defaults to having a background colour of white from the browser.
Try adding a background colour to the .tour-step-background element, or alternatively, set a background-color for your body element. This should "highlight" the step that it's on.
JSFIDDLE
.tour-step-background{
background-color:#FFF;
}
EDIT
This is still a z-index and background-color issue that you're encountering. Based upon our discussion, it turned out that the supplied JS fiddle did not include the offending CSS from bootstrap regarding the z-index of navbar-fixed-top. Once this was identified, we needed to add some JS and some CSS to fix the problem. The JS applies a class to the body called is-touring when you start touring and removes the class when you end.
Using this class we override the z-index value of navbar-static-top so that we can display its internal elements above the tour display. The onStart and onEnd functions are available in the API reference for bootstrap tour.
CSS
/* ALSO REMOVE THE Z-INDEX VALUE ON THE RULE (line 247) */
.navbar-form-custom .form-contro{}
/* ADD THIS STYLE */
.is-touring .navbar-static-top{
z-index:auto;
}
/* BEGIN OPTIONAL CSS */
.tour-step-background {
background-color:#fff;
z-index: 2101;
}
.tour-step-backdrop{ /* this exists already, so update */
z-index: 2102;
}
.tour-backdrop {
z-index: 2100;
opacity: .7;
}
.popover[class*=tour-] {
z-index: 2101;
}
/* END OPTIONAL CSS */
JS
var tour = new Tour({
storage: false,
backdrop: true,
onStart: function(){
$('body').addClass('is-touring');
},
onEnd: function(){
$('body').removeClass('is-touring');
},
steps: [
{
element: "div.navbar-header img.navbar-brand",
title: "Go Home",
content: "Go home to the main page."
},
{
element: "div.navbar-header input#top-search",
title: "Search",
content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
},
{
element: "span.num-players",
title: "Number of Players",
content: "This is the number of players that are in our database for this Tournament"
},
{
element: '#page-wrapper div.contact-box.profile-24',
title: "Player Info",
content: "Here we have a quick snapshot of the player stats"
}
]});
UPDATED FIDDLE
I've played with your code and found a solution. The thing is it adds a class to your span and hence that does not have a white background you won't get the highlight behaviour. So if you add this in your css:
.num-players.tour-step-backdrop {
background-color: white;
}
It will work. And for your last one as well:
.contact-box.profile-24.tour-step-backdrop {
background-color: white;
}
Or you could use a general rule like this:
.tour-step-backdrop {
background-color: white;
}
UPDATE:
Based on your screen shot and changing the styles, I realised that you have a lower z-index on the class than the backdrop itself, so changing background alone doesn't help:
.tour-step-backdrop {
background-color: white;
z-index: 3100;
}
UPDATE 2:
That class is generic and shouldn't be used alone. I've tried a couple of variations and this seems to be working:
.tour-step-backdrop.tour-tour-element {
z-index: 4000;
background-color: white;
}
You must give initial background value to the elements you want to style to because there was no default background style even inherit on both span and h2 elements. It's easy to solve this problem as long as giving both span.num-players and its parent h2 a style is background: inherit. Just append that as following.
h2 {
/* Other style */
background: inherit;
}
.tour-step-backdrop {
/* Other style */
background: inherit;
}
EDIT
JSFiddle
I commented z-index of .tour-backdrop because it overlaid .tour-step-backdrop element.
.tour-backdrop {
/* z-index: 2100; Disable this style. */
opacity: .7;
}

How to represent a breadcrumb child?

I represent the breadcrumb in a table as follow:
<ol class="breadcrumb" data-sly-use.breadcrumb="myModel.js">
<output data-sly-unwrap data-sly-list="${breadcrumb}">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="${item.href}" itemprop="url">
<span itemprop="title">${item.label}</span>
</a>
</li>
</output>
</ol>
How to represent the breadcrumb child in this structure?
It seems like you are using apache sling, which I haven't used myself, but for setting up a simple breadcrumb, it can be done just with CSS. Here is one which I set up using display: inline on the the li.
jsfiddle
I'm sure you could use some pretty nice styling on it, but this is a simple example using a triangle for the arrows on the breadcrumb.
html
<div id="menu">
<ul>
<li>
<a href="#" itemprop="url">
<span itemprop="title">item 1</span>
</a>
</li>
<div class="arrow-right"></div>
<li>
<a href="#" itemprop="url">
<span itemprop="title">item 2</span>
</a>
</li>
</ul>
</div>
css
.arrow-right {
width: 0;
height: 0;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.5em solid black;
display: inline-block;
}
#menu ul{
list-style: none;
}
#menu li{
display: inline;
}
I'm not entirely sure what your question is. What do you mean by "breadcrumb child"? In the Sightly example you give each item is one of the elements of the breadcrumb, so that is what I would assume the "child" is, but that doesn't seem to be what you mean.
If the question is about what myModel.js might look like, it would simply have to implement the javascript Use API and return a list of objects. For example
"use strict";
use(function () {
var crumbs= [];
crumbs.push({href: '/home/path', label: 'Home'});
crumbs.push({href: '/section/path', label: 'Section'});
return crumbs;
});
Rather than hard coding the crumbs you can use the objects that Sling gives you to get the parents of the current page, but this works as a simple example.
note: At this point you should probably use the Java API, rather than the javascript API for production code. See the comparison chart from Adobe's Sightly Intro

Show menu when clicked

i have the following menu:
<div id ="navigation-menu">
<div id ="squaremenu">
<ul>
<li><a class ="homemenu" href="#Home" data-menuanchor="#Home"><img id ="homemenu" src="homemenu.bmp" height="30" width="30" /><span id="spanhome">Home</span></a></li>
<li><a class="imprimir" href="#Servicios" data-menuanchor="#Servicios"><img id ="imprimir" src="imprimir.bmp" height="30" width="30" /><span id="spanimprimir">Imprimir</span></a></li>
<li><a class="contacto" href="#Contacto" data-menuanchor="#Contacto"><img id="contacto" src="contacto.bmp" height="30" width="30" /><span id="spancontacto">Contacto</span></a></li>
</ul>
</div>
</div>
styled with css.
http://jsfiddle.net/t86Vp/
I would like if it's possible to hide most of the menu to the left and unhide it everytime i click on the menu?
If it's possible anyone can give solution with javascript/css?
Thanks in advance.
Thanks for your fast answer, i know i may not have explained myself well because english is not my main language.
Edit: What i really want is show only a portion of the menu, and everytime i clic it, then show or hide the other portion.
Once again, thanks for your fast answers
And sorry if i cant make myself clear english is not my main language.
Solution for the people with the same problem/idea: (menu that open or close every time you click it
Thanks to #Sergio
http://jsfiddle.net/6xCEp/2/
You could use this:
$('#squaremenu').on('click', function () {
$(this).addClass('abrir');
});
CSS
/************
* ADDED
*/
#squaremenu img {
display:none;
}
#squaremenu.abrir {
width:36px !important;
}
#squaremenu.abrir img {
display:block;
}
/***********
* END
*/
#squaremenu {
position:fixed;
left:0px;
top:150px;
display:block;
margin: 0px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background:rgba(43,50,61,1);
font-size: 1em;
color:white;
width:10px; /* CHANGED!! */
height:120px;
}
Demo
You may need javascript for this. Include jquery in your page and try this
$("#squaremenu a").on("click", function(){
var $this = $(this);
$this.find("span").toggleClass("menu-item-visible");
});
You may need to group all css styles that show that menu under one class, then toggle that class as shown above. In my example I used the class menu-item-visible
Let me know if you have any more questions on this or if it's not clear

alternative of scrollLeft()

G'day!
I have a page which has Horizontally Scroll feature going on there.
I have a side bar and a content box
In side bar I have 5 links, say LINK1 - LINK5
In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.
So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.
However, I would like to load the page in the 2nd div.
I was able to do this using scrollLeft()
<script>$("div.content1").scrollLeft(700);</script>
But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.
Help?
*I think this code is needed
<script>
function goto(id, t){
//animate to the div id
$(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);
}
</script>
This is sample of HTML code
<div id="sidebar1">
<span class="upper">Foods</span><br />
<span class="lower">Rice, Noodles & Pasta</span><br />
<span class="lower">Snacks & Tidbits</span><br />
<span class="lower">Canned & Ready to Eat</span><br />
<span class="lower">Breakfast Cereal</span><br />
<br />
This is sample of my content box
<div class="content1">
<div class="contentbox-wrapper">
<div id="rice" class="contentbox" align="center">
<h2>
Rice, Noodles & Pasta
</h2>
<section id="product">
<ul class="clear">
<li data-id="1">
<div href="#">
<img src="images/products/f1/_DSC4640.jpg" width="200" height="200" />
<h3>Maggi Curry Flavour</h3>
<p>(5 + 1) x 79 G</p>
<h2>Price:$2.40</h2>
</div>
</li>
I've created an example based a little on your markup. I hope, that it is, what you're looking for. I also made some minor changes on your JavaScript. See the explanation below.
HTML
<nav>
<a>Item 1</a>
<a>Item 2</a>
</nav>
<div class="contentbox-wrapper">
<div>
<h2>Item 1</h2>
</div>
<div>
<h2>Item 2</h2>
</div>
</div>
If you can apply a markup like this, where the index of each link corresponds with the index of each content container, then you can get rid of all the ids that you need in the JavaScript part.
CSS
div.contentbox-wrapper {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
overflow-x: scroll;
font-size: 0;
line-height: 0;
white-space: nowrap;
}
div.contentbox-wrapper > div {
display: inline-block;
width: 400px;
height: 200px;
text-align: center;
}
div.contentbox-wrapper > div:last-child {
margin-right: 0;
}
JavaScript
var container = $('div.contentbox-wrapper');
var boxes = container.children();
$('nav > a').click(function() {
container.stop().animate({
scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
}, 350);
});
Try to store selectors that you use multiple times in variables. The advantage is, that you don't need to re-query them again. This JavaScript does nothing else, then getting the offset of the box that corresponds with the clicked link, using .index() and .eq(). This value is then used in the .animate()-function to scroll to this position.
Demo
Try before buy
A few notes
If you have an ampersand within normal content like "Rice, Noodles & Pasta" you must escape it like: &.
Don't use align="center". It is deprecated since HTML4. Use CSS for this purpose.

Categories

Resources