Drop down menu as Navigator Created Mar 29, 2011

No one has an idea???? :(

I guess i just have to give up, i'll never get an answer!!
it's really too bad that there is no support for this nice library!!

Hi redani,

Are you able to post any code that you have been working on here, so we can take a look? I suspect that people may or may not answer if they don't see any code; I realise it may be similar to the demo already on the site, but it does help to see some code.

I'm not entirely sure how you would be able to control which slide shows first; I know it is this 2 lines that does it (it's the second, but the first is required):

// horizontal scrollables. each one is circular and has its own navigator instance
var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi");

// when page loads setup keyboard focus on the first horzontal scrollable
horizontal.eq(0).data("scrollable").focus();

If you adjust the .eq(x) value (x = a number), then you hopefully can control which shows. However, I am not sure if there is a way to auto determine which page you want to display when loading it, without manually changing this value? Perhaps use a parameter when calling the page, and some form of jQuery or otherwise to read that parameter value, which can then be used as above?

Does this help as a start?

Hi alibby and thank you so much for your answer.
I have just figured out a way for the default page: I ALWAYS show the product in question in the first position, so i don't have to worry aboiut the order of pages...

but my problem now is if it's possible to use a drop down select menu as navigator. My code looks like this:

$(document).ready(function() {
	$("#main").scrollable({
		vertical: true
	}).navigator({
		navi: "#available-colors",
		naviItem: "li"
	});
	...
});

//html code
<div id="main">
    <div id="pages">
        <!-- page 1 ... -->
        <div class="page">
            <div class="scrollable">
                <div class="items">
                    <img src="image-page1.png" ...>
                </div>
            </div>
        </div>
        
        <!-- page 2 ... -->
        <div class="page">
            <div class="scrollable">
                <div class="items">
                    <img src="image-page2.png" ...>
                </div>
            </div>
        </div>

        <!-- page 3 ... -->
        <div class="page">
            <div class="scrollable">
                <div class="items">
                    <img src="image-page3.png" ...>
                </div>
            </div>
        </div>
    </div>
</div>

// navigation
<ul id="available-colors">
	<li><img src="nav-image-page1.png" alt="" /></li>
	<li><img src="nav-image-page2.png" alt="" /></li>
	<li><img src="nav-image-page3.png" alt="" /></li>
</ul>

// a dropdown select menu
<select ...>
	<option>text page 1</option>
	<option>text page 2</option>
	<option>text page 3</option>
</select>

When i click on the image "nav-image-page1/2/3" contained in the unordered list the pages scroll very well. and I would LOVE to scroll the pages also when i click on "text page 1/2/3" of the select menu

so what i need, is to be able to use my select menu as a navigator just like the unordered list elements...

Thank you so much

Hi redani,

Excellent - it sounds like that helped, even if indirectly!

From looking at your code, I can see what you are trying to do so thanks for posting it. Unless I'm very much mistaken, have you tried using <option> in the naviItem property, in the same way as you've done for the

value? I think you will need to have an ID set against the dropdown code, so that it can pick it up in the navi property at the top (similar to navi: "#available-colors"), and in the call to Scrollable.
Give this a try - let me know if this works.

Hi, and thanks again for your reply ;)
Yes, i did try using <option> like this:

.navigator({
	navi: "#id_select",
	naviItem: "option"
});

but nothing happens
i even tried to have the select as my unique and only navigator but didn't work :(

Hi,

No worries - I thought I would ask.

Just out of curiosity - are you dead set on needing to use an option select, or could you perhaps use a

again, but this time use CSS to style it as a kind of a menu dropdown option? Is your aim to just have 2 navigators in place, and that you are not fussed on how they look or what they are, or is there a specific reason for needing the <option select> ?

You know what? you're right, i'll get rid of the select box and leave only the unordered list. i can't spend lot of time trying to solve this problem!! :D

Thanks for your help