Pessoal, achei interessante esse modelo de anúncio (que apesar do péssimo visual, reparei só mesmo na idéia do sistema):
http://www.guwahati4...m/yp/postad.asp
Conforme a pessoa vai digitando no formulário vai montando um preview de como ficaria o anúncio. Mas eu queria fazer algo ainda mais avançado que é permitir o usuário digitar no próprio preview, assim ele vai digitando no próprio anúncio (já vendo como ficaria).
Creio que pra fazer isso seja utilizado somente javascript e o ajax seria mais pra upload da imagem, mas isso é outra coisa. Alguém poderia me ajudar a fazer esse esquema? De ao invés de digitar no formulário, já digitar no próprio anúncio? Há algum código de exemplo disso que eu pretendo fazer?
Obrigado.
Montar Preview De Anúncio, Podendo Digitar No Próprio Preview
Started By newboxters, 01/08/2008, 15:51
5 replies to this topic
#2
Bruno Augusto
-
- Usuários
-
- 1968 posts
∙•● Restarting... ●•∙
- Sexo:Não informado
- Localidade:Itajubá
Posted 01/08/2008, 16:36
Olha, se não estou enganado, o "digitar de uma lado, paracer no outro" é no evento onkeypress, que ocorre quando você aperta (e soolta) uma tecla.
Se for assim, você pega o ID do elemento onde vai aparecer o texto digitado no campo e insere ele com...innerHTML? Essa eu chutei mesmo
Já se o campo for drodpwn, o evento é onchange que é disparado quando se "troca" a opção escolhida.
Radiobutton e checkbox nem imagino, mas palpitaria que fosse o evento onclick
Se você quiser permitir que a pessoa digite no próprio template, você pode definir que, ao clicar (onclick), numa DIV de ID pré-determinado, ela seja substituida por um campo de texto.
Quando esse campo de texto perder o foco (onblur) ele volta a ser DIV, mas com o conteúdo previamente escrit.
É um esboço, meio de cabeça mesmo
Se for assim, você pega o ID do elemento onde vai aparecer o texto digitado no campo e insere ele com...innerHTML? Essa eu chutei mesmo
Já se o campo for drodpwn, o evento é onchange que é disparado quando se "troca" a opção escolhida.
Radiobutton e checkbox nem imagino, mas palpitaria que fosse o evento onclick
Se você quiser permitir que a pessoa digite no próprio template, você pode definir que, ao clicar (onclick), numa DIV de ID pré-determinado, ela seja substituida por um campo de texto.
Quando esse campo de texto perder o foco (onblur) ele volta a ser DIV, mas com o conteúdo previamente escrit.
É um esboço, meio de cabeça mesmo
#3
newboxters
-
- Usuários
-
- 146 posts
12 Horas
- Sexo:Não informado
Posted 04/08/2008, 19:09
Bruno Augusto você já me ajudou bastante só com essas idéias e falando os eventos javascripts que eu devo utilizar.
O esquema de digitar aqui e aparecer lá isso eu consegui, não foi tão complexo, são esses eventos mesmo para cada tipo de campo do form.
Agora o esquema para digitar no próprio template das divs que ao clicar muda para campo texto, apesar de eu ter entendido sua explicação e a lógica da idéia, eu não consegui fazer.
Vc poderia dar mais alguns detalhes, ou simplesmente esboçar um exemplo de código bem curto, só com 1 div que clique e mude pra texto?
Obrigado.
O esquema de digitar aqui e aparecer lá isso eu consegui, não foi tão complexo, são esses eventos mesmo para cada tipo de campo do form.
Agora o esquema para digitar no próprio template das divs que ao clicar muda para campo texto, apesar de eu ter entendido sua explicação e a lógica da idéia, eu não consegui fazer.
Vc poderia dar mais alguns detalhes, ou simplesmente esboçar um exemplo de código bem curto, só com 1 div que clique e mude pra texto?
Obrigado.
#4
Nicholas Pufal
-
- Usuários
-
- 1655 posts
Impossível: só existe até alguém duvidar e provar o contrário.
- Sexo:Masculino
- Localidade:Porto Alegre
Posted 04/08/2008, 20:24
Não é mais fácil simplesmente usar campos normais de form (enfim, um form normal) e apenas estilizar esse form usando CSS?
Para fazer essa idéia do Bruno não é tão simples assim...
O melhor mesmo, seria usar um form normal, mas completamente estilizado via CSS.
Vou dar um exemplo:
Fiz bem rapidão, só para ilustrar o que pode ser feito... Salva esse código num arquivo *.html e testa ai.
Dá inclusive para guiar o visitante, deixando um valor pré-determinado no campo. Ex:
Dá para criar uma função em JS que ao clicar no campo, apague aquele valor...
Enfim, acho que fazendo com CSS, se for algo simples (devido a certas limitações do CSS em alguns tipos de campo - i.e.: <select>) não tem rolo nenhum, e é bem mais fácil.
Para fazer essa idéia do Bruno não é tão simples assim...
O melhor mesmo, seria usar um form normal, mas completamente estilizado via CSS.
Vou dar um exemplo:
<html>
<head>
<style>
* {margin: 0px; padding:0px}
body { text-align:center; font: bold 13px tahoma;}
#resultado {
margin: 40px auto;
width: 400px;
height: 50px;
padding: 10px 0px;
background-color: #eeab4c;
}
input {
border: 0px;
background-color: #eeab4c;
font: bold 13px tahoma;
}
</style>
</head>
<body>
<div id="resultado">
<form>
Bem-vindo <input type="text" name="nome" size="20"/>
</form>
</div>
</body>
</html>Fiz bem rapidão, só para ilustrar o que pode ser feito... Salva esse código num arquivo *.html e testa ai.
Dá inclusive para guiar o visitante, deixando um valor pré-determinado no campo. Ex:
<input type="text" name="nome" size="20" value="Digita aqui o seu primeiro nome" />
Dá para criar uma função em JS que ao clicar no campo, apague aquele valor...
Enfim, acho que fazendo com CSS, se for algo simples (devido a certas limitações do CSS em alguns tipos de campo - i.e.: <select>) não tem rolo nenhum, e é bem mais fácil.
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.
#5
newboxters
-
- Usuários
-
- 146 posts
12 Horas
- Sexo:Não informado
Posted 09/08/2008, 23:52
Excelente solução Firehalk! Eu não havia pensado nisso. E ainda assim, vou usar a idéia do bruno mas com elementos do css mesmo, para quando a pessoa clicar no campo (active ou focus) do formulário estilizado mudar, por exemplo a cor da borda.
E o efeito hover para a pessoa passar o mouse e mudar um pouco a cor de fundo só pra ter uma idéia por exemplo, do tamanho permitido daquela área.
Bom, era isso mesmo que eu desejava fazer. Muito obrigado a todos!
E o efeito hover para a pessoa passar o mouse e mudar um pouco a cor de fundo só pra ter uma idéia por exemplo, do tamanho permitido daquela área.
Bom, era isso mesmo que eu desejava fazer. Muito obrigado a todos!
Edição feita por: newboxters, 09/08/2008, 23:55.
#6
bimonti
-
- Usuários
-
- 2654 posts
Super Veterano
- Sexo:Masculino
Posted 11/08/2008, 09:45
Veja esse exemplo: http://www.maxtelas....ra-piscicultura
Clique na aba de "Indicação". Não foi muito complicado de fazer e você pode olhar o código-fonte se quiser. Outra opção seria usar o efeito "edit-in-place". Faça uma busca pela internet que você vai entender. Eu não lembro se postei um artigo com isso aqui no fórum ou só passei para um amigo.
Clique na aba de "Indicação". Não foi muito complicado de fazer e você pode olhar o código-fonte se quiser. Outra opção seria usar o efeito "edit-in-place". Faça uma busca pela internet que você vai entender. Eu não lembro se postei um artigo com isso aqui no fórum ou só passei para um amigo.
WebFórum - Equipe de Desenvolvimento - Monitor
Yeah I do have some stories, and it's true I want all the glory ...
Yeah I do have some stories, and it's true I want all the glory ...
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)
