1

Estou tentando fazer uma condicional para exibir conteúdos dentro de uma div. Meu site está com o CSS ajustável por tipo de navegador, mas isso só muda o formato (tamanho) de exibição!

Preciso alterar o conteúdo de uma determinada div para cada tipo de navegador.

Exemplo: se, acessando a página via celular (onde a div será ajustada por with Breakpoints) quero mostrar uma imagem X-para Celular com um link Y); caso contrário, acessando a página via navegador web (onde a div será ajustada por with Breakpoints) quero mostrar outra imagem Z-para WEB com um link W)...

Alguém pode me ajudar?

7
  • 1
    faça com javascript
    – Caique C.
    21/08/2015 às 14:25
  • Não seu qual linguagem você esta usando, mas em PHP podes usar $_SERVER e capturar HTTP_USER_AGENT, apos é so criar um switch com cada tipo setando a imagem. 21/08/2015 às 14:47
  • não é possível mudar o conteúdo com CSS, mas você pode mostrar/ocultar certas <div>s de acordo com tipo do navegador, o Bootstrap tem essas classes e você pode tomar como exemplo: getbootstrap.com/css/#responsive-utilities-classes 21/08/2015 às 14:58
  • Seja bem-vindo ao Stack Overflow em Português. Para evitar textos em CAIXA ALTA, porém formatá-lo de maneira elegante, recomendo a leitura de pt.stackoverflow.com/help/formatting 21/08/2015 às 15:20
  • 1
    @re22 coloquei como resposta e dei alguma orientação de como usar apenas o Interchange de forma isolada. 21/08/2015 às 16:23

2 Respostas 2

4

olha, você pode fazer isto usando um recurso do Zurb Foundation, no caso o Interchange, como o Zurb é todo modular, você pode baixar apenas ele.

Para baixar o mesmo, basta ir no seguinte link e deixa selecionado apenas o Interchange

configurar ele é bem simples:

HTML

<div data-interchange="[URL Tela Pequena, (small)], [URL Tela Media, (medium)], [URL Tela Grande, (large)]">
</div>

JavaScript

$(document).foundation();

um pequeno exemplo funcional usando Blobs:

//inicio da criação dinamica dos links externos
var blobs = {};
blobs.telaPequena = new Blob(["<p>Tela Pequena</p>"], { type: "text/html" });
blobs.telaMedia = new Blob(["<p>Tela Media</p>"], { type: "text/html" });
blobs.telaGrande = new Blob(["<p>Tela Grande</p>"], { type: "text/html" });

var urls = {};
urls.telaPequena = URL.createObjectURL(blobs.telaPequena);
urls.telaMedia = URL.createObjectURL(blobs.telaMedia);
urls.telaGrande = URL.createObjectURL(blobs.telaGrande);   

var container = document.getElementById("container");
container.dataset.interchange = "" + 
    "[" + urls.telaPequena + ", (small)], " + 
    "[" + urls.telaMedia + ", (medium)], " + 
    "[" + urls.telaGrande + ", (large)]";
//termino da criação dinamica dos links externos

$(function () {
    $(document).foundation();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.js"></script>
<div id="container">
</div>

fique a vontade para redimencionar a pagina e ver o conteudo mudar.

DICA

apenas mais uma coisa, você pode definir as suas proprias medias queries para usar com o plugin, não apenas (small), (medium) ou (large)

$(document).foundation('interchange', {
  named_queries : {
    my_custom_query : 'only screen and (max-width: 200px)'
  }
});
1
0

Desculpem minha ignorância, mas as respostas ainda não ficaram claras...

Minha página (com as DIVs em questão) está assim:

(adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

=================================

Tenho um CSS com o seguinte formato:

/* -------------------------------------------- * * Toolbar-web */ @media only screen and (min-width: 480px) { .toolbar-web { margin-top: 10px; margin-bottom: 15px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; background: #f4f4f4; padding: 5px 10px 0px 10px; } .toolbar-web:after { content: ''; display: table; clear: both; }

.pager-no-toolbarweb {
  margin-bottom: 10px;
}

.pager-no-toolbarweb ~ .pager-no-toolbarweb {
  margin-top: 10px;
}

.toolbar-web,
.pagerweb {
  font-family: "Open Sans", "Helvetica Neue", Verdana, Arial, Raleway, sans-serif;
  color: #636363;
  line-height: 30px;
  font-size: 12px;
}

.toolbar-web label,
.pager-no-toolbarweb label {
  font-weight: normal;
  text-transform: uppercase;
}

}

/* -------------------------------------------- * * Toolbar-wap */ @media only screen and (max-width: 479px) { .toolbar-wap { margin-top: 10px; margin-bottom: 15px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; background: #f4f4f4; padding: 5px 10px 0px 10px; } .toolbar-wap:after { content: ''; display: table; clear: both; }

.pager-no-toolbarwap {
  margin-bottom: 10px;
}

.pager-no-toolbarwap ~ .pager-no-toolbarwap {
  margin-top: 10px;
}

.toolbar-wap,
.pagerwap {
  font-family: "Open Sans", "Helvetica Neue", Verdana, Arial, Raleway, sans-serif;
  color: #636363;
  line-height: 30px;
  font-size: 12px;
}

.toolbar-wap label,
.pager-no-toolbarwap label {
  font-weight: normal;
  text-transform: uppercase;
}

}

=================================

Como Ocultar as DIVs da classe: "toolbar-wap" e "toolbar-web"

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .