i did an example on jsFiddle ( http://jsfiddle.net/aRWhm/ ) , the idea is to know when i'm over lets say the intersection between the red and the blue circle.
but the problem is that every time i reach the intersection, the class "is-over" of the red circle is removed.
Html:
<div>
<span id="Div1"></span>
<span id="Div2"></span>
<span id="Div3"></span>
<span id="Div4"></span>
</div>
CSS:
div {
display: block;
margin: 0 auto;
overflow: hidden;
width: 950px;
}
span {
display: block;
position: absolute;
opacity: 0.5;
border-radius: 999px;
z-index: 1;
}
#Div1 {
background-color: #FF0000;
height: 200px;
left: 50px;
top: 80px;
width: 200px;
}
#Div2 {
background-color: #0000FF;
height: 150px;
left: 40px;
top: 230px;
width: 150px;
}
#Div3 {
background-color: #008000;
height: 250px;
left: 100px;
top: 190px;
width: 250px;
}
#Div4 {
background-color: #FFFF00;
height: 100px;
left: 200px;
top: 130px;
width: 100px;
}
JavaScript:
$(document).ready(function () {
$("#Div1").hover(
function () {
$(this).addClass("is-over");
},
function () {
$(this).removeClass("is-over");
}
);
$("#Div2").hover(
function () {
$(this).addClass("is-over");
},
function () {
$(this).removeClass("is-over");
}
);
$("#Div3").hover(
function () {
$(this).addClass("is-over");
},
function () {
$(this).removeClass("is-over");
}
);
$("#Div4").hover(
function () {
$(this).addClass("is-over");
},
function () {
$(this).removeClass("is-over");
}
);
});
Here you go.
First, the Code:
(function($){
$.mlp = {x:0,y:0}; // Mouse Last Position
function documentHandler(){
var $current = this === document ? $(this) : $(this).contents();
$current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
$current.find("iframe").load(documentHandler);
}
$(documentHandler);
$.fn.ismouseover = function(overThis) {
var result = false;
this.eq(0).each(function() {
var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
var offset = $current.offset();
result = offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
});
return result;
};
})(jQuery);
$(document).ready(function () {
$("#myDiv").mousemove(
function() {
$("#myDiv").children("span").each(function(){
if($(this).ismouseover())
$(this).addClass("is-over");
else
$(this).removeClass("is-over");
});
});
});
Now an explanation:
I stole the .ismouseover() code shamelessly from this answer by Ivan Castellanos and repurposed it to your needs. Form there I used a .mousemove() event to fire every time you're in the parent container, which you can see in this fiddle needed to be given height and width parameters to ensure that it had a bounding box.
Lastly I simply check to see which circles you're over, and add the is-over class to them. The Fiddle is based off Anton's work, although it provides intersection support instead of moving one to the top.
Hope this helps.
Related
I have a slider that is almost working good enough. Left and right buttons work but I want it to have a .current-slide class on the visible. That is achieved onSlideChanged function and works when using next button but unfortunately when using prev button it's inaccurate?
Basic example: https://codepen.io/rKaiser/pen/KKdZxqv
Try as I might, I couldnt get it, it's something to do with the reversed indexes that I couldnt bind correctly when prev button is clicked, I think.
<div class="nav-example">
<div id="myslider" class="nav-slider">
<img class="current-slide" src="http://placekitten.com/g/612/612"/>
<img src="https://picsum.photos/612/612"/>
<img src="https://picsum.photos/612/612?random=1"/>
<img src="https://picsum.photos/612/612?random=2"/>
<img src="https://picsum.photos/612/612?random=3"/>
</div>
<a id="prev-button" href="#" class="slide-button"><</a>
<a id="next-button" href="#" class="slide-button">></a>
</div>
var container = document.getElementById('myslider');
var children = container.children;
function onSlideChanged(prev, next) {
children[prev].className = '';
children[next].className = 'current-slide';
}
var isNext = true;
var imgSlider = simpleslider.getSlider({
container: container,
children: children,
prop: 'left',
init: -612,
show: 0,
end: 612,
unit: 'px',
paused: true,
onChange: onSlideChanged
});
document.getElementById('prev-button').onclick = function(e) {
if (isNext) {
imgSlider.reverse();
isNext = false;
}
imgSlider.next();
e.preventDefault();
};
document.getElementById('next-button').onclick = function(e) {
if (!isNext) {
imgSlider.reverse();
isNext = true;
}
imgSlider.next();
e.preventDefault();
};
.nav-example { position: relative; width: 612px; height: 612px; }
.nav-slider { position: absolute; top: 0px; left: 0px; z-index: 1;}
#myslider { width:612px; height:612px; }
a.slide-button { position: absolute; padding: 300px 0px 0px 15px; top: 0px; left: 0px; z-index: 12; width: 30px; height: 612px; color: #FFF; background-color: rgba(0,0,0,0.4); text-decoration: none; font-weight: 600; box-sizing: border-box; }
#next-button { left: auto; right: 0px; }
/* ------------------------- */
.current-slide {
filter: invert(1);
border-radius: 50%;
}
Got it to work like this, feels a bit crude but atleast it works.
function onSlideChanged(prev, next) {
if (isNext) {
children[prev].className = '';
children[next].className = 'current-slide';
} else {
var currentSlide = $('#myslider img.current-slide');
if ( currentSlide.is(':first-child') ) {
console.log('first');
$('#myslider img').removeClass('current-slide');
$('#myslider img').last().addClass('current-slide');
} else {
console.log('not first');
currentSlide.prev().addClass('current-slide').next().removeClass('current-slide');
}
}
}
Having a slider with images implementation from array, cant figure out why images dont want to be shown up from array, tryed to make a path but it didnt work.I want this code to reflect this image every time a push the button: fpoimg.com/100x100.
Im trying to fix it only with clean javascript.
Here is a sandbox
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame:0,
set:function(image){
path = path || 'http://fpoimg.com/';
document.getElementById('scr').style.backgroundImage ="url ("+path+ image+")";
},
init:function() {
this.set(this.slides[this.frame]);
},
left:function() {
this.frame--;
if(frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right:function() {
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
},5000);
};
.scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background:none;
border:none;
}
.left {
left:25px;
}
.right {
right:25px;
}
<body>
<button class="left" onclick="slider.left();"><</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();">></button>
</body>
On Line 6 of your Javascript, you have used getElementById('scr'). You have no element with an Id or scr, you needed to use getElementsByClassName('scr')
Your new code:
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame: 0,
set: function(image) {
path = path || 'http://fpoimg.com/';
document.getElementsByClassName('scr').style.backgroundImage = "url (" + path + image + ")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if (frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right: function() {
if (this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
}, 5000);
};
.scr {
margin: 20px auto;
width: 600px;
height: 320px;
margin-top: 20px;
background-color: white;
background-size: cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background: none;
border: none;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
<body>
<button class="left" onclick="slider.left();">
</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();"></button>
</body>
It seems you've got getElementById() when you meant getElementsByClassName()
I have a function that creates a grid of divs that are generated and sent to a container div when the document loads (or when the user resets it). When one hovers over the divs, they highlight (change color). When the user clicks the highlighted div, it changes to black. For some reason, the div that was black reverts back to the original color when I hover over a different div. I'm puzzled as to why that is. Any help or guidance would be greatly appreciated. Here's my jsfiddle example: https://jsfiddle.net/psyonix/1g9p59bx/79/
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).css({
'background-color': '#000000'
});
});
}
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(8);
$("#button").click(function () {
var numSquares = prompt("Please enter the size");
resetGrid(numSquares);
createGrid(numSquares);
});
});
Once you click on a DIV, you should maintain a flag that tells you hover function to stop changing colors
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
if ($(this).data("clicked")) return; //ADDED LINE
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
if ($(this).data("clicked")) return; //ADDED LINE
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).data("clicked", true); //ADDED LINE
$(this).css({
'background-color': '#000000'
});
});
it changed because of hover function.
https://jsfiddle.net/1g9p59bx/82/
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
if($(this).hasClass('active'))return;
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
if($(this).hasClass('active'))return;
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).addClass('active');
$(this).css({
'background-color': '#000000'
});
});
For some reason, the div that was black reverts back to the original color when I hover over a different div
Not quite. It reverts to the original colour when you leave the current div, because that's what you tell it in the second argument to $('.square').hover. You would need to remember that the square was clicked, and build extra logic into the "unhover" function.
Fortunately, there is an easier way: use CSS. Note the very bottom of the CSS definitions.
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
.click(function () {
$(this).addClass('clicked');
});
}
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(8);
$("#button").click(function () {
var numSquares = prompt("Please enter the size");
resetGrid(numSquares);
createGrid(numSquares);
});
});
.container {
background-color: #252525;
width: 600px;
height: 700px;
margin: 0 auto;
border-radius: 5px;
}
.inner {
background-color: #C8C8C8;
position: absolute;
width: 580px;
height: 600px;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
border-radius: 5px;
}
.knob {
background-color: #575759;
width: 60px;
height: 60px;
border-radius: 60px;
}
#left_b {
position: absolute;
margin-left: 30px;
margin-top: 625px;
margin-bottom: 10px;
}
#button {
position: absolute;
margin-left: 265px;
margin-top: 640px;
margin-bottom: 10px;
}
#right_b {
position: absolute;
margin-left: 510px;
margin-top: 625px;
margin-bottom: 10px;
}
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
margin-right: auto;
margin-left: auto;
margin-top: auto;
border-radius: 5px;
overflow: hidden;
}
.square {
display: inline-block;
position: relative;
margin: 0 auto;
}
.highlight {
background-color: #FFFFFF;
outline: #C8C8C8;
outline: 1px;
outline: solid;
margin: 0 auto;
}
.square {
background-color: #C8C8C8;
}
.square:hover {
background-color: #FFFFFF;
}
.square.clicked {
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="outer">
<div class="inner">
<div id="g_area"></div>
</div>
<div class="knob" id="left_b"></div>
<div id="button">
<button>RESET</button>
</div>
<div class="knob" id="right_b"></div>
</div>
</div>
</body>
I have several elements and I want a function to get the width and offset of each element when I do click. I want to save both values of each element so I can access to it from outside the function and do stuffs. I tried this code but im stuck. thx.
$(document).ready(function() {
$("div>div").off("click").click(function() {
var checkWidth ;
var checkLeft ;
function checkPosition() {
$("div>div").each(function() {
checkWidth = $(this).width();
checkLeft = $(this).offset().left;
});
return [checkWidth, checkLeft];
}
var test = checkPosition()
alert(test);
});
// if( width of second element is # && offset of third element is # ) {
// do some thing ;
ยจ // }
})
div div{
position: relative;
height: 100px;
width: 100px;
margin-top: 20px;
}
.rectangle1{
background-color: black;
width: 100px;
left: 10px;
}
.rectangle2{
background-color: red;
width: 200px;
left: 30px;
}
.rectangle3{
background-color: black;
left: 60px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div>
<div class="rectangle1"></div>
<div class="rectangle2"></div>
<div class="rectangle3"></div>
</div>
</body>
define array out of function to make it global and also use each(index) to properly set the values of array:
$(document).ready(function() {
var myarray=[];
$("div>div").off("click").click(function() {
var checkWidth ;
var checkLeft ;
function checkPosition() {
$("div>div").each(function(index) {
checkWidth = $(this).width();
checkLeft = $(this).offset().left;
myarray[index]=[checkWidth,checkLeft];
});
return myarray;
}
var test = checkPosition()
alert(test);
});
//if( width of second element is # && offset of third element is # ) {}
// if (myarray[1][0]==130 && myarray[2][1]==120){}
// as you have a two dimensional array and javascript array starts from 0:
// myarray[n][0] will return the width of n+1(th) element
// myarray[n][1] will return the offset of n+1(th) element
})
div div{
position: relative;
height: 100px;
width: 100px;
margin-top: 20px;
}
.rectangle1{
background-color: black;
width: 100px;
left: 10px;
}
.rectangle2{
background-color: red;
width: 200px;
left: 30px;
}
.rectangle3{
background-color: black;
left: 60px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div>
<div class="rectangle1"></div>
<div class="rectangle2"></div>
<div class="rectangle3"></div>
</div>
</body>
I have created a jsfiddle for the answer. Check it here https://jsfiddle.net/dj2jdzrp/
var divProperties;
$("#outerDiv > div").click(function(e) {
divProperties = {"offset" : $(this).offset() , "width" : $(this).width() }
alert('anchor clicked!'+ divProperties.offset.left + 'width'+ divProperties.width);
});
I'm trying to "track" if all divs have been clicked. If all divs have been clicked something should happen. This can only happen when all divs have been clicked.
http://jsbin.com/cawukapumi/1/
This is what i've gathered so far.
Any help is more then appreciated.
$(document).ready(function(){
$(".masterobject").click(function() {
$(this).data('clicked, true');
});
if ($('#obj1').data('clicked') && $('#obj2').data('clicked') && $('#obj3').data('clicked') && $('#obj4').data('clicked') && $('#obj5').data('clicked') ) {
console.log( "all has been clicked" );
}
});
.masterobject {
position: absolute;
background-color: red;
z-index: 2;
}
#obj1 {
width: 50px;
height: 60px;
top: 25%;
left: 19%;
}
#obj2 {
width: 150px;
height: 100px;
top: 12%;
left: 84%;
}
#obj3 {
width: 80px;
height: 80px;
top : 66%;
left : 73%;
}
#obj4 {
top: 54%;
left: 28%;
width: 60px;
height: 70px;
}
#obj5 {
width: 100px;
height: 100px;
top: 45%;
right: 13%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="masterobject" id="obj1"></div>
<div class="masterobject" id="obj2"></div>
<div class="masterobject" id="obj3"></div>
<div class="masterobject" id="obj4"></div>
<div class="masterobject" id="obj5"></div>
Add a class, see if its count matches the count of items:
$(document).ready(function(){
$(".masterobject").click(function() {
$(this).addClass("clicked");
if ($(".masterobject").length == $(".clicked").length)
alert("all clicked");
});
});
In general, you could do something like this:
var clickers = $(".clicker");
clickers.on("click", function() {
$(this).data("clicked", true);
$(this).addClass("clicked");
var all = true;
clickers.each(function() {
all &= $(this).data("clicked");
return all;
});
if (all) {
alert("all clicked!");
}
});
.clicker {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
}
.clicked {
background-color: blue;
}
#div1 {
left: 10px;
top: 10px;
}
#div2 {
left: 10px;
top: 130px;
}
#div3 {
left: 130px;
top: 10px;
}
#div4 {
left: 130px;
top: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clicker" id="div1"></div>
<div class="clicker" id="div2"></div>
<div class="clicker" id="div3"></div>
<div class="clicker" id="div4"></div>
What we are doing is for every div with the class clicker we bind a click handler that will get the clicked property of this div. Then we check to see if all divs with this class have been clicked and pop an alert if they have.
Note: I added a class so you can tell when you've clicked a div (in my example, they now turn blue). You could actually use that instead of a data property by using .hasClass.
1 approach: You'll need to check if all the divs are clicked each time one is clicked. So, I'd loop through each of your div's, see if the attribute is set... and if not, set a standard boolean var to false.
Something like the following...
var allClicked = true;
$('.masterobject').each(function(){
if(!$(this).data('clicked')){
allClicked=false;
return false;
}
});
if(allClicked){
alert('yay!');
}
http://jsbin.com/kokumohohe/2/edit?output
It is a bit ugly, but you can do something like:
div1 = "1";
div2 = "1";
div3 = "1";
divSum = div1 + div2 + div3;
console.log(divSum);
$("#div1").click(function() {
div1 = "2";
check();
});
$("#div2").click(function() {
div2 = "2";
check();
});
$("#div3").click(function() {
div3 = "2";
check();
});
function check () {
divSum = div1 + div2 + div3;
if (divSum = 222) {
alert("TAdaaahh!");
};
}
Here is a fiddle: http://jsfiddle.net/xdpyx3rx/1/
What about this approach using combination of jQuery and getElementsByClassName method, which allows you not to requery DOM on each click taking advantage of live NodeList:
$(document).ready(function() {
var clicked = document.getElementsByClassName('clicked');
var $masterObjects = $(".masterobject").click(function() {
$(this).addClass("clicked");
if ($masterObjects.length === clicked.length) {
alert("all clicked");
}
});
});
Demo: http://jsbin.com/wepoqumita/1/