[Dúvida] Código

Minha questão:

Olá amigos,

Estou com uma dúvida, vocês sabem se existe algum código que faça o seguinte efeito:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Ele está assim:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Até.

---

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Link Incorreto amigo, arrume isto.

DeeW. escreveu:Link Incorreto amigo, arrume isto.

Olá,

Peço desculpa, agora está correto.

Até.

Para exibir o contador é necessário utilizar Jquery.  Aqui está o código:

Código:


<center>
  <div id="cont"></div>
<input type="range" id="slider"  min="0" max="10" name="range" />
</center>

 <script type="text/javascript">
$(function(){  
    var val = $('#slider').val();  
        cont  = $('#cont');  
  
    cont.html(val);  
  
    $('#slider').change(function(){  
        cont.html(this.value);  
    });  
  
});
</script>


  Veja funcionando aqui:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Neo escreveu:Para exibir o contador é necessário utilizar Jquery.  Aqui está o código:

Código:


<center>
  <div id="cont"></div>
<input type="range" id="slider"  min="0" max="10" name="range" />
</center>

 <script type="text/javascript">
$(function(){  
    var val = $('#slider').val();  
        cont  = $('#cont');  
  
    cont.html(val);  
  
    $('#slider').change(function(){  
        cont.html(this.value);  
    });  
  
});
</script>


  Veja funcionando aqui:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Olá amigo,

Não resultou...

Até mais.

iChees escreveu:

Neo escreveu:Para exibir o contador é necessário utilizar Jquery.  Aqui está o código:

Código:


<center>
  <div id="cont"></div>
<input type="range" id="slider"  min="0" max="10" name="range" />
</center>

 <script type="text/javascript">
$(function(){  
    var val = $('#slider').val();  
        cont  = $('#cont');  
  
    cont.html(val);  
  
    $('#slider').change(function(){  
        cont.html(this.value);  
    });  
  
});
</script>


  Veja funcionando aqui:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Olá amigo,

Não resultou...

Até mais.

Poderia me mostrar a página em que pretende utilizar o código?

Olá,

Sim: [guest] [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] [/guest]

Até.

Spoiler:

Edit: Agora consigo visualizar a página. Para funcionar você deve adaptar o javascript com o id utilizado pelo elemento do seu formulário. (Pelo que eu vi, ele utiliza o id field7). Também deve adicionar uma div acima do elemento, para que o número do contador apareça nela. Caso tenha dificuldades, poste seu formulário que farei as alterações.

Olá,

Adicione isto em qualquer lugar da página:

Código:

<script>$(function(){$('input[type="range"]').change(function(){$(this).attr('data-slide', this.value)})});</script>
<style>input[type="range"]:before {content: attr(data-slide);position: absolute;top: -13px;right: 0;height: 10px;width: 100%;text-align: center;font-weight: bold;font-size: 12px;color: #0B8EA0;}</style>

Olá,

@[Tens de ter uma conta e sessão iniciada para poderes visualizar este link], o div apenas adicionou uma borda, veja: [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem], fiz tudo certinho, alterei o id para field 7, só não resultou.

Formulário padrão (sem modificações) se você quiser editar:

Código:

<br /> <script src="http://jscolor.com/jscolor/jscolor.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://ajuda.forumeiros.com/23609.js"></script> <script src="http://ajuda.forumeiros.com/22578.js"></script> <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
   margin-bottom: 10px;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
   width: 30%;
   padding-top: 5px;
   border: none;
   float: left;
}
 
#generated_form dd {
   padding: 5px;
   padding-right: 5px;
   margin-left: 30%;
   vertical-align: middle;
}
#generated_form dl:hover dt {
   color: #666;
}
 
#generated_form input {
   font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: #333333;
   padding: 2px;
   vertical-align: middle;
   padding-left: 4px;
}
 
#generated_form input[disabled] {
   background-color:#ddd;
   cursor:pointer;
}
 
#generated_form select {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   cursor: default;
   vertical-align: middle;
   width:auto;
   max-width:100%;/* Bug IE */
   padding: 1px;
}
 
#generated_form textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   width: 300px;
   height: 100px;
   padding: 2px;
   padding-left: 4px;
   cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
   width: 300px;
   cursor: text;
}
</style>
<form enctype="multipart/form-data" method="post" id="generated_form" action="/post" onsubmit="submit_form();">
   
   <div class="warn">
       <strong>Nota:</strong> Antes de preencher o formulário, certifique-se que leu o <a href="/t5-">regulamento desta seção</a>.
   </div>
    <input value="1" name="form_mode" type="hidden" />
   <h1 data-type="field">
       Formulário de inscrições para a equipe.
   </h1>
    <br /> <dl><dt><strong>Nome:</strong></dt> <input type="text" style="clear: both;width: 400px;" id="field1" placeholder="Seu nome no fórum" required="required" /> </dl> <dl> <dt><strong>Cargo desejado</strong></dt> <dd><select id="field6" data-type="field"><option value="CO-Administrador">CO-Administrador</option><option value=" Moderador"> Moderador</option><option value=" Organizador"> Organizador</option></select></dd> </dl> <dl><dt><strong>Experiência no cargo: (0 - 10</strong>)</dt> <dd><input id="field7" value="" step="1" data-type="field" max="10" min="0" type="range" "range"="" name="" /></dd> </dl> <dl> <dt><strong>As minhas experiências:</strong></dt> <dd><textarea required="required" maxlength="100" id="field8" data-type="field"></textarea></dd> </dl> <dl> <dt><strong>Eu quero entrar para a equipe, por este motivo:</strong></dt> <dd><textarea id="field9" data-type="field"></textarea></dd> </dl> <textarea style="display:none" id="message-template-bbcode-1"><div align="center">
   <strong>Inscrição feita por:<span style="color: #0099ff;"> {field1}</span></strong>
