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
Related
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";
});
I always appreciate the help given here. I am working on trying to figure out how to make div boxes highlight a specific area of an image using html, css, and jquery. I have been doing some reading on image maps and they seem rather complex and not necessarily the best option anyway. So I started making this example that I will include on a jsfiddle.net. The example is the ability to mouseover a tooth and select it. Here's my question, is this the best way of solving this problem? Most important is that in the end it is responsive to window size change and across multiple browsers. I am worried that the divs won't always match up and be the correct size. It would be nice if I could make it look better, but I am not sure how. Any help or pointers or general thoughts are appreciated in making this more functional. I'm still pretty new at this. Thanks.
Here's the fiddle:
http://jsfiddle.net/creedjm/3gpK6/50/
Stack would like me to submit a snippet of code before it can be accepted. Here is the current html, css, and jquery.
HTML:
<div class="mouth" id="mouthAndDivs">
<img src="https://dl.dropboxusercontent.com/u/1318823/virtudent/images/mouth.jpg" id="theMouth"/>
<div class="tooth" id="tooth1"></div>
<div class="tooth" id="tooth2"></div>
<div class="tooth" id="tooth3"></div>
</div>
CSS:
#mouthAndDivs {
position:absolute;
}
.tooth {
position: relative;
width:40px;
height:27px;
border: 2px solid rgba(0, 0, 0, 0);
}
#tooth1 {
left: 260px;
top: 270px;
width:42px;
}
#tooth2 {
left:266px;
top:210px;
width: 45px;
}
#tooth3{
left:275px;
top:148px;
width:42px;
}
#theMouth {
position:absolute;
}
jQuery:
$(".tooth").mouseenter( function() {
$( this ).css( "border", "2px solid rgba(0, 0, 255, 1)" );
});
$(".tooth").mouseleave( function() {
$( this ).css( "border", "2px solid rgba(255, 255, 255, 0)" );
});
Not to worry about responsiveness, any absolutely positioned element is positioned according to it's closest positioned (absolute, relative, or fixed) parent.
That means that you only need to change this:
#mouthAndDivs {
position: relative;
}
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 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/
i want to give overlay and shadow effect using jQuery.i have difficulty in using it
You do not need a shadow plugin for this. Use the following cross browser shadow CSS properties and put them in a class name .shadow. Then using jquery's addClass() function you can add the shadow class to any element that you want to have a shadow.
CSS
.shadow{
-moz-box-shadow: 3px 3px 4px #ccc;
-webkit-box-shadow: 3px 3px 4px #ccc;
box-shadow: 3px 3px 4px #ccc; /* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cccccc')"; /* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc');
}
jQuery
$('div').addClass('shadow');
The above jQuery selector will apply shadow to div element. Similarly you can apply the same shadow class to any element that you want to have a shadow. You can Adjust the shadow CSS properties as needed.
Check working example at http://jsfiddle.net/ttCSQ/1/
the shadow part:
<script type="text/javascript">
$(function(){
$("#exampleDiv").shadow({
width:5,
startOpacity:60,
endOpacity:10,
cornerHeight:8,
color:"#000000"
});
})
</script>
this is for the overlay part : http://flowplayer.org/tools/overlay/index.html