How to Create Conditional on a DIV p/ Change Content

Asked

Viewed 1,576 times

1

I’m trying to make a conditional to display content within a div. My website is with the CSS adjustable by browser type, but this only changes the format (size) of display!

Precise change the content of a particular div for each type of browser.

Example: if, accessing the page via mobile (where the div will be adjusted by with Breakpoints) I want to show an X-to Mobile image with a Y link); otherwise, accessing the page via web browser (where the div will be adjusted by with Breakpoints) I want to show another Z-to WEB image with a W link)...

Can someone help me?

html html5 div html-table
  • 1

    do with javascript

  • Not what language you are using, but in PHP you can use $_SERVER and capture HTTP_USER_AGENT, then just create a switch with each type setting the image.

  • cannot change content with CSS, but you can show/hide certain <div>s according to browser type, Bootstrap has these classes and you can take as an example: http://getbootstrap.com/css/#Responsive-Utilities-classes

  • Welcome to Stack Overflow in English. To avoid UPPERCASE texts, but format them in an elegant way, I recommend reading http://answall.com/help/formatting

  • I believe this is what you want: http://foundation.zurb.com/docs/components/interchange.html, basically it makes a different AJAX request for different screen sizes.

  • 1

    @re22 I put as answer and gave some guidance on how to use only Interchange in isolation.

  • I’m sorry, but the answers are still unclear...

Show 2 more comments

2 answers

4

Look, you can do this using a Zurb Foundation resource, in case the Interchange, as the Zurb is all modular, you can download only it.

To download the same, just go on the following link and leaves selected only the Interchange

configure it is quite simple:

HTML

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

Javascript

$(document).foundation();

a small functional example using 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>

feel free to redeem the page and watch the content change.

TIP

just one more thing, you can set your own media queries to use with the plugin, not just (small), (medium) or (large)

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

0

Forgive my ignorance, but the answers have not yet become clear...

My page (with the Divs in question) looks like this:

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

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

I have a CSS with the following format:

/* -------------------------------------------- * * Toolbar-web */ @media only screen and (min-width: 480px) { . Toolbar-web { margin-top: 10px; margin-bottom: 15px; border-bottom: 1px Solid #cccc; border-top: 1px Solid #cccc; 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 #cccc; border-top: 1px Solid #cccc; 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;
}

}

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

How to Hide Class Divs: "Toolbar-wap" and "Toolbar-web"

Browser other questions tagged html html5 div html-table

You are not signed in. Login or sign up in order to post.