I have a module where, on hover, I want the content on the right to change (stuff in the blue div in the demo below).
To achieve this, what I'm trying to do is:
If class .active exists on li.tabs then, get the .content from it and display it in the .overview div.
But unsure on how I can get .content when class .active exists in .overview?
I have the following markup (simplified):
// 1. Check if li has class active
if ($('li.tabs').hasClass('active')) {
// 2. get .content div from li where class .active exists
}
.tabs{
border: 1px solid yellow;
}
.list {
border: 1px solid red;
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
border: 1px solid blue;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex flex-row">
<div class="list">
<li class="tabs active">
<div class="header"><span>Header</span></div>
<div class="content d-none"><p>content</p></div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content d-none"><p>content 2</p></div>
</li>
</div>
<div class="overview"> </div>
</div>
Complete code for your, together with active class toggle:
var overview = $('.overview');
$('.tabs').each(function(i) {
var thisTab = $(this);
var thisContent = thisTab.find('.content').html();
thisTab.on('mouseenter', function(e) {
thisTab.addClass('active');
overview.html(thisContent);
}).on('mouseleave', function(e) {
thisTab.removeClass('active');
overview.html('');
});
});
.tabs {
border: 1px solid yellow;
}
.tabs.active {
background: none yellow;
}
.list {
border: 1px solid red;
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
border: 1px solid blue;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-row">
<div class="list">
<li class="tabs">
<div class="header"><span>Header</span></div>
<div class="content d-none">
<p>Content 1</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content d-none">
<p>Content 2</p>
</div>
</li>
</div>
<div class="overview"> </div>
</div>
Also on JSFiddle
You can select a children by letting a space between the selectors (in JQuery):
$(".li.tabs.active .content")
will select all the content whom parents have the active class
Related
I want to switch between 2 div's so that when I click on one of them its border and header became red and I want the other div goes off. so its be like a choice between them I don't know where I'm doing it wrong I add (IF) so I can make it happen but it is not working pls help me.
$(".container").on("click" , function(){
$(this).toggleClass("active");
$(".header", this).toggleClass("active2");
if ($(".box1").hasClass("active")) {
$(".box2").removeClass("active");
$("h2", ".box2").removeClass("active2");
}if ($(".box2").hasClass("active")) {
$(".box1").removeClass("active");
$("h2", ".box1").removeClass("active2");
}
});
body{
padding: 3em;
}
.box1, .box2{
padding: 2em;
border: 1px solid silver;
margin-top: 2em;
}
.active{
border-color: red;
}
.active2{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container box1">
<h2 class="header">Boys</h2>
<hr>
<p>Benjamin</p>
<p>David</p>
</div>
<div class="container box2">
<h2 class="header">Girls</h2>
<hr>
<p>Sara</p>
<p>Tania</p>
</div>
You don't need to many code to do this work. Add .active to clicked element and remove class from sibling of it.
$(".container").on("click", function() {
$(this).toggleClass("active").siblings().removeClass("active");
});
body{padding: 3em}
.box1, .box2{
padding: 2em;
border: 1px solid silver;
margin-top: 2em;
}
.active {border-color: red}
.active .header{color: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container box1">
<h2 class="header">Boys</h2>
<hr>
<p>Benjamin</p>
<p>David</p>
</div>
<div class="container box2">
<h2 class="header">Girls</h2>
<hr>
<p>Sara</p>
<p>Tania</p>
</div>
I have a ul li list which has submenus. By default the submenus are hidden. When I click on the first li a, this submenu will slide down. When I click on the second 'li a`, the second submenu will slide down.
A problem is when I click on the second li a, the first submenu will be slide up. That means only one submenu opens at a time.
Please give me a hand.
jsFiddle
$(document).ready(function () {
$('li a').on('click', function(){
$(this).siblings().slideToggle();
});
});
li {padding:20px; border: solid 1px;margin:5px;}
.square {
display: none;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a>Hover List1</a>
<div class="square">
Square 1
</div>
</li>
<li>
<a>Hover List2</a>
<div class="square">
Square 2
</div>
</li>
<li>
<a>Hover List3</a>
<div class="square">
Square 3
</div>
</li>
<li>
<a>Hover List4</a>
<div class="square">
Square 4
</div>
</li>
</ul>
$(document).ready(function () {
$('li a').on('click', function(){
$('.square').removeClass('active');
$(this).siblings().addClass('active');
});
});
li {padding:20px; border: solid 1px;margin:5px;}
.square {
display: none;
border: 1px solid red;
}
.active {
display: block;
border: 1px solid red;
}
You need a way to know where the 'open' elements are.
$(document).ready(function() {
$('li a').on('click', function() {
$this = $(this);
$opened = $this.closest('ul').find('.open');
$siblings = $this.siblings();
if (!$siblings.is($opened)) {
// toggleClass() will work too, but this is more explicit
$opened.slideToggle().removeClass('open');
// This will inhibit the closing of an open element if clicked.
// Move the previous line before the 'if' if you don't want this behaviour.
$siblings.slideToggle().addClass('open');
}
});
});
li {
padding: 20px;
border: solid 1px;
margin: 5px;
}
.square {
display: none;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a>Hover List1</a>
<div class="square">
Square 1
</div>
</li>
<li>
<a>Hover List2</a>
<div class="square">
Square 2
</div>
</li>
<li>
<a>Hover List3</a>
<div class="square">
Square 3
</div>
</li>
<li>
<a>Hover List4</a>
<div class="square">
Square 4
</div>
</li>
</ul>
So i'm working in this bootstrap carousel, now i have this code working, but i need to fix some issues.
1) make the menu responsive.
2) make the button selected taller than the others.
i tried a lot of thigs but i haven't found the solution yet, so i came here, maybe someone can help me, thank you so much!
This is the image as an example
the code is in the snippet.
$(document).ready(function(ev){
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel .controls li.active').removeClass('active');
$('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
/*margin: auto;*/
/*border: 2px solid green;*/
}
.carrusel {
width: 100%;
height: 40px;
/*margin: auto;*/
border: 3px solid red;
float:right;
margin: 0px 0px 00px 0px;
/*background-color: black;*/
}
.slide{
/*border: 2px solid #093845;*/
width: auto;
}
/*nav slider*/
.navi ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
border: 1px solid red;
height: 50px;
}
.navi li {
float: left;
border: 1px solid red;
width: 210px;
}
.navi li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navi li a:hover:not(.active) {
background-color: #ddd;
}
.navi li a.active {
color: white;
background-color: #4CAF50;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Tabbed Slider Carousel (inspired by sevenx.de) - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
</div>
</div>
<!-- Indicators -->
<div class="navi">
<ul class="">
<li data-target="#myCarousel" data-slide-to="0" class="boton active">Button 1</li>
<li data-target="#myCarousel" data-slide-to="1" class="boton ">Button 1</li>
<li data-target="#myCarousel" data-slide-to="2" class="boton">Button 1</li>
<li data-target="#myCarousel" data-slide-to="3" class="boton">Button 1</li>
<li data-target="#myCarousel" data-slide-to="4" class="boton">Button 1</li>
</ul>
</div>
</div>
</body>
</html>
Ok so I know this is probably a little more than you asked for but I figured I would help out and make this fully responsive for you. I left in the carousel captions and headings just in case you wanted to use them for future use but if not you can just take them out. So what I like to do with the bootstrap carousels is give the carousel item a padding-bottom of a percentage and then mess with this percentage until you get your desired height. Then I like to just give each item a background image of the image that you want to put in your carousel because not all images have the same aspect ratio and you will run into problems with images being skewed otherwise. If you don't want to use the background image method you can just use your method but I figured I would throw this in there because it works best for responsive design. So i give each carousel item a class eg. first-item, second item, third-item and so on and then give then all a backgorund image of whatever your slide image was. Then we will just put your nav underneath the carousel and your all set. Also you will want to add data-interval="false" to your #myCarousel div because when you click on one of the slides it will start to cycle though the slides and your active tabs will still be on the one that you clicked on. Removing active classes while the carousel is in auto interval is a whole different set of jquery markup. Also I have set your carousel nav buttons to 20% because there are 5 of them. If you want them to be a different percentages then add a media query to make them a bigger size like and you will also have to change the carousel-nav height and maybe not have the active button apear bigger as well:
#media screen and (max-width: 767px){
.carousel-nav li{width: 100%;)
}
Here is a working Fiddle demo Fiddle
So here is the markup:
Html:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active first-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 1</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item second-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 2</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item third-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 3</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item fourth-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 4</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item fifth-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 5</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
</div>
</div><!-- /.carousel -->
<ul class="carousel-nav">
<li class="active" data-target="#myCarousel" data-slide-to="0"><button>Button 1</button></li>
<li data-target="#myCarousel" data-slide-to="1"><button>Button 2</button></li>
<li data-target="#myCarousel" data-slide-to="2"><button>Button 3</button></li>
<li data-target="#myCarousel" data-slide-to="3"><button>Button 4</button></li>
<li data-target="#myCarousel" data-slide-to="4"><button>Button 5</button></li>
</ul>
The Css:
#myCarousel .item{
padding-bottom: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 250px;
}
#myCarousel .first-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .second-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .third-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .fourth-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .fifth-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .carousel-heading{font-size: 40px;}
.carousel-nav{
list-style-type: none;
padding: 0;
margin: 0;
height: 50px;
}
.carousel-nav li{
height: 100%;
width: 20%;
float: left;
}
.carousel-nav li button,.carousel-nav li button:focus{
height: 100%;
border: 1px solid red;
width: 100%;
position: relative;
z-index: 2;
outline: 0;
}
.carousel-nav li.active button, .carousel-nav.active li button:focus{
height: 60px;
margin-top: -10px;
outline: 0;
}
/*Responsive Styles*/
#media screen and (max-width: 767px){
#myCarousel .carousel-heading{font-size: 18px;}
#myCarousel .carousel-description{font-size: 12px;}
#myCarousel .btn-primary{font-size: 14px;}
}
And your jquery:
Note: this may require you to use a newer version of jquery so you may want to add this instead of 1.11 in you head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
then the jquery code:
$(document).on('click', '.carousel-nav button', function() {
$('.carousel-nav li').removeClass('active');
$(this).parent().addClass('active');
});
Change height to auto in the class ".navi ul" so it will be like
.navi ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
border: 1px solid red;
height: auto;
}
Change width of buttons to 20% in ".navi li" class so it will be like
.navi li {
float: left;
border: 1px solid red;
width: 20%;
}
and add one more class for selected button
.navi li.active a {
background-color: white;
border: 1px solid green;
height: 11%;
margin: -15px 0 0 -2px;
position: absolute;
width: 19%;
}
First important thing to note is that, the JavaScript you mentioned doesn't work as per your markup. Specifically, your active classes are not dynamically changing when the slides move. I have modified the JS code to make it work.
$(document).ready(function(ev){
$('#myCarousel').on('slide.bs.carousel', function (evt) {
$('.navi li.active').removeClass('active');
$('.navi li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
Also there is a small mistake on your CSS. The active class is applied on the <li> tag and not the <a>, so the active code should be changed to
.navi li.active {
background: blue;
color: white;
}
and NOT .navi li a.active.
And to scale the buttons when active, you can make use of the transform: scale(). Like so
.navi li.active {
background: blue;
color: white;
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari */
transform: scale(1.1);
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Fisrt, I want to make Home contents is active when I open the website.
other contents should be hidden, Second each content should be link with the navigation element. So when I click the element it should swap the contents with the matched content. If I need to use javascript please let me know.
welcome critics :) and Thank You.
#font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid black;
max-width: 1060px;
}
header {
max-width: 1060px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu {
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
#menu:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
/* MEDIA QUERY */
#media all and (max-width:640px) {
#menu {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 18px;
top: 57px;
width: 30%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
nav ul li {
text-align: center;
width: 100%;
margin: 0 auto;
}
nav:hover ul {
display: block;
}
}
#swap{
margin: 40px auto 40px;
max-width: 980px;
position: relative;
padding: 20px;
border: 1px solid black;
z-index:100;
overflow: hidden;
}
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="GalleryResStyle.css">
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents">Home contents</div>
<div id="Profile_contents">Profile contents</div>
<div id="Gallery_contents">Gallery Contents</div>
<div id="Contact_contents">Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href=""><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href=""><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
</body>
</html>
Yes you need JavaScript (other languages could do it, but it is the simplest I know)
for example, you can change HTML to (slightly simplified for the sake of clarity):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="./test.css">
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li class=showhome>Home</li>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home >Home contents</div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >Gallery Contents</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
</div>
</body>
</html>
so you can use class to define which area you click and which area hide/show
then use a js file with a .ready function (in my example, save as test.js in same folder as HTML:
$(document).ready(function(){
$(".showhome").click(function(){
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showProfile").click(function(){
$(".home").hide();
$(".Profile").show();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showGallery").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").show();
$(".Contact").hide();
});
$(".showContact").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").show();
});
// Hide all and show home on page loading
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
for a cleaner function, you can also use things like $(".home").toggle();, it would switch the state (if it was shown it would hide and vice versa). but I don't see how right now :)
You will need to use some kind of scripting for this (alternatively just 4 raw html pages).
I'd suggest using bootstrap, it's simple if you're a javascript novice.
<div class="container">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Gallery</li>
<li role="presentation">Contact</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
<div role="tabpanel" class="tab-pane" id="contact">Contact</div>
</div>
</div>
Above is pulled from getbootstrap.com, fiddle here.
I have four draggable elements and a droppable area currently looking like this (Fiddle) and I would like to improve the experience by adding the following functions:
1) on start: display an alternative element as soon as it is out of its initial position.
2) on drop: draggable element fade away when it is dropped onto droppable container (e.g. ".frame").
What is the best way to do this?
Thanks, any help would be greatly appreciated!
$(document).ready(function() {
$("[id*=draggable]").draggable({
containment: "#area51",
revert: true,
stack: ".frame_type"
});
$(".frame").droppable({
hoverClass: "ui-state-active",
drop: function(event, ui) {
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable-1") {
$(this).css('background-color', '#f1c40f');
} else if (currentId == "draggable-2") {
$(this).css('background-color', '#e74c3c');
} else if (currentId == "draggable-3") {
$(this).css('background-color', '#3498db');
} else if (currentId == "draggable-4") {
$(this).css('background-color', '#9b59b6');
}
}
});
});
<div class="container-fluid text-center">
<div class="row" id="area51">
<div class="col-xs-8">
<div class="showroom">
<div class="frame">
<img class="display" src="http://placehold.it/200" />
</div>
</div>
</div>
<div class="col-xs-4">
<div class="selection text-center">
<ul class="list-unstyled">
<li id="draggable-1" class="frame_type color-1"></li>
<li id="draggable-2" class="frame_type color-2"></li>
<li id="draggable-3" class="frame_type color-3"></li>
<li id="draggable-4" class="frame_type color-4"></li>
</ul>
</div>
</div>
</div>
</div>
<li/> elements are now shadows of their containing draggable div elements and tweaked styles to overlap them
jQuery .hide() is used to remove them on drag complete
I've also simplified the JS a lot. Basically you have a reference to the element all the time, so don't need to match on ID or search for it.
The CSS could use some love as I haven't spent too long on it. The widths are smaller than in your sample.
http://jsfiddle.net/pratik136/L3abroyy/10/
$(document).ready(function() {
$("[id*=draggable]").draggable({
containment: "#area51",
revert: true,
stack: ".frame_type"
});
$(".frame").droppable({
hoverClass: "ui-state-active",
drop: function(event, ui) {
var elem = ui.draggable;
$(this).css('background-color', elem.css('background-color'));
$(elem.parent()).hide('slow');
}
});
});
/* General Styles */
* {
box-sizing: border-box;
}
html,
body {
background-color: #eee;
color: #666;
}
.showroom {
border: 1px solid #e1e1e1;
border-radius: 5px;
height: 500px;
padding: 100px;
}
.frame {
background-color: #fff;
height: 300px;
width: 300px;
padding: 50px;
border-radius: 5px;
}
.display {
border-radius: 5px;
height: 200px;
width: 200px;
background-color: #fff;
}
.selection {
border-radius: 5px;
height: 500px;
}
.frame_type {
height: 50px;
width: 100%;
border-radius: 5px;
}
li {
height: 50px;
width: 30%;
border-radius: 5px;
}
.color-1,
.color-1 div {
background-color: #f1c40f;
}
.color-2,
.color-2 div {
background-color: #e74c3c;
}
.color-3,
.color-3 div {
background-color: #3498db;
}
.color-4,
.color-4 div {
background-color: #9b59b6;
}
.ui-state-active {
background-color: #e1e1e1 !important;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container-fluid text-center">
<h1>Paintings & Frames: Interactive App</h1>
<div class="row" id="area51">
<div class="col-xs-8">
<div class="showroom">
<div class="frame">
<img class="display" src="http://placehold.it/200" />
</div>
</div>
</div>
<div class="col-xs-4">
<div class="selection text-center">
<h3>Draggable Frames</h3>
<ul class="list-unstyled">
<li class="color-1">
<div id="draggable-1" class="frame_type"></div>
</li>
<li class="color-2">
<div id="draggable-2" class="frame_type"></div>
</li>
<li class="color-3">
<div id="draggable-3" class="frame_type"></div>
</li>
<li class="color-4">
<div id="draggable-4" class="frame_type"></div>
</li>
</ul>
</div>
</div>
</div>
</div>