I am using Bootstrap in my project and i need small wrapper. I get it from twitters source and it looks like:
section#my-content {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
margin: 15px 0;
padding: 39px 19px 14px;
position: relative;
}
section#my-content:after {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "Example";
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 3px 7px;
position: absolute;
top: -1px;
}
So is it possible with JS (jQuery) or or somehow different change content property dynamically ?
You cannot modify pseudo-elements with jQuery (unless you want to add <style> tags). You can, however, change your CSS to make this easier:
content: attr(data-text);
The text will be contained within an attribute on the element:
<div data-text="This is the default text">Test</div>
Now, you can change the attribute with jQuery and the text will change:
$('h1').attr('data-text', 'This is some other text');
Demo: http://jsfiddle.net/8qNjv/
if you meant, can you modify the css rules of a given css class using javascript/jQuery, then you cannot do so.
however, you can use jQuery .css to add new CSS rules dynamically.
read more about it here
You can use a lot:
// style editing
.attr()
.css()
// text editing
.html()
.append()
But maybe its better to add what you realy want, post also the html next time. And what you want as result.
**Angular template: Define myVar variable in ts file**
CSS
.input-container{
position: relative;
}
.input-container:after {
position: absolute;
right: 0px;
top: 10px;
content: attr(data);
}
<div class='input-container' [attr.data]="myVar">
<input type='text'>
<div>
Related
I want to style a form that has the label and input inside the form field and when I'll write something inside the input (probably with focus), I want the borders to light up with some blue. Now I have something like this:
HTML
<div class="login-form-field">
<label for="email" class="login-form-label">Email:</label>
<input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
</div>
CSS
.login-form-input{
margin-left: 20px;
width: 90%;
outline: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: 0 0 0px 1000px white inset;
}
.login-form-label {
font-size: 13px;
font-weight: 300;
padding-left: 20px;
}
.login-form-field{
width: 100%;
border-radius: 0px;
height: 6rem;
border: 0.5px solid grey;
box-shadow: 0px 0px 0px;
}
I already tried to select the parent to made some change and other stuff I found on google. The closest I got was to highlight with blue when the mouser was over it with :hover, but i need the color to stay as I'm with the input selected.
.login-form-field:hover {
border-color: blue !important;
}
Here is the JSFiddle, if anyone could help I would be grateful!
You can now do this in pure CSS so no JavaScript is needed.
The new CSS pseudo-class :focus-within would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.
.login-form-field:focus-within {
border-color: blue !important;
}
The :focus-within pseudo-class matches elements that either themselves
match :focus or that have descendants which match :focus.
You can check which browsers support this http://caniuse.com/#search=focus-within
You can do like this, where you add an extra div, absolute positioned, which acts as the border, ... and no script is required.
.login-form-input {
margin-left: 20px;
width: 90%;
outline: none;
}
.login-form-label {
font-size: 13px;
font-weight: 300;
padding-left: 20px;
}
.login-form-field {
position: relative;
width: 100%;
border-radius: 0px;
height: 6rem;
box-shadow: 0px 0px 0px;
}
.login-form-field input ~ .login-form-field-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 0.5px solid grey;
z-index: -1
}
.login-form-field input:focus ~ .login-form-field-border {
border: 2px solid blue;
}
<div class="login-form-field">
<label for="email" class="login-form-label">Email:</label>
<input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
<div class="login-form-field-border"></div>
</div>
CSS does not have native support for parent selecting. If your goal is to have .login-form-field have a blue border on focus you're going to have to rely on JavaScript to add the respective CSS.
The following CSS:
.login-form-field.highlight {
border-color: blue;
}
With the following jQuery
$('.login-form-field').hover(function() {
$(this).toggleClass('highlight');
});
Would achieve that goal. I should note that jQuery is certainly not necessary here; it's just what I prefer to use.
React with jquery:
$( document ).ready(function() {
console.log( "ready!" );
$('.login-form-input').focus(function() {
$(this).parent().css( "border", "#99f 2px solid" );
});
$('.login-form-input').focusout(function() {
$(this).parent().css( "border", "" );
});
});
Although this is an old answer. I am answering this so anyone who lands here can use just CSS to achieve this.
Use CSS3 pseudo element: focus-within
You could do:
form:focus-within {
border-color: blue !important;
}
if you want to give the border color when the input is active you can add like this:
.login-form-input:focus {
border:1px solid blue;
}
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 6 years ago.
According to some methods i saw, i tried this to manage the position left of a pseudo element :
$("a").click(function() {
var percent = $("input").val(); //Maths returning an value to set
$(".formEvent").addClass("trig");
console.log(percent);
$("[formEventPointer]").css({ /* CALLING THE PSEUDO ELEMENT*/
left: percent + " %"
});
});
.formEvent {
top: 50px;
/* For the example */
padding: 10px;
height: 80px;
background: #272727;
position: relative;
transition: 300ms;
height: 30px;
margin-top: 10px;
margin-bottom: 0;
}
.formEvent.trig:before {
content: attr(formEventPointer); /* TAKE A SPECIAL LOOK RIGHT THERE */
position: absolute;
left: 5%;
top: -15px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid #272727;
}
a {
background-color: #1162A7;
color: white;
border: 1px solid grey;
box-shadow: 5px 5px 5px black;
cursor: pointer;
padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='formEvent'>
Change the position :
<input type="range" value="5" max="100" min="0" step="14.285">
<a>Update</a>
</form>
Unfortunately, i'm not able to properly manage as i want the position of the :before pseudo element, with the attribut set in the content. What did i forget, or how can i fix this ?
EDIT :
It's different because i try to use what the question said to perform a task, i'm not asking for what i already use to accomplish a part of a task...
I guess you are doing it in a bit of wrong way.
You are trying to get element using attribute, rather you should try to apply CSS on the basis of attribute
In HTML:
<span>foo</span>
In jQuery:
$('span').hover(function(){
$(this).attr('data-content','bar');
});
In CSS:
span:after {
content: attr(data-content) ' any other text you may want';
}
I would like to be able to display the context of HTML element to show inside a tool tip. I am not sure what I am doing wrong. Ideally I would like to see test show up in my tooltip. But that does not happen.
We don't use jQuery in our code base so I can't use any jQuery plugins. But we do write JavaScript code as and when required. My set up is given below
My div is as follows:
<div class="tooltip message">test</div>
My CSS set up:
.tooltip {
display: inline;
position: relative;
}
.tooltip.message:before {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
box-sizing: border-box;
}
.tooltip.message:after {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content:"";
left: 50%;
position: absolute;
z-index: 99;
}
My fiddle is here:
http://jsfiddle.net/7LNJc/3/
Give your class='tooltip message' an id, like:
<div class='tooltip message' id='test'>test</div>
Review the following:
var doc = document;
function E(e){
return doc.getElementById(e);
}
Now E('test') is the same as document.getElementById('id'), so you never need it again;
var test = E('test').innerHTML; // holds the html
If the Element has a value attribute, like an input then you would do:
var test = E('test').value; // holds the html value attribute
To assign new innerHTML or a value, it's like:
var test = E('test');
test.innerHTML = 'some text';
or
test.value = 'some value';
You could even do this:
E('test').innerHTML = 'some text';
Try the CSS :hover selector on div element instead tooltip specified by attribute title. it provides kind of toolkip visually.
div.tooltip {
color: #ffffff;
}
div.tooltip:hover {
border: 1px solid #000000;
background-color: yellow;
color: #000000;
}
It's not clear whether it's important to you that a custom tooltip behavior be used, rather than the default tooltip functionality already in HTML. If the custom tooltip isn't necessary, then you could use the title attribute to generate a tooltip withour resorting to JavaScript:
<div class="tooltip message" title="test">test</div>
You can see the code here: http://jsfiddle.net/KfwyL/
I have a div and inside of the div there is an h1. I have the h1 set so that on hover it becomes green. I want to make it so that when the mouse hovers over the h1, the div gets a box shadow. my code is not working.
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/1.css">
<title> Max Pleaner's First Website
</title>
</head>
<body>
<div class="welcomebox">
<h1 class="welcometext">Welcome to my site.
</h1>
</div>
</body>
<<script src="../Scripts/1.js"> </script>
</html>
css:
body {
background-image:url('../images/sharks.jpg');
}
.welcomebox {background-color:#1C0245;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
width: 390px;
height: 78px;
margin-left:100px;
margin-top:28px;
border-style:solid;
border-width:medium;
}
h1 {
display:inline-block;
margin-left: 12px;
height: 40px;
width: 357px;
background-color: #670715;
padding: 4px;
position: relative;
bottom: 5px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
h1:hover {background-color: green;}
Javascript:
welcomeboxshadow = document.getElementsByClass("welcometext");
function doit()
{
var topbox = document.getElementsbyClass("welcomebox")
topbox.style.box-shadow = "-webkit-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);-moz-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);"
};
welcomeboxshadow.onmouseover.doit;
The first thing you'll want to do is discover your browser's Dev Tools. On Chrome and IE, press F12, but you can find it somewhere in the menus. The dev tools console reports errors, amongst other things.
Here it would be telling you that getElementsByClass doesn't exist on document. The method is called getElementsByClassName (note the "Name") at the end.
Once past that, you'd find that it would complain that NodeList doesn't have a style property. getElementsByClassName returns a NodeList (a list of nodes, in this case elements). Each of those has a style, but not the list. So you'd have to loop through the list to work with the style of each element.
here is a working version of your code that doesn't use jQuery since I figured you wanted to know how to do this in pure JS...
welcomeboxshadow = document.getElementsByClassName("welcometext");
welcomeboxshadow[0].addEventListener('mouseover',
function() {
var topbox = document.getElementsByClassName("welcomebox");
topbox[0].setAttribute("class","welcomebox welcomeBoxMouseOver")
}, false)
I changed the inline style to a class but the concept is the same.
The problems were mostly invalid function names (getElementsByClass*Name*), trying to set properties that didn't exist (topbox.style.box-shadow)
Also you need to remember that function returns a collection, not a single element, so you need to reference it using [0]
Note that I would recommend not using the raw js approach in this
case, I'd prefer to use jQuery as it's much cleaner and once you go beyond anything simple like your code you will be glad you used it
This doesn't use your event listeners, but gives you an idea of how to apply the drop shadow. This uses jQuery.
http://jsfiddle.net/KfwyL/20/
I modified your html since it doesn't want you to use head/body tags.
<div class="welcomebox">
<h1 class="welcometext" onmouseover="$('.welcomebox').addClass('boxshadow');" onmouseout="$('.welcomebox').removeClass('boxshadow');">Welcome to my site.
</h1>
</div>
css:
.welcomebox {background-color:#1C0245;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
width: 390px;
height: 78px;
margin-left:100px;
margin-top:28px;
border-style:solid;
border-width:medium;
}
h1 {
display:inline-block;
margin-left: 12px;
height: 40px;
width: 357px;
background-color: #670715;
padding: 4px;
position: relative;
bottom: 5px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
h1:hover {background-color: green;}
.boxshadow
{
box-shadow: 10px 10px 5px #888888;
}
Here's a working version with a box shadow working correctly without using jQuery:
Live demo
Javascript:
welcomeboxshadow = document.getElementById("welcomeH1");
welcomeboxshadow.addEventListener('mouseover', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox shadowed";
}, false)
welcomeboxshadow.addEventListener('mouseout', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox";
}, false)
HTML changes:
<div class="welcomebox" id="welcomeDiv">
<h1 class="welcometext" id="welcomeH1">Welcome to my site.</h1>
Im not an expert either, but why not just add:
.welcomebox:hover { box-shadow here }
to your css?
I am using Firebug, I just saw tha it is a div with css, but I dont get it how they did it?
<div id=":ri" class="J-Zh-I J-J5-Ji L3 J-Zh-I-Js-Zq" tabindex="0" role="button" style="-moz-user-select: none;">Search Mail</div>
I am trying to make something similar but I am just a beginner,I want that effect of the button but I don't get it how they did it? even I don't understand the css, I just copy this but no effect
.num1 {
-moz-border-radius: 2px 2px 2px 2px;
background: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
color: #666666;
cursor: default;
font: 75% arial,sans-serif;
margin: 0 8px 0 0;
outline: medium none;
padding: 3px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.num2{
display: inline-block;
position: relative;
}
.num3{
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-left-width: 0;
margin-left: 0 !important;
}
Here just the CSSed div: http://jsfiddle.net/bmWGY/1/
You'll need much more if you want to do something with this div.
Gmail uses JavaScript to detect the click event on the div. In addition, classes are dynamically added/removed to give the "button" the correct styles.
It is much easier to style a div element correctly than to try to style input and button elements for a cross-browser solution.
It's likely a simple div with a javascript onclick function attached. If using jQuery or some other framework, the "action" can be defined elsewhere using the .click() or .bind() (for jQuery) functions. See the examples provided in the preceding two links to see this in action.