I have 4 div. When I click on one of the divs the green shown will expand. Then I click on another diva and a green background with subtitles will also be shown. I mean, I want only one div to be expanded. For example, if I click the 3 div it expands me the content of the 3 diva. Then I click the 2 div and it expands me the content of the 2 diva and automatically hides the content of the previous div that was expanded. I hope that everone understand what I want to do.
<script>
function showHide(obj)
{
var nextObj=obj.nextSibling;
while(!nextObj.tagName) nextObj=nextObj.nextSibling;
nextObj.style.display = nextObj.style.display != 'block' ? 'block' : 'none';
}
</script>
.iptv{
width:200px;
height:50px;
background-color:blue;
margin-bottom:10px;
color:white;
margin-left:auto;
margin-right:auto;
}
.drop{
background-color:green;
width:200px;
height:50px;
margin-left:auto;
margin-right:auto;
}
a{
text-decoration: none;
color:white;
}
<body>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button1</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button2</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button3</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button4</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
</body>
There are a couple of errors in your code:
The divs weren't "closed"
It's not obj.nextSibling, but obj.nextElementSibling (there's a difference: What is the difference between node.nextSibling and ChildNode.nextElementSibling?)
After correcting these errors and adding the code for closing the other divs, the snippet works:
function showHide(obj) {
const nextObj = obj.nextElementSibling;
const dropDowns = document.querySelectorAll('.drop')
dropDowns.forEach(e => {
e.style.display = 'none'
})
nextObj.style.display = 'block'
}
.iptv {
width: 200px;
height: 50px;
background-color: blue;
margin-bottom: 10px;
color: white;
margin-left: auto;
margin-right: auto;
}
.drop {
background-color: green;
width: 200px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration: none;
color: white;
}
<div class="down">
<div onclick="showHide(this)" class="iptv">Button1</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button2</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button3</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button4</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
Related
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.
$('.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>
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>
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)
});
I am dynamically adding elements into another element and there are some inconsistencies with the spacing. The more elements I add, the less spacing there is.
Here is what it looks like:
After the third element, the spacing is like the above image (it doesn't go negative). My question is two fold: 1. Why is this happening; 2. How do I fix it?
As a note, the default layout has one element, and when you click on the "add new route" button, it adds another route (there are 2, there are 3). I have tried setting the spacing and margins to negative numbers. I've tried putting comments in after the spot I add the new element. I'm out of ideas.
Here is my HTML:
<div id="main">
<div id="calendar">
<div class="column" id="time_slots">
</div>
<div class="column" id="day1">
<div class="date"></div>
<button class="add_route" name="add_route" onclick="">Add New Route</button>
<div class = "truck" id="day1_route1">
<p>This is truck one</p>
</div>
</div>
<div class="column" id="day2">
<div class="date"></div>
<button class="add_route" name="add_route">Add New Route</button>
<div class = "truck" id="day2_route1">
<p>This is truck one</p>
</div>
</div>
<div class="column" id="day3">
<div class="date"></div>
<button class="add_route" name="add_route">Add New Route</button>
<div class = "truck" id="day3_route1">
<p>This is truck one</p>
</div>
</div>
<div class="column" id="day4">
<div class="date"></div>
<button class="add_route" name="add_route">Add New Route</button>
<div class = "truck" id="day4_route1">
<p>This is truck one</p>
</div>
</div>
<div class="column" id="day5">
<div class="date"></div>
<button class="add_route" name="add_route">Add New Route</button>
<div class = "truck" id="day5_route1">
<p>This is truck one</p>
</div>
</div>
<div class="column" id="day6">
<div class="date"></div>
<button class="add_route" name="add_route">Add New Route</button>
<div class = "truck" id="day6_route1">
<p>This is truck one</p>
</div>
</div>
<div class="column" id="day7">
<div class="date"></div>
<button class="add_route" name="add_route">Add New Route</button>
<div class = "truck" id="day7_route1">
<p>This is truck one</p>
</div>
</div>
<div class="column" id="time_slots">
</div>
</div>
</div>
Here is my CSS:
.label
{
width:20px;
}
.table
{
font-size: 1.2em;
}
#main
{
border-style: solid;
border-width: 1px;
border-color: black;
width:97%;
height:900px;
margin:auto;
overflow: auto;
white-space: nowrap;
}
#calendar
{
padding:1%;
}
.column
{
border-style: solid;
border-width: 1px;
border-color: black;
min-width:10%;
max-width:100%;
height:800px;
display: inline-block;
overflow: auto;
padding:10px;
}
.header
{
padding:0;
margin:0;
text-align: center;
font-style: bold;
}
.truck
{
width:200px;
border-style: solid;
border-width: 1px;
border-color: black;
display:inline-block;
margin:0px;
}
.column#time_slots
{
width:5%;
min-width:5%;
max-width: 10%;
}
.date
{
text-align: center;
width:100%;
}
.column button
{
display:block;
width:100%;
width:100%;
border-style: solid;
border-width: 1px;
border-color: black;
}
Here is the Javascript:
$(".add_route").click(function(){
var num = 8;
var truck = $(this).parent().find('.truck').length
truck += 1;
var w = $(this).parent().width();
$(this).parent().animate({width:(w+205)}, 1000);
$(this).parent().append('<div class = "truck" id="'+$(this).parent().attr('id')+'_route'+truck+'"><p>There are '+ truck +'</p></div>');
$('#'+$(this).parent().attr('id')+'_route'+truck).hide();
var route_num = $(this).parent().find('.truck').length;
var route_w = (100/route_num)-1;
$('#'+$(this).parent().attr('id')+'_route'+truck).fadeIn(200);
$(this).parent().css("padding", "10px");
});
Here is the demo: http://jsfiddle.net/pfdNy/