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.
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;}
Is it possible to remove the padding from one particular grid within Boostrap 3 -
I need to layout images responsively but the design requires no gaps between columns.
Bootstrap 3 introduced row-no-gutters in v3.4.0
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
Yep you can do it by creating a custom style sheet and adding a additional css selector to the col class. [http://www.bootply.com/FtnGzu0dea][1]
/* CSS used here will be applied after bootstrap.css */
.thumbnails {
padding: 0;
}
<div class="wrapper">
<div class="container">
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
</div>
</div>
[1]: http://www.bootp
ly.com/FtnGzu0dea
My suggestion is to add a class for removing the padding at a certain media query width. Here is a test case that uses a header image that should respect the padding at all but the small size. At that point it has no padding and fits the full width of the viewport. I highly recommend using #screen-xs-max if you are compiling LESS source files. It avoids the one pixel jump for media queries that use max-width.
http://jsfiddle.net/jmarikle/htmn5Lov/
CSS
#media (max-width: 767px) { /* replaced with #screen-xs-max if using LESS */
.sm-no-padding [class*=col-] {
padding: 0;
}
}
HTML
<div class="row sm-no-padding">
<div class="col-sm-12">
<img class="img-responsive" src="//placehold.it/2000x1000"/>
Image and/or content in a row where we remove the padding for small screens
</div>
</div>
If you want more granular control with columns rather than at the row level, just apply the class to the columns and change your selector to [class*=col-].sm-no-padding
You can also create a new CSS class and add the following code into your stylesheet.
Custom CSS:
.no-padding > [class*='col-'] {
padding-right:0;
padding-left:0;
}
new CSS to use into your HTML div
.no-padding
I am using Bootstrap 3 (and Angular) for a webapp. I have sidebars which can be toggled, they are not using bootstrap (but table-cell layout)
I created a demo here: http://plnkr.co/edit/0pGjRqfqF21lGvhuNb9k?p=preview
Is it possible to make bootstrap columns break relative to the actual with of the container they are in?
Example:
A col-sm-* should break if its container (aside-main) is <768px, not the screen ?
<div class="row" ng-controller="demoCtrl">
<div class="aside-container">
<div class="aside-main">
<div class="col-sm-12">
<h2>Main Content Area</h2>
<div class="row">
<div class="col-sm-6">
<strong>column 1</strong>
</div>
<div class="col-sm-6">
<strong>column 2</strong>
</div>
</div>
</div>
</div>
<div class="aside" ng-if="asideIn">
<div class="col-sm-12">
<h2>Aside Area</h2>
here is the aside content
</div>
</div>
</div>
In 2018 seems there are such possibilities.
According to the documentation of project https://github.com/marcj/css-element-queries all you have to do is following.
Let's say you have following html element.
<div class="parent">
<h2>Test</h2>
</div>
And you define following css
.parent h2 {
font-size: 12px;
}
.parent[min-width~="400px"] h2 {
font-size: 18px;
}
.parent[min-width~="600px"] h2 {
padding: 55px;
text-align: center;
font-size: 24px;
}
.parent[min-width~="700px"] h2 {
font-size: 34px;
color: red;
}
And include scripts
<script src="src/ResizeSensor.js"></script>
<script src="src/ElementQueries.js"></script>
Functionality of the project will find html elements that css is referring to and will only listen to changes of those elements.
"no performance issues since it listens only on size changes of
elements that have element query rules defined through css. "
e.g. when an element that is "watched" exceeds width of 400 on watched element will be added css attribute min-width 400px and defined css will be applied to it.
Also for this to work you need to trigger the event listening or initialization yourself:
var ElementQueries = require('css-element-queries/src/ElementQueries');
//attaches to DOMLoadContent
ElementQueries.listen();
//or if you want to trigger it yourself.
// Parse all available CSS and attach ResizeSensor to those elements which have rules attached
// (make sure this is called after 'load' event, because CSS files are not ready when domReady is fired.
ElementQueries.init();
It's not exactly breaking bootstrap columns, but you can control css based on the width of the container. Should suffice.
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable.
My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
Actually, you can achieve this via CSS. There's an almost unknown css rule named pointer-events. The a element will still be clickable but your description span won't.
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
UPDATE: As of 2022, browsers behavior may have changed, another option can be:
a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS is used for applying styling i.e. the visual aspects of an interface.
That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.
You cannot achieve what you want using only CSS.
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag.
You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
This is the simplest way I would have done it. Without bordering about CSS or javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>
You can replace the tag with anything you want.
Yes you can....
you can place something on top of the link element.
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:before class
Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
here is an example of the code
https://jsfiddle.net/92qky63j/
CSS relates to visual styling and not behaviour, so the answer is no really.
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
Even better, change your markup so that it reflects what you want it to do.
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>