This is a message.

Drop down menu as Navigator Created Mar 29, 2011

This thread is solved

Views: 2545     Replies: 8     Last reply Apr 17, 2011  
You must login first before you can use this feature

redani

Posts: 39

Registered:
Aug 10, 2009

Drop down menu as Navigator

Posted: Mar 29, 2011

Hello,

I'm using almost the same complete scrollable as shown inhttp://flowplayer.org/tools/demos/scrollable/site-navigation.html, but i'm just facing 2 problems that are making my life hell :(
1- in addition to main the navigator, i have a drop down menu (select) that i would like to use as a 2nd navigator. Do you know how i can do that??

2- Sometimes when the page is loaded, I may want to display the second page by default. For example in flowplayer demo, the page "Barcelona Pavilion
Barcelona, Spain" navigator has the class="active" but it's the 1st page which is shown :(

Please any idea that could help me?
Thanks a lot

redani

Posts: 39

Registered:
Aug 10, 2009

» Drop down menu as Navigator

Posted: Mar 30, 2011

Reply to: Drop down menu as Navigator, from redani
No one has an idea???? :(

redani

Posts: 39

Registered:
Aug 10, 2009

» » Drop down menu as Navigator

Posted: Apr 14, 2011

Reply to: » Drop down menu as Navigator, from redani
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!!

alibby

Posts: 1581

Registered:
Jun 2, 2010

» » » Drop down menu as Navigator

Posted: Apr 14, 2011

Reply to: » » Drop down menu as Navigator, from redani
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?

redani

Posts: 39

Registered:
Aug 10, 2009

» » » » Drop down menu as Navigator

Posted: Apr 15, 2011

Reply to: » » » Drop down menu as Navigator, from alibby
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

alibby

Posts: 1581

Registered:
Jun 2, 2010

» » » » » Drop down menu as Navigator

Posted: Apr 15, 2011

Reply to: » » » » Drop down menu as Navigator, from redani
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.

  • redani

    Posts: 39

    Registered:
    Aug 10, 2009

    » » » » » » Drop down menu as Navigator

    Posted: Apr 16, 2011

    Reply to: » » » » » Drop down menu as Navigator, from alibby
    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 :(

    alibby

    Posts: 1581

    Registered:
    Jun 2, 2010

    » » » » » » » Drop down menu as Navigator

    Posted: Apr 16, 2011

    Reply to: » » » » » » Drop down menu as Navigator, from redani
    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> ?

  • redani

    Posts: 39

    Registered:
    Aug 10, 2009

    » » » » » » » » Drop down menu as Navigator

    Posted: Apr 17, 2011

    Reply to: » » » » » » » Drop down menu as Navigator, from alibby
    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