I want to use #media to "hide" some block elements from the desktop version to mobile, so the "hidden" elements won't eat traffic.
This "block elements" will obviously contain many data, including images, inline block elements, block elements etc. All this should not downloaded in the mobile version. And well, I'm wondering if it's possible to achieve this with the #media rule. As far as I can tell, the display: none doesn't solve this problem, but perhaps I'm wrong.
P.S. code example:
<div class="desktop">
...
<div ... > ... </div>
<span ... > ... </span>
...
</div>
<div class="mobile">
...
<div ... > ... </div>
<span ... > ... </span>
...
</div>
#media (max-width:799px){
.desktop { display: none; }
}
#media (min-width:800px){
.mobile { display: none; }
}
Elements are loaded even with a display:none (they are loaded but not displayed), you could use JQuery to generate some parts of your website:
$( document ).ready(function() {
if (window.matchMedia('(max-width: 767px)').matches) {
$("#mobile" ).html("mobile!");
} else {
$("#desktop" ).html("desktop!");
}
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<div id="mobile"></div>
<div id="desktop"></div>
On mobile the HTML code would looks like this :
<div id="mobile">Mobile!</div>
<div id="desktop"></div>
On Desktop like this :
<div id="mobile"></div>
<div id="desktop">Desktop</div>
I don't know if there's a better solution, but I hope my answer will help you.
Related
I need to break a line at a specific point in mobile/small views. For instance, I'd like the text « Commune : CENON-SUR-VIENNE » to break after the colon character. Is there a syntax that allows to specify this manually instead of leaving Bootstrap CSS doing it automatically?
I include a piece of my HTML code below. I have well specified the meta tag inside the <head> :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Screenshot :
HTML code:
<div class="container">
<div class="tab-content">
<div class="col-lg-5">
<div>
<h4>Commune : CENON-SUR-VIENNE</h4>
</div>
</div>
</div>
</div>
you could try this. https://jsfiddle.net/5vwh46f8/1/
Putting the second word in a span and adding a style inline-block.
<div class="container">
<div class="tab-content">
<div class="col-lg-5">
<div>
<h4>Commune : <span>CENON-SUR-VIENNE</span></h4>
</div>
</div>
</div>
</div>
<style>
h4 span{
display: inline-block;
}
</style>
Use a "responsive" <br> tag:
<style>
br.responsive {
display: inline; // Show BR tag for narrow screens
}
#media (min-width: 320px) { // or whatever you are after
br.responsive {
display: none; // Hide BR tag for wider screens
}
}
</style>
Some text <br class="responsive" /> more text.
The more straightforward option is to use the display classes built-in to Bootstrap and hide a <br /> based on screen size.
<h4>Commune : <br class="d-md-none" />CENON-SUR-VIENNE</h4>
The use of columns or wrapping content in spans is overkill; just throw in a little display class and show/hide as needed.
To avoid breaking on a hyphen, use a non-breaking hyphen character. (U+2011)
h4 { width: 200px }
<h4 class="using regular hyphen">Commune : CENON-SUR-VIENNE</h4>
<hr>
<h4 class="using non-breaking hyphen">Commune : CENON‑SUR‑VIENNE</h4>
You can use the available classes "for toggling content across viewport breakpoints". For example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h4>Commune : <span class="visible-xs-inline"><br></span> CENON-SUR-VIENNE</h4>
I think a media query could give you better control. What if you only wanted to break on desktop (1) didn't want it to break on mobile (2)?
The HTML:
<div class="col-12 text-center">
<h2>If many are doing something, <span class="break-mobile">it must be worthwhile</span></h2>
</div>
And the CSS:
#media (min-width: 700px) {
.title-break {
display: inline-block;
}
}
You Can Manage in responsive style through decrease font-size
Hi I am creating my polymer element in which i am using < paper-card >. I want to change the height & width of my paper-card so that it occupies the entire space. Also i want to make few more changes but I am finding it difficult. I can do it with inline styling like this :
<template>
<div >
<paper-card heading="OTS Task" animatedShadow="true" style="width: 100%">
<div class="card-content" >
<iron-label >Label 1 </iron-label>
<iron-label> Label 2</iron-label>
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>
If you see here i have done style="width : 100%" to make it span the entire width. Can anyone tell me how can i write the same in < style > tag. I read few docs on this but found it very difficult * New to polymer *. Thanks in advance :)
Don't think that setting the paper-card element to 100% will work.
I believe that the correct way would be to use mixing as this is the way you style Polymer elements.
The correct way in this case would be:
paper-card {
--paper-card: {
width: 100%;
};
}
The alignment of the text would be in this case handled with:
paper-card {
--paper-card-header-text: {
text-align: center;
};
}
paper-card {
--paper-card-content: {
text-align: center;
};
}
A full list of the different selectors can be found in the element description here.
The equivalent CSS for <paper-card style="width: 100%"> would be:
<style>
paper-card {
width: 100%;
}
</style>
Here's a working demo:
<head>
<base href="https://polygit.org/polymer+1.4.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-card/paper-card.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
paper-card {
width: 100%;
}
</style>
<template>
<div>
<paper-card heading="OTS Task" animated-shadow="true">
<div class="card-content" >
<iron-label >Label 1 </iron-label>
<iron-label> Label 2</iron-label>
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
</body>
codepen
You can use is="custom-style" in your style tag and then use paper-card properties as described on elements page or standard CSS properties
Given the layout below, how can I hide #header-precursor if it's under #link-preview or #linkPreviewIframe?
Here is the basic layout in text form:
<p id="link-preview>
<iframe id=linkPreviewIframe>
#document
<html>
<head>..</head>
<body>
<div id="page">
<div id="header-precursor">
This is the one I want to hide
</div>
</div>
</body>
</html>
I tried #link-preview #header-precursor { display: none;} but it didn't work. I don't know much about Shadow DOM but I think that's what #document indicates, so I tried this too with no luck: #link-preview::shadow #header-precursor { display: none;}
I wrote the following CSS:
MyForm.css
.my-container [class^="col-md"] {
.my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
}
If i use it in my code:
<div class="container my-container">
<div class="col-md-4" id="divTabPortfolios">
<div class="my-inner">
</div>
</div>
<div class="col-md-4" id="divTab">
<div class="my-inner">
</div>
</div>
</div>
It doesn't work. If I delete the subclass .my-inner it works properly.
Is it really possibe to use the subclass that way?
I would have done something like:
.my-container [class^="col-md"] .my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
}
...depending of what you try to acheve.
Based on the markup, it looks like you're trying to use a preprocessor like LESS or SASS. The reason the CSS isn't outputting correctly is because you didn't close .my-inner.
If you're using a preprocessor, it should look like this:
.my-container [class^="col-md"] {
.my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
} <-- forgot this closing tag
}
If you're using plain CSS, see Fredric's answer.
Please change your html code to this
HTML
<div class="container my-container">
<div class="col-md-4" id="divTabPortfolios">
<div class="my-inner">
</div>
</div>
<div class="col-md-4" id="divTab">
<div class="my-inner">
</div>
</div>
</div>
You missed the double quotes , maybe this is causing problem in your html code and also check this for css code.
CSS
.my-container [class^="col-md"]
.my-inner
{
padding : 10 px;
background-color: #eee;
.... etc...
}
Are removing subclass .my-inner from MyForm.css or the HTML page?
As Dead has said, you stylesheet must be after bootstrap's, so I
ask, is that in the correct order?
If you inspect your page in
the browser, can you see your custom properties there?
Try to write you .my-inner class directly (removing .my-container [class^="col-md"]).
If none of that work, try to post more details about.
I've got a page with a repeater and a bunch of documents that should be hidden to start and then shown with a plus sign next to each.
My question is - do I have to assign unique ID to each document DIV to make it be able to toggle hidden and shown?
What's the most code-efficient way to handle this?
Here is a quick example:
http://jsfiddle.net/aaamU/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
</head>
<body>
<div id="repeater">
<div class="document">
<div class="title">Document 1</div>
<div class="button">+</div>
</div>
<div class="document">
<div class="title">Document 2</div>
<div class="button">+</div>
</div>
<div class="document">
<div class="title">Document 3</div>
<div class="button">+</div>
</div>
</div>
</body>
</html>
CSS
#repeater .document
{
height: 20px;
border: 1px solid black;
width: 200px;
padding: 10px;
}
.document .title
{
float:left;
}
.document .button
{
float:right;
}
JS
$(document).ready(function(){
$(".title").hide();
$(".button a").click(function(event){
$(this).parents(".document").children(".title").toggle();
event.preventDefault;
});
});
Here is a Fork with the sliding version:
http://jsfiddle.net/W5QkY/1/
You don't have to assign an ID, you can use their position in the document to identify the correct element.
For example, you have something like this:
<div id="documents">
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
You can use jquery like so to trigger individual elements:
$('#documents > div').eq(0).show();
Where the number passed to the eq() method will return the div at that index.
no you dont have to assign them all a different Id. There are many ways to select multiple dom elements with one selector expression
you have a few options
1) you can assign them all the same class and then do $('.className').show()/.hide()
2) you can select them by a css selector related to the page's layout i.e $('#mainContent img').hide() will hide all images inside of a container (prob a div) with id mainContent
You could easily avoid unique id:s on the html tags by using jQuery's traversing capabilities:
<div class="frame">
[Document title] +
<div>[document contents, links or whatever go here]</div>
</div>
And the jQuery magic:
$(function() {
$('.frame a').click(function() {
var $t = $(this);
if ($t.html()=='+')
{
$t.html('-').next('div').show();
} else {
$t.html('+').next('div').hide();
}
});
});
You could obviously switch the .show()/.hide() calls to some animation of your choice.