Dropdown box with pictures ...

[UglyJoker]

Hi all

How can we make a dropdown box ith PICTURE items?
There is an example on this page:
http://mobile.deviantart.com/verification/
(if you clikc the phone type you will see the picture in dropdown box)

Ive found some code for it but it doesnt work in IE
http://lab.artlung.com/css/form-image-background/

althought the previous site (deviantart) just works fine in all browsers!
Anybody knows how to include some HTML or a PICTURE element in dropdown box?

[Alexei Kubarev]

Sorry..never had anything to do with that before... but after looking at the source for couple of minutes i think i've found the function that does that:

http://s.deviantart.com/styles/kill.js/2975.js -- Devianarts JScript file
it contains a function GetYourKillOn() and that function calls DropKill -- Thats the function you need... as i can see it takes the alt part and replaces it by making the image inline or something.. didnt really look at the code too good yet.. i will continue looking at it thou and will see how it will work

[Alexei Kubarev]

Code: Select all

<style type="text/css" media="Screen,Projection,TV" title="Minimal">
        /* \*/
        @import "http://s.deviantart.com/styles/napalm.css/2975.css";
        @import "http://s.deviantart.com/styles/minimal.css/2975.css";
        /* */
        @import "http://s.deviantart.com/styles/minimal-fourside.css/2975.css";
        /* \*/
        #mac-ie {display:none}
        /* */
</style>

<script type="text/javascript" src="http://s.deviantart.com/styles/inside.js/2975.js"></script>
<script type="text/javascript" src="http://s.deviantart.com/styles/kill.js/2975.js"></script>   
<script type="text/javascript" src="http://s.deviantart.com/styles/modules/mobile-verify.js/1"></script>
<link type="text/css" rel="stylesheet" href="http://s.deviantart.com/styles/modules/mobile-verify.css"/>


<div class="halfscript gap" id="last-dropdown">
<select name="deviationid" class="phone kill" id="deviationid" required="required">

       <option value="" alt="Select your test image...">Select your test image...</option>
             
       <option value="15972434" alt="<img src='http://tn1-3.deviantart.com/150/fs6.deviantart.com/i/2005/098/6/5/deviantSummit_Promo_by_devart.jpg' width='150' height='124' />">deviantSummit Promo</option>
             
       <option value="15972403" alt="<img src='http://tn1-3.deviantart.com/150/fs6.deviantart.com/i/2005/098/2/6/Jark_Promo_by_devart.jpg' width='150' height='124' />">Jark Promo</option>
             
       <option value="15972367" alt="<img src='http://tn1-2.deviantart.com/150/fs6.deviantart.com/i/2005/098/0/9/Fella_Promo_by_devart.jpg' width='150' height='124' />">Fella Promo</option>
             
       <option value="15972323" alt="<img src='http://tn1-1.deviantart.com/150/fs6.deviantart.com/i/2005/098/8/7/deviantART_Promo_by_devart.jpg' width='150' height='124' />">deviantART Promo</option>
             
       <option value="16367501" alt="<img src='http://tn1-3.deviantart.com/150/fs6.deviantart.com/i/2005/098/7/a/Spyed_Promo_by_devart.jpg' width='150' height='124' />">Spyed Promo</option>

</select>
</div>

<script type="text/javascript">
//<![CDATA[
    GetYourKillOn();
//]]>

</script>

Thats the code that works pretty much... some style problems... but thats just a rip off their source.. still you will need functions from all of those JS files as it started working ONLY after i have included CSS and all JS files.. How did they do it :S

[UglyJoker]

This web site's code is done very nice! actually a team is working on it and sometimes its code is VERY confusing! Especially if you take a look at their CHATROOM page you will be surprised! I am sure

the chatroom is done by HTML and JavaScript (ANd perhaps PHP cause they do php coding) which is you know fine sometimes BUT I cannot see any FRAME or any REFRESHER in that page which can get the new messages !!!!!!!!! You will never see browser refreshes itself but you will receive new messages !!!!!!!!!!!!!!!!!!!!!!!! O__o

http://chat.deviantart.com/

Thanx mate for the code I have to work on it and see if I can have the same code for my own web site!

[Alexei Kubarev]

Well... its mostly JS i belive.. and actually you dont have to refresh the page as there are some ways of edding a content without refreshing a browser..im not, however sure about how they are doing and i will not go into their source again.. ;) not today

one of the ways is using a timer to send a rewuest to a file or so that will give you the list of new messages... well... its pretty complicated and im not sure if it could be done that way...

[UglyJoker]

yes adding to a page content using like DOM is not that hard
but thet have to read other messages from a file, a database or somewhere
and that needs another page or frame to send something to server and get feedback!
All the HTML based chatrooms work like that but THIS ONE is a freaky chatroom! lol
Np I got my answer about DROPDOWN BOX I guess and its better to talk
about the chatroom in another topic, maybe another day

Ta

[Alexei Kubarev]

Try XMLHttpRequest

[gesf]

Damn! Am i blind ? I can't see any dropboxes with background images in that pages :$