HTML:
<div id="addressinfo">
<div>
City and State<br>
<input type = "text" id = "city" name = "city" placeholder="City" required><br>
<div id="autocomplete" hidden></div>
</div>
</div>
CSS:
#addressinfo div{
display:inline-block;
padding-right:50px;
padding-top:10px;
font-family:Verdana,sans-serif;
font-size:12px;
}
jQuery:
$("#autocomplete").prop("hidden",false); //unhide the #autocomplete div
for(var i=0;i<=(count-1);i++){
$("#"+i).click(function(){
$("#city")[0].value = $(this).val();
$("#autocomplete").prop("hidden",true);
});
}
When I remove display:inline-block; from CSS, the #autocomplete div is successfully hidden when the jQuery click event occurs. But when the display propety exists, the div does NOT hide. Why is this?
You cannot use hidden with display - display will usually override hidden. From the HTML Living Standard:
Because this attribute is typically implemented using CSS, it's also possible to override it using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the effects of the hidden attribute. Authors therefore have to take care when writing their style sheets to make sure that the attribute is still styled as expected.
https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute
You can simply use the jQuery $("#autocomplete").hide(). It will set display to none and your problem will be solved.
Related
I have a form where if someone checks a specific input, I want it to show a div. The problem is that the input does not share the same parent as the subsequent div (and can't, for framework reasons). So for example:
<div>
<input id="test" type="radio">
</div>
<div id="ShowIfTestIsChecked">
<!--content to show if test input is checked-->
</div>
This CSS almost works, but is broken by the fact that the div I want to show is not inside the parent of the input:
#test ~ #ShowIfTestIsChecked{
display:none;
}
#test:checked ~ #ShowIfTestIsChecked{
display:block;
}
Is there some other CSS trick I can use here to make this work? This is easy to do with javascript, but I'd like a CSS only way to do it.
Doing this in css would require being able to select the parents div and then the next div which isn't possible in css, You can only select the next or children elements in a css selector.
Why do you want to wrap the input in a div in the first place?
Gimme a sec I'll post an update with css trick that works they way you want but requires changing the first div element into a form element.
So you have to chance the html or us js.
For html you've got 2 options , put the content of each div together or use a form element:
<form>
<input id="trick" type="radio" name="trick" required />
</form>
<div id="ShowIfTestIsChecked">
Hello world
</div>
#ShowIfTestIsChecked {
display: none;
}
form:valid ~ #ShowIfTestIsChecked {
display: block;
}
Just put your checkbox and div together:
<input id="test" type="radio">
<div id="ShowIfTestIsChecked"></div>
#test:checked ~ #ShowIfTestIsChecked {
display: block;
}
There's no other CSS-way.
I have an editable body with a div:
<body contenteditable="true">
<div class="paragraph">Text</div>
<body/>
And a :before style:
div.paragraph:before {
content: "☑";
}
Fiddle: http://jsfiddle.net/uy9xs5p0/
In Firefox I can put the cursor at the beginning of the text and press backspace and the check mark gets deleted. How to prevent that?
You are setting the contenteditable in the parent div, therefore when erasing, you are deleting the div.paragraph, so the pseudo will be gone.
See that if you set the property in the child div instead, you can make it work.
div.paragraph:before {
content: "☑";
}
<div>
<div contenteditable="true" class="paragraph">Text</div>
</div>
When this issue is reproduced, (via this fiddle, for instance) the developer tools show that div.paragraph is removed. Only a text node remains.
becomes
To stop the div from being removed, don't give its parent contenteditable. Use this instead:
<body>
<div class="paragraph" contenteditable="true">Text</div>
</body>
Fiddle: http://jsfiddle.net/5y00q6ya/3/
You are not editing the :before content.
It just removes the whole .paragraph element once it gets empty, or if you backspace when you are at the beginning of the tag.
The other answers explain the problem. If a div inherits its edit-ability from its parent, it is possible to remove the child div itself and together with the div also the before-content.
In order to prevent this, it is necessary that the editable div must not be placed in an editable parent. This makes it necessary to put every editable div into a non editable parent div to preserve the editable child div.
The following example shows this
div.node {
margin-left: 1em;
}
div.paragraph:before {
content: "☑";
}
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Major</div>
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Minor</div>
</div>
</div>
Possible workaround this problem. This seems to working as you want it to be.
<div contenteditable="true" class="upper-div">
<div class="paragraph">Text</div>
</div>
div.upper-div:before {
content: "☑";
display:inline-block;
}
.paragraph{display:inline-block;}
I am using a CMS which when building a form wraps all it's contents with what it calls an "anonymous div" to comply with XHTML, unfortunately the theme was designed without this insight and there fore the submit button CSS is:
.contact form div.control input[type=submit]
This works if the markup is:
<section class="contact">
<form>
<div class="control">
<input type="submit" />
However because this additional DIV added by CMS:
<section class="contact">
<form>
<div>
<div class="control">
<input type="submit" />
How can I write the CSS a bit more adaptive so extra markup doesn't affect it so much, but without styling the individual element via ID or class???
Alex
Your selector should still select the input, the div won't affect that. If the div is causing layout problems, you might need to make it an inline element like this:
section > form > div { display: inline }
You should be able to just add:
.contact form div div.control input[type=submit]
or
.contact form div .control input[type=submit].
Either should work fine.
I would like to change the border color of tags when the input is focused.
<div class="tags">
<input type="text">
</div>
using JavaScript
<div class="tags" id="tags">
<input type="text" id="text"/>
</div>
JavaScript
var parent = document.getElementById('tags');
var child = document.getElementById('text')
child.onfocus = function(){
parent.style.border="1px solid #f00";
}
child.onblur = function(){
parent.style.border="none";
}
JSFIDDLE
Using jQuery:
$('input[type="text"]').focus(function(){
$(this).parent().is('.tags').css({"border-color":"#F00"});
});
If you wanted to uses classes or tags instead of unique IDs you must consider how you would specifically target the element associated with the focused element.
This example only targets the the "#tags / .tags / tags" element that is a parent of the focused input.
This snippet a flexible way to achieve what it is you're trying to do.
You can give an id to your parent element and another id to your input tag. Then do the following ->
HTML
<div class="tags" id='parent'>
<input type="text" id='input'>
</div>
If you want to listen for any changes related to your input element you can use one of the DOM's native methods .addEventListener ->
Javascript
//getting our input element
var input = document.getElementById('input');
//when the element receives focus
input.addEventListener('focus', function(){
//getting our input element's parent element
parent = input.parentNode;
//then do the following
parent.style.border = '1px solid brown';
},false);
//when the element loses focus
input.addEventListener('blur', function(){
//getting our input element's parent element
parent = input.parentNode;
//then do the following
parent.style.border = '1px solid green';
},false);
CSS
#parent{
width:102px;
height:52px;
border:1px solid green
}
#input{
width:100px;
height:50px;
border:0px solid
}
DEMO
I have a div called image. It has a CSS-property visibility:hidden;. I have another button called button.
What I need is when I hover the button, the image changes to visibility:visible;.
Can I do it with CSS or do I have to use JavaScript?
yes you can do this
as like this
HTML
<label for="button">Click here</label>
<input type="checkbox" id="button">
<div class="one">Show my div</div>
Css
label{
background:green;
padding:10px;
}
.one{
width:100px;
display:none;
height:100px;
background:red;
margin-top:20px;
}
input[type="checkbox"]{
visibility:hidden;
}
input[type="checkbox"]:checked ~ .one{
display:block;
}
Live demo
Updated answer
if you want to just hover than check to this *Demo*
Note that this is a javascript / jQuery solution:
$(button).hover(function() {
$('div#image').attr('visibility', 'visible');
}, function() {
$('div#image').attr('visibility', 'hidden');
});
You can only do this if the div is a child of the button - which isn't possible.
It's possible if you make it a child of something else (i.e. not a button, do it differently).
However, what browser? All the main ones? Because if you are willing to use only the most modern it's possible by using sibling selectors.
But for mainstream usage you can only do it if the div is a child of the hover element. Note: You can hover anything, it doesn't have to be a button or a link <a>. So that's what I would do - make a div element that looks like a button, and has a child that you want to change.
You need javascript for that. You can use css if your div is parent for the button, but in your case this is not possible
JS
function changeVisibility(objID) {
var el = document.getElementById(objID);
if(el.style.visibility == 'hidden') {
el.style.visibility = 'visible';
return true;
}
el.style.visibility = 'hidden';
}
HTML
<div id="box">Something to show</div>
<input type="button" class="button" onmouseover="changeVisibility('box')" value="Change visibility" />