Drop down menu with images and text - Page 2

piers, I actually may not have explained myself correctly but in one of the posts, I do use data-image but since it is dynamic, it incorrectly puts out code.

If someone else wants to look at a live site, I can PM you the link :)

Happy to take a look.

Thank you, PMing now...

I sent some of you guys a private link to the site but havent gotten any responses :S

It was not that clear.

http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

using on hover is another idea.

It was not that clear.

http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

using on hover is another idea.

What do you mean? First I would have to load the images in the drop down menus, right?

Different way of solving the issue. Javascript hides the content until you trigger showing it.

The problem is that the presentation doesnt make sense.

Im selecting a drawing to be shown as a image. Presenting it as a hidden content is kind of strange...

Has anyone read over the library and the private link with the code ???

Thank you

http://www.dailymail.co.uk/sciencetech/article-2426697/Google-unveils-new-logo-homepage-spot-difference.html

In middle of article we see google implementing

drop down menu showing small thumbnail pictures and text in a >"smartphone like" grid.

In a similar way to that switchcontent script

Are you talking about this:

http://i.dailymail.co.uk/i/pix/2013/09/20/article-2426697-181DDB7D00000578-796_306x423.jpg

I mean that looks good and if it is easy to implement (and dynamically I can add things) then great. But I have no clue on how to do it. Also this new design isnt rolled out here yet.

(Sorry I didnt see that this had another page)

Well, sadly, I cant view the code that Google implemented to get a idea on how they did it and mixing this with the switchcontent script is personally a bit confusing to me as I see no relation between the two. Could you clear it up please?

Thank you for all the help

They do not how it every time so maye being tested. Are there are other icons top right when you are signed into google? These work i the same way.

Using switchcontent you put your content (eg html for your grid) inside a div which the switchcontent script hides.

Onclick (can be changed) the div is displayed.

Ive also thought about the switchcontent script:

Wouldnt the problem be basically the same? When I dynamically generate the drop down menu, wouldnt the output be "messed up"?

Like I mentioned this is the code I currently have:

                               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>';

But it generates this:

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

As you can see with a incorrect order. I imagine it has something to do with the " and the '....but Im not sure how to fix it.

Im going to retry "switchcontent" I guess but It will change a lot of my code structure and the way Ive thought things out...

Switchcontent is hiding and unhiding <div> in a attractive way.

Implemented switchcontent but It semtidoesnt work.

As a standalone page, it works. But when I implement it inside a div as a "pop up div" so to speak, it completely breaks. Im not sure if switchcontent was made for this or not as it takes all the comboboxes and changes them....should I be allowed to control which???

Anyways, I like Google's implementation a lot more, but I cant see to get how to do it. Any ideas?