Member Avatar for riahc3

Hello

I want to have a drop down menu showing small thumbnail pictures and text in a "smartphone like" grid.

What can I use to accomplish this? Thank you

  • 7 Contributors
  • 47 Replies
  • 776 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by riahc3

Recommended Answers

All 47 Replies

Member Avatar for stbuchok

CSS

However most people will use JavaScript and CSS.

Member Avatar for riahc3

I imagine it would be done with CSS and Javascript, thank you for confirming :) but my question is HOW; What library or tool can I use to accomplish this?

Thank you

Member Avatar for riahc3

Nowhere in your original question do you mention that you want to use a library or a tool, so maybe it would be good to include that next time.

Try jQuery mobile: http://jquerymobile.com/themeroller/

if you do a simple search, you will get tutorials on how to make one.
http://lmgtfy.com/?q=mobile+menu+tutorial

Im sorry.

But I didnt say that I wanted to do this for a mobile either. I want it to be for a desktop. I simply want a combobox filled with small thumbnails and text using the most simple method (which would be a library or/and tool).

i dont think jQuery Mobile is what I want and I dont want a menu for mobile....

Member Avatar for riahc3

Well, you could create your own. It's just html and css after all.

I'd liken it to a very fancy hovertip...

http://www.menucool.com/tooltip/javascript-tooltip

No time, nor knowledge, nor even wanting to do that.

I will try to use the library pritaeas and I found but even that looks a bit complicated: It works good for static images (images you predefine and add) but for dynamic ones I dont know..

Member Avatar for Borzoi

This can be done purely with CSS if it's just a drop-down menu. The <option> tag doesn't allow <img> tags to be nested in but you can use the CSS backround option. My below example assumes that each item has a different image and I'm using random cat images I found on Google in the example.

Put this in your CSS:

/*Required to make the drop-down menu box size stay normal and not increase*/
select
{
    height: 20px;
}

/*specify the size of the image*/
option
{
    padding-left: 50px; /*This needs to match the width of the image*/
    height: 50px; /*This needs to match the height of the image*/
}

/*Specify the image for each item and ensure it doesn't repeat*/
option.item1
{
    background:url('http://ecx.images-amazon.com/images/I/51quac7wzJL._SL75_SS50_.jpg') no-repeat;
}

option.item2
{
    background:url('https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/373022_109028169156820_1762275121_q.jpg') no-repeat;

}

option.item3
{
    background:url('http://static.zsl.org/images/width50/tabby-cat-cat-map-13274.png') no-repeat;

}
option.item4
{
    background:url('https://profile-b-ord.xx.fbcdn.net/hprofile-frc3/373166_211062615614589_1144510708_q.jpg') no-repeat;

}
option.item5
{
    background:url('https://profile-a-sea.xx.fbcdn.net/hprofile-prn2/186922_1140912124_762827619_q.jpg') no-repeat;

}

You then just need to add the classes to each option:

<select>
    <option class="item1">Test item 1</option>
    <option class="item2">Test item 2</option>
    <option class="item3">Test item 3</option>
    <option class="item4">Test item 4</option>
    <option class="item5">Test item 5</option>
</select>

Remember to include your name/id and other attributes alonside the class. I've never tried making it a grid view though so not sure if that would be possible but if I have time, I'm going to try.

commented: Non dynamic -1
Member Avatar for riahc3

Borzoi, I understand your code but the problem is that there can be 1 item o r 999999999 items. I cant declare a style in CSS for each of them.

Also the url is NOT a static URL. It changes names.

Thats the main problem, I think.

Member Avatar for riahc3

What is the best way to implement this?

Member Avatar for riahc3

You can specify the CSS as an inline style.

I hate web development but AFAIK inline style declares a element style that depends on the previous element style, right?

Member Avatar for pritaeas

No. Where'd you get that? It follows the same rules as regular CSS.

Member Avatar for riahc3

No. Where'd you get that? It follows the same rules as regular CSS.

OK, I reread and it seems makes the element blend in with HTML code but thats it. Its 821AM so sorry...

Member Avatar for riahc3

Well, you could create your own. It's just html and css after all.

I'd liken it to a very fancy hovertip...

http://www.menucool.com/tooltip/javascript-tooltip

I reread this thread and MAYBE was going to show the image with a tooltip but I see comboboxes dont have tooltips...

Member Avatar for riahc3

Wow this is going to take some tinkering....

From a related to this thread: I have this code:

                               var selecthtml='Things: <select name="d" id="d">'

                                    for (var i=0;i<data.length;i++)
                                        {    //start for  

                                            var r = data[i];          
                                            var n = r[0]; 


                                            var c = r[1]; 

                                            if (i==0)
                                            {
                                                selecthtml=selecthtml+'<option value="'+c+' data-image="icons/icon1.png" selected="selected">'+n+'</option>';
                                            }
                                            else
                                            {
                                                selecthtml=selecthtml+'<option value="'+c+' data-image="icons/icon1.png">'+n+'</option>';
                                            }




                                        }  //end for

                                        selecthtml=selecthtml+'<option value="Default">Default</option>';
                                        selecthtml=selecthtml+'</select>';

This is part of the code; Lets not point out missing ; or commas or somethign missing to actually make this work.

As you can see I have added a data-image parameter. When I load up the page, it gives me a http://testsite.dev/null/icon1.png not found. I have no idea where it gets that null from (well I do from the code below) but ok.

Using Firebug, I discover that the select was dynamically generated the following form:

<option icon1.png"="" icons="" value="c data-image=">n</option>

n is correct but something stranged happpened with the rest. What the hell happened with data-image???

What can be happening?

Member Avatar for riahc3

Any ideas?

Member Avatar for riahc3

Well, ideas or things you need to help me out :)

Thank you

Member Avatar for stbuchok

Sorry, I'd help, but I need a live site that I can see (even just a test site, as long as it's available to look at)

Member Avatar for riahc3

OK I got a live site working :)

I gotta PM it to you though as it is private...

Member Avatar for riahc3

You have a PM :) There you see the resulting of the code not working correctly.

Member Avatar for riahc3

Sorry John_44 what I ment was a drop down combobox, not navigation menu.

Member Avatar for riahc3

How could I do the pictures?

Member Avatar for John.

Just change their example text to an img src.

further down 3 columns they have applied effects to pictures.

Member Avatar for piers

How about using the HTML5 data-image="icons/icon1"
data-image="icons/icon2" etc
and then in your external css set the visibility to hidden.

[data-role="image"]{
visibility:hidden;
}

then using jquery set the visibility to visible when it is hovered over.

$('option').on('hover',(function(){
$('data-image').css('visibility','visible');
});
Edited by piers because: wrong selector entered first time
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.