Drop down menu with images and text - Page 2

[riahc3]

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 :)

[John.]

Happy to take a look.

[riahc3]

Thank you, PMing now...

[riahc3]

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

[John.]

It was not that clear.

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

using on hover is another idea.

[riahc3]

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?

[John.]

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

[riahc3]

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...

[riahc3]

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

Thank you

[John.]

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

[John.]

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

[riahc3]

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.

[riahc3]

(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

[John.]

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.

[riahc3]

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.

[riahc3]

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

[John.]

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

[riahc3]

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?