Adding arrows to a div jQuery plugin issue - javascript

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 );

Related

scroll through divs stacked on each other

Long story short: I'd like to scroll through full-screen divs. Looking at previous question I found this which is quite close to what I need but with some changes.
https://jsfiddle.net/naqk671s/
Instead of having the div #1 fixed and the #2 landing on the top of it, I'd like to have the #1 going up and revealing the #2.
My confidence with jQuery is not so big, so I tried to change some values but I just made it worst. do you think is possible to achieve the result with few changes or should I just start from scratch?
under = function(){
if ($window.scrollTop() < thisPos) {
$this.css({
position: 'absolute',
top: ""
});
setPosition = over;
}
};
over = function(){
if (!($window.scrollTop() < thisPos)){
$this.css({
position: 'fixed',
top: 0
});
setPosition = under;
}
};
To make my self more clear, what I'm trying to achieve is basically the opposite of the fiddle I've posted. If you scroll all the way down and than start to scroll up that will be the effect I'd like to achieve but upside down.
Thanks in advance
Update:
After comment, request became clearer, look these examples...
Pure CSS: https://jsfiddle.net/9k8nfetb/
Reference: https://www.w3schools.com/howto/howto_css_sticky_element.asp
jQuery: https://jsfiddle.net/kajwhnc1/
Reference: multiple divs with fixed position and scrolling
Another jQuery: https://jsfiddle.net/6da3e41f/
Reference: How to make div fixed after you scroll to that div?
Snippet
var one = $('#one').offset().top;
var two = $('#two').offset().top;
var three = $('#three').offset().top;
var four = $('#four').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= 0) {
$('#one').css({
position: 'fixed',
top: '0',
});
} else {
$('#one').css({
position: 'static'
});
}
if (currentScroll >= two) {
$('#two').css({
position: 'fixed',
top: '26px',
});
} else {
$('#two').css({
position: 'static'
});
}
if (currentScroll >= three) {
$('#three').css({
position: 'fixed',
top: '52px',
});
} else {
$('#three').css({
position: 'static'
});
}
if (currentScroll >= four) {
$('#four').css({
position: 'fixed',
top: '78px',
});
} else {
$('#four').css({
position: 'static'
});
}
});
body,
html {
height: 200%;
}
#one,
#two,
#three,
#four {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
}
#one {
top: 0;
background-color: aqua;
}
#two {
top: 100%;
background-color: red;
}
#three {
top: 200%;
background-color: #0a0;
}
#four {
top: 300%;
background-color: #a05;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<body>
<div id="one">ONE</div>
<div id="two">TWO TWO</div>
<div id="three">THREE THREE THREE</div>
<div id="four">FOUR FOUR FOUR FOUR</div>
</body>

Using append to create an overlay in a jQuery plugin

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>

change only the background-image smooth without text in front of it

I have a website, where I want to change between images in the background very smoothly. This is my actual javaScript-code for it:
var bg=[
'images/best.jpg',
'images/61182.jpg',
'images/bg.jpg'
];
$('._container-1').css('background-image','url('+bg[2]+')');
window.setInterval(
function(){
img=bg.shift();bg.push(img);
document.getElementsByClassName('_container-1')[0].style.backgroundImage='url('+img+')';
},
10000
);
Now, I want to change the images very slowly. I have tried a lot with jQuery-fadeIn/fadeOut-methods like this:
window.setInterval(
function(){
img=bg.shift();
bg.push(img);
$('._container-1').fadeOut(600, function() {
$('._container-1').css('background-image','url('+img+')');
$('._container-1').fadeIn(600);
});
},
17000
);
The problem is, that there are buttons and text in the container and they changes with the images. I want that the text and buttons are in the front all the time, only the background should fadeIn/fadeOut. My english is not perfect, I hope you understand my problem.
Can somebody help me please?
nina_berlini
I have uses 2 elements as background to achieve the effect. Also check demo on https://jsfiddle.net/n380u3cy/1/
HTML:
<div class="container">
<div class="background"></div>
<div class="background"></div>
<button>
Test button
</button>
</div>
CSS:
.container { position: relative; line-height: 100px; }
.container > .background,
.container > .background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: contain; z-index: 0; }
.container > *:not(.background) { position: relative; z-index: 1; }
Javascript:
var bg=[
'images/best.jpg',
'images/61182.jpg',
'images/bg.jpg'
];
var Transition = 1000;
$('.background').css('background-image','url('+bg[bg.length - 1]+')');
window.setInterval(
function() {
img=bg.shift();
bg.push(img);
var $Backgrounds = $('.background');
$Backgrounds.eq(1).hide(0).css({
'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);
$Backgrounds.eq(0).show(0).fadeOut(Transition, function(){
$(this).show(0).css({
'background-image': 'url('+img+')'
});
$Backgrounds.eq(1).hide(0);
});
}, 2000
);
Make a wrapper and include both the background div and button div inside it with position absolute and the following CSS styles. This way you can control and animate the background separately from the buttons.
var bg = [
'https://placehold.it/1001x201',
'https://placehold.it/1002x202',
'https://placehold.it/1003x203'
];
$('._container-1').css('background-image', 'url(' + bg[2] + ')');
window.setInterval(
function() {
img = bg.shift();
bg.push(img);
document.getElementsByClassName('_container-1')[0].style.backgroundImage = 'url(' + img + ')';
},
10000
);
window.setInterval(
function() {
img = bg.shift();
bg.push(img);
$('._container-1').fadeOut(600, function() {
$('._container-1').css('background-image', 'url(' + img + ')');
$('._container-1').fadeIn(600);
});
},
17000
);
.wrapper {
position: relative;
width: 100%;
height: 200px;
}
._container-1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: top center;
}
.buttons {
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
left: 0;
}
button {
background: red;
padding: 5px 10px;
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="_container-1"></div>
<div class="buttons">
<button type="button">
Button 1
</button>
<button type="button">
Button 2
</button>
</div>
</div>
thank you for your great solution. I am not well familiar with jQuery and have a question about your code:
$Backgrounds.eq(1).hide(0).css({
'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);
means it that the second "background-div" first hides, then get a new background-image and after that it ist fadeIn? And means hide(0) that it immediately hides?
nina_berlini

Count back percentage using JQuery

I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/
jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.

JQuery Masonry -- expand div's over other div's

I'm making something similar to an iphone layout (a bunch of tiles with pictures/numbers that you can click on to get more information). After the layout has been set, I'd like a click-event to expand one of the tiles to be full screen. Right now, it moves the tiles so that the layout is re-adjusted. Is it possible to get masonry to stop rendering so that one tile get's enlarged over the other tiles?
The following is what I've tried (but unsuccessfully). Note: It uses d3.js to generate the div's for masonry to use.
function drawGrid(divname,orders)
{
var mydiv = d3.select(divname);
$(divname).masonry({
itemSelector: '.g1',
isAnimated: true,
//isResizable: true
});
var myd = mydiv.selectAll("div");
var mygs = myd.data(orders,function(d){ return d.orderid;})
.enter().append("div")
.attr("class","g1")
.append("g");
var x1 = mygs.append("div")
.attr("class","tickerdiv")
.text(function(d){ return d.ticker; });
var ActiveOrder = "1";
$(divname+' .g1').click(function() {
//$(this).show('maximised');
console.log("clicked")
$(this).animate({"display":"none","position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"z-index": 1000 }, 1000);
});
var x = [];
x.redraw = function(o)
{
x1.text(function(d){ return d.ticker; });
}
return x;
}
and from the css file:
.g1 { min-height:80px; width: 100px; margin: 15px; float: left; background-color: RGB(223,224,224); border-radius: 10px; vertical-align: middle; text-align: center; padding-top: 20px;}
EDIT Ok, my first answer was not useful here - absolute positioning won't work in case of masonry's/Isotope's relatively positioned container with absolute positioned elemens contained therein; the solution is rather to take the content of a masonry/Isotope element out of the DOM on click and append it temporarily to the body. You can see the basic idea in my dirty swedish sandbox
<!-- masonry/Isotope item large -->
<div class="item large">
<div class="header">
<p>Click here</p>
</div>
<div class="minimised">
<p>Preview</p>
</div>
<div class="maximised">
<p>Content</p>
<button id="screen-overlay-on">Screen overlay on</button>
<div id="screen-overlay-background"></div>
<div id="screen-overlay-content">
<p>Content</p>
<button id="screen-overlay-off">Screen overlay off</button>
</div>​
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#screen-overlay-on').click(function(){
var sob = $('#screen-overlay-background').detach();
var soc = $('#screen-overlay-content').detach();
sob.appendTo('body');
soc.appendTo('body');
$('#screen-overlay-background').toggleClass("active");
$('#screen-overlay-content').toggleClass("active");
});
$('#screen-overlay-background, #screen-overlay-off').click(function(){
$('#screen-overlay-background').toggleClass("active");
$('#screen-overlay-content').toggleClass("active");
});
});
</script>
With CSS like
#screen-overlay-background {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #333;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1000;
}
#screen-overlay-content {
display: none;
position: absolute;
top: 50%;
left: 50%;
height: 240px;
width: 320px;
margin: -120px 0 0 -160px;
background-color: #FFF;
z-index: 1000;
}
#screen-overlay-background.active, #screen-overlay-content.active {
display: block;
}
You can add a :hover to the element in css and change the z-index. You could easily change this on click with a class as well...
.item {
z-index:1
}
.item:hover{
z-index:2500;
}

Categories