Menu Popup...

X.bArArA.X · Julho 3, 2003

Tipo, sabem aqueles menus popup, de escolha, que tem a flechinha do lado direito? Então, será que tem como trocar a cor dela através de um style?

Valewz!

AnaoScript · Julho 4, 2003

Ae claro que tem mas vai dpender se o cara usou css mas quase todos usam

é só você mudar

X.bArArA.X · Julho 4, 2003

Opa, Anão... Tem como você passa o CSS pra eu?

AnaoScript · Julho 5, 2003

X.bArArA.X · Julho 11, 2003

VAlewz, Anão... O Código que eu tenho é esse:

<style>
.texto{
font-size:10px;
font-family:verdana
}
.caixa{
font-size:10px;
color:black;
font-family:verdana;
background:#ffffff;
border-style:groove
}
.botao{
font-size:10px;
color:black;
font-family:verdana;
background: white;
border-style:groove;
font-weight:bold
}

</style>

Só preciso trocar a cor da flechinha para que combine com a barra de rolagem! :D

VAlewz!

Dark_Eyes · Julho 11, 2003

você quer mudar a cor da barra de rolagem?

Usa os asistentes do SB.

falou!

X.bArArA.X · Julho 11, 2003

Outra coisa, Anão... Tenho este style pra mudar a cor da bara de rolagem. Queria saber se eu quiser deixar transparent ou excluir, o que devo fazer?

