JS: Iterate through divs - javascript

I have 5 div elements, all with class='item'.
Im catching them with: var x = document.getElementsByClassName("item");
Now I want to make disappear that div, which was mouseovered.
https://jsfiddle.net/LqsLbrco/1/
But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.
Edit: My point is that the modal div appear (the pink box) when the item div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/
There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.


If you do it in jQuery, you could just do this.
Modified the markup to accommodate the requirements.
$(function() {
$(".container .item").bind("mouseover", function(event) {
$(event.target).find(".modal").show();
});
$(".container .modal").bind("mouseleave", function(event) {
$(event.target).hide();
})
});
.item {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
margin: 5px;
}
.container {
display: inline-block;
}
.modal {
height: 100px;
width: 100px;
background-color: pink;
display: inline-block;
margin: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>

Related

How to Point & click an object in JS / JQuery?

I am currently coding a pipeline WebApp in JS/JQuery.
To move my block I use JQuery.draggable. But I would like to be able to select my block with one click and to move it to an other point just by an other click.
Has anyone already done this?
Have a great day! :)

Consider the following example.
$(function() {
function moveItemTo(t) {
$(".selected").detach().removeClass("selected ui-state-highlight").appendTo(t);
}
$(".item").click(function() {
$(this).toggleClass("selected ui-state-highlight");
});
$(".target").click(function(e) {
e.stopPropagation()
moveItemTo(this);
});
})
.item {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
.target {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
.selected {
opacity: 0.65;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="ui-helper-clearfix">
<div class="item ui-widget-content">
<p>1. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>2. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>3. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>4. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>5. Click Me</p>
</div>
</div>
<div>
<div class="target ui-widget-header">
<p>Target 1</p>
</div>
<div class="target ui-widget-header">
<p>Target 2</p>
</div>
<div class="target ui-widget-header">
<p>Target 3</p>
</div>
</div>
This does not use any of the jQuery UI, except for CSS. Clicking an Item selects it. Clicking a Target Moves it to that target.

Functionality like tabs but scenario with appending to another div

$('.day-col-content').each(function() {
$(this).on('click', function() {
$('.day-col').removeClass('selected')
$(this).parent().addClass('selected');
$(this).clone().appendTo('.selected-day');
$('.selected-day .day-col-content').addClass('selected');
});
});
.actual-weather {
float: left;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
.selected-day .selected-day {
float: left;
width: 100%;
}
.selected-day .day-col-content {
display: none;
}
.selected-day .day-col-content.selected {
display: block
}
.days-box {
float: left;
width: 100%;
display: flex;
justify-content: center;
}
.day-col {
float: left;
width: 130px;
height: 130px;
position: relative;
margin: 0 10px 10px;
text-align: center;
cursor: pointer;
background:red;
}
.day-col.selected {
background:blue;
}
.day-col .day-col-content {
width: 100%;
position: absolute;
margin: 0;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="actual-weather">
<span class="selected-day"></span>
</div>
<div class="days-box">
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 3
</p>
</div>
</div>
<div>
I have scenario where I want to click on specific div and then this div append to another div ( selected day)
and then I want to switch between appended divs for showing selected div (day) (for functionality like tabs).
Problem is that all div are showing and I don't know how to manage thoose selected divs
Does somebody know how to achieve this?

You need to empty the div first then append the DATA or use .html() directly and it will overrite the data:
$('.selected-day').html('').append( $(this).clone() );
//OR
$('.selected-day').html( $(this).clone() );
NOTE: You don't have to loop using .each() to attach the click event to all the divs just use the selector directly like :
$('.day-col-content').on('click', function() {
...
});
SAMPLE
$('.day-col-content').on('click', function() {
$('.day-col').removeClass('selected');
$(this).parent().addClass('selected');
$('.selected-day').html($(this).clone());
});
.selected-day {
background-color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 3
</p>
</div>
<hr>
<div class="selected-day"></div>

Hi I'm not sure about your styling but this would work as a custom tab version
$(document).on('click','.day-col-content',function(){
$('.day-col').removeClass('selected')
$(this).parent('.day-col').addClass('selected');
$('.selected-day').html($(this).clone());
$('.selected-day .day-col-content').addClass('selected');
});
.day-col.selected {
color:green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 3
</p>
</div>
</div>
<div class="selected-day"></div>

how to make divs fly from one container to another container using greensock.js?

I am trying to create UI where on click tiles [sub-divs] move from one parent div to another parent div. I have created a pen to explain the question.The pen is working fine but now I need to know how to show them moving, animation. I want them to fly one by one on click. I used greensock.js before but I don't have any idea how to use it in this case, or can I use it here?
$(".mybox").on('click', function() {
$(this).css('background', 'red');
$(this).detach();
$(this).appendTo("#two");
var p = $("#two");
var position = p.position();
TweenLite.to(this, 0.5, {x:position.left, y:position.right});
});
#one {
width: 200px;
height: 200px;
float: left;
background: rgba(255,40,100,0.5);;
}
#two {
margin-left: 300px;
width: 200px;
height: 200px;
background: rgba(0,240,10,0.5);
}
.mybox {
float:left;
width: 50px;
height: 50px;
background: rgb(255,0,0);
margin: auto auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<div id="content" class="mybox">
1
</div>
<div id="content" class="mybox">
2
</div>
<div id="content" class="mybox">
3
</div>
<div id="content" class="mybox">
4
</div>
<div id="content" class="mybox">
5
</div>
</div>
<div id="two">
</div>

Auto-scroll to a div when clicking on another div

When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.
HTML:
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
JavaScript (with JQuery):
$('.smallitems .col').on("click", function(){
//how use scroll items show
});
Example:
This is before I click on a div in the left div ("smallitems").
I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).
Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.
see jfiddle http://jsfiddle.net/h7bLK/

This can be done with anchors. If you replace your div.cols with anchor tags and add an ID to your div.items like this:
<div class="smallitems">
<a class="col" href="#item1">1</a>
<a class="col" href="#item2">2</a>
. . .
</div>
<div class="items">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
. . .
</div>
Fiddle link
BONUS: You'll be able to link externally to the correct item.
CONS: If the content is smaller than the frame it is rendered in, the whole frame will scroll.

According to requirement, no-need to use javascript or jquery. Its done only using css.
<div class="main-container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col last-child">3</div>
<div class="col">4</div>
<div class="col">5 </div>
<div class="col last-child">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="scroll">
<div class="item" id="one">1</div>
<div class="item" id="two">2</div>
<div class="item" id="three">3</div>
<div class="item" id="four">4</div>
<div class="item" id="five">5</div>
<div class="item" id="six">6</div>
<div class="item" id="seven">7</div>
<div class="item" id="eight">8</div>
</div>
</div>
</div>
**Css** :
.main-container{
margin: 20px auto;
width:960px;
overflow: hidden;
border: 1px solid #bababa;
padding: 5px;
}
.smallitems{
overflow: hidden;
float: left;
width:330px;
border: 1px solid #bababa;
display: table;
padding: 10px;
}
.col a{
display: block;
padding: 41px 0;
text-decoration: none;
}
.col{
float:left;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid #bababa;
height: 100px;
width: 100px;
margin: 0 10px 10px 0;
}
.items{
float: right;
width:580px;
border: 1px solid #bababa;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.col:nth-child(3),.last-child{
margin-right: 0;
}
.item{
display: inline-block;
text-align: center;
position:relative;
font-size: 14px;
font-weight: 700;
border: 1px solid #bababa;
height: 440px;
width: 180px;
margin: 0 10px 10px 0;
}

$('.smallitems .col').on("click", function(){
var index = $(this).index();
var items = $('.items');
var item = items.children().eq(index);
items.scrollLeft((item.width() - 50) * index);
});
When you add a new div to the items play around with the value of 50.

<div class="container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items" id="maindiv"> // set id
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
</div>
$('.smallitems').on("click", function(e){
// get click element text and calculate scrollLeft
var scrollLeft = (parseInt($(e.target).text())-1) * 200;
// use jquery animation function
$('#maindiv').animate({scrollLeft :scrollLeft},1100)
});

Click to view information on each thumb post

I want click on each button to view information in each posts but it view all when I click on it.
Here is my example. I have HTML like:
<div class='list post'>
<div class='post'>
<div class='btn'>btn</div>
<div class='hidden'>Hidden Info 1</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='hidden'>Hidden Info 2</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='hidden'>Hidden Info 3</div>
</div>
</div>
and I use onclick like:
$('.btn').click(function(){
$('.hidden').css({"visibility":"visible"});
});
But it is not working. I want to use toggle or something like that but I donot know how to do.
Please check jsfiddle here

You can use $(this) to target current clicked .btn button along with .next() to target next immediate sibling of clicked button which is .hidden div:
$('.btn').click(function(){
$('.hidden').css({"visibility":"hidden"});
$(this).next().css({"visibility":"visible"});
});
Updated Fiddle

Try this
$('.btn').click(function(){
$(this).next('.hidden').css({"visibility":"visible"});
});

Try this:
$('.btn').click(function(){
$('.hidden').css({"visibility":"hidden"});
$(this).next().css({"visibility":"visible"});
});
You can also check it here: http://jsfiddle.net/X2kW4/7/

I prefer not to change the the visibility property. Instead add/remove visibility class (Fiddle):
CSS
.post {
height: 100px;
width: 100px;
background: #cd4900;
margin-bottom: 6px;
color: #fff;
text-align: center;
}
.post .btn {
margin-top: 5px !important;
width: 80%;
padding: 5px;
background: green;
margin: 0 auto;
text-align: center;
border-radius: 4px;
cursor: pointer
}
.visible {
visibility: visible !important;
}
.info {
visibility: hidden;
}
JavaScript:
$('.btn').click(function(){
if($(this).next('.info').hasClass('visible') === false)
{
$('.visible').removeClass('visible');
$(this).next('.info').addClass('visible');
}
});
HTML:
<div class='list post'>
<div class='post'>
<div class='btn'>btn</div>
<div class='info'>Hidden Info 1</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='info'>Hidden Info 2</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='info'>Hidden Info 3</div>
</div>
</div>

Categories

Resources