So how can I had a td which has only 1 class?
For example:
<td class="ss_label ss_class">Hello</td>
<td class="ss_label">World!</td>
I this case I want to display:none the second one.
This works: $('[class="ss_label"]').hide(); but I don't want to use Javascript or any library such as jQuery. Just pure CSS.
In the real life example, the td I want to hide is the sixth and seventh.
You can use that attribute selector from jQuery in CSS as well:
td[class="ss_label"] { display: none }
This will match a <td> element whose class attribute is exactly "ss_label" with no other additions to it. Works in all major browsers except IE6 (if you consider it a major browser).
You can do:
.ss_label { display: none }
.ss_label.ss_class { display: table-cell }
for this specific case.
As far as I know, there is no general solution.
<style type="text/css">
.ss_label {
display:none;
}
.ss_label.ss_class {
display:block;
}
</style>
The last rule overrides the first one
Maybe you can use the attribute selector (works in safari)
<html>
<head>
<style>
div.hide { color: green }
div[class=hide] { display: none }
</style>
</head>
<body>
<div class="hide">Hide me</div>
<div class="no hide">Don't hide me</div>
</body>
</html>
Related
I am coding HTML emails and would like to change the font size on mobile. I have used the code that google used as a text but changed it a bit and added font size. Below is the code that I tested. The color changed but the font size did not. Any hints or ideas where I might find an answer?
Thank you in advance for the help, it is muchly appreciated.
Vince
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
#media screen and (max-width:500px) {
.colored {
color:red;
}
p {
font-size: 10px;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is red if the window width is
below 500px and blue otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
You may just need to add the !important flag.
p {
font-size: 10px!important;
}
How to override class of ionic directive? I tried the code below:
<div class="card">
<ion-item class="item item-avatar item-text-wrap teamA" ng-repeat="chat in chats">
<p>{{chat.message}}</p>
</ion-item>
</div>
.teamA{
border: 1px solid red !important;
background-color: #EBA32F !important;
color: black;
}
The border did change to red but its background-color didn't change.
The background didn't need anything special, that color is actually orange(ish). If you had problems with the font color, just add a class to your element and change it's color, don't forget to add the !important rule.
I tested it and it's working, check the next snippet:
angular.module('myApp', ['ionic'])
.controller('MyCtrl', function ($scope){
$scope.chats = {};
var chats = [],
chat;
for (var i = 0; i< 10; i++) {
chat = {
id: i,
message: "Chat num: " + i
};
chats.push(chat);
}
$scope.chats = chats;
console.log(chats);
});
.teamA{
border: 1px solid red !important;
background-color: #EBA32F !important;
}
.your-color {
color: white !important;
}
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Content color</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-content scrollable="true">
<div class="card">
<ion-item class="item item-avatar item-text-wrap teamA" ng-repeat="chat in chats">
<p class="your-color">{{chat.message}}</p>
</ion-item>
</div>
</ion-content>
</body>
</html>
Inspecting elements with chrome dev tools is actually a good way to learn what CSS's are beign applied to your elements. And then override those CSS.
To inspect an element Right click --> Inspect element.
To open chrome dev tools: Select the Chrome Menu at the top-right corner, then select Tools -> Developer Tools.
More info about Chrome DevTools
Cheers.
I remember having a similar problem working in Ionic...but it had to do with where my styles were defined in the project. The new class (in this case, "teamA") was conflicting with existing styles, and they were being applied at different times at emulation-time.
How I solved it:
I assume you can still access chrome debugger when running this in emulator...
We were defining different styles in different places due to a short controller folder structure...not using the standard ionic generator's location for .css.
Try selecting your items in jQuery and examining them, manually adjusting the background-color property in chrome when you can and see what effects that has.
That might give you clues as to how to fix it.
This might also help:
http://forum.ionicframework.com/t/ion-list-background-color/2774/7
I m having issues in manipulating Cascading Style Sheets of this particular tag.I want an external Cascading Style Sheets to change its styling.
A bit more here....
<style>
div[u=slides] {
}
</style>
You can specify css for 'slides' container in following manner,
<div id="yourid" class="yourclass" u="slides" ...>
<style>
#yourid {
}
.yourclass {
}
</style>
Is there an easy way to disable the styling provided by the Intel XDK? Specifically from af.ui.css.
The styling causes problems, especially when you are using external libraries. It would be nice to do something like jQuery Mobile's data-role='none'
e.g. I am trying to use a CSS style for star rating where the user can rate by touching or clicking on stars. This works fine on a normal HTML JavaScript page but somehow the af.ui.css gives one of the elements a width of 60%. These are the lines from af.ui.css which do that:
#afui input[type="radio"] + label,
#afui input[type="checkbox"] + label {
display: inline-block;
width: 60%;
float: right;
position: relative;
text-align: left;
padding: 10px 0 0 0;
}
This is the HTML it is acting on:
<label for="Ans_1" class="star rb0l" onclick=""></label>
If I comment the width statement in af.ui.css, it messes up other checkboxes. I tried to force a width in the label by using at style="width:.." but that doesn't work either.
Any suggestions?
Without more code structure it is hard to know exactly what could be going wrong.
In general if you use style="width:..." it should override afui.ui.css unless the css is being loaded after your inline styles and clobbers them. You can try to force your css style by using CSS '!important'
.star {
width: 20px !important;
}
either in an external CSS file or in style tags in your html file that load after the afui.ui.css file. You could even try style="width: 20px !important;". Some more info on this: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
In general I would use images or css for a star rating not checkbox or radio buttons. Here is a good example: http://css-tricks.com/star-ratings/
Let me know if that works for you or if you could include a screenshot or more html structure I can try to help.
You should be able to create your own id and then as long as you apply your styles after afui.ui.css is loaded it should keep the app framework styles but only override your star checkbox.
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
</head>
<body>
<label id="idname"></label>
</body>
<style>
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
</style>
OR...
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="star.css">
</head>
<body>
<label id="idname"></label>
</body>
star css file:
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
I was recently reading on Unobtrusive javascript and decided to give it a shot. Whether or not I decide to use this style is to be determined at a later time. This is just for my own curiosity and not for any time restricted project.
Now, I was looking at example code and a lot of the examples seem to be using, what took me forever to discover, jQuery. They use a function like $('class-name').whatever(...);
Well I rather like the look of $('class').function, so I tried to emulate it without using jQuery(as I don't know jQuery and don't care about it atm). I'm unable, however, to make this example work.
Here is my jsFiddle: http://jsfiddle.net/dethnull/K3eAc/3/
<!DOCTYPE html>
<html>
<head>
<title>Unobtrusive Javascript test</title>
<script>
function $(id) {
return document.getElementById(id);
}
$('tester').onclick(function () {
alert('Hello world');
});
</script>
<style>
.styled {
width: 200px;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
a {
cursor: pointer;
color: blue;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class='styled'>
<ul>
<li><a id='tester'>CLICK ME</a></li>
</ul>
</div>
</body>
</html>
I was expecting an alert box to pop up when you click on the link, but doesn't seem to happen. When checking the console in chrome it gives this message "Uncaught TypeError: Cannot call method 'onClick' of null"
I'm not a javascript expert, so more than likely I'm doing something wrong. Any help is appreciated.
Try this code,
Script
function $(id) {
return document.getElementById(id);
}
$('tester').addEventListener('click', function () {
alert('Hello world');
});
When you console this $('tester') selector, it simply returns <a id='tester'>CLICK ME</a> which is a html element not an object so you cannot use onclick directly. Instead you have to use addEventListener or attachEvent to bind a click event
Demo JS http://jsfiddle.net/K3eAc/4/
You don't need addEventListener or attachEvent: live demo.
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unobtrusive Javascript test</title>
<style>
.styled {
width: 200px;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
</style>
</head>
<body>
<div class="styled">
<ul>
<li>CLICK ME</li>
</ul>
</div>
<script>
var tester = document.getElementById('tester');
tester.onclick = function() {
alert('Hello world');
}
</script>
</body>
</html>
.
I'm better in practice than in theory, but it would seem to me that with converting the targeted element into a variable, it becomes an object. Tested in IE8/9, Chrome25 and FF30.
Try this
function $(id) {
return document.getElementById(id);
}
var a = $('tester');
a.onclick = (function () {
alert('Hello world');
});
Reference : https://developer.mozilla.org/en-US/docs/DOM/element.onclick