<style>
BODY{
SCROLLBAR-FACE-COLOR: black; 
  SCROLLBAR-HIGHLIGHT-COLOR: white; 
  SCROLLBAR-SHADOW-COLOR: #ffcc00; 
  SCROLLBAR-3DLIGHT-COLOR: #ffcc00; 
  SCROLLBAR-ARROW-COLOR: white; 
  SCROLLBAR-TRACK-COLOR: none; 
  SCROLLBAR-DARKSHADOW-COLOR: none;
</style

Por exemplo, não quero a track color. O que devo fazer para tirá-la?

AnaoScript · Julho 12, 2003

Ae esse css que você me mandou realmente não muda a cor ta seta então me manda o codigo todo assi eu posso ver.

E a barra de rolagem pelo que eu saiba não tem como deixar tranparente nem tirar o track mas se você colocar da mesma cor que o que fica perto dele vai forma um objeto só mas isso pelo efeito visual

X.bArArA.X · Julho 14, 2003

Isso eu manjo... é que onde ficarah a barra é transparent. então não tem como aproximar a cor e tal... Valewz!

Então, eu tenho só esse código ae. Não tem como indexar a ele o css pra trocar a cor da flechinha drop down?

Tipo, este código que você me passou é muito extenso. Não preciso de todas as funções nele apresentados.

Vlewzzzzzz!

AnaoScript · Julho 16, 2003

Ae cara me manda o codigo que você tem que eu dou uma olhada ainda hoje e posto aqui

X.bArArA.X · Julho 16, 2003

<style>
.texto{
font-size:10px;
font-family:verdana
}
.caixa{
font-size:10px;
color:black;
font-family:verdana;
background:#ffffff;
border-style:groove
}
.botao{
font-size:10px;
color:black;
font-family:verdana;
background: white;
border-style:groove;
font-weight:bold
}

</style>

<style>
BODY{
SCROLLBAR-FACE-COLOR: black; 
 SCROLLBAR-HIGHLIGHT-COLOR: white; 
 SCROLLBAR-SHADOW-COLOR: #ffcc00; 
 SCROLLBAR-3DLIGHT-COLOR: #ffcc00; 
 SCROLLBAR-ARROW-COLOR: white; 
 SCROLLBAR-TRACK-COLOR: none; 
 SCROLLBAR-DARKSHADOW-COLOR: none;
</style

AnaoScript · Julho 17, 2003

Ae cara posta todo o codigo

X.bArArA.X · Julho 17, 2003

Este é o código que eu tenho. O demais é html, que não tem nada a ver. Tipo, você não está confundindo qual menu eu estou falando? Tipo, é esse menu que tem aqui no fórum, onde você escolhe a fonte, o tamanho e a cor. Este que é mnu dropdown que eu me refiro.

AnaoScript · Julho 18, 2003

Ae cara pelo codigo que você me enviou eu não achei nada que possa mudar a flechinha o codigo deve estar no html é que o css que postou deve estar sendo puxado pelo menu e se mudar ali vai mudar tudo mas você pode criar outro stylo e puxar pela flesshinha com uma <div>

X.bArArA.X · Julho 18, 2003

Certo! FOi isso que pensei, mas não sei como mudar. Não sei também qual é o nome atribuido para esta flechinha. Resumindo, estou perdido! Se você souber, me mande um exemplo ae que eu me viro.

VAlewz!

AnaoScript · Julho 19, 2003

AE cara não sei como posso te dar um emplo mas ae posta ae o codigo que eu tento te ajudar

X.bArArA.X · Julho 21, 2003

Tipo, dxa pra lá, valewz! O código que eu tenho já t passei!

Valewz!

Avalon35 · Julho 21, 2003

Certo! FOi isso que pensei, mas não sei como mudar. Não sei também qual é o nome atribuido para esta flechinha. Resumindo, estou perdido! Se você souber, me mande um exemplo ae que eu me viro.
VAlewz!

Ae esse script que você mandou tá incompleto mesmo...

você criou diversas "class" de um elemento html e elas devem estár vinculadas ao seu html se não, não vai funcionar. você colocou a respectiva referência dos estilos no seu html???

Ou seja, você cria a class de um elemento html no head e depois tem que associá-la ao elemento html que quer aplicar o estilo.

Outra coisa, a colocação correta é assim:

A primeira parte deve estar entre <head>...</head>

e tb não esqueça de colocar os  senão quando o browser não suportar essa definição o texto do estilo vai aparecer na tela do usuário.

<style type="text/css">

</style>
</head>

E a segunda parte especificada no html entre <body>...</body>

Por exemplo:

<ELEMENTO HTML CLASS="seu estilo">
EX.: <P CLASS="texto"

No entanto, eu nunca vi ou consegui mudar a cor das setinhas das combobox.

O que é possivel alterar em formulários são os botões sólidos e as barras do textarea. Tb é possivel alterar as barrar de rolagem dos Iframes.

Se você conseguir manda o código, tá.

quanto a barra de rolagem com área transparente, o código abaixo pode dar certo:

<style></style>

Tb nunca vi a barra transparente, o que dá a impressão de transparência é colocar a cor do seu pano de fundo na barra. Ou seja, onde marquei em vermelho acima.

Belê?? Espero que isso ajude...

Avalon

X.bArArA.X · Julho 22, 2003

Valewz pelas informações, Avalon...! Porém, o que mais preciso mesmo é trocar a cor da flechinha, mas já que não dá, fazer o que.

Flwzzzzzzz...!

AnaoScript · Julho 23, 2003

Ae cara parece que você não que postar o codigo <_< :unsure:

Setembro 18, 2003

tb tava procurando isso!

se você ainda não descobriu como faz aí vai...

o código é um pouco complicado.

Primeiro faz o combobox:

<html>
<head>
    <title>ComboBox Demo</title>

<style>
body          {font-size:9pt;font-family:verdana;}
button        {cursor:hand;border:1px solid black;font-family:arial;font-size:9pt;}
a             {color:red;}
a:hover       {color:blue}
</style>

</head>

<body>
<script src="ComboBox.js"></script>

<script>

dm=new ComboBox("dm")

dm.add(
       new ComboBoxItem("item 1",1),
       new ComboBoxItem("item 2",2),
       new ComboBoxItem("item 3",3),
       new ComboBoxItem("item 4",4)
      )
/*
// generate 1000 more to test performance
for (var i = 0; i < 100; i++ )
    dm.add(new ComboBoxItem(String(i)));
*/

</script>

</body>
</html>

Salva este arquivo como combo_demo.htm Depois vamos para o .css

.combo-button {
cursor: hand;
cursor: pointer;
height:    20px;
border:    1px solid rgb(120,172,255);
padding: 0;
background: rgb(234,242,255);
width: 14px;
vertical-align:    baseline;
font-size: 8pt;
font-family: Webdings, Marlett;
}

.combo-hilite {
cursor:    hand;
cursor:    pointer;
background: rgb(234,242,255);
border:    1px solid rgb(120,172,255);
color: black;
font-family: verdana;
font-size: 9pt;
}

.combo-item {
cursor:    hand;
cursor:    pointer;
background: white;
border:    1px solid white;
color: black;
font-family: verdana;
font-size: 9pt;
}

.combo-input  {
border:    1px solid rgb(120,172,255) !important;
width:    138px !important;
vertical-align:    baseline;
}
.combo-list table {
table-layout: fixed;
width: 149px;
}

.combo-list {
border:    1px solid rgb(120,172,255);
background: white;
padding: 1px;
width:    149px;
/*enable this if you want scroll bars 
height: 200px;
overflow: auto;
overflow-x: visible;
overflow-y: auto;
scrollbar-base-color: rgb(234,242,255);
scrollbar-highlight-color: rgb(234,242,255);
scrollbar-3dlight-color: rgb(120,172,255);
scrollbar-darkshadow-color: rgb(120,172,255);
scrollbar-shadow-color: rgb(234,242,255);
scrollbar-face-color: rgb(234,242,255);
scrollbar-track-color: white;
scrollbar-arrow-color: black;*/
}

Salva como ComboBox.css E por último faz o .js

Global_run_event_hook = true;
Global_combo_array    = new Array();

Array.prototype.remove=function(dx)
{ 
    if(isNaN(dx)||dx>this.length){self.status='Array_remove:invalid request-'+dx;return false}
    for(var i=0,n=0;i<this.length;i++)
    {  
        if(this[i]!=this[dx])
        {
            this[n++]=this[i]
        }
    }
    this.length-=1
}

function ComboBox_make()
{
    var bt,nm;
    nm = this.name+"txt"; 
    
    this.txtview = document.createElement("INPUT")
    this.txtview.type = "text";
    this.txtview.name = nm;
    this.txtview.id = nm;
    this.txtview.className = "combo-input"
    this.view.appendChild(this.txtview);
        
    this.valcon = document.createElement("INPUT");
    this.valcon.type = "hidden";
    this.view.appendChild(this.valcon)
   
    var tmp = document.createElement("IMG");
    tmp.src = "___";
    tmp.style.width = "1px";
    tmp.style.height = "0";
    this.view.appendChild(tmp);
    
    var tmp = document.createElement("BUTTON");
    tmp.appendChild(document.createTextNode(6));
    tmp.className = "combo-button";
    
    this.view.appendChild(tmp);
    tmp.onfocus = function () { this.blur(); };
    tmp.onclick = new Function ("", this.name + ".toggle()");
}

function ComboBox_choose(realval,txtval)
{
    this.value         = realval;
    var samstring = this.name+".view.childNodes[0].value='"+txtval+"'"
    window.setTimeout(samstring,1)
    this.valcon.value  = realval;
}

function ComboBox_mouseDown(e)
{
    var obj,len,el,i;
    el = e.target ? e.target : e.srcElement;
    while (el.nodeType != 1) el = el.parentNode;
    var elcl = el.className;
    if(elcl.indexOf("combo-")!=0)
    {
    
        len=Global_combo_array.length
        for(i=0;i<len;i++)
        {
        
            curobj = Global_combo_array[i]
            
            if(curobj.opslist)
            {
                curobj.opslist.style.display='none'
            }
        }
    }
}

function ComboBox_handleKey(e)
{
    var key,obj,eobj,el,strname;
    eobj = e;
    key  = eobj.keyCode;
    el = e.target ? e.target : e.srcElement;
    while (el.nodeType != 1) el = el.parentNode;
    elcl = el.className
    if(elcl.indexOf("combo-")==0)
    {
        if(elcl.split("-")[1]=="input")
        {
            strname = el.id.split("txt")[0]
            obj = window[strname];
      
            obj.expops.length=0
            obj.update();
            obj.build(obj.expops);
            if(obj.expops.length==1&&obj.expops[0].text=="(No matches)"){}//empty
            else{obj.opslist.style.display='block';}
            obj.value = el.value;
            obj.valcon.value = el.value;
        }
     }
}

function ComboBox_update()
{
    var opart,astr,alen,opln,i,boo;
    boo=false;
    opln = this.options.length
    astr = this.txtview.value.toLowerCase();
    alen = astr.length
    if(alen==0)
    {
        for(i=0;i<opln;i++)
        {
            this.expops[this.expops.length]=this.options[i];boo=true;
        }
    }
    else
    {
        for(i=0;i<opln;i++)
        {
            opart=this.options[i].text.toLowerCase().substring(0,alen)
            if(astr==opart)
            {
                this.expops[this.expops.length]=this.options[i];boo=true;
            }
        }
    }
    if(!boo){this.expops[0]=new ComboBoxItem("(No matches)","")}
}


function ComboBox_remove(index)
{
    this.options.remove(index)
}

function ComboBox_add()
{
    var i,arglen;
    arglen=arguments.length
    for(i=0;i<arglen;i++)
    {
        this.options[this.options.length]=arguments[i]
    }
}

function ComboBox_build(arr)
{
    var str,arrlen
    arrlen=arr.length;
    str = '<table class="combo-list-width" cellpadding=0 cellspacing=0>';
    var strs = new Array(arrlen);
    for(var i=0;i<arrlen;i++)
    {
        strs[i] = '<tr>' +
      '<td class="combo-item" onClick="'+this.name+'.choose(\''+arr[i].value+'\',\''+arr[i].text+'\');'+this.name+'.opslist.style.display=\'none\';"' +
      'onMouseOver="this.className=\'combo-hilite\';" onMouseOut="this.className=\'combo-item\'" >&nbsp;'+arr[i].text+'&nbsp;</td>' +
      '</tr>';
    }
    str = str + strs.join("") + '</table>'
    
    if(this.opslist){this.view.removeChild(this.opslist);}
    
    this.opslist = document.createElement("DIV")
    this.opslist.innerHTML=str;
    this.opslist.style.display='none';
    this.opslist.className = "combo-list";
    this.opslist.onselectstart=returnFalse;
    this.view.appendChild(this.opslist);    
}

function ComboBox_toggle()
{
    if(this.opslist)
    {
        if(this.opslist.style.display=="block")
        {
            this.opslist.style.display="none"
        }
        else
        {
            this.update();
            this.build(this.options);
            this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
            this.opslist.style.display="block"
        }
    }
    else
    {
        this.update();
        this.build(this.options);
        this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
        this.opslist.style.display="block"
    }
}

function ComboBox()
{
    if(arguments.length==0)
    {
        self.status="ComboBox invalid - no name arg"
    }

    this.name     = arguments[0];
    this.par      = arguments[1]||document.body
    this.view     = document.createElement("DIV");
    this.view.style.position='absolute';
    this.options  = new Array();
    this.expops   = new Array();
    this.value    = ""

    this.build  = ComboBox_build
    this.make   = ComboBox_make;
    this.choose = ComboBox_choose;
    this.add    = ComboBox_add;
    this.toggle = ComboBox_toggle;
    this.update = ComboBox_update;
    this.remove = ComboBox_remove;

    this.make()
    this.txtview = this.view.childNodes[0]
    this.valcon  = this.view.childNodes[1]
    
    this.par.appendChild(this.view)

    Global_combo_array[Global_combo_array.length]=this;
    if(Global_run_event_hook){ComboBox_init()}
}

ComboBox.prototype.COMBOBOXZINDEX = 1000 //change this if you must

function ComboBox_init() 
{
    if (document.addEventListener) {
  document.addEventListener("keyup", ComboBox_handleKey, false );
  document.addEventListener("mousedown", ComboBox_mouseDown, false );
    }
    else if (document.attachEvent) {
  document.attachEvent("onkeyup", function () { ComboBox_handleKey(window.event); } );
  document.attachEvent("onmousedown", function () { ComboBox_mouseDown(window.event); } );
    }
    
    Global_run_event_hook = false;
}

function returnFalse(){return false}

function ComboBoxItem(text,value)
{
    this.text  = text;
    this.value = value;
}

document.write('<link rel="STYLESHEET" type="text/css" href="ComboBox.css">')

Salva como ComboBox.js

E aí está

Se você descobrir um código mais simple avisa.

Peguei esse no site http://webfx.eae.net/dhtml/combobox/combobox.htm

Boa sorte.

T@ti.

X.bArArA.X · Setembro 19, 2003

Vlewzzzz...

Aki não funfô. Dá erro de script!

Thuran · Setembro 20, 2003

...
Não sei também qual é o nome atribuido para esta flechinha. Resumindo, estou perdido! Se você souber, me mande um exemplo ae que eu me viro.

não seria algo relacionado com ARROW-COLOR?

- tipo a seta do scroll: SCROLLBAR-ARROW-COLOR: white

??? :huh:

Entrar

Menu Popup...

Pergunta

Link para o comentário

Compartilhar em outros sites

22 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest Guest

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns