(Resolvido) Elemento Toggle

[Lou Poulit]

Olah...

Estou procurando descobrir se há uma forma de se evitar que os elementos Toggle (display none) sejam visualizados durante o carregamento inicial da página que os contém, principalmente por visitantes com conexão lenta.

Visualização disponível em

http://www.loupoulit.xpg.com.br/artes%20pl...splasticas.html

Antecipadamente, minha gratidão por colaborações.

Lou Poulit.

[Jonathan Queiroz]

Uma solução pode ser deixar o elemento inicialmente invisível via CSS.

[Lou Poulit]

Uma solução pode ser deixar o elemento inicialmente invisível via CSS.

Valeu, mermaum...

A primeira tentativa foi simplesmente declarar visibility=hidden na CSS, e a CSS fez a parte dela. Mas ainda não resolve porque o estado block definido pelo javascript (evento onclick) não muda a declaração CSS para visible. Ou seja, funciona mas mostra o elemento vazio (hidden).

Transformar o elemento em html e chamar para o iframe muda o conceito... Se eu entendi direito, vou ter que fazer tudo com CSS. Quero evitar rollovers nestes casos, porque o visitante abre um elemento muito grande inadvertidamente, e com CSS não sei relacionar a mudança de estado a um evento onclick. Bem, vou estudar mais, na tentativa de não descartar o efeito toggle_id das páginas em questão.

De todo modo lhe sou grato pela sugestão.

[Jonathan Queiroz]

A primeira tentativa foi simplesmente declarar visibility=hidden na CSS, e a CSS fez a parte dela. Mas ainda não resolve porque o estado block definido pelo javascript (evento onclick) não muda a declaração CSS para visible. Ou seja, funciona mas mostra o elemento vazio (hidden).

Nesse caso, você pode trabalhar com o atributo display no CSS (display: hidden) ou mudar o Javascript para se adequar ao CSS.

Transformar o elemento em html e chamar para o iframe muda o conceito... Se eu entendi direito, vou ter que fazer tudo com CSS. Quero evitar rollovers nestes casos, porque o visitante abre um elemento muito grande inadvertidamente, e com CSS não sei relacionar a mudança de estado a um evento onclick. Bem, vou estudar mais, na tentativa de não descartar o efeito toggle_id das páginas em questão.

Não entendi muito bem, pode explicar melhor?

[Lou Poulit]

Ainda não testei a sua última sugestão, mas vou adiantar a explicação que você pediu.

O principal elemento da questão contém um texto (Currículo) do tamanho da página (width=700px, centralizado). Minha preferência de visualização é que ele apareça numa overlay (sem litebox/frame), por cima do iframe da página e não dentro dele, e também que não apareça durante o carregamento inicial da página.

Um rollover com CSS resolveria a visualização indesejada no carregamento mas, depois da página carregada, se o visitante passar o cursor sem querer sobre a área hot (próxima do menu), o cara vai aparecer fora de hora, e é grande. Por isso tenho seguido um conceito de só fazer rollovers para elementos pequenos ou poucos. E que eu saiba (o que não é muito) usando apenas as amadas CSS, infelizmente não podemos ainda fazer um elemento aparecer por clique. Essa foi a principal razão de gostar do Toggle: depois da página carregada o elemento só aparece quando o visitante quer vê-lo e clica.

Mas não vou deixar de corresponder a ti. Vou testar o display CSS sugerido sem mexer no javascript, e depois dou retorno do resultado. Já vi que isso vai me ensinar mais alguma coisa e eu gosto disso.

E se eu estiver enganado em alguma coisa, seja da Bahia e diga.

Editado Maio 30, 2010 por Lou Poulit

[Lou Poulit]

É mermaum... Você me deu o caminho das pedras (melhor que a isca e a vara).

A tentativa com o atributo CSS display=hidden não deu certo.

Contudo, com display=none aplicado ao box de texto (e acatado pelos parágrafos nele contidos) ficou perfeito, inclusive ocorrendo o mesmo resultado nos botões do menu vertical (associados à função Toggle). Este menu tem botões que chamam elementos Toggle (alternando style.display=none/block) e também outros botões linkados para chamar páginas HTML dentro do iframe da página, e tudo está funcionando como era pretendido, graças à sua colaboração.

Imagino que outras pessoas venham a se beneficiar deste exemplo. O javascript e a CSS ainda estão no HTML.

Muito grato. Abraços.

Editado Junho 2, 2010 por Jonathan Queiroz
Remover quote desnecessário (Jonathan)

[Jonathan Queiroz]

Me desculpe a falta de atenção, era display:none; mesmo, mas tinha escrito display:hidden (o hidden é usado no atributo visibility).

Precisando de alguma coisa é só postar.

Obs.:

O tópico foi marcado como Resolvido.