I have follwing css class
form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
padding: 2px 0;
}
and following html and Java Script:
<input type="text" id="txt1" style="width:300px;" />
<input type="button" id="btn" value="click here" class="medium required" onclick="return validate();"/>
<script language="javascript">
function validate()
{
if (document.getElementById('txt1').value == '') {
document.getElementById('txt1').style.borderLeft = "5px solid red";
return false;
}
}
</script>
It works in Mozila but in google Chrome whenever validation fires inputbox gets css exctly applied in javascript but it also creates top and bottom border of 1px solid
how can i solve this issue?
Thanks.
If I understand your issue, the top and bottom borders also turn red (in Chrome). You mention that they are 1px solid, but that is what you originally set them to in your css, so I assume the real issue is not that there is a solid 1px border but that it is the wrong color. So I assume they change from #CCCCCC to red when you only wanted the left border to do so.
I suspect that the border-radius (or the rendering of it after the fact) may be the issue. If you experiment with no border-radius does the issue still occur (I do not have access to Chrome to test myself)? If that solves it, then that is the problem. You might try overcoming it by doing something more explicit:
function validate()
{
var el = document.getElementById('txt1');
if (el.value == '') {
el.style.borderLeft = "5px solid red";
el.style.borderTopColor = "#CCCCCC";
el.style.borderBottomColor = "#CCCCCC";
return false;
}
}
EDIT: Based on UnLoCo's information, both in his first comment here as well as his comment in your question, you might try not using the shorthand css and see if that solves it. So instead of your css having:
border: 1px solid #CCCCCC;
You might try this in your base css and see if explicitly setting each border allows Chrome to not override the others when the left one is changed:
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
This is a known bug and has been reported: https://bugs.webkit.org/show_bug.cgi?id=72120.
However, here is a workaround for your case:
Tweak the radius from all 3px to 3px / 1px. Though it's not perfect but somehow acceptable.
demo: http://jsfiddle.net/linmic/VFBT3/51/
Related
I'm trying to get a console.log with styling like this:
let style='border: 3px solid red; display:inline-block; padding:10px; white-space:pre;';
console.log(
`%cLine1\nLine2`,
style
);
I would like to keep both lines in 1 border, but the \n makes two borders:
This may be help you I will update code if there is any another method
open browser console to preview code
let css1 = 'border: 3px solid red; display:inline-block; padding:10px; white-space:pre;border-bottom:none';
let css2 = 'border: 3px solid red; display:inline-block; padding:10px; white-space:pre;border-top:none;margin-top:-8px';
console.log(`%cLine1`, css1);
console.log(`%cLine2`, css2);
I came up with this solution. It is in part inspired by #dev.skas's answer.
See the browser console to see the output.
const styling = (marginTop) => {
return `border: 3px solid red; display:inline-block; padding:10px; white-space:pre;margin-top:-${marginTop}px`
}
console.log(`%cLine1`, styling(0));
console.log(`%cLine2`, styling(8));
In my website I set background color with Javascript but I can't use "hover" feature after that.
titles.forEach(titles => {
document.getElementById(titles).style.backgroundColor = "#7dd5f8";
document.getElementById(titles).style.color = "black";
});
that's my Javascript code.
.titles:hover{
border: 1px solid black;
background-color: #a0e1fa;}
and that's my CSS code.
Try it please. It should work.
I added just one class in css.
.titles:hover{
border: 1px solid black;
background-color: #a0e1fa !important;}
.bg_7dd5f8 { background-color: #7dd5f8; }
And js code is here;
titles.forEach(titles => {
document.getElementById(titles).classList.add('bg_7dd5f8 ');
document.getElementById(titles).style.color = "black";
});
So I have this code that I created with some help:
I don't understand how to enter code it kept creating everything on one line at the formatting looked unreadable so here is a link:
http://jsfiddle.net/QFF4x/
<div style="border:1px solid black;" onmouseover="change(this)" onmouseout="restore(this)" ></div>
Either way, when the mouse is over the black line it expands downwards.
How can i make the onomouseover area larger?
For example if the mouse is hovering up to 15 pixels underneath the line the line would expand. how can i have it do that?
*Note: I everything has to be in the HTML, inline coding only I cannot link any JS or CSS pages.
For some reason, I'm getting complaints about "external files" which isn't relevant, so I'm updating to clarify that all of this can be in one document: Live demo (click).
<style>
#outer {
padding-bottom: 15px;
}
#inner {
border: 1px solid black;
}
#inner.big {
border-width: 3px;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('mouseenter', function() {
inner.className = 'big';
});
outer.addEventListener('mouseleave', function() {
inner.className = '';
});
</script>
You don't need JavaScript for this at all. Here's just a css example: Live demo (click).
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer {
padding-bottom: 15px;
}
.inner {
border: 1px solid black;
}
.outer:hover > .inner {
border-width: 3px;
}
Rather than using JavaScript, I'm using CSS :hover. The trick here is to wrap the element in another element and pad the outer element so that you can hover over that padding to affect the inner element.
If you do want to use JavaScript, please ignore any answers here using inline js (that's where you refer to javascript functions within the html.). Here's a basic example of how to do that without inline js and keeping your styles in css: Live demo (click).
<div id="outer">
<div id="inner"></div>
</div>
CSS:
#outer {
padding-bottom: 15px;
}
#inner {
border: 1px solid black;
}
#inner.big {
border-width: 3px;
}
JavaScript:
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('mouseenter', function() {
inner.className = 'big';
});
outer.addEventListener('mouseleave', function() {
inner.className = '';
});
Why do this instead of inline js? Read these results - there are plenty! https://www.google.com/search?q=Why+is+inline+js+bad%3F
heres a solution using a wrapping div with padding:-15px and on its hover events, just use the firstElemntChild
<script>
function change (element) {
element.firstElementChild.style.border = "3px solid black";
}
function restore(element) {
element.firstElementChild.style.border = "1px solid black";
}
</script>
<div style="padding-bottom:15px;" onmouseout="restore(this)" onmouseover="change(this)" >
<div style="border:1px solid black;" >
</div>
</div>
so you can hover 15 px under the border and the border changes and restores
fiddle . http://jsfiddle.net/QFF4x/2/
To increase the border on hover change
element.style.border = "3px solid black";
To for 15px
element.style.border = "15px solid black";
You can put the div in a larger div, and set the onclick event on the larger div.
<div onmouseover="change(this.childNodes[0])" onmouseout="restore(this.childNodes[0])">
<div style="border:1px solid black;" ></div>
</div>
this is the solution.
<div style="border:1px solid black;" onmouseover="javascript:this.style.border = '8px solid black';" onmouseout="javascript:this.style.border = '1px solid black';" ></div>
http://jsfiddle.net/5GAUq/
I want to show little shadow in menu bar but when some some scroll the shadow will be bigger yes I make it's position fixed. Please answer with javascript code, I don't want to add jquery. Thank you.
JS
function navscroll()
{
navscroll=document.getElementById("menu");
if(navscroll => 0){
navscroll.style['mox-box-shadow']="0 0 1px 1px #aaa";
}
else {
navscroll.style['mox-box-shadow']="1px 1px 2px 2px #aaa";
}
}
HTML
<div id="menu" onscroll="navscroll()">
i did a working fiddle there you go
http://jsfiddle.net/H9kVL/
window.addEventListener('mousewheel',function(){
document.getElementById('shadow').style['box-shadow'] = '3px 3px 3px #000';
})
change the id and it should work
I have a script which generates input boxes dynamically,
var gridBuilder = function() {
var html = [];
for (var index = 1; index <= gridSize * gridSize; index++)
{
html.push("<input id='id" + index + "' class='field' type='text' size='3' maxlength='3' name='name" + index + "'/>");
}
return html.join("");
};
I am applying the following CSS.
.field {
padding: 5px;
font-size: 15px;
text-shadow: 0px 1px 0px #fff;
outline: none;
background: -webkit-gradient(linear, left top, left bottombottom, from(#bcbcbe), to(#ffffff));
background: -moz-linear-gradient(top, #bcbcbe, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #717171;
}
My css is linked to the correct class isn't it? The issue is that none of the CSS defined in .field is showing up on my input.
I've put your javascript and css into a JsFiddle, and the style is being picked up. I put in an arbitrary gridSize because I wasn't sure what numbers would be normal.
Check it out here - http://jsfiddle.net/rTw8r/2/
However, there was a typo on your webkit gradient
it should be
-webkit-gradient(linear, left top, left bottom, from(#bcbcbe), to(#ffffff));
You had bottombottom instead of bottom
It works as expected for me !
I made you a jsFiddle so you can see if you are doing something different :)
http://jsfiddle.net/neYXk/3/
Maybee you are doing a document.write in a bad place an "overwriting" the core html includeing your css ?
You should start using http://jquery.com/ ! Makes js life so much easier :) !
Make sure your CSS file is used on your page.