$(document).ready(function() {
$(".main_box").click(function() {
$(".sliding_box").slideToggle();
});
});
div.wrapper {
width: 300px;
float: left;
margin-right: 10px;
}
div.main_box {
width: 300px;
height: 30px;
background-color: #FF0000;
}
div.sliding_box {
width: 300px;
height: 300px;
background-color: #0000FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>
When I click on "main_box" div, both the "sliding_box" divs go up. I want only the first "sliding_box" div go up after clicking on first "main_box" div.
Does anyone know how to do it?
You have to target $(this).siblings('.sliding_box') instead of $(".sliding_box").
$(document).ready(function() {
$(".main_box").click(function() {
$(this).siblings('.sliding_box').slideToggle();
});
});
div.wrapper {
width: 300px;
float: left;
margin-right: 10px;
}
div.main_box {
width: 300px;
height: 30px;
background-color: #FF0000;
}
div.sliding_box {
width: 300px;
height: 300px;
background-color: #0000FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>
Reference: .siblings()
Related
I am trying to create a dynamic <ul> such that when I hover of a <li> (the class details), it dynamically creates another <li> (homework for that class) underneath it. I have this working.
However, when I leave the <li> I want the list of homework items to disappear. To accomplish this I decided to remove the <li> of homework items when I leave that <li>. The problem is that if I never hover into that homework list and simply just hover in and out of the class item details, it will not disappear. I am new to jQuery and so I may be missing something simple.
Before any hover
Hover into first class item
When I move the mouse out of the item, I want the items to disappear
But I want to maintain the functionality that when I hover into the homework list, it doesn't disappear:
And when I hover out of the homework list, it disappears (currently does this)
Here is my code:
jQuery.js
$(document).ready(function() {
$(".item").hover(
function(){
$(this).find('.class-item').find('.top').css("background", "#D0D0D0");
$(this).find('.class-item ').find('.bottom').css("background", "#B8B8B8");
$(this).css("border-color", "white");
$(this).css("margin-bottom", "0");
$('#classes li:eq(' + $( "li" ).index(this) + ')').after('<li class="hw"><ul><li class="hw-item">Homework 1</li><li class="hw-item">Homework 2</li></ul></li>');
var parent = $(this);
$(".hw").hover(
function(){
},
function(){
parent.css("margin-bottom", "2%");
$('#classes li:eq(' + ($( "li" ).index(parent) + 1) + ')').remove();
}
);
},
function(){
$(this).find(' .class-item ').find(' .top ').css("background", "#B8B8B8");
$(this).find(' .class-item ').find(' .bottom ').css("background", "#D0D0D0");
$(this).css("border-color", "#888888");
}
);
});
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier New", monospace;
font-size: 24px;
}
body {
}
#left {
float: left;
height: 100%;
width: 60%;
background: black;
}
#right {
float: left;
height: 100%;
width: 40%;
padding: 1%;
background: black;
}
#classes {
height: 100%;
overflow-y: scroll
}
#classes::-webkit-scrollbar {
display: none;
}
img {
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
}
.item {
height: 150px;
margin-bottom: 2%;
border: 5px solid #888888;
}
.class-item {
height: 100%;
width: 100%;
display: inline-block;
}
.top {
width: 100%;
height: 50%;
text-align: center;
background: #B8B8B8;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bottom {
width: 100%;
height: 50%;
text-align: center;
background: #D0D0D0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hw {
margin-bottom: 2%;
padding: 1%;
width: 100%;
display: inline-block;
}
.hw-item{
margin-bottom: 1%;
padding: 0.25%;
background: #D0D0D0;
border: 3px solid white;
}
h3 {
text-align: center;
}
index.html
<html>
<head>
<title>Homework</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<div id="left">
<img src="me.jpg"/>
</div>
<div id="right">
<ul id="classes">
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Algorithm Analysis</h3>
</div>
<div class="bottom">
COMPSCI 704
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Programming Language Concepts</h3>
</div>
<div class="bottom">
COMPSCI 431
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Physics 1 with Calculus</h3>
</div>
<div class="bottom">
PHYSICS 209
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Computer Ethics</h3>
</div>
<div class="bottom">
COMPSCI 395
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Computer Architecture</h3>
</div>
<div class="bottom">
COMPSCI 458
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Thanks to the comments on my post, I was able to avoid the javascript and do it solely through css using:
.class-item {
height: 150px;
width: 100%;
display: inline-block;
border: 5px solid #888888;
}
.homework {
padding: 1%;
display: none;
}
.class-item:hover + .homework {
display: block;
}
.homework:hover {
display: block;
}
I develop custom image box html control which contains image area along with small image thumbnails collection located at the bottom, top, left or right from the main image.
The problem is the main image div container doesnt stretch to fill remain area in main frame div.
Here is my code
.wvIBoxFrameDiv {
width: 300px;
height: 300px;
background: red;
}
.wvIBoxMainImageDiv {
background: green;
}
.wvIBoxThumbContainerDiv{
background: black;
overflow: hidden;
white-space: nowrap;
}
.wvIBoxThumbImagesContainerDiv{
background: blue;
display: inline-block;
}
.wvIBoxThumbNavigationDiv{
background: purple;
display: inline-block;
height: 30px;
width: 30px;
}
.wvIBoxThumbImageDiv{
background: orange;
display: inline-block;
height: 40px;
width: 40px;
}
<div class="wvIBoxFrameDiv">
<div class="wvIBoxMainImageDiv">
</div>
<div class="wvIBoxThumbContainerDiv">
<div class="wvIBoxThumbNavigationDiv"></div>
<div class="wvIBoxThumbImagesContainerDiv">
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
</div>
<div class="wvIBoxThumbNavigationDiv"></div>
</div>
</div>
Here I need thumbnails div container (with black background) placed in the bottom of main (red) frame div, while main image div (with green background) should stretch to fill remain area.
What am I do wrong?
Give height and width as 100% to .wvIBoxMainImageDiv
.wvIBoxFrameDiv {
width: 300px;
height: 300px;
background: red;
}
.wvIBoxMainImageDiv {
background: green;
height:100%; /*this here*/
width:100%; /*and here*/
}
.wvIBoxThumbContainerDiv{
background: black;
overflow: hidden;
white-space: nowrap;
}
.wvIBoxThumbImagesContainerDiv{
background: blue;
display: inline-block;
}
.wvIBoxThumbNavigationDiv{
background: purple;
display: inline-block;
height: 30px;
width: 30px;
}
.wvIBoxThumbImageDiv{
background: orange;
display: inline-block;
height: 40px;
width: 40px;
}
<div class="wvIBoxFrameDiv">
<div class="wvIBoxMainImageDiv">
</div>
<div class="wvIBoxThumbContainerDiv">
<div class="wvIBoxThumbNavigationDiv"></div>
<div class="wvIBoxThumbImagesContainerDiv">
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
</div>
<div class="wvIBoxThumbNavigationDiv"></div>
</div>
</div>
You can also use flex, (using auto-prefixer):
<div class="fullGallery">
<div class="mainImage">
</div>
<div class="bottomImages">
<div class="navigationButton">
</div>
<div class="imageContainer">
<div class="oneImage"></div>
<div class="oneImage"></div>
<div class="oneImage"></div>
</div>
<div class="navigationButton">
</div>
</div>
</div>
.fullGallery {
width: 300px;
height: 300px;
background-color: red;
display: flex;
flex-direction: column;
}
.mainImage {
width: 100%;
flex: 1;
background-color: yellow;
}
.bottomImages {
width: 100%;
height: 70px;
background-color: green;
display: flex;
}
.navigationButton {
width: 40px;
height: 100%;
background-color: pink;
}
.imageContainer {
flex: 1;
display: flex;
justify-content: space-around;
}
.oneImage {
background-color: blue;
width: 26%;
}
http://codepen.io/anon/pen/JYrdQJ
I like it more
I have created two snippets to show what I'm trying to do.
Here's the first one where the top left box holds a single image. The bottom right box has an image that overflows the box from right to left.
#one{
height: 200px;
background-color: red;
float: left;
}
#two{
height: 100px;
background-color: pink;
}
#three{
height: 100px;
background-color: blue;
overflow: visible;
direction: rtl;
}
.row{
display: inline-block;
width: 200px;
margin: 0px;
padding: 0px;
}
#wrapper{
max-width: 500px;
}
<div id="wrapper">
<div class="row" id="one">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Emoji_u1f533.svg" height="200px" width="200px">
</div>
<div class="row" id="two"> </div>
<div class="row" id="three">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Toolbaricon_rule.png" width="400px" height="100px">
</div>
</div>
Here's the second snippet where the top left box holds two images that are cycled using the jquery cycle plugin. I can't seem to get the image that is in the lower right to appear in front of the slideshow.
Does anyone know how to make this happen?
jQuery(document).ready(function () {
jQuery('#one').cycle({
containerResize: 0,
fx: 'fade',
timeout: 1500,
});
});
#one {
height: 200px;
background-color: red;
float: left;
}
#two {
height: 100px;
background-color: pink;
}
#three {
height: 100px;
background-color: blue;
overflow: visible;
direction: rtl;
}
#wrapper{
max-width: 500px;
}
.row {
display: inline-block;
width: 200px;
margin: 0px;
padding: 0px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
<div id="wrapper">
<div class="row" id="one">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Emoji_u1f533.svg" height="200px" width="200px">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Emoji_u1f532.svg" height="200px" width="200px">
</div>
<div class="row" id="two"> </div>
<div class="row" id="three">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Toolbaricon_rule.png" width="400px" height="100px">
</div>
</div>
You just need to set your div position to relative and give it a high enough z-index, like this:
#three {
position: relative;
z-index: 10;
height: 100px;
background-color: blue;
overflow: visible;
direction: rtl;
}
Okay, so I have the same button in every div. When it is clicked, I would like Div4 to appear under the div that the user pressed the button in. So, for instance, if user presses Button inside Div2, then Div4 would appear between Div2 and Div3. It would push Div3 down rather than appearing over/hiding Div3.
How can this be achieved, hopefully through jQuery?
Thank you.
$('#Button').click(function() {
$('#Div4').fadeIn(200);
});
body {
color: white;
text-align: center;
}
#Button {
width: 40px;
height: 20px;
background: brown;
cursor: pointer;
margin-left: auto;
margin-right: auto;
}
#Div1 {
width: 100px;
height: 50px;
background: blue;
}
#Div2 {
width: 100px;
height: 50px;
background: green;
}
#Div3 {
width: 100px;
height: 50px;
background: purple;
}
#Div4 {
width: 100px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Div1">
Div1
<div id="Button">Click</div>
</div>
<div id="Div2">
Div2
<div id="Button">Click</div>
</div>
<div id="Div3">
Div3
<div id="Button">Click</div>
</div>
</body>
Here is a possible solution: http://jsfiddle.net/2nxd6fon/7/
Instead of same ID for div's (which is not correct approach), use class as shown below,
[As I don't see Div4 in your HTML, I have taken the following approach.]
<body>
<div id="Div1">
Div1
<div class="button">Click</div>
</div>
<div id="Div2">
Div2
<div class="button">Click</div>
</div>
<div id="Div3">
Div3
<div class="button">Click</div>
</div>
</body>
var div4Content = '<div id="Div4">'+
'Div4'+
'<div class="button">Click</div>'+
'</div>';
$('.button').click(function() {
$(this).parent().after(div4Content);
});
First of all, IDs have to be unique, you can't repeat id="Button". You should use a class for that.
You can use .after() to move #Div4 after the current DIV, and then fade it in.
$('.Button').click(function() {
$(this).parent().after($('#Div4').fadeIn(200));
});
body {
color: white;
text-align: center;
}
.Button {
width: 40px;
height: 20px;
background: brown;
cursor: pointer;
margin-left: auto;
margin-right: auto;
}
#Div1 {
width: 100px;
height: 50px;
background: blue;
}
#Div2 {
width: 100px;
height: 50px;
background: green;
}
#Div3 {
width: 100px;
height: 50px;
background: purple;
}
#Div4 {
width: 100px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Div1">
Div1
<div class="Button">Click</div>
</div>
<div id="Div2">
Div2
<div class="Button">Click</div>
</div>
<div id="Div3">
Div3
<div class="Button">Click</div>
</div>
<div id="Div4">
Div4
</div>
</body>
Guys I am new to jQuery...please help me to learn this. I want to expand the div(#center) taking width:100% on click that in turn closes the other 2 divs (#left and #right) in my case.
Please someone help me to solve this. And the most imp thing is that the transition should be swift nd not at once. Reply is appreciated. And its not lyk i dint try it first. I tried using click function to make it happen..bt dint work as desired
body {
width: 100%;
height: auto;
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="abc.css">
<script href="abc.js"></script>
</head>
<body>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
</body>
You can use this example for "tab2"
$("#tab2").click(function () {
$("#center").css("width", "100%");
$("#left").fadeOut("slow");
$("#right").fadeOut("slow");
});
check my fiddle: http://jsfiddle.net/u87z1m3n/1/
And put id's to the li's in order to be able to select them:
<li id="tab1">Tab 1
</li>
<li id="tab2">Tab 2
</li>
<li id="tab3">Tab 3
</li>
The example is very coarse as the code needs a lot more refining...
But I think that it gives an answer to your question...
Study the example below. Let me know if you have any questions.
$("#head li").click(function () {
$("#center, #left, #right").eq($(this).index()).css("width", "100%");
$("#center, #left, #right").not($(this)).hide();
});
body {
width: 100%;
height: auto;
}
.current {
width: 100%
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: red;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
Here's a CodePen demo showing the final result of everything below. Please read it carefully so you can learn the process and understand everything that's happening.
First of all, your HTML needed a lot of cleanup. You called head as an ID, but used it multiple times throughout your code. If you're going to use a selector more than once, it should be a class instead. I changed it in the HTML and the CSS.
HTML
<div id="main">
<div id="taskDetails">
<div class="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form"></div>
</div>
</div>
<div id="description">
<div class="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte"></div>
<div class="text"></div>
</div>
</div>
<div id="details">
<div id="left">
<div class="head">
<div class="heading">Projects</div>
</div>
<div class="data"></div>
</div>
<div id="center">
<div class="head">
<div class="heading">Details</div>
</div>
<div class="data"></div>
</div>
<div id="right">
<div class="head">
<div class="heading">Tab 3</div>
</div>
<div class="data"></div>
</div>
</div>
</div>
Next, in your CSS, you hadn't set the widths of your containers correctly, so adding something like width:100% wasn't doing anything because there was no max width to fill. I added that to your styles. Remember, I also updated the markup from changing your head id to a class.
Additionally, I removed the floats from you left,right, and center divs because that removes the blocks from the flow of the document, which can lead to funny behavior. Instead, I changed them to display:inline-block and set their widths relative to the container.
Finally, I added a .wide class at the end which will set the width of the center div.
CSS
body {
margin:0;
padding:0;
width: 100%;
height: auto;
}
#main {
width:100%;
}
#taskDetails {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
width:100%;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
display:inline-block;
margin:0;
padding:0;
width:20%;
margin: 0 auto;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
#center {
display:inline-block;
margin:0;
padding:0;
width:50%;
height: 200px;
border: 1px solid #a1a1a1;
background: red;
}
#right {
display:inline-block;
margin:0;
padding:0;
width:20%;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
.head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
.wide {
width:100% !important;
transition:.5s;
}
Now, this can be done with jQuery, so make sure you add the script in the head of your HTML.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
The jQuery script is pretty simple, and does three things:
1. When you click on any of the tab buttons, it will hide the #left and #right divs.
2. The #center div expands to 100% of the container.
3. When you click on the tab again, it will shrink the #center div and bring the other two back.
jQuery
$(".head ul li").click(function() {
$("#left, #right").animate({width:"toggle"});
$("#center").toggleClass('wide');
})
I used toggle in both of the calls because it gives a fairly nice animation without making you code in specifics. It also handles adding or removing a class, so your script can stay simple if all you want to do is add or remove that class with each click.
If you want something more complex, you'll definitely want to look at JavaScript instead of jQuery as #Katana314 mentioned above. They're for two different things, so make sure you understand the difference between the two.