Is there any ways to compare index numbers from 2 different arrays?
Here's what I want to do:
if i[0] == k[0] {
//give some action to k[0]
} else if i[1] == k[1] {
// give some action to k[1]
}
...and so on.
I could've made each functions 0 to 4 to fix my problem like that, but then the code would've been too long and unreadable. I want to optimize my code as much as I can.
I wrote the code like this but this doesn't work what I want. All the k keeps getting action when I hover one of the box group.
And this is my code:
var i = $('#boxgroup').children()
var k = $('#panelgroup').children()
$(i).each(function() {
$(this).hover(function() {
if($(i == k)){
$(k).stop().animate({height: '500px'})}
}, function(){
$(k).stop().animate({height: '200px'})
})
})
#boxgroup{
width: 600px;
height: 200px;
border: 1px solid black;
clear: both;
}
.box {
width: 200px;
height: 50px;
border: 1px solid black;
float: left;
position: relative;
top: 0px;
margin: 10px;
}
.panelgroup {
clear: both;
}
.panel {
width: 200px;
height: 200px;
border: 1px solid gray;
top: 400px;
float: left;
}
<div id="boxgroup">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<br>
<div id="panelgroup">
<div class="panel">panel1</div>
<div class="panel">panel2</div>
<div class="panel">panel3</div>
<div class="panel">panel4</div>
</div>
It sounds like you want hovering over a child in #boxgroup to make the equivalent child in #panelgroup larger. If so, you don't need a series of ifs, you just need the index of the element:
$('#boxgroup > *').hover(
function() {
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate({height: '500px'});
},
function() {
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate({height: '200px'});
}
);
Live Example:
$('#boxgroup > *').hover(
function() {
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate({height: '500px'});
},
function() {
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate({height: '200px'});
}
);
#boxgroup{
width: 600px;
height: 200px;
border: 1px solid black;
clear: both;
}
.box {
width: 200px;
height: 50px;
border: 1px solid black;
float: left;
position: relative;
top: 0px;
margin: 10px;
}
.panelgroup {
clear: both;
}
.panel {
width: 200px;
height: 200px;
border: 1px solid gray;
top: 400px;
float: left;
}
<div id="boxgroup">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<br>
<div id="panelgroup">
<div class="panel">panel1</div>
<div class="panel">panel2</div>
<div class="panel">panel3</div>
<div class="panel">panel4</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
See:
index
:eq
Related
I want to make a website with HTML, JAvascript and CSS,
There will be a number showing in the screen. THe user can decrement or increment the preset value using buttons.Start /stop button will start counting down from the shown number to zero. The page shows an alertbox when the number reaches zero. I know only html and css basics can anybody helpThis is a rough sketch
This may help get you started:
var intvl;
var valueContainer = document.getElementById("value");
document.getElementById("decrement").addEventListener("click", function(e){
var value = +valueContainer.textContent;
if(value){
valueContainer.textContent = value - 1;
}
});
document.getElementById("increment").addEventListener("click", function(e){
var value = +valueContainer.textContent;
valueContainer.textContent = value + 1;
});
document.getElementById("toggle").addEventListener("click", function(e){
if(intvl){
clearInterval(intvl);
} else {
var curr = +valueContainer.textContent;
intvl = setInterval(function(){
if(curr){
valueContainer.textContent = --curr;
} else {
clearInterval(intvl);
document.getElementById("messages").innerHTML = "Alert<br/>----------------<br/>Count reached 0!";
}
}, 1000);
}
});
document.getElementById("reset").addEventListener("click", function(e){
clearInterval(intvl);
valueContainer.textContent = 25;
document.getElementById("messages").innerHTML = "";
});
#messages {
text-align: center;
border: 1px solid grey;
width: 80%;
margin-bottom: 50px;
}
#wrapper {
text-align: center;
border: 1px solid grey;
display: inline-block;
width: 40%;
padding: 2px;
}
#wrapper > div {
display: inline-block;
}
body {
text-align: center;
}
#main > button, #controls > button {
border: 1px solid grey;
border-radius: 5px;
background-color: inherit;
padding: 2px 10px;
}
#controls {
margin-top: 10px;
}
<div id="wrapper">
<div id="messages">
</div>
<div id="main">
<button id="decrement">-</button>
<span id="value">25</span>
<button id="increment">+</button>
</div><br/>
<div id="controls">
<button id="toggle">Start/Stop</button>
<button id="reset">Reset</button>
</div>
</div>
Fiddle
Hello,
I found sticky sidebar jQuery script, but the fixed element (sidebar) floats to the left once I start scrolling down. I am trying to keep it on the right-hand side the whole time. Also, I am trying to get some spacing around sidebar once it starts scrolling, as now it's just stuck to the very top.
I trust it's a simple fix but JavaScript is like a dark forest to me, I tried to change couple things, tried to look online but can't seem to find the answers or I just don't know how to look for them so I apologise if this has been asked before.
$( document ).ready(function() {
console.log( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>
I used the Sticky-Kit.js plugin. That worked for me. See below, it keeps your sidebar to the right the entire time and has the sticky effect you're after:
$(document).ready(function() {
console.log("document ready!");
$(".sidebar").stick_in_parent();
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: left;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>
You can use JQuery's css() method to apply css on scroll to the element to achieve the desired effect.
Change the JavaScript as follows:
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff, right: '0px' });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset, right: '0px' , margin: '10px 10px 0px 0px'});
} else {
$sticky.css({position: 'absolute', top: 'initial', right: "0px", margin: '0px'});
}
A css property of right:0px is applied to the element on scroll, since it's position becomes aboslute on scroll.
margin: 10px 10px 0px 0px was also applied to the element to provide additional spacing around it when scrolling. This is then sent to margin:0px when the scroll stops.
You will also need to adjust the css of the content css class, if you do not want your side bar sitting on top of the content area.
.content {
width: 550px;
border: 1px solid #000000;
height: 800px;
}
Here is an updated fiddle demonstrating these changes.
In my project, the red Number div is a button, I need to hide the number, 100, 4, 9,14 because the opacity:0"button` can click, so I use the "display none."
How to judge the number 100 div and hide it? I don't know how to use ng-class or ng-hide to hide the number 4,9,14div.
This is my code:
.bigDiv {
width: 500px;
height: 500px;
margin: 400px auto;
background-color: black;
}
ul {
font-size: 0px;
padding-left: 0px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: green;
position: relative;
}
.todo-last {
position: absolute;
width: 33px;
height: 33px;
background-color: red;
left: 25px;
top: 25px;
font-size: 25px;
color: white;
}
.bigDiv li {
display: inline-block;
width: 100px;
height: 100px;
background-color: purple;
}
<body ng-app="app" ng-controller="controller">
<div class="bigDiv">
<ul>
<li ng-repeat="todo in todoArray">
<div class="circle">
<div class="todo-last">
{{todo.text}}
</div>
</div>
</li>
</ul>
</div>
</body>
<script>
var app = angular.module('app',[]);
app.controller('controller',["$scope",function ($scope) {
var randomNum = Math.ceil(Math.random() * 15 + 1);
var array = [];
for(var i = 0 ; i < randomNum; i++){
if((randomNum -2)===i ){
array.push({
text: 100
});
continue;
}
array.push(
{text: i}
)
}
$scope.todoArray = array;
}])
</script>
One more thing only hides the reddiv.
Seems you want to hide on the basis of array values
First write a function on scope to check if value is in array or not
$scope.display = function(val){
if($scope.todoArray.indexOf(val) < 0)
return true;
else
return false;
};
your html to show hide by ng-if, inside your ng-repeat:
<div ng-if="display(todo.text)">
// your other code
</div>
I have some nested elements on my page with a same handler on them which should be called only for an event target without affecting elements higher in DOM tree. To achieve this behavior I used stopPropagation method and it was ok. Then I had to add some handlers for body and other elements outside the nested divs which should be called in any case. Of course stopPropagation isn't an option now but how can I make it work?
Here is a sample:
html:
<div id="container">
<div id="nested1" class="nested">
<div id="nested2" class="nested">
<div id="nested3" class="nested">
<div id="no-handler"></div>
</div>
</div>
</div>
</div>
css:
#container {
display: block;
width: 398px;
height: 398px;
padding: 30px;
border: solid 1px #888;
}
#nested1 {
width: 336px;
height: 336px;
padding: 30px;
}
#nested2 {
width: 274px;
height: 274px;
padding: 30px;
}
#nested3 {
width: 212px;
height: 212px;
padding: 30px;
}
#no-handler {
width: 150px;
height: 150px;
padding: 30px;
border: solid 1px #888;
}
.nested {
border: solid 1px #888;
}
.nested-clicked {
background-color: red;
}
.outer-clicked {
background-color: green;
}
js:
var container = document.getElementById("container");
var nested = document.getElementsByClassName("nested");
function outerHandler(e) {
this.classList.add("outer-clicked");
}
function nestedHandler(e) {
e.stopPropagation();
this.classList.add("nested-clicked");
}
container.addEventListener("click", outerHandler, false);
document.body.addEventListener("click", outerHandler, false);
for (var i = 0; i < nested.length; i++) {
nested[i].addEventListener("click", nestedHandler, false);
}
jsfiddle link:
http://jsfiddle.net/6kgnu7fr/
clicking on .nested should add red background color to clicked element and add green color to outer body and #container
UPD:
http://jsfiddle.net/6kgnu7fr/2/
clicking on #no-event or any other element inside .nested should also call nestedHandler for this .nested element.
You can check for the event's target in your nestedHandler instead of stopping the propagation. Change the class only if the target is this so that the effet will only be applied for the div on which the event occurred:
function nestedHandler(e) {
if (e.target === this) {
this.classList.add("nested-clicked");
}
}
Edit
Following your edit, this is harder. Way to do it is to find e.target's first ancestor with the "nested" class, then doing the comparison with it instead of target:
function findAncestorWithClass(dom, targetClass){
if(!dom){
return; // (undefined)
}
if(dom.classList.contains(targetClass)){
return dom;
}
// terminal recursion
return findAncestorWithClass(dom.parentNode, targetClass);
}
This is naïve shot. You may want to look for a way to make it more efficient, e.g. by avoiding to look for the first ancestor on each .nested div.
See the working snipped below.
var container = document.getElementById("container");
var nested = document.getElementsByClassName("nested");
function outerHandler(e) {
this.classList.add("outer-clicked");
}
function findAncestorWithClass(dom, targetClass){
if(!dom){
return; // (undefined)
}
if(dom.classList.contains(targetClass)){
return dom;
}
// terminal recursion
return findAncestorWithClass(dom.parentNode, targetClass);
}
function nestedHandler(e) {
var nestedParent = findAncestorWithClass(e.target, "nested");
if (this === nestedParent) {
nestedParent.classList.add("nested-clicked");
}
}
container.addEventListener("click", outerHandler, false);
document.body.addEventListener("click", outerHandler, false);
for (var i = 0; i < nested.length; i++) {
nested[i].addEventListener("click", nestedHandler, false);
}
#container {
display: block;
width: 398px;
height: 398px;
padding: 30px;
border: solid 1px #888;
}
#nested1 {
width: 336px;
height: 336px;
padding: 30px;
}
#nested2 {
width: 274px;
height: 274px;
padding: 30px;
}
#nested3 {
width: 212px;
height: 212px;
padding: 30px;
}
#sub-nested {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.nested {
border: solid 1px #888;
}
.nested-clicked {
background-color: red;
}
.outer-clicked {
background-color: green;
}
<div id="container">
<div id="nested1" class="nested">
<div id="nested2" class="nested">
<div id="nested3" class="nested">
<div id="sub-nested"></div>
</div>
</div>
</div>
</div>
I have this script that is designed to mention which section is in sight in a overflow div so for example if you see a specific section it will say section 1 is in sight if you see
more than 1 section in sight it will say something like for example section 1 is in sight and section 2 is in sight etc...
How can I do something like this? I can't figure this out I tried many things but I can not be able to do what I want :(
This is my code
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('#building').addEventListener('scroll',whichSectionsAreInSight);
function whichSectionsAreInSight(){
//???
}
});
h1{
margin: 0;
text-align: center;
}
#building{
background-color: gray;
height: 200px;
width: 200px;
overflow: auto;
}
.sections{
height: 225px;
width: 100%;
}
#section-1{
background-color: dodgerblue;
}
#section-2{
background-color: gold;
}
#section-3{
background-color: red;
}
<div id='building'>
<div id='section-1' class='sections'><h1>Section 1</h1></div>
<div id='section-2' class='sections'><h1>Section 2</h1></div>
<div id='section-3' class='sections'><h1>Section 3</h1></div>
</div>
<p id='status'></p><!--------The id call status is responsible
in mentioning which section is in sight-->
Hello this is my version of Mohammad's code and your code James. All credit goes to Mohammad and any up votes should go to Mohammad here it goes with the IE fix, my version
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('#building').addEventListener('scroll',whichSectionsAreInSight);
function whichSectionsAreInSight(){
var building= document.querySelector('#building');
var top = building.scrollTop;
var bottom = top+building.offsetHeight;
var arr = [];
Array.prototype.forEach.call(
building.querySelectorAll('#building .sections'),
function(sections){
if ((sections.offsetTop < top && top <sections.offsetTop+sections.offsetHeight) || (sections.offsetTop < bottom && bottom < sections.offsetTop+sections.offsetHeight)){
arr.push(sections.id);
}
}
);
document.querySelector('#status').innerHTML = arr.join(',')
}
whichSectionsAreInSight();
});
h1{
margin: 0;
text-align: center;
}
#building{
background-color: gray;
height: 200px;
width: 200px;
overflow: auto;
}
.sections{
height: 225px;
width: 100%;
}
#section-1{
background-color: dodgerblue;
}
#section-2{
background-color: gold;
}
#section-3{
background-color: red;
}
<div id='building'>
<div id='section-1' class='sections'><h1>Section 1</h1></div>
<div id='section-2' class='sections'><h1>Section 2</h1></div>
<div id='section-3' class='sections'><h1>Section 3</h1></div>
</div>
<p id='status'></p>
In scroll event of parent loop through childs and check that which one in visible and add id of it to array. Al the end print array content into page
document.querySelector('#building').addEventListener('scroll', function(){
var top = this.scrollTop;
var bottom = top+this.offsetHeight;
var arr = [];
this.querySelectorAll("div").forEach(function(div){
if (
(div.offsetTop < top && top <div.offsetTop+div.offsetHeight) ||
(div.offsetTop < bottom && bottom <div.offsetTop+div.offsetHeight)
){
arr.push(div.id);
}
});
document.getElementById("status").innerHTML = arr.join(",")
});
h1{
margin: 0;
text-align: center;
}
#building{
background-color: gray;
height: 200px;
width: 200px;
overflow: auto;
}
.sections{
height: 225px;
width: 100%;
}
#section-1{
background-color: dodgerblue;
}
#section-2{
background-color: gold;
}
#section-3{
background-color: red;
}
<p id='status'></p>
<div id='building'>
<div id='section-1' class='sections'><h1>Section 1</h1></div>
<div id='section-2' class='sections'><h1>Section 2</h1></div>
<div id='section-3' class='sections'><h1>Section 3</h1></div>
</div>