I am trying to find out if there is a way to alternate content line separator colors if possible.
For example:
The issue is that it has to be something automatic, so I'm assuming javascript would probably be required, but I can't find anything like this. I know there is some things that show you had to alternate if you have something like this. I say it has to automatically change because I'm using wordpress so one single line/snippet of code will be entered and something like javascript will need to automate the process. Any idea's?
You can use <hr /> elements between paragraphs as separators and style their colors with setting border CSS property.
CSS :
body{
text-align:center;
}
hr{
width:80%;
border-radius:5px;
}
hr:nth-of-type(1){
border: 4px solid red;
}
hr:nth-of-type(2){
border: 4px solid yellow;
}
hr:nth-of-type(3){
border: 4px solid green;
}
Screenshot :
Example :
JSFiddle
Here's something for starters: http://jsfiddle.net/3wGBb/
Take a look if your required browsers support nth-of-type CSS3 selector: http://caniuse.com/css-sel3.
Related
So basically I want to display some red text in a website if the content of an input is not what I want the person to put.
My input is a number and I want to check that the number is > 15.
I know how to check for that with jquery, but to show the red text I was thinking of having it already in the html with a hidden class and then removing the hidden class when the input is not correct, but it seems a bit dirty ? Is there a better way to make some text appear in that case ?
https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
Without knowing what kind of input we're talking about exactly, and with no code provided, it's hard to give an exact answer for your issue. But the pattern attribute on forms should do the trick, when it comes to client-side validation. You can use CSS to customize your current input field, no reason to use jQuery or hidden objects.
From Mozilla:
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}
input:valid {
border: 2px solid black;
}
<form>
<label for="choose">Would you prefer a banana or a cherry?</label>
<input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
<button>Submit</button>
</form>
The pattern attributes uses regular expressions, so you should be able to make it validate all kinds of inputs.
EDIT:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
min and max: Specifies the minimum and maximum values of numerical input types
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}
input:valid {
border: 2px solid black;
}
<input type="number" id="choose" name="i_like" min="16">
I'm working with google maps and I want to change the "info window" dimensions.
The gmaps js automatically generate this section:
I want to target the selected section that has no id or class to identify changing it's width. Then I thought that I need to use it's child div class named "gm-style-iw" like a reference to reach the other div above.
The idea would be something like this:
div < .gm-style-iw {
width: 220px;
}
but we know that this '<' is not possible using css.
How can I do that?
As you are probably already aware, you'll need javascript for this to work as intended, and using jQuery's .parent()ref. method would probably be the most straight forward route to getting there.
Ref: .parent() | jQuery API Documentation
Consider the below:
jQuery('.gm-style-iw').parent().css('width','220px');
On inspecting the element, you will notice that the inline width property has been applied and is over-qualifying the external width property rule set be the selector .parent.
Code Snippet Demonstration:
jQuery('.gm-style-iw').parent().css('width','220px');
.parent {
width: 100%;
background: #dadada;
padding: 5px;
border: 1px dashed;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="gm-style-iw"><code>gm-style-iw</code></div>
</div>
It may be better practice to consider applying a class to these elements instead. As demonstrated above, inline style rules are quite persistent and are tricky to over-qualify without depending too much on the !important declaration.
Consider the following:
jQuery('.gm-style-iw').parent().addClass('contians-child');
Using a class selector as your identifier, you can circumvent this issue which may be sparing you some grey hairs down the line or wasted hours further on into your build.
Code Snippet Demonstration:
jQuery('.gm-style-iw').parent().addClass('contians-child');
.parent {
width: 100%;
background: #dadada;
padding: 5px;
border: 1px dashed;
box-sizing: border-box;
}
.parent.contians-child {
width: 220px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="gm-style-iw"><code>gm-style-iw</code></div>
</div>
I am using Reveal JS. This is the CSS that I want to override:
.reveal section img {...
Using one of the methods below (or something better), how can I use JS to override that?
document.getElementById(image1).classList.add("red"); // I tried creating a CSS class called "red" but it doesn't overide the original
document.getElementById(image1).style.boxShadow = "red"; // this doesn't overide the original theme CSS
First, use chrome dev tools to make sure that the class is actually being added to the element.
If it is being added but the styles are not being applied, your problems may be stemming from css specificity rules.
Instead of defining your class like this:
.red {
box-shadow: 5px 2px 2px red;
}
Try this:
.reveal section img.red {
box-shadow: 5px 2px 2px red;
}
A new trend in design is to, for navigation menus, show a thin line under the links and make the line thick under the link for the current page you're on. It looks like this:
How would one go about implementing this? Just CSS or JavaScript as well?
this is only a border being changed I guess.
You can always do something like this:
.menubutton{
border-bottom: 1px solid #000;
}
.menubutton:hover,
.menubutton.active{
border-bottom: 2px solid #000;
}
And add some Javascript to activate/deactivate them...
$('.menubutton').click(function (){
$('.menubutton').removeClass('active');
$(this).addClass('active');
});
I'm using the "ngTable" component (enter link description here) in my AngularJS app to present tabular data. It's a little simpler to use than ngGrid, and I don't like how ngGrid configures your table (I especially don't like putting the table header strings in javascript, instead of in the HTML).
Although ngTable works well enough, there appear to be some limitations in its configurability. For instance, I'd like to just add column separators to the header and cells. The way ngTable is referenced in HTML, you don't specify the table header elements, just the cells. I suppose I could put a class on the "td" elements to add separators to the cells, but that wouldn't affect the header.
Anyone got some ideas of how to do this?
You can just do that in CSS
table.ng-table thead th:not(:first-child) {
border-left: 1px solid red;
}
table.ng-table thead th:not(:last-child) {
border-right: 1px solid red;
}
table.ng-table tbody td:not(:first-child) {
border-left: 1px solid blue;
}
table.ng-table tbody td:not(:last-child) {
border-right: 1px solid blue;
}
Example here: http://plnkr.co/edit/t77lzM1o6Xh2PBnhZqw6?p=preview
The only downside to this approach is that it won't work in IE <9.
To get it to work on IE <9 then you would have to add classes to each column when you define the <td> and match them in css.
If you only want a border for a specific column then the css is actually easier as you can just add a class to the column you want the border on and then in your css just add a border-left or border-right for that td.col-style-name