Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

Dropdown box with pictures ...

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

Dropdown box with pictures ...

Postby UglyJoker » Sat Jun 04, 2005 11:28 am

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?
UglyJoker
New php-forum User
New php-forum User
 
Posts: 27
Joined: Sun Apr 24, 2005 4:23 am

Postby Alexej Kubarev » Sat Jun 04, 2005 2:04 pm

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 :)
User avatar
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

Postby Alexej Kubarev » Sat Jun 04, 2005 2:11 pm

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
User avatar
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

Postby UglyJoker » Sat Jun 04, 2005 2:17 pm

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!
UglyJoker
New php-forum User
New php-forum User
 
Posts: 27
Joined: Sun Apr 24, 2005 4:23 am

Postby Alexej Kubarev » Sat Jun 04, 2005 2:24 pm

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... :)
User avatar
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

Postby UglyJoker » Sat Jun 04, 2005 2:34 pm

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
UglyJoker
New php-forum User
New php-forum User
 
Posts: 27
Joined: Sun Apr 24, 2005 4:23 am

Postby Alexej Kubarev » Tue Jun 28, 2005 3:09 pm

Try XMLHttpRequest
User avatar
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

Re: Dropdown box with pictures ...

Postby gesf » Sat Aug 09, 2008 3:56 pm

Damn! Am i blind ? I can't see any dropboxes with background images in that pages :$
User avatar
gesf
Moderator
Moderator
 
Posts: 1717
Joined: Sun Dec 29, 2002 5:03 am
Location: Portugal / Sweden


Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.