</div>
</br >
</br >
<blockquote> <strong>Cargo desejado:</strong> {field6} <br />
<strong>Experiência no cargo:</strong> {field7} de 10 <br />
<strong>As minhas experiências:</strong> {field8} <br />
<strong>Eu quero entrar para a equipe, porque:</strong> {field9} <br />
</blockquote></textarea> <input value="" name="attach_sig" type="hidden" /> <input value="reply" name="mode" type="hidden" /> <input value="18" name="t" type="hidden" /> <input value="146" name="lt" type="hidden" /> <input value="1" name="notify" type="hidden" /> <input value="Enviar" class="button2" name="post" type="submit" /> <textarea style="display:none" name="message"></textarea>
</form>

@[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] , sem resultados ;S

Desde já obrigado por me ajudarem

Até.

Tente adicionar isto:

Código:


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


mantendo o código do Flames!

@[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Aqui está código do formulário modificado:

Código:

<br /> <script src="http://jscolor.com/jscolor/jscolor.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://ajuda.forumeiros.com/23609.js"></script> <script src="http://ajuda.forumeiros.com/22578.js"></script> <script type="text/javascript">
$(function(){  
    var val = $('#field7').val();  
        contador  = $('#contador');  
  
    contador.html(val);  
  
    $('#field7').change(function(){  
        contador.html(this.value);  
    });  
  
});
</script> <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
   margin-bottom: 10px;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
   width: 30%;
   padding-top: 5px;
   border: none;
   float: left;
}
 
#generated_form dd {
   padding: 5px;
   padding-right: 5px;
   margin-left: 30%;
   vertical-align: middle;
}
#generated_form dl:hover dt {
   color: #666;
}
 
#generated_form input {
   font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: #333333;
   padding: 2px;
   vertical-align: middle;
   padding-left: 4px;
}
 
#generated_form input[disabled] {
   background-color:#ddd;
   cursor:pointer;
}
 
#generated_form select {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   cursor: default;
   vertical-align: middle;
   width:auto;
   max-width:100%;/* Bug IE */
   padding: 1px;
}
 
#generated_form textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   width: 300px;
   height: 100px;
   padding: 2px;
   padding-left: 4px;
   cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
   width: 300px;
   cursor: text;
}
</style>
<form enctype="multipart/form-data" method="post" id="generated_form" action="/post" onsubmit="submit_form();">
   
   <div class="warn">
       <strong>Nota:</strong> Antes de preencher o formulário, certifique-se que leu o <a href="/t5-">regulamento desta seção</a>.
   </div>
    <input value="1" name="form_mode" type="hidden" />
   <h1 data-type="field">
       Formulário de inscrições para a equipe.
   </h1>
    <br /> <dl><dt><strong>Nome:</strong></dt> <input type="text" style="clear: both;width: 400px;" id="field1" placeholder="Seu nome no fórum" required="required" /> </dl> <dl> <dt><strong>Cargo desejado</strong></dt> <dd><select id="field6" data-type="field"><option value="CO-Administrador">CO-Administrador</option><option value=" Moderador"> Moderador</option><option value=" Organizador"> Organizador</option></select></dd> </dl> <dl><dt> <strong>Experiência no cargo: (0 - 10)</strong></dt> <dd><span id="contador" style="display: table-cell;position: relative;left: 60px;cursor: default;">5</span><input id="field7" value="0" step="1" data-type="field" max="10" min="0" type="range" "range"="" name="" /></dd> </dl> <dl> <dt> <strong>As minhas experiências:</strong></dt> <dd><textarea required="required" maxlength="100" id="field8" data-type="field"></textarea></dd> </dl> <dl> <dt><strong>Eu quero entrar para a equipe, por este motivo:</strong></dt> <dd><textarea id="field9" data-type="field"></textarea></dd> </dl> <textarea style="display:none" id="message-template-bbcode-1"><div align="center">
   <strong>Inscrição feita por:<span style="color: #0099ff;"> {field1}</span></strong>
</div>
</br >
</br >
<blockquote> <strong>Cargo desejado:</strong> {field6} <br />
<strong>Experiência no cargo:</strong> {field7} de 10 <br />
<strong>As minhas experiências:</strong> {field8} <br />
<strong>Eu quero entrar para a equipe, porque:</strong> {field9} <br />
</blockquote></textarea> <input value="" name="attach_sig" type="hidden" /> <input value="reply" name="mode" type="hidden" /> <input value="18" name="t" type="hidden" /> <input value="146" name="lt" type="hidden" /> <input value="1" name="notify" type="hidden" /> <input value="Enviar" class="button2" name="post" type="submit" /> <textarea style="display:none" name="message"></textarea>
</form>

Veja funcionando em [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Olá,


Perfeito: [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

[sucesso=Resolvido]Obg Flames, DeeW. e Neo [/sucesso]

Até.

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]Movido para: Arquivo - Pedido de código