This question already has answers here:
Affecting parent element of :focus'd element (pure CSS+HTML preferred) [duplicate]
(2 answers)
Closed 7 years ago.
When I focus the input text element, I want to change the background color of the submit button.
<input id="submit-element" type="submit">
<span><input id="text-element" type="text"></span>
However, based on the current setup of the elements, I believe the span blocks them from being sibling elements and being able to use the ~ selector.
So how can I accomplish this? Is JavaScript necessary?
With current DOM you're forced to use javascript. Below there is a jQuery solution.
$('input#text-element').focus(function() {
$('input#submit-element').css('color', 'red');
});
$('input#text-element').focusout(function() {
$('input#submit-element').css('color', 'black');
});
You have to use JavaScript since the DOM is restricted from CSS. Try the following, which uses the onblur and onfocus input parameters:
.button {
padding: 2px 4px;
font: 13px sans-serif;
text-decoration: none;
border: 1px solid #000;
border-color: #aaa #444 #444 #aaa;
border-radius: 5px;
color: #000
}
New Element
<span><input id="text-element" type="text" onfocus="document.getElementById('submit-element').style.backgroundColor = 'red'" onblur="document.getElementById('submit-element').style.backgroundColor = 'inherit'"></span>
Try this..
HTML
<input id="submit-element" type="submit">
<input id="text-element" type="text">
Javascript
document.getElementById("text-element").addEventListener("focus", changeSubmitF);
function changeSubmitF(){
document.getElementById("submit-element").style.backgroundColor = "#f4f4f4";
}
document.getElementById("text-element").addEventListener("blur", changeSubmitB);
function changeSubmitB(){
document.getElementById("submit-element").style.backgroundColor = "transparent";
}
Check out this Fiddle
Related
This question already has answers here:
Onclick event not firing on jsfiddle.net [closed]
(2 answers)
Closed 5 years ago.
I know how to do it with JQuery but I would like to remove a box with an onClick element (x) with vanilla JS. According to this I need to remove child element. As far as to this is my attempt:
function remove() {
var element = document.getElementById("box");
element.parentNode.removeChild(element);
}
#box {
background-color: lightgrey;
color: white;
width: 20em;
height: 20em;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
.remover {
font-size: 10em;
align
}
<div id="box">
<div id="removeBox" onclick="remove()">
<span class="remover">x</span>
</div>
</div>
Would you mind to help me to remove whole box with just clicking the 'x'?
jsfiddle
Thank you so much
Don't use onclick, it's bad practice, here is why:
mixes code and markup
code written this way goes through eval
runs in the global scope while directly written functions run in user scope
Use event binding like:
document.getElementById("box").addEventListener('click', function() {
var element = document.getElementById("box");
element.parentNode.removeChild(element);
});
Here is an entire fiddle:
fiddle
I have some rows that using ajax to get data, if I use a tag, the browser will be refresh and some data will lost. Then I just use td tag, but I want to make it look like a tag (color, cursor a hand)
Here my code:
<td style="color: green;" onclick="myFunction(this)">hello</td>
// failed with: <td style="color: green;" onclick="myFunction(this)">hello</td>
You can use following css to give td look and feel like a.
td {
color: #337ab7;
text-decoration: none;
cursor: pointer;
}
td:focus, td:hover {
color: #23527c;
text-decoration: underline;
}
Color should work the way you have it.
for cursor you could try
td {
cursor: pointer;
}
You should use a, but return false after your function and use # as href value:
hello
While you could do that using the cursor: pointer CSS-property, I'd rather use the <a> tag and set a click event handler like this:
<a id="clickable">Click</a>
<script>
document.getElementById("clickable").addEventListener('click', function(e) {
alert("Clicked")
e.preventDefault()
return false
})
</script>
See a working example here
A <td> tag is actually part of the <table> tag and should not be used outside it.
What you're better off doing is simply creating a new button using a <div> element and some CSS
.button {
display: inline-block;
padding: 5px 12px;
background: #09c;
color: #eee;
cursor: pointer;
border-radius: 3px;
border: 1px solid #28f;
}
<div class="button">My button text</div>
display: inline-block causes the <div> element to not take up the entire width of the page (just wrap the contents).
cursor: pointer will make the cursor literally look like a pointer when hovering over the element.
Not using a table tag here makes much more sense since you're not displaying a table (From what I can see in the question).
And that's pretty much it!
This question already has answers here:
How to prevent ENTER keypress to submit a web form?
(29 answers)
Closed 7 years ago.
I have developed a search feature in my application. Users can search for streets by typing the address in an input box. Onkeyup, the a function is called that compares the input against a database full of addresses. The function gives back 5 suggestions which are showed below the inputbox like a sort of dropdownmenu. This works perfectly fine. The user can afterwards select one of the suggestions, which triggers another function.
What I want to implement now is that, when the user presses ENTER, the second function is automatically called with the first suggestion. I thought it would not be that difficult to program, but I'm facing some difficulties. When I press enter, the page refreshes instead of going to the function.
Here is my code:
<div id = "toolbar">
<form id ="suggestions">
<input type = "text" id = "insertText" autocomplete="off" onkeyup = "if(event.keyCode == 13) {SearchAddress(option1.text)} else {giveSuggestion()}" onfocus='showOptions()'
<option class="option" id = "option1" onmousedown = "searchAddress(option1.text)"></option>
<option class="option" id = "option2" ... </option>
</form>
</div>
CSS
#toolbar {
position: fixed;
width: 100%;
height: 25px;
top: 0;
left: 0;
padding: 5px 10px;
background: #ccc;
border-bottom: 1px solid #333;
}
#suggestions {
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
left: 310px;
top: 5px;
background-color: white;
font-size: 12px;
}
.option{
display:none;
cursor: default;
padding: 0px 3px;
}
Any suggestions?
When you hit enter the browser tries to submit the form.
So, there are two possible solutions:
Remove form tag, if you don't need to send any data from it to the backend.
Add onsubmit="return false;" to the form tag.
I guess the browser didn't know what event is So......
<input type = "text"
id = "insertText"
autocomplete="off"
onkeyup = "function(event){if(event.keyCode == 13)
{SearchAddress(option1.text)}
else {giveSuggestion()}"
onfocus='showOptions()'}" />
The default behavior of form will refresh the page, so place replace the form tag to div, and handle the form submit yourself use library like jQuery or vanilla XMLHttpRequest object.
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 7 years ago.
I have the following css:
.pageMenu .active::after {
content: '';
margin-top: -6px;
display: inline-block;
width: 0px;
height: 0px;
border-top: 14px solid white;
border-left: 14px solid transparent;
border-bottom: 14px solid white;
position: absolute;
right: 0;
}
I'd like to change the border-width of the top, left, and bottom border using jQuery. What selector to I use to access this element? I tried the following but it doesn't seem to be working.
$('.pageMenu .active:after').css(
{
'border-top-width': '22px',
'border-left-width': '22px',
'border-right-width': '22px'
}
)
You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new :after specified.
CSS:
.pageMenu .active.changed:after {
/* this selector is more specific, so it takes precedence over the other :after */
border-top-width: 22px;
border-left-width: 22px;
border-right-width: 22px;
}
JS:
$('.pageMenu .active').toggleClass('changed');
UPDATE: while it's impossible to directly modify the :after content, there are ways to read and/or override it using JavaScript. See "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" for a comprehensive list of techniques.
You can add style for :after a like html code.
For example:
var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');
If you use jQuery built-in after() with empty value it will create a dynamic object that will match your :after CSS selector.
$('.active').after().click(function () {
alert('clickable!');
});
See the jQuery documentation.
Is there any way to get a checkbox inside a button?
At the moment I have this solution:
<html>
<body>
<div id="menu">
<button><input type="checkbox" /></button>
</div>
</body>
</html>
It's ok, it works fine with Chrome and Firefox...but really awful with IE, so I need another way to achieve this goal.
Any ideas?
Thanks
I think its not a valid mark up to place a checkbox within a button. It would be better to replace the button with span or div and apply some CSS to span or div to make look like button and apply click event to that and change the checkbox state.
Just an example for you
I'm not entirely sure what you're trying to achieve here, so please forgive me if my answer isn't what you were looking for. If you want a button which changes the state of a checkbox, then #thecodeparadox's answer should work great, however if you're looking for a button which performs a function but also has a checkbox inside of it which can be toggled, you might want something like the following:
HTML:
<div id="button" href="#">
<input type="checkbox" class="check">Submit
</div>
CSS:
body {
margin: 10px;
}
#button {
display: inline-block;
background: #ddd;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: underline;
color: blue;
cursor: pointer;
}
.check {
display: inline-block;
margin-right: 10px;
}
jQuery:
$('#button').on('click', function() {
window.location = '#';
})
http://jsfiddle.net/QStkd/278/
It's not valid markup but you can cheat IE with jquery -
<button>hi</button>
$('button').prepend('<input type="checkbox" />');
Demo: http://jsfiddle.net/Gg9fG/