Classificação
0 %
Popularidade
Opine
Descrição:
Imagem em HTML5 e IFRAME usando HTML5 e CSS3. Veja como adaptado as suas páginas HTML5 ao padrão definido pela sua …
estou usando o bracket e não esta funcionando o iframe#frame-spec::-webkit-scrollbar
alguém ajuda?
Professor Guanabara, estou na aula 26 do iframe vc não falou qual alternativa para resolver o problema do hidden. Não funcionou no Crhome e nem no Firefox… fiquei perdido…
Eu gostaria de saber porque o :
iframe#frame-spec::-webkit-scrollbar {
display: none;
}
Funcionou com o Guanabara e não funciona comigo?
A solução pro problema eu ja achei. Mas essa questão ta tirando o sono hahahaah
Tentei todas as dicas dos comentários e não consegui esconder as barras, até adicionado o overflow: "hidden" no arquivo googleglass.html, a única solução que achei foi colocar o scrolling="no" no iframe mesmo, ai funcionou perfeito.
NOVIDADES:
*problemas com <iframe> explicados no final deste comentário*
A tag <iframe> serve para você adicionar um DOCUMENTO HTML EXTERNO DENTRO DE OUTRO DOCUMENTO HTML. Para fazer isto, basta colocar o atributo src="" dentro da abertura da tag e inserir o diretório do documento HTML desejado.
O atributo name="" dentro da tag <iframe> serve para definir um nome para o <iframe>.
É uma boa prática, para CONFIGURAÇÕES DE DOCUMENTOS HTML ISOLADOS, você TAMBÉM ISOLAR o seu arquivo de CONFIGURAÇÕES CSS. Pois, caso utilize o mesmo arquivo CSS principal, que no caso deste curso é o estilo.css, isto irá sobrecarregar este arquivo desnecessariamente, dado que estas configurações estão ocupando espaço, porém só são utilizadas em casos muito específicos. Então, é mais eficiente para a otimização do seu site criar um ARQUIVO CSS específico para este DOCUMENTO HTML que será aberto apenas esporadicamente.
A propriedade overflow: serve para especificar o COMPORTAMENTO quando o conteúdo ULTRAPASSA a caixa do elemento. Alguns valores:
overflow: visible; (o conteúdo vaza da caixa do elemento de maneira visível. Valor padrão)
overflow: hidden; (o conteúdo vaza da caixa do elemento de maneira escondida. Não há barras de scroll)
overflow: scroll; (o conteúdo vaza da caixa do elemento de maneira escondida. Adiciona-se barras de scroll nos eixos X e Y)
overflow: auto; (o conteúdo vaza da caixa do elemento e adiciona-se barras de scroll APENAS QUANDO NECESSÁRIO)
É possível configurar um eixo específico desta forma:
overflow-x: hidden; (esconde a barra de scroll do eixo X)
overflow-y: scroll; (adiciona a barra de scroll no eixo Y)
TODOS OS PROBLEMAS COM <iframe> EXPLICADOS E SOLUCIONADOS:
Das configurações que ele faz aos 11:40 de vídeo, faça até o border: none; e pare. As outras devem ser colocadas dentro do GOOGLE-GLASS.HTML e não dentro do SPECS.CSS, dado que o conteúdo que estamos manejando está lá dentro.
Antes de tudo: o overflow: hidden; será substituído por overflow-x: hidden;. Isto acontece pois é NECESSÁRIO que seja POSSÍVEL scrollar no eixo vertical Y, conforme ele diz aos 13:20 de vídeo. Então o overflow-x: hidden; esconderá apenas o conteúdo do eixo horizontal X.
Então, dentro do google-glass.html:
Coloque dentro da tag <style> dentro do <body>:
body {
font-family: Arial;
font-size: 10pt;
overflow-x: hidden;
}
Agora, para sumir com a barra de scroll, no vídeo ele criou assim:
iframe#frame-spec::-webkit-scrollbar {
display: none;
}
Porém, para mim este ^ não funcionou (não sei explicar o porquê). Então ví este nos comentários que funcionou e fiz a substituição:
::-webkit-scrollbar {
display: none;
}
Então deve ficar assim: impossível de scrollar no eixo X. Possível de scrollar no eixo Y. Nenhuma barra de scroll está sendo exibida.
The best!
Alguém teria uma solução pro scroll agora em 2022? Testei de todos os colegas e nenhuma surtiu efeito =/
2022 eu aprendendo HTML-5 , Obrigado Professor Guanabara (Curso em vídeo) pela iniciativa, já fiz outros cursos seu tem me ajudado muito a ingressar no ramo, Aprender nunca é tarde, e aos amigos que fazem os comentários virarem outro aprendizado secundário, sem essa galera meu código já teria dado vários Bugs , kkkkkk.
Olá Professor só para avisar sua pagina lá no curso esta com este erro
Warning: require(/home/cursoemvideo3/www/wp-content/plugins/types-access/vendor/toolset/onthego-resources/loader.php): failed to open stream: No such file or directory in /home/cursoemvideo3/www/wp-content/plugins/types-access/application/bootstrap.php on line 12
Fatal error: require(): Failed opening required '/home/cursoemvideo3/www/wp-content/plugins/types-access/vendor/toolset/onthego-resources/loader.php' (include_path='.:/usr/share/php') in /home/cursoemvideo3/www/wp-content/plugins/types-access/application/bootstrap.php on line 12
Há um erro crítico no seu site.
Saiba mais sobre a como resolver problemas do WordPress.
O tamanho do meu campo de rolagem continua pequeno, alguém sabe o que pode estar errado? Alterei o "width" dentro do iframe#frame-spec, porém no site não mudou o tamanho do mesmo. Alguém saberia a resolução?
Acabou que eu tive que ocultar as bordas no outro arquivo, como a dica do Álvaro Rangel e não entendi a lógica de ter o Webkit-scrollbar, pra que serve essa parada na prática?
Obrigado pela dica.
amigo me ajuda por favor, eu gostaria de saber de como editar uma player de séries e coloca ela um pouco grande me ajuda, eu instalei uma templates
Para sumir o Scroll e travar, basta ir no google-glass.html, e dentro do body colocar >>> overflow: hidden !important;
vim voltar a ver em 2022 para rever o iframe
Obrigado a todos…Deu acerto aqui.
Eu adicionei o "scrolling=no" no iframe e funcionou de boa tanto no chrome quanto no firefox, foram os dois que testei ate agora
Pra galera que está chegando agora ou a frente de out/2021, vamos lá:
Se procurarem aqui abaixo nos comentários vão achar algumas dicas, então vou facilitar.
Basicamente as dicas úteis são do Tiago Ferreira e do Chuazinerd que respondeu o comentário do Tiago Ferreira.
__
Dicas deles:
Não fazer o scrolling="no", além de está descontinuado para o HTML5 ele vai fazer seu iframe parar de rolar, precisamos somente esconder as barras. Gente nós precisamos trabalhar é o arquivo "google-glass.html". Entre as tags <style></style>, ele já tinha configurado o body um pouco, conforme abaixo:
body {
font-family: Arial, sans-serif;
<!– Ele já tinha feito essas linhas, basta acrescentar as outras –>
font-size: 10pt;
<!– Ele já tinha feito essas linhas, basta acrescentar as outras –>
}
::-webkit-scrollbar {
display: none;
}
__
OBS: Notem que não tem o overflow: hidden;. Essa foi a dica do Chuazinerd para destravar a barra de rolagem.
Muito obrigado por mais essa aula da hora.
Quem está com dificuldades em deixar o google glass sem scroll, fixo e sem borda. Acabei de resolver de uma forma bem simples, então segue: Fui no google glass, copiei o endereço da imagem e colei no src do iframe (tirando a url que estava lá), depois fui no specs.css dei um position: absolute; bottom: 100px;
Não tinha conseguido tirar os SCROLL através da configuração no CSS. Pesquisei um pouco e acabei conseguindo tirar usando scrolling="no" , dentro do <iframe> no HTML. <iframe src=" caminho da imagem" scrolling="no" overflow: hidden;" ></iframe>
A Marli de 2021 agradece a todos os comentários salvadores da galera de 2015. Valeu pessoal!
👍
google-glass.html
body::-webkit-scrollbar {
display:none;
}
Consegui fazer sumir as 2 barras de rolagem (porém, elas só ficam estáticas), segue parte da programação:
(No google-glass.html)
<style>
…
body {
overflow-x: hidden;
overflow-y: hidden;
}
::-webkit-scrollbar {
display: none;
}
</style>
(Tentei de outras 30 maneiras, porém nenhuma delas funcionou, somente essa deu certo com minha programação)
E uma outra dica pessoal, assistam as aulas pelo próprio site, por lá, assim que você acaba os cursos e faz a prova, você tem direito ao certificado, vale mais por lá! Abraços 😀
Mesmo problema com o Scroollbar.
No meu falhou no navegador Firefox, atualizado ( detalhe).
Deu certo no Chrome da seguinte forma:
Em vez retirar as barras no arquivo specs.css, que não funcionou em nenhum navegador, retirei as barras
na tag <style></style> do arquivo google-glass.html, segue:
::-webkit-scrollbar{
display: none;
}