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
Related
i need to remove/deactivate/change to zero effect following style argument:
#wrapper .fragment-card.aktuelles-card .image-card img:hover{
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
this has to happen with very basic Javascript, so i can not use libarys etc. The JS part will be executed at the end of the page.
Thanks for your help!
You cannot directly deactivate a CSS rule using javascript. So you have two options:
1) The first option uses only javascript for doing it. You can modify the style attribute of the element using the setAttribute() method in order to set transform: none; box-shadow: none;. Like this:
const el = document.querySelector("#myElementId");
el.setAttribute("style", "transform: none; box-shadow: none;");
However, I don't like to use the style attribute while using css rules since I prefer to see all styles in the same css file, and it makes more difficult to mantain code, so I don't recommend to use this solution.
2) The good practice solution involves both CSS and JS. You have to reference make your css rule to a class .my-style. So then you write your css rule like this:
.my-style {
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
So, now you will need to use Javascript to add or remove the .my-style class whenever you need. In the case of img:hover reference you use in your original css, you can make your own js function to add the class when an img is hover, and remove the class when the pointer leaves the img. This event listener will be useful:
document.querySelectorAll("img").forEach(img => {
img.addEventListener("mouseover", function() {
img.classList.add("my-style");
})
img.addEventListener("mouseleave", function() {
img.classList.remove("my-style");
})
});
Try it here
document.querySelectorAll("img").forEach(img => {
img.addEventListener("mouseover", function() {
img.classList.add("my-style");
})
img.addEventListener("mouseleave", function() {
img.classList.remove("my-style");
})
});
.my-style {
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
img {
width: 200px;
height: auto;
}
<img src="https://s1.eestatic.com/2021/05/06/curiosidades/mascotas/579203536_184266041_1706x960.jpg">
<img src="https://ichef.bbci.co.uk/news/640/cpsprodpb/15665/production/_107435678_perro1.jpg">
<img src="https://dam.ngenespanol.com/wp-content/uploads/2019/06/mirada-perros-770x395.png">
You could just create another stylesheet and add that to the end of the head element
if you are sure that the offending styling is set in the head. If not you could put it at the end of the body.
This snippet adds it to the end of the head:
<!doctype html>
<html>
<head>
<style>
#wrapper .fragment-card.aktuelles-card .image-card img:hover {
transform: scale(3);
box-shadow: 0 4px 6px 0 #222;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="fragment-card aktuelles-card">
<div class="image-card">
<img src="https://picsum.photos/id/1015/200/300">
</div>
</div>
</div>
<script>
const style = document.createElement('style');
style.innerHTML = '#wrapper .fragment-card.aktuelles-card .image-card img:hover{transform: inherit!important;box-shadow: inherit!important};';
const head = document.querySelector('head');
head.appendChild(style);
</script>
</body>
</html>
So I have this jQuery event triggering a text-shadow:
$(".leftColumn").hover(function (){
$(".leftColumn h2").css("text-shadow", "0px 2px 3px rgba(0, 0, 0, 0.5)");
},function(){});
The problem is that once the text-shadow is applied to the h2, it remains applied even after I stop hovering over leftColumn. How do I make the text shadow go away?
I tried:
$(".leftColumn").hover(function (){
$(".leftColumn h2").css("text-shadow", "0px 2px 3px rgba(0, 0, 0, 0.5)");
},function(){
$(".leftColumn h2").css("text-shadow", "none");
});
But all that did was prevent the text-shadow from being applied at all.
As #Jaromanda X mentioned, that's a case better to be handled in CSS side.
.leftColumn:hover h2 {
text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}
<div class="leftColumn">
<h2>I'm H1</h2>
</div>
$(".leftColumn h2").css("text-shadow", "unset");
use 'unset' instead of 'none', if you have to use jquery to do this.
text-shadow doesn't have a 'none' value.
YOu can use mouseover and mouseout event. Also define class properties in css and use addClass & removeClass properties.Using jquery .css will add inline style to the element.
Alternatively css :hover can also be used
$(".leftColumn").on('mouseover', 'h2', function() {
$(this).addClass('addShadow');
});
$(".leftColumn").on('mouseout', "h2", function() {
$(this).removeClass('addShadow');
});
.addShadow {
text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leftColumn">
<h2> Hovering element</h2>
</div>
I'm currently using the Calendar Plugin (fullcalendar). I just couldn't find in its CSS file where I can customize the width/thickness of the eventBorderColor. Thanks!
Override the class .fc-event-inner:
.fc-event-inner {
border: 5px solid red;
}
Or you can use the 'className' option on your event objects and create that class. Be sure you add the !important property.
{
title : 'event01',
start : '2014-08-09',
className: 'moreBorder'
}
.moreBorder{
border: 5px solid red !important;
}
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 am trying to get a small polyfill (https://github.com/heygrady/textshadow) to add text-shadow effect on Internet Explorer to work, but can't seem to figure out how to make it work. This is the code I'm using:
<script src="#Url.Content("~/Scripts/modernizr.custom.61772.min.js")" type="text/javascript"></script>
<script>
Modernizr.load({
test: Modernizr.textshadow,
nope: ['/Content/jquery.textshadow.css', '/Scripts/jquery.textshadow.js'],
complete: function () {
$('h1').textshadow('1px 1px 2px #111')
}
});
</script>
I do get an effect but it looks all wrong. I just end up with the original heading text all over again, with the exact same formatting as the original text, but offset towards the bottom by half a line height.
EDIT: So after some experimenting I found out that I can at least get the shadow effect by manually creating the CSS rules for the class, rather than relying on javascript to do so, like so:
h1 .ui-text-shadow-copy
{
color: #111; /* color */
filter:
progid:DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=2); /* blue */
left: 0px; /* left - blur */
top: 0px; /* top - blur */
}
But the positioning is still screwed up. With left 0px and top 0px the shadow is placed half a line below the text. With anything else pieces of the shadow is spread out around the page.
I got it to work but I had to override the css styling inside the .textshadow method to get it to look right. Here's what worked for me:
CSS for browsers that support text-shadow:
.ts {
text-shadow: 2px 2px 2px #111111;
-moz-text-shadow: 2px 2px 2px #111111;
-webkit-text-shadow: 2px 2px 2px #111111;
}
Modernizr.load:
Modernizr.load([
{// load jquery
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if (!window.jQuery) {
Modernizr.load('/TimeTracker/Scripts/jquery-1.7.1.min.js');
}
}
},
{//other scripts that depend on jquery, including jquery ui
load: ['some.js','some.other.js']
},
{
test: Modernizr.textshadow,
nope: ['/url/to/jquery.textshadow.css','/url/to/jquery.textshadow.js']
},
'/url/to/file/that/contains/document.ready.js'
]);
document.ready.js:
var m = window.Modernizr;
function loadJqueryTextshadow() {
$('.ts').textshadow('2px -12px 2px #111111');
}
$(function(){
if (!m.textshadow) {
loadJqueryTextshadow();
}
}
The end result is close enough that the majority of users would never know the difference between IE, Chrome, and Firefox.
Try to use Microsoft DropShadow css filter for that:
h1 .ui-text-shadow-copy {
filter: progid:DXImageTransform.Microsoft.DropShadow(Color=#111111, OffX=1, OffY=1);
}
Where:
Color is RGB value for shadow
Offx - pixels for shadow offset by x
Offy - pixels for shadow offset by y
Simple answer: forget about text-shadow in IE. There is nothing available that can render close enough to other browsers.
you can use Css3Pie to text-shadow and border-radius:
http://css3pie.com/
Modernizr.load([
{
test: Modernizr.borderradius && Modernizr.boxshadow,
nope: 'PIE.htc' }
]); /*fine load modernizr*/