What I have :
Html
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>
Js
$(document).ready(function() {
$('#content1').click(function() {
$(' .content2, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content1').slideToggle("slow")
}
});
});
$('#content2').click(function() {
$(' .content1, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content2').slideToggle("slow")
}
});
});
$('#content3').click(function() {
$(' .content1, .content2 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content3').slideToggle("slow")
}
});
});
});
What I want
On clicking on a div show its hidden div(content) with slideToggle
if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
I managed to get the desired effect with two hidden divs Sample
1but with three i have this Sample 2 auto toggle problem
Help! And if there's a better and simpler alternative to get this effect please suggest. P.S. Sorry for my broken English.
Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:
$(document).ready(function() {
$('.for_content').click(function() {
var i = $(this).index('.for_content');
$('.content:not(:eq(' + i + '))').slideUp({
style: "height",
speed: "slow"
}).promise().done(function() {
$('.content').eq(i).slideToggle("slow")
});
});
});
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
float: left;
}
.link {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0px 1px 10px #fff;
}
.content1 {
height: 400px;
width: 100%;
top: 0;
background-color: #333;
}
.content2 {
height: 400px;
width: 100%;
top: 0;
background-color: #444;
}
.content3 {
height: 400px;
width: 100%;
top: 0;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul>
<li>
<span class="link">Home</span>
</li>
<li>
<div class="link for_content" id="content1">Link 1</div>
</li>
<li>
<div class="link for_content" id="content2">Link 2</div>
</li>
<li>
<div class="link for_content" id="content3">Link 3</div>
</li>
</ul>
</div>
<div>
<div class="content content1" style="display: none">
<h1>
CONTENT 1
</h1>
</div>
<div class="content content2" style="display: none">
<h1>
CONTENT 2
</h1>
</div>
<div class="content content3" style="display: none">
<h1>
CONTENT 3
</h1>
</div>
</div>
You can use something like this:
$('div[id^=content]').click(function () {
var name = $(this).attr('id');
$('div[class^=content]:visible').slideUp('slow', function() {
$('.' + name).slideDown('slow');
});
});
I hope it helps. :-).
Related
I am confused. I want two products to be selected. These products will be open by clicking the button. The selection will be made on the screen that opens. And the selected product will replace the button clicked.
I can show the products by clicking the button. I even got the result I wanted as text with jquery. But I used <select> <option> for this. There will be no drop-down list and only one will be selected. The selected image will replace the clicked area. I couldn't :(
$(document).ready(function() {
$(".showbutton, .showbutton img").click(function(event) {
var buttonName = $(this).closest('div').attr('id');
var buttonNo = buttonName.slice(4);
var boxName = "#box" + buttonNo;
$(boxName).fadeIn(300);
});
$(".closebtn").click(function() {
$(".box").fadeOut(200);
});
$(".box").click(function() {
$(".box").fadeOut(200);
});
$(".innerbox").click(function() {
event.preventDefault();
event.stopPropagation();
});
});
div.showbutton {}
div.showbutton:hover {}
.box {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.innerbox {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#box1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#box2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.closebutton {
width: 20%;
float: right;
cursor: pointer;
}
.closebtn {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="showbutton" id="link1">
click for first items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
<div class="showbutton" id="link1">
click for second items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
JSFIDDLE example of my codes: https://jsfiddle.net/j5fqhat6/
You can add data attribute to your kutu div this will help us to identify from where click event has been occurred .So, whenever your gosterButonu is been clicked you can use this data-id to add selected images text to your gosterButonu div.
Demo Code :
$(document).ready(function() {
$(".gosterButonu, .gosterButonu img").click(function(event) {
var butonAdi = $(this).attr('id');
console.log(butonAdi)
//if on click of button you want to remove active class
// $("div[data-id="+butonAdi+"]").find("li").removeClass("active")
$("div[data-id=" + butonAdi + "]").fadeIn(300);
});
$(".kapatButonu").click(function() {
var data_id = $(this).closest(".kutu").data("id");
$("#" + data_id).text($(this).closest(".icKutu").find("li.active").text())
$(".kutu").fadeOut(200);
});
$(".kutu").click(function() {
$(".kutu").fadeOut(200);
});
$(".icKutu").click(function() {
event.preventDefault();
event.stopPropagation();
});
//on click of li
$(".images li").click(function() {
//remove active class from other lis
$(this).closest(".images").find("li").not(this).removeClass("active")
//add active class to li which is clicked
$(this).addClass("active");
})
});
div.gosterButonu {}
div.gosterButonu:hover {}
.kutu {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.icKutu {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#kutu1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#kutu2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.kapatButonuCerceve {
width: 20%;
float: right;
cursor: pointer;
}
.kapatButonu {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
ul li {
list-style-type: none
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="gosterButonu" id="link1">
clickfor first items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu1" data-id="link1" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<!--added ul li-->
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>
<div class="gosterButonu" id="link2">
click for second items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu2" data-id="link2" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>
My 1st droppable div box is working perfectly however the rest of my droppable div boxes aren't. I've been looking through my code and couldn't figure out where the problem is.
When I drag a draggable clone element in the other divs (2,3,4) they go at the very bottom of the page and then when I click the clone it suddenly goes to the first one with out even trying to move it yet.
HELP?
THANK YOU IN ADVANCE.
$(document).ready(function() {
$("#classicTemplate").resizable();
$(".dragImgs").draggable({
helper: "clone",
snap: ".dropTarget",
appendTo: "#classicTemplate",
revert: "invalid"
});
$(".dropTarget").droppable({
accept: ".dragImgs",
hoverClass: "highlight",
drop: function(event, ui) {
var $imgClone = ui.helper.clone();
if (!$imgClone.is(".inside-dropTarget")) {
$(this).append($imgClone.addClass("inside-dropTarget").draggable({
containment: ".dropTarget",
position: "relative"
}));
$imgClone.dblclick(function() {
$imgClone.remove();
});
}
}
}).resizable({
animate: "true",
ghost: "true",
handles: "n, e, s, w, ne, se, sw, nw, all"
});
});
.container {
background-color: #bbb;
}
.imageContainer {
float: left;
margin: 10px;
width: 230px;
background-color: #fff;
}
.imageContainer img {
margin: 10px;
margin-left: 15px;
}
#classicTemplate {
list-style-type: none;
float: right;
margin-top: 10px;
background-color: #ccc;
}
#classicTemplate ul {
list-style-type: none;
padding: 0;
}
.dropTarget {
background-color: #aaa;
margin: 10px;
width: 210px;
height: 143px;
}
.dragImgs {
width: 50px;
height: 50px;
margin: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
<div class="imageContainer">
<div class="dragImgs">
</div>
<div class="dragImgs">
</div>
<div class="dragImgs">
</div>
</div>
<div id="classicTemplate">
<div class="dropTarget pull-left">
1
</div>
<div class="dropTarget pull-left">
2
</div>
<div class="dropTarget pull-left">
3
</div>
<div class="dropTarget pull-left">
4
</div>
</div>
</div>
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>
I have created a navigation based on expandable and closable divs, the autoclose and open works but there is always a invisable div present that takes up space. Also when reclicking a menu item should close the div. Tried different closing methods but it wont let me.
Here is what I got so far:
HTML
<div class="secondtopdiv">
<div class="containerdiv">
<div id="nav">
Target 1
Target 2
Target 3
</div></div>
<div id="navcontent">
<div class="panel" id="target1">Target 1</div>
<div class="panel" id="target2">Target 2</div>
<div class="panel" id="target3">Target 3</div>
</div>
</div>
^^^^^^^^^^UNWANTED SPACE FROM DIV NAVCONTENT, MUST PUSH MAIN CONENT DOWN INSTEAD OF ALWAYS BEING THERE
<div class="spacerdiv"></div>
<div class="containerdiv">
<div class="maindiv">
<div class="divtitle">
Title
</div>
<center>Some div in main page</center>
</div>
CSS
.containerdiv
{
min-width:400px;
max-width:500px;
overflow:hidden;
display:block;
margin-left:auto;
margin-right: auto;
}
.secondtopdiv
{
width: 100%;
height: 100px;
background: #61c5bb;
color:#000000;
vertical-align: middle;
line-height: 100px;
}
#nav{
width: 100%;
overflow: hidden;
}
#navcontent {
position: relative;
float: left;
width: 100%;
min-height: 100px;
overflow: hidden;
}
.spacerdiv
{
height:20px;
}
.divtitle {
font-size: 18px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
div.panel {
position: absolute;
background: #61c5bb;
height: 100%;
width: 100%;
display: none;
}
Jquery/JS:
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
top: -($target.height())
}).animate({
top: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
top: -$this.height()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
});
Link to fiddle: http://jsfiddle.net/6swdzycc/10/
If i understood correctly, you remove the min-width from #navcontent and can use the following script:
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if ($other.length) $other.removeClass("active").slideUp("slow", function () {
$target.toggleClass("active").slideToggle("slow");
})
else $target.toggleClass("active").slideToggle("slow");
});
});
JSFiddle
div.panel1 {
background: #61c5bb;
height: 150px;
width: 100%;
display: none;
}
<div class="containerdiv">
<div id="nav">
Target 1
Target 2
Target 3
</div>
</div>
<div id="navcontent">
<div class="panel1" id="target1">Target 11111</div>
<div class="panel1" id="target2">Target 21111</div>
<div class="panel1" id="target3">Target 31111</div>
</div>
<script>
$('document').ready(function(){
$('.panel').click(function(){
var thisHref=$(this).attr('href');
$('.panel1').hide();
$(thisHref).slideToggle('slow');
});
});
</script>
I have a click function that makes a div slide down.....when i click on the next li i want the previous div to slide back up and the new div to slide down but only when its on a different row....when its on the same row I'm going to put content in the div that i want to fadeIn
heres the fiddle im working with
http://jsfiddle.net/abtPH/3/
heres my jQuery
$('li').on('click', function(e){
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});
heres my html
<ul style="list-style: none;">
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>
<div class="outer">
<div class="inner">
</div>
</div>
</li>
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>
<div class="outer">
<div class="inner">
</div>
</div>
</li>
</ul>
I presume you're looking for something like this?
$('ul').on('click', 'li:not(li.active + li)', function (e) {
function toggle(el) {
el.toggleClass('active', 400);
el.find('.outer').slideToggle();
}
var me = $(this)
if(me.parent().has(':animated').length == 0) {
toggle(me.siblings('.active').andSelf());
}
});
Demo: http://jsfiddle.net/B6TZS/