I want to have two divs side by side, the first one contains a table of information the other will contain two buttons a delete and edit. The first div I want to be 100% of the screen the second will be off the screen to start with then once I click the first div with the table the second will slide out and push the first div over and show the delete and edit buttons
<div id="div1">
<table>
<tr>
<td>Some Information</td>
</tr>
</table>
</div>
<div id="div2">
<button id="delete"></button>
<button id="edit"></button>
</div>
//Javascript Code
<script>
$(document).ready(function(){
$('#div1').click(function {
//slide div2 out and push div1 to the left to show delete and edit buttons
});
});
</script>
I am trying to make it similar to the iOS mail app where you can swipe to delete but instead you will click and if you click again div1 will push div2 off the screen so basically I want to toggle the delete and edit div on and off the screen.
Not sure what javascript and css is involved in this. Thanks in advance for any answers.
You can do something like such structure the actionable elements in a div which will then be shifted around based on the state.
<div id="div2">
<div class="inner">
Fusce fermentum
</div>
<div class="actions">
<button id="delete"></button>
<button id="edit"></button>
</div>
</div>
Have #div2 be position:relatve;
#div2 {
background: #eeeeee;
padding: 20px 80px 20px 20px;
overflow: hidden;
position: relative;
}
.actions {
background: red;
position: absolute;
height: 100%;
right: -60px;
top: 0;
transition: right 0.2s ease-in-out;
width: 60px;
}
.reveal .actions {
right: 0;
}
Then just toggle the class with jQuery:
$(document).ready(function() {
$('#div2').click(function() {
$(this).toggleClass('reveal');
});
});
http://jsfiddle.net/P6gAe/1/
And this to your head
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
Add this to your script
$(document).ready(function(){
$( "button" ).click(function() {
$( "#div1" ).hide( "drop", { direction: "up" }, 500 );
});
});
Related
I want to hide the current div that's displayed using .toggle when another is clicked.
When another div is toggled by clicking on another link in .left, I want the div that's currently displayed in .right to disappear and be replaced with the one that's clicked. Currently div's that have been toggled stay there until toggled off onclick, I want the toggle off to trigger when another div is selected from .left
Tried using .hide and an if statement, but couldn't seem to get the JS to function properly. If someone could just point me in the right direction that would be great.
Apologies if I've phrased this badly (new to SO). Happy to edit accordingly.
JS fiddle
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="left">
<div class="row">
<div class="links">
When this link is clicked, i want the first div to be shown
When this link is clicked, i want the second div to be shown
When this link is clicked, i want the third div to be shown
When this link is clicked, i want the fourth div to be shown
</div>
</div>
</div>
<!--left-->
<div class="right">
<div class="row">
<div>Content to be shown when the first link is clicked</div>
<div>Content to be shown when the second link is clicked</div>
<div>Content to be shown when the third link is clicked</div>
<div>Content to be shown when the fourth link is clicked</div>
</div>
</div>
<!--right-->
</div><!--wrap-->
CSS:
.links a {
display: block;
}
.row > div:not(.links) {
display: none;
}
.wrap {
width: 1000px;
height: 1000px;
}
.left {
width: 500px;
height: 1000px;
float: left;
display: inline;
}
.right {
width: 500px;
height: 1000px;
float: right;
display: inline;
}
.links a {
width: 490px;
}
.links {
margin-top: 20px;
}
JS:
var links = $('.links a');
links.on('click', function() {
var n = links.index(this);
$('.row > div:not(.links)').eq(n).toggle();
});
Add the following to your code inside the function
$('.row > div:not(.links)').hide();
Here is JS fiddle
Check out this i little edit your code see live demo at https://jsfiddle.net/7xt1d887/ Hope it will help You :)
ADD this
$('.right .row').find('div').hide();
hey guys so i need a function that opens a popup with a table being held by a div when an image or hyperlink is clicked heres my code
<html>
<body>
<div id="tabla"> </h1> </div>
Click me
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
$( "#openDialog").on("click", function(){
$( "#tabla" ).dialog({
height: 140,
modal: true
});
$( "#tabla" ).show();
});
});
</script>
theres the DIV ID holding the table so the function must call by the ID for the popup filled with the table THANKS GUYS
Maybe you need something like this:
HTML
<button id="trigger">
open dialog
</button>
<div class="modal">
<div class="modal__body">
<table>
<tr>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
</tr>
<tr>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
</tr>
</table>
</div>
</div>
CSS
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
}
.modal__body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background: white;
}
.show {
display: block;
}
jQuery
$('#trigger').click(function() {
$('.modal').addClass('show');
});
$('.modal').click(function() {
$(this).removeClass('show');
});
Just add your table to modal__body
You can use jQuery UI dialog to achieve what you are trying to do. If you give your div containing your table a dialog class:
<div id="dialog" title="Basic dialog">
<table></table
</div>
Then you need to hook into click event of your a tag or whatever you want to trigger the popup:
$( "#openDialog" ).click(function() {
$( "#dialog" ).dialog();
});
Don't worry about closing since it has a close button on that dialog. More info here.
So my question is how do I make a div push down everything that comes after it, even if the elements that come after have a fixed positions.
Let me explain the scenario:
I have the following structure:
<body>
<div class="top_menu">
</div>
<div class="content">
</div>
</body>
Where .top_menu has a position:fixed; and top:0;
Now using JavaScript I insert a new div right after <body> and wrap the rest in another div to end up with something that looks like this.
<body>
<div id="notice_bar">
</div>
<div id="wrap">
<div class="top_menu">
</div>
<div class="content">
</div>
</div>
</body>
Now is there a way to make the #notice_bar div always push down the #wrap div with all its content?
Changing the position:fixed; attribute of .top_menu is not an option because this script I’m working on should work on any given website.
I’m really running out of ideas here so any tips will be greatly appreciated. Thanks!
EDIT: Here is the specific scenario were I'm working on right now in case anyone feels generous enough to play arroudn with it :) http://mirlostudio.com/choeducators
If you want the notice bar to remain at the top, while the menu scrolls with the page you could use a little jQuery/javascript to toggle a class that adds fixed positioning to the menu:
Working Example
$(window).scroll(function() {
$('.top_menu').toggleClass('scrolling', $(window).scrollTop() > $('#wrap').offset().top);
});
.top_menu {
height: 20px;
width: 100%;
background: blue;
}
.content {
position: relative;
height: 600px;
background: grey;
}
.scrolling {
position: fixed;
top: 0px;
right: 8px;
left: 8px;
width: auto;
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notice_bar">Notice Bar</div>
<div id="wrap">
<div class="top_menu">Top Menu</div>
<div class="content">Content</div>
</div>
If you set the .wrap container to position: relative; - all elements inside the .wrap container that are absolutely positioned will be moved together with their parent container.
<script type="text/javascript">
function myFunction() {
if (document.getElementById("ChkChildIssue").checked)
{
document.getElementById("dhamale").style.display="none";
document.getElementById("sachin").style.display="block";
}
else
{
document.getElementById("dhamale").style.display="block";
document.getElementById("sachin").style.display="none";
}
}
</script>
<body>
<input type="Checkbox" name="ChkChildIssuess" id="ChkChildIssue" onclick="myFunction();" />Include Child issue</br>
<div id="dhamale" > </div>
<div id="sachin" style="display:none;" > </div> // i want this div by default diaplay
When checkbox is checked, then div "dhamale" will be hidden and div "sachin" will be displayed and vice-versa .
But when checkbox get checked that time, div "sachin" is not being displayed.
(document.getElementById("sachin").style.display="block" //this is not working
Your code should work. But why use javascript?
you can perfectly solve this using css.
<div class="toggle-wrapper">
<input type="checkbox" name="toggler"/>Toggler
<div class="content">
<div class="active">This is the active box</div>
<div class="inactive">This is the inactive box</div>
</div>
</div>
.content {
position: relative;
overflow: hidden;
width: 300px;
height: 100px;
}
.content > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #dfdfdf;
}
input[type="checkbox"]:checked + .content .active {
z-index: 1;
}
http://jsfiddle.net/TfceP/
I am totally new to jQuery and starting out basically so please forgive if this question sounds amateurish or stupid. Any how I want to the header and footer of the page to remain static but the center contents of the page to slide in from the right side when page loads. Here is the page which does exactly that :
flooring-by-design.com
I have looked into slide down function of jQuery and animate function but slidedown slides from top-bottom and I don't want that. What should I do?
My content goes like this:
<div class="container">
<h1 class='logo'>Site Name</h1>
<div class='bcontent'>
<div id="one">One Content</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
<footer>Copy rights</footer>
</div>
Div one two and three are the ones which I want to slide in nicely on page load. Just like the example link.
You can do this using jQuery.
Basically the content is set at an offset of 800px from the left initially using CSS. Then using jQuery animate, we slide-in the contents till the offset from left is 0px. You can increase or decrease the duration to alter the speed of the slide-in.
jQuery
$(document).ready(function() {
$("#one").animate({left: "0"}, {
duration: 2000
});
$("#two").animate({left: "0"}, {
duration: 2250
});
$("#three").animate({left: "0"}, {
duration: 2500
});
});
CSS
.bcontent > div{
position: relative;
display: inline-block; /* to display the 3 div's in same line */
height: 200px; /* height, width and border just added for demo, not mandatory */
width: 100px;
border: 1px solid black;
left: 110%; /* Added to avoid the width issue pointed out by DRP96 */
}
.bcontent{
width: 100%;
overflow: hidden; /* added to make the content hidden initially and avoid scroll-bar */
}
$(document).ready(function() {
$("#one").animate({
left: "0"
}, {
duration: 2000
});
$("#two").animate({
left: "0"
}, {
duration: 2250
});
$("#three").animate({
left: "0"
}, {
duration: 2500
});
});
footer {
bottom: 0px;
font-size: 20px;
}
.bcontent {
width: 100%;
overflow: hidden;
}
.bcontent > div {
position: relative;
display: inline-block;
height: 200px;
width: 100px;
left: 110%;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="row">
<h1 class='logo'>Site Name</h1>
<div class='bcontent'>
<div id="one" class="span4">One Content</div>
<div id="two" class="span4">Two</div>
<div id="three" class="span4">Three</div>
</div>
<footer>Copy rights</footer>
</div>
<div class="container">
<h1 class='logo'>Site Name</h1>
<div class='bcontent'>
<div id="one">One Content</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
<footer>Copy rights</footer>
</div>
for the above html you can refer to the **demo