I want to achieve hide/show with div's in html but in this way.
Here is my html:
<div id="left"></div>
<div id="middle">
<input type="button" id="button"/>
</div>
<div id="right"></div>
And this is my css:
body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
float:left;
width:11%;
height:570px;
margin:0;
}
I want to do that when I click button on div center to hide div right and to expand divleft for the size of the div right and then move div center all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left.
Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:
Start phase:
And end phase:
You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/
or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/
I had almost the same question a couple of days ago and maybe it helps you too.
this example uses a checkbox to hide the div. and make the other div 100% width.
javascript, When right div is hidden left div has to be 100% width.
the javascript code from the example:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","40%");
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
});
});
and an example:
http://jsfiddle.net/mplungjan/5rdXh/
This is one of the best ways to hide a div element using JavaScript:
<html>
<head>
<script>
function hideDiv() {
document.getElementById("myP2").style.visibility = "hidden";
}
</script>
</head>
<body>
<button onClick="hideDiv()">Hide</button>
<br>
<br>
<p id="myP2">Hello world!</p>
</body>
</html>
Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/
(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS).
A Javascript-only solution would be much more difficult to implement.
Related
I am trying the giva a menu slides in/out effect to give the main content more space whenever user wants - More like the Google Calendar hamburger menu click behaviour.
I am trying to have two divs side-by-side. 1st is menu, 2nd is other content. Using jQuery UI I am trying toggle slide the 1st div.
Two issues -
Only when I give fixed width to 2nd div, I am able to place them side-by-side.
How to make the second div takes rest of the space?
Only after completion of the slide-out 2nd div adjust its width.
How to make increase the width smoothly?
Here is the code https://codepen.io/coder92/pen/Yjomwd
$(document).ready(function(){
//adds click function to the hamburger menu
$( "#menu" ).click(function() {
$(".menuDiv").toggle('slide');
});
});
.menuDiv{
background-color: green;
width:200px;
float:left;
}
.contentDiv{
//width:100%;
width:500px;
color:white;
background-color:blue;
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id="menu"> toggle </span>
<div>
<div class="menuDiv">
Menu
</div>
<div class="contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>
Thanks in advance!
For the smooth sliding you can use
$(".menuDiv").animate({width: 'toggle'}, 350);
And to make the data take up the rest of the page
Remove float: left; from .contentDiv (Float makes the element not take full size)
Add margin: 0 auto; (This makes the data take the full rest of the page)
Add overflow: hidden (this stops the blue from going under the green)
Check it out: https://codepen.io/Funce/pen/QBeLOr
The way Google Calendar do it is to utilize a combination of flex display, hidden overflow and negative margin to achieve the effect. You may refer to the sample below:
$(document).ready(function(){
//adds click function to the hamburger menu
$("#menu").click(function () {
var $menu = $(".menuDiv");
if ($menu.is(':visible')) {
$menu.animate({'margin-left':-200}, function() {
$menu.hide();
});
} else {
$menu.show().animate({'margin-left':0});
}
});
});
.containerDiv {
display: flex;
overflow-x: hidden;
}
.menuDiv{
background-color: green;
width:200px;
}
.contentDiv{
color:white;
background-color:blue;
float:left;
flex:1 1 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id="menu"> toggle </span>
<div class="containerDiv">
<div class="menuDiv">
Menu
</div>
<div class="contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>
Note that I use the jQuery animate method, while Google Calendar use the CSS transition for theirs.
I created a comment button.
I want that when the user click on the button a model window will open. The model window should contain a keyboard for writing the comment.
This might help you a little bit. We can't code an entire keyboard for you.
HTML:
<input type="button" value="Show the keyboard!"> <!-- the button -->
<div id="wrapper"> <!-- the keyboard -->
<!-- type your code here, make sure that it's css is like the textarea below, display:none;. Then copy-paste the jquery line which says 'textarea', and change 'textarea' to whatever element you added. -->
<textarea></textarea>
</div>
CSS:
#wrapper {
position:relative;
margin-top:30px;
background-color:#CCC;
width:400px;
height:0px;
}
textarea {
display:none;
margin:0 auto;
width:200px;
height:160px;
}
jQuery:
$(document).ready(function() {
$('input').click(function() { // when the button is clicked...
$('#wrapper').animate({ height: '+=200px'},100);
// ...increase the height of the wrapper by 200px
$('textarea').css({ 'display': 'block'});
// ...make sure that the textarea is visible
})
});
Link to JSFiddle: http://jsfiddle.net/16fuhf6r/3/
Comments with code explanation are included.
I have 2 Divs, side by side. By default, only the left one shows, and it centered in the page content horizontally. But when the user click's a button on the first div, it would slide to the left, and show the other div.
I already have the visibilty setup. But The problem is, I need my js to detect that the div's display:none attribute, and adjust the first div accordingly (float:left or float:right)
If possible, a fiddle would be nice also.
This should work for you if I got your problem completely:-
HTML
<div id="left">
<button onclick="showDiv()">Show</button>
</div>
<div id="right">
</div>
JS
function showDiv(){
var leftDiv = document.getElementById('left');
var rightDiv = document.getElementById('right');
leftDiv.style.float = 'left';
rightDiv.style.float = 'right';
rightDiv.style.display = 'block';
}
CSS
div{
width:200px;
height:200px;
background:gray;
margin:10px;
}
#left{
float:right;
}
#right{
display:none;
}
Fiddle
I have a div in my code in which I have inserted an image. I want that when I hover on that image, a box with some text should be displayed on the image.....
<div id=".image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSZPFUnMbNKcDHYgjgLqslZtOicCfxph__Jwk95NZGXM_HZ1wzvbGhlrSNi">
<div id="des">hi</div>
</div>
I want to make a box with some text appear on top of the image when it is hovered over.
How can I do that?
I tried following but didnt work
<script type="text/javascript">
$(document).ready(function(){
$(".image").mouseover(function() {
alert("hello");
$(this).children(".des").show();
}).mouseout(function() {
$(this).children(".des").hide();
});
});
</script>
Make two divs, one for your image and one for the box with text.
For example div1 (the Image) and div2 (the box with text).
.div1 {
background:url('image.jpg');
}
.div2 {
width:20px;
height:20px;
background-color:#000;
}
With me so far?
So in HTML you will have...
<HTML>
<head>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
TEXT HERE
</div>
</body>
</HTML>
Then to display div2 when hovering over div1 you will need to make div2 not display as default, and make the hover commands.
.div1 {
background:url('image.jpg');
}
.div2 {
width:20px;
height:20px;
background-color:#000;
display:none;
}
.div1:hover + .div2 {
display:block;
}
I think this should work :)
First, you declare a div such that it will trail your mouse pointer. Then you can show the div when it is over the image. When mouse leaves the image, the div is hidden. Please check the example fiddle
http://jsfiddle.net/B5h6v/
You can implement it using jQuery mouseenter() and mouseleave() events
I'm currently building a popup box script using css/jquery and i can't seem to get the div centered on the screen on all cases. It it possible to center it without knowing the div width?
Instead of posting all the code here i put up a live example at http://goo.gl/N45cp
Any kind of help is much appreciated!
Best Regards
John
<div id="wrapper">
<div id="child"></div>
</div>
If the position of the #child is not absolute, you can set left and right margins to auto:
#child {
margin: 0 auto;
}
Or if the position is absolute you can try the following:
$("#child").css("left", function(){
return ($("#wrapper").width() - $(this).width()) / 2;
});
You can achieve this with pure CSS if you have a containing div:
HTML
<div id="outer">
<div id="inner">some content here</div>
</div>
CSS
body, html, div#outer { height:100%; }
div#outer { text-align:center; }
div#inner { display:inline-block; }
http://jsfiddle.net/NjZbW/