Biblioteca de Javascript e CSS para designers

Esta página tem por objetivo compartilhar código Javascript e CSS de um modo simples e inteligível para webdesigners e desenvolvedores que precisem de exemplos claros desse código para seus projetos, sem ter de garimpar redes sociais, fóruns de discussão, ou plataformas de compartilhamento de código, p.ex.

Basicamente os links para baixar os códigos são auto-explicativos, mas eventualmente terão descrição e/ou uma ilustração pra facilitar na localização e avaliação do código.

Quando a compreensão do código depender de código adicional, dois ou mais códigos – separados ou reunidos – serão oferecidos

Observações importantes: mesmo com a IA/Inteligência Artificial em ascenção (Chat GPT e cia) essa página vai continuar, pois a IA ainda tem muito caminho pra evoluir.
Eventualmente alguns códigos JS/Javascript não irão funcionar em páginas existentes por motivos diversos:
o código JS apaga o conteúdo existente na página;
o código entra em conflito com outros códigos existentes; etc.
Nestes casos entra o o conhecimento do desenvolvedor/programador pra solucionar o problema, seja isolando o código num Iframe (solução simples); reorganizando o código HTML (complexidade media); isolando o código JS dentro da página HTML (solução especializada).

1. JS exibe largura da página

Baixar/ver código

2. JS oculta DIV ao mudar largura da página

Baixar/ver código.

3. JS mostra e oculta DIV ao clicar em botão

Baixar/ver código

4. JS ao mudar a largura da página, recarrega página e exibe largura

Baixar/ver código

5. JS troca imagem com a largura da tela

Baixar/ver código

6. JS troca exibição da camada <DIV>

Baixar/ver código

7. JS troca folha de estilos ao mudar a largura da tela

Baixar/ver código

8. JS troca camada e formatação de texto

Baixar/ver código

9. CSS muda formatação ao carregar ou mudar a largura da tela

Baixar/ver código

10. JS carrega e escreve HTML externo

Baixar/ver código

11. CSS centraliza DIV na tela (por % da tela)

Baixar/ver código

12. JS e CSS muda formatação em 3 tamanhos de tela

Baixar/ver código

13. CSS (@media) muda formatação (por % da div e da tela) em 3 tamanhos tela

Baixar/ver código

14. HTML e CSS camada fixa na tela e rolar lento

Baixar/ver código

15. CSS 2 DIVS lado a lado ou 1 coluna

Baixar/ver código

16. JS CSS menu responsivo

Baixar/ver código

17. FlexBox – colunas responsivas (3 até 1)

Baixar/ver código

18. CSS FlexBox – 2 colunas responsivas com tamanho definido (na altura)

Baixar/ver código

19. JS troca imagem

Baixar/ver código

20. JS troca imagens múltiplas

Baixar/ver código

Outras bibliotecas de código Javascript:

O site AMP Soft (que, entre outros produtos, oferece o gerenciador de fontes de texto em computador mais versátil que conheço, o AMP font Viewer, oferce algumas soluções em JavaScript úteis, como:

a) Alinhamento vertical de texto em células (conteúdo tabular), com uma ou mais linhas.
Esse problema ocorre quando o alinhamento vertical padrão alinha todos os textos pelo topo do container, tomando como base a altura da maior célula.

b) Estender pagina web até o final da tela
Se você faz página HTML sem CMS que possui essa biblioteca de código, pode ter problema para fazer isso manualmente.
Esse site oferece uma solução possível para resolver esse problema.

Tem soluções em outras áreas também (compressão de imagens), mas isso é outro assunto.