I am trying to make a small jQuery plugin that is able to create an overlay to create a tinting effect. To create this overlay is simple enough using plain js & jQuery, but when I try to wrap it all up into a jQuery plugin I get the error message that append (and appendTo) are not functions. The plugin works if I use extend instead of append, but the it is simply changing the existing css code, while I want to create an actual overlay over any div or object.
(function ($) {
$.fn.tint = function( options )
{
var overlay = $.append(
{
backgroundColor: "black",
opacity: 0.5,
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
//"z-index": 1000,
}, options
);
return this.css(
{
backgroundColor: overlay.backgroundColor,
opacity: overlay.opacity,
width: overlay.width,
height: overlay.height,
position: overlay.position,
top: overlay.top,
left: overlay.left,
right: overlay.right,
bottom: overlay.bottom,
//z-index: overlay.z-index,
}
);
}
} ( jQuery ));
I guess you are trying to do $.extend (not $.append):
(function ($) {
$.fn.tint = function( options )
{
if($(this).find(".overlay").length > 0) return $(this);
var overlay = $.extend({
backgroundColor: "black",
opacity: 0.5,
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
//"z-index": 1000,
}, options);
$("<div class='overlay'>").css(
{
backgroundColor: overlay.backgroundColor,
opacity: overlay.opacity,
width: overlay.width,
height: overlay.height,
position: overlay.position,
top: overlay.top,
left: overlay.left,
right: overlay.right,
bottom: overlay.bottom,
//z-index: overlay.z-index,
}
).appendTo(this);
return $(this);
}
} ( jQuery ));
$(".overlay-target").on("click", function(){
$(this).tint({backgroundColor: "green"});
});
.overlay-target {
border: 1px solid red;
margin: 20px;
padding: 50px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay-target'>I want an overlay</div>
Related
Im stuck on a simple error, but just can't find it.
I have created an const, too style an element. Now I want to put the constant into the CSS, but somehow that doesn't work.
I want delete this line:
<div style={OVERLAY_STYLES}/>
Can somebody explain my mistake?
const OVERLAY_STYLES = {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0,0,0, .7)",
zIndex: 1000,
};
export default function Modal({ open, children, onClick }) {
const [check, setCheck] = useState([]);
......
return ReactDOM.createPortal(
<div className="OVERLAY_STYLES">
<div style={OVERLAY_STYLES}/>
<div className="MODAL_STYLES">
<h1>Blabla.</h1>
{attribute.map((att, index) => {
return (
<div>
......
</div>
);
})}
<div className="b01">
<button onClick={() => onClick(check)} >Submit</button>
</div>
</div>
</div>
,
document.getElementById("portal")
);
}
.OVERLAY_STYLES {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0, .7);
z-index: 1000;
};
In react inline styling, all values need to be inside ' ' . Change your OVERLAY_STYLES code to:
.OVERLAY_STYLES {
position: 'fixed';
top: '0';
left: '0';
right: '0';
bottom: '0';
backgroundColor: 'rgba(0,0,0, .7)';
z-index: '1000';
};
also, no dashes so change background-color to backgroundColor
Root Cause:-
You are wrapping your <div style={OVERLAY_STYLES}/> under <div className="OVERLAY_STYLES">.
You are using the same style on both div tags which have z-index applied with the same value. So in your case:- with inline-style is appearing above the parent div by hiding it under itself.
I am attaching the snippet have a look for the reference:-
const OVERLAY_STYLES = {
position: "fixed",
top: 20,
left: 20,
right: 20,
bottom: 20,
backgroundColor: "red",
zIndex: 1000,
color:"white",
width:"50%",
};
const App = () => /*#__PURE__*/React.createElement("div", {
className: "OVERLAY_STYLES"
}, /*#__PURE__*/React.createElement("div", {
style: OVERLAY_STYLES
}, "hELLO"));
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("app"));
.OVERLAY_STYLES{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: ;
background-color: yellow;
z-index: 1000;
color:green;
width:100vw;
height:700px;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Solution:-
Try changing z-index/width.
Note:-Element with higher z-index will be at the top.
there Stack Overflow community. I'm sure there's just something simple that I am missing but for the life of me I cannot figure out what it is.
I have a simple animation that is just transposing some divs. The animation runs and everything but I am getting some weird behaviour that I am not sure exactly why it is.
In my jQuery, there is a method show_dots(integer milliseconds). The only thing this function does is to call $.toggle() on the 4 elements that I am animating. I would like the function to behave like this. The page is loaded, the 4 elements are not visible. They become visible and then the animation runs.
When I include a method call to show_dots before the animation, the dots do not appear and the animation runs(I opened up the dev tools of the browser and I can see the values changing). Just for the hell of it, I threw in a method call to show dots AFTER the animation.
In that case, the behaviour was... the page loaded (the dots were visible), the animation ran, and then the dots disappeared after the method call. I'm not certain why this is the behaviour.
I've also tried animating the capacity to no avail. I'm not sure why it isn't working but I'm not sure where to start. I'm sure it's just some inherent feature that I'm unaware of, but thus far, I'm not sure what it is
Code is as follows:
let tl = $("#square-animation-div-tl");
let tr = $("#square-animation-div-tr");
let bl = $("#square-animation-div-bl");
let br = $("#square-animation-div-br");
$(window).on('load', function() {
animation_loop(1300, tl, tr, bl, br);
$("#journey-link").on("click", pause_animation);
});
function show_dots(dur) {
tl.toggle(250);
tr.toggle(250);
bl.toggle(250);
br.toggle(250);
};
function animation_loop(dur, tl, tr, bl, br) {
//toggle_dots(250) //this line does not make the dots toggle in or out
tl.animate({
left: ($("#journey-link").width() - 18),
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
top: ($("#journey-link").height() - 18),
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur)
.animate({
left: -12,
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
top: -12,
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur);
tr.animate({
top: ($("#journey-link").height() - 18),
borderRadius: "50%"
}, dur)
.animate({
right: ($("#journey-link").width() - 18),
borderRadius: "0%"
}, dur)
.animate({
top: -12,
borderRadius: "50%"
}, dur)
.animate({
right: -12,
borderRadius: "0%"
}, dur);
bl.animate({
bottom: ($("#journey-link").height() - 18),
borderRadius: "50%"
}, dur)
.animate({
left: ($("#journey-link").width() - 18),
borderRadius: "0%"
}, dur)
.animate({
bottom: -12,
borderRadius: "50%"
}, dur)
.animate({
left: -12,
borderRadius: "0%"
}, dur);
br.animate({
right: ($("#journey-link").width() - 18),
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
bottom: ($("#journey-link").height() - 18),
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur)
.animate({
right: -12,
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
bottom: -12,
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur);
toggle_dots(250);
//animation_loop(dur,tl,tr,bl,br);
};
.square-animation-container {
width: 100%;
height: 100%;
z-index: 3;
}
.square-animation-div {
height: 24px;
max-height: 24px;
min-height: 24px;
width: 24px;
max-width: 24px;
min-width: 24px;
z-index: 2;
position: absolute;
}
#square-animation-div-tl {
top: -12px;
left: -12px;
background-color: blue;
}
#square-animation-div-tr {
top: -12px;
right: -12px;
background-color: white;
}
#square-animation-div-bl {
bottom: -12px;
left: -12px;
background-color: white;
}
#square-animation-div-br {
bottom: -12px;
right: -12px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square-animation-container">
<div id="square-animation-div-tl" class="square-animation-div">
</div>
<div id="square-animation-div-tr" class="square-animation-div">
</div>
<div id="square-animation-div-bl" class="square-animation-div ">
</div>
<div id="square-animation-div-br" class="square-animation-div ">
</div>
</div>
I have to apply animation on each "div". But it is applying just in first one not in all.
According to me "$("#viewport").each(appendTo(c));" this line is not working in javascript code.
HTML code:
<div id="viewport"></div>
<div id="viewport"></div>
<div id="viewport"></div>
Javascript code:
$(window).load(function(){
$(function () {
var a = 0;
for (; a < 15; a += 1) {
setTimeout(function b() {
var a = Math.random() * 1e3 + 5e3,
c = $("<div />", {
"class": "smoke",
css: {
opacity: 0,
left: Math.random() * 200 + 80
}
});
**$("#viewport").each(appendTo(c));**
$.when($(c).animate({
opacity: 1
}, {
duration: a / 4,
easing: "linear",
queue: false,
complete: function () {
$(c).animate({
opacity: 0
}, {
duration: a / 3,
easing: "linear",
queue: false
})
}
}), $(c).animate({
bottom: $("#viewport").height()
}, {
duration: a,
easing: "linear",
queue: false
})).then(function () {
$(c).remove();
b()
});
}, Math.random() * 3e3)
}
}());
});
Use more than one element with the same id is absolutely bad practice! Put "vieport" as class and use
$( ".viewport" )
The .each() function take a function as first argument and in that function context, the "this" variable will contain the element
$( ".viewport" ).each( function() {
$( this ).appendTo( c );
});
If I am not wrong. You want something like this:
HTML:
<div id="viewport">
<div class="smoke smoke1"></div>
<div class="smoke smoke2"></div>
<div class="smoke smoke3"></div>
</div>
JS:
(function () {
"use strict";
$('#viewport .smoke').each(function ns () {
var initialTop = $(this).position().top;
$(this).animate({
top: - $(this).height()
}, Math.random() * 2000 + 2000, function () {
$(this).css({
top: initialTop,
opacity: 0
});
}).animate({
opacity: 1
}, ns)
});
}());
CSS:
#viewport {
position: relative;
width: 400px;
height: 300px;
margin: 100px auto;
border: 1px solid #333333;
overflow: hidden;
}
#viewport .smoke {
position: absolute;
width: 20px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
}
#viewport .smoke1 {
left: 140px;
top: 260px;
}
#viewport .smoke2 {
left: 180px;
top: 260px;
}
#viewport .smoke3 {
left: 220px;
top: 260px;
}
Please see demo here: http://jsfiddle.net/1rf31eyL/
You may check another example demo here: http://gettycreations.com/
first of all
add function in $.each
like
"$("#viewport").each(
function(){
$(this).appendTo(c);
}
);
and then try this,
$("[id=viewport]")
When you use
$("#viewport")
it selects only the first element with the given ID.
However, when you select by attribute (e.g. id in your case), it returns all matching elements, like so:
$("[id=viewport]")
I'm making a gallery of pics that expand to full size when you click them and shrink back to normal when you click them a second time... my issue is that if I click multiple pictures, they will all enlarge and stack without the first ones returning to their original size. I'm wondering if there is an easy way to either force all of the other pics back to the smaller size when one is clicked for enlargement, or if there is a way to make it so you have to click somewhere away from the enlarged pic to get it to return to the smaller size.
Here's my code, fiddle link at the bottom
(click the second pic and then the first to see what I'm talking about)
<div id="Gpic1">
<img class='galleryPics' id='pic1' src='http://i.imgur.com/urxD24P.jpg?1'>
</div>
<div id="Gpic2">
<img class='galleryPics' id='pic2' src='http://i.imgur.com/JbJXjsf.jpg?1'>
</div>
#Gpic1 {
float: left;
width: 187px;
height: 280px;
margin-left: 5%;
display: inline-block;
background: black;
padding: 0;
}
#pic1 {
width: 187px;
height: 280px;
}
#Gpic2 {
float: left;
width: 187px;
height: 280px;
margin-left: 5%;
display: inline-block;
background: black;
padding: 0;
}
#pic2 {
width: 187px;
height: 280px;
}
.enlarged {
border: 10px solid #e5dbcc;
position: absolute;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
}
$('#Gpic1').hover(function () {
if (!$(this).find('img').hasClass('enlarged')) {
$(this).find('img').fadeTo(500, 0.5);
}
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#pic1').click(function () {
$(this).fadeTo(0, 1);
if ($(this).hasClass('enlarged')) {
$(this).removeClass('enlarged');
$(this).stop().animate({
width: 187,
height: 280
}, 0,
function () {
$(this).parent().removeClass('ontop');
$('#Gpic1').css('background', 'black');
});
} else {
$(this).addClass('enlarged')
$(this).parent().addClass('ontop');
$(this).stop().animate({
width: 533,
height: 800,
left: +100,
bottom: +50
}, 200);
$('#Gpic1').css('background', 'none');
}
});
$('#Gpic2').hover(function () {
if (!$(this).find('img').hasClass('enlarged')) {
$(this).find('img').fadeTo(500, 0.5);
}
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#pic2').click(function () {
$(this).fadeTo(0, 1);
if ($(this).hasClass('enlarged')) {
$(this).removeClass('enlarged');
$(this).stop().animate({
width: 187,
height: 280
}, 0,
function () {
$(this).parent().removeClass('ontop');
$('#Gpic2').css('background', 'black');
});
} else {
$(this).addClass('enlarged')
$(this).parent().addClass('ontop');
$(this).stop().animate({
width: 533,
height: 800,
left: +100,
bottom: +50
}, 200);
$('#Gpic2').css('background', 'none');
}
});
EDIT ---- fiddle: http://jsfiddle.net/Td6tT/4/
Simply use a jQuery function to select all picture elements of the given class "enlarged" and shrink them before enlarging the next one:
$("img.enlarged").removeClass("enlarged");
So in your code, for example:
$('#pic1').click(function () {
$(this).fadeTo(0, 1);
if ($(this).hasClass('enlarged')) {
$(this).removeClass('enlarged');
$(this).stop().animate({
width: 187,
height: 280
}, 0,
function () {
$(this).parent().removeClass('ontop');
$('#Gpic1').css('background', 'black');
});
} else {
//Add the following line
$("img.enlarged").removeClass("enlarged");
$(this).addClass('enlarged')
$(this).parent().addClass('ontop');
$(this).stop().animate({
width: 533,
height: 800,
left: +100,
bottom: +50
}, 200);
$('#Gpic1').css('background', 'none');
}
});
Voila!
There are really a couple ways to do this, and it depends on how you feel about different approaches. Perhaps the easiest thing to do, since you're already basing it on classes would be to add something like $('.enlarged').removeClass('enlarged') to the start of the clickhandler section that deals with enlarging a new image. That way, when you click to enlarge another image, all other images that are enlarged will shrink.
If you prefer, you could create a variable to store whichever one is currently open and shrink it in the same way, as well, though I think the above suggestion is nicer as it keeps everything within the function scope.
For a general 'clickaway' function, you may also consider using .blur, but you'd need to give the image focus when it is clicked using .focus.
I just want to add 4 arrows to a div:
I got it to work:
http://jsfiddle.net/ctNDr/
But when i try to make a jquery plugin, it bugs:
http://jsfiddle.net/DY3EJ/
This is the output:
<img class="arrows" src="arrow-top.png" alt="Arrow-Top" style="height: 26px; width: 20px; top: 50px; left: 480480px; position: absolute; display: none;">
<img class="arrows" src="arrow-right.png" alt="Arrow-Top" style="position: absolute; display: none;">
<img class="arrows" src="arrow-bottom.png" alt="Arrow-Top" style="left: 480480px; position: absolute; display: none;">
<img class="arrows" src="arrow-left.png" alt="Arrow-Top" style="height: 20px; width: 26px; top: 50250px; left: 480px; position: absolute; display: none;">
Any idea?
You had several issues going on, but I was able to get it to work finally. I removed the this.each() function, as it wasn't serving a purpose. Also your top, right, bottom, left calculations needed to be wrapped in parens. For visual purposes, in the jsFiddle, I made class .arrows { background-color: red; } since I didn't have any images to deal with.
Things to note:
options.MouseOver is never used.
options.Fade and options.FadeSpeed are based off the first .AddArrow() call due to how you are handling the .hover() in the plugin.
You may want to consider adding .stop(true,true) before your fadeIn/fadeOut call on hover to eliminate animation queuing.
Click here to view jsFiddle demo:
(function( $ ){
$.fn.AddArrow = function(options) {
var defaults = {
ArrowHeight: '32',
ArrowWidth: '32',
ArrowPath: 'images/arrow.png',
Orientation: 'Top',
Fade: true,
FadeSpeed: 300,
MouseOver: true
};
var o = $.extend(defaults, options);
var pos = this.position();
var width = this.width();
var height = this.height();
switch (o.Orientation) {
case "Top":
this.append($('<img>', {
src: o.ArrowPath,
alt: "Arrow-Top",
class: "arrows",
style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+pos.top+"px; left: "+((width / 2) + pos.left)+"px; position: absolute; display: none;"
}));
break;
case "Right":
this.append($('<img>', {
src: o.ArrowPath,
alt: "Arrow-Right",
class: "arrows",
style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+(pos.top + (height / 2))+"px; left: "+(width + (pos.left - o.ArrowWidth))+"px; position: absolute; display: none;"
}));
break;
case "Bottom":
this.append($('<img>', {
src: o.ArrowPath,
alt: "Arrow-Bottom",
class: "arrows",
style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+(pos.top + (height - o.ArrowHeight))+"px; left: "+((width / 2) + pos.left)+"px; position: absolute; display: none;"
}));
break;
case "Left":
this.append($('<img>', {
src: o.ArrowPath,
alt: "Arrow-Left",
class: "arrows",
style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+(pos.top + (height / 2))+"px; left: "+pos.left+"px; position: absolute; display: none;"
}));
break;
}
if(o.Fade) {
this.hover(function() {
$(".arrows").fadeIn(o.FadeSpeed);
}, function() {
$(".arrows").fadeOut(o.FadeSpeed);
});
}
}
})( jQuery );
Take a look at the plugin authoring guide. You need to set the name of the plugin like this, $.fn.yourplugin
(function( $ ){
$.fn.myPlugin = function() {
// there's no need to do $(this) because
// "this" is already a jquery object
// $(this) would be the same as $($('#element'));
this.fadeIn('normal', function(){
// the this keyword is a DOM element
});
};
})( jQuery );