Auto resize height CSS - javascript

I have html code like this
<div id="wrapper">
<div id="collapse"></div>
<div id="content"></div>
</div>
the css code
#wrapper {
width:100%;
height: 100%;
}
#collapse {
width:100%;
height: 30%;
}
#content {
width:100%;
height: 70%;
}
what i want to ask is how to make the #content height fit the #wrapper when the #collapse is hidden (assuming there is a js script that make the #collapse show and hidden) ?

Try this:
HTML code:
<div id="main">
<div id="Example">Hello</div>
<button id="Toggle">Toggle</button>
<div id="body">This is Body!!!</div>
</div>
JS code:
$('#Toggle').on('click', function() {
$('#Example').slideToggle({
duration: 1000,
easing: 'easeOutCubic'
});
});
CSS code:
#Example {
height: 100px;
background: #cc0000;
}
#main{ height:500px;
background-color:yellow;}
#body{ height: 100%;
background-color:blue;}
you can remove button and customize this code.
see this DEMO

You can do this with jQuery .
See the example
[http://jsfiddle.net/atinder123/6hq8h/][1]
[1]: http://jsfiddle.net/atinder123/6hq8h/

in the same JS that hides the collapse element you add
document.getElementById('content').style.height = '100%';
and of course in reverse when you show collapse again

Related

Opening a half page when clicking a button

I am trying to open a kind of a new page when clicking on a button. For example, I have some items that vertically and horizontally center in the page. I want it so that when the button is clicked, it will move all my items to the left half of the page and open a new page on the right half page.
This is my example code:
HTML:
<div>text</div>
<div>text</div>
<div>text</div>
<button>
Click me
</button>
CSS:
body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
And this is my goal when someone clicks on the button:
Any suggestions?
If you are comfortable using a js framework, this can be done easily using angularJs.
Simply create and angular module, a controller for that module, and some boolean to render the left and right side divs. I called this boolean clicked, code below:
HTML:
<body ng-app="myApp" ng-controller="myCtrl">
<div class="center-box" ng-if="!clicked">
<p>{{Item1}}</p>
<p>{{Item2}}</p>
<p>{{Item3}}</p>
<button ng-click="setClicked()"> Click me </button>
</div>
<div class="r-half" ng-if="clicked">
<div style="text-align:center;">
My new Page here
</div>
</div>
<div class="l-half" ng-if="clicked">
<div style="text-align:center;">
<p>{{Item1}}</p>
<p>{{Item2}}</p>
<p>{{Item3}}</p>
</div>
</div>
</body>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Item1 = "myItem";
$scope.Item2 = "anotherItem";
$scope.Item3 = "aThirdItem";
$scope.clicked = false;
$scope.setClicked = function(){
$scope.clicked = !$scope.clicked;
}
});
CSS:
.center-box {
text-align:center;
height:100%;
width:100%;
}
.r-half {
width:50%;
float:right;
height:100%
}
.l-half {
width:50%;
float:left;
height:100%
}
A link to my Fiddle: https://jsfiddle.net/Jack_Hamby/c06gd2z4/
Here's a simple example that uses iframe elements that loads up your content and external content at the same time:
html, body, #wrapper {height:100%;}
#left {float:left; width: 50%; background-color:yellow; height:100%; padding:0;margin:0;}
#right {float:left; width:49%; background-color:grey; height:100%; padding:0; margin:0;}
<div id="wrapper">
<div id="left">
This is the original content
</div>
<iframe id="right" src="https://example.com">
This is where the new content goes
</iframe>
</div>
And here'a an example that uses AJAX to accomplish what you are asking for. But, you will need to substitute your URL for the "page2" data into this example. This would be useful when you want more control over the fetching and consumption of the external data.
// Get a reference to the "right" container
var right = document.getElementById("right");
// Instantiate a new AJAX component
var xhr = new XMLHttpRequest();
// Set up the component to respond to changes in its state
xhr.addEventListener("readystatechange", function(){
// If the request is complete
if(xhr.readyState === 4){
// If the result was successful
if(xhr.status === 200){
// successful call
// Set the right content area to the returned value of the AJAX call
right.innerHTML = xhr.responseText;
// Change the widths of the div elements so that the right area
// is now shown and the left area shrinks down
left.style.width = "50%";
right.style.width = "50%";
}
}
});
// Configure the AJAX request. You need to supply a URL
// on your server to get the new page data from:
xhr.open("GET", "SomeURL");
// Make the request
xhr.send();
html, body, #wrapper {height:100%;}
/*
In reality, change the left width to 100% and the right width to 0 here
The JavaScript will modify the values to 50/50. I've only set the values
to 50/50 to show how the results will look
*/
#left {float:left; width: 50%; background-color:yellow; height:100%; padding:0;margin:0;}
#right {float:left; width:50%; background-color:grey; height:100%; padding:0; margin:0;}
<div id="wrapper">
<div id="left">
This is the original content
</div>
<div id="right">
This is where the new content goes
</div>
</div>
Lose the body tag in the css.
Instead, create 2 <div> elements in your body.
Use the float css attribute to set them side by side:
.div1 {
height:400px;
width:50%;
float:left;
}
.div2 {
height:400px;
width:50%;
float:right;
display:none;
}
After that, when clicking your button, display div2.
In your HTML:
<body>
<div class='div1'>content 1</div>
<div class='div2'>content 2</div>
</body>
Please check this if it help you. then give me a feedback if it needs to improve or not?
$('#button').click(function(){
$('.new-content').toggleClass('half').delay(600).fadeIn(100);
$('.content-container').toggleClass('half');
});
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
.content-container {
height: 100vh;
display: block;
background: #ddd;
float: left;
width: 100%;
position: relative;
}
.new-content {
display: none;
float: left;
width: 0;
height: 100vh;
background: #f60;
}
.new-content.half,
.content-container.half {
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-container">
<div class="content">
<div>text</div>
<div>text</div>
<div>text</div>
<button id="button">
Click me
</button>
</div>
</div>
<div class="new-content">
</div>

JQuery Hide/Show on Scroll down

I'm new to jquery. I'm trying to write a script that will hide the div "box" and all children. When the user scrolls to the bottom of the page, the div "box" and all children display. For time's sake, we'll say the children are "chamber1", "chamber2" and "chamber 3".
when I hide "box", it only removes that div.
$(document).ready(function() {
$("#box").hide();
});
Apologies for lack of code, but I'm having trouble understanding this lesson and I can't find an exact example of what I'm trying to do through my internet searches.
Thank you!
If you to hide the box when you reach the bottom of the page, you javascript should be as follows:
JAVASCRIPT:
$(document).ready(function() {
$(document).on("scroll", function(){
if ( window.scrollMaxY == window.scrollY ) {
$("#box").hide();
}
})
});
HTML:
<div id="box">
<div>Chamber 1</div>
<div>Chamber 2</div>
<div>Chamber 3</div>
</div>
You should make sure that the div has id "box". If you're working with a div of class "box" then you would use:
$(document).ready(function() {
$(".box").hide();
});
I think this might help you and would be better to understand. A good explantion is given below here with demo.
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).outerHeight() == $(document).outerHeight()) {
//Script for activity on reaching bottom of document
$("#box").fadeOut();
} else // optional
{
$("#box").fadeIn();
}
});
body {
margin: 0px;
width: 100%;
}
.container {
position: relative;
height: 900px;
width: 100%;
background: #fee;
}
#box {
position: fixed;
top: 50px;
left: 0px;
background: lightblue;
height: auto;
padding: 15px;
overflow: hidden;
max-width: 250px;
width: 210px;
}
#box > div {
margin: 5px;
background: #F33636;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
</div>
<div id="box">
Box
<hr>
<div class="chamber1">
Chamber 1
</div>
<div class="chamber2">
Chamber 2
</div>
</div>
JSFiddle
You can play around with Fiddle Link.

jQuery toggle() with dblclick() changing display to none

I have created a div that when I double click it, it will expand the entire contents of the div to full screen. I now want to be able to toggle this when double clicking so it goes back to original size.
The code was working to increase the div size, but once adding the toggle() function, it now changes the display to none when I double click the first time. I assume I am just using toggle incorrectly, but am unable to figure out how to make this work.
HTML
<div class="popout-box">
<button id="btnShow">Wallboard</button>
<div class='menu' style='display: none'>
<div id="framewrap">
<button id="btnHide">Close</button><br/>
<iframe id="frame" src="https://url.com">
</iframe>
</div>
</div>
</div>
</div>
jQUery
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$("#framewrap").toggle().css({"width":"100%","height":"100%","position":"fixed","left":"0px","right":"0px","top":"5px","bottom":"0px"});
});
});
CSS
#framewrap {
background-color:#1886c5;
overflow:hidden;
box-shadow: 0px 2px 10px #333;
}
#frame {
width:100%;
height:100%;
background-color:#1886c5;
}
.popout-box {
width: 400px;
height: 300px;
}
.menu {
position: absolute;
right: 15px;
}
I believe this is what you're after:
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$(this).toggleClass('newClass');
});
});
CSS:
.newClass
{
width:100%,
height:100%,
...
...
}
jQuery
$(document).ready(function() {
$("#framewrap").on('dblclick', function() {
$("#framewrap").toggleClass('fixed');
});
});
CSS
.fixed {
width:100%;
height:100%;
position:fixed;
left:0;
right:0;
top:5px;
bottom:0
}

Horizontal slide banner design & functionality

I need to show the vertical banner which will slide out horizontally from the right of the screen once user click the open button/div and should be able to close the same. Base design is show in the sample image below
I have set up fiddle for the same http://codepen.io/anon/pen/oXgePX
<div class="horizontal-slide" id="other-menu"><<</div>
<div class="menu-other slide-right slide-opened" id="other-menu-content">
horizontal on right slide div
</div>
UPDATE:
I managed to do it by wrapping banner & button inside another div.
.wrapper{
float:right;
position:absolute;
right:0;
}
example: http://codepen.io/anon/pen/aOzyxo
still need to improve it so that button also slides with the banner for smooth look
You've to change your css
For example:
/* float */
float:right;
/* absolute position */
position:absolute;
You need it like this:
http://codepen.io/anon/pen/mJyMgW
Or do I missunderstand your Question?
Maybe you wanted something like this. It's a good start I think.
$(function() {
//slideout-menu-toggle
$(".banner-slide").click(function(event) {
var _slideMenu = $("#right-banner");
if (_slideMenu.hasClass("slide-opened")) {
$( "#right-banner" ).animate({ "right": "-190px" }, "slow" );
$( "#hbanner" ).html("<<");
//alert('a')
} else {
$( "#right-banner" ).animate({ "right": "0" }, "slow" );
$( "#hbanner" ).html(">>");
}
_slideMenu.toggleClass("slide-opened");
});
});
#right-banner {
position:absolute;
right:0;
top: 0;
width: 210px;
}
.right-banner {
width: 150px;
height: 200px;
background-color: green;
padding: 20px;
float: right;
background-color: blue;
}
#hbanner {
float: left;
background-color: red;
cursor:pointer;
}
.wrapper {
float: right;
position: absolute;
right: 0;
z-index: 100000;
}
.content {
width: calc(100% - 210px);
background-color: magenta;
height: 200px;
float: left;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
This is sample text</div>
<div class="wrapper">
<div id="right-banner" class="slide-opened">
<div class="banner-slide" id="hbanner">
>>
</div>
<div class="right-banner" id="hbanner-wrapper">
horizontal on right slide div
</div>
</div>
</div>
You can do it cleaner and simpler using CSS transitions and a simple toggleClass in jQuery:
$('#button').on('click', function(){
$('#banner').toggleClass('unfolded');
});
Demo : http://codepen.io/mbrillaud/pen/NqPvZM
use a JQ toggle class
$('#slider').toggleClass('sliderthing');
that plus CSS to give it looks and stuff should work well
I managed to do it by wrapping the banner & button inside another wrapper.
Here is the updated example : http://codepen.io/anon/pen/aOzyxo
I have added some exact animation so that red button hide/shows immediately upon click event with some smooth animation.
.wrapper{
float:right;
position:absolute;
right:0;
z-index:100000;
}

Displaying scroll bars on Top & Bottom of a DIV

I'm trying to display top & bottom horizontal scroll bars for a div. I found this SO question and changed page code accordingly.
HTML/Razor
<div class="wmd-view-topscroll">
<div class="scroll-div">
</div>
</div>
<div class="wmd-view">
#Html.Markdown(Model.Contents)
</div>
CSS
.wmd-view-topscroll, .wmd-view
{
overflow-x: scroll;
overflow-y: hidden;
width: 1000px;
}
.scroll-div
{
width: 1000px;
}
Javascript
<script type="text/javascript">
$(function(){
$(".wmd-view-topscroll").scroll(function(){
$(".wmd-view")
.scrollLeft($(".wmd-view-topscroll").scrollLeft());
});
$(".wmd-view").scroll(function(){
$(".wmd-view-topscroll")
.scrollLeft($(".wmd-view").scrollLeft());
});
});
</script>
This displays bottom scrollbar as normal but the top scroll bar is disabled, what am I missing here?
Thanks in advance
UPDATE
Even when I remove the javascript, output is same. Seems Java Script code is not executing, but no javascript errors listed.
You can achieve by some tweaks in your HTML and CSS as given below;
HTML Should look like this:
<div class="wmd-view-topscroll">
<div class="scroll-div1">
</div>
</div>
<div class="wmd-view">
<div class="scroll-div2">
#Html.Markdown(Model.Contents)
</div>
</div>
CSS Should look like this:
wmd-view-topscroll, .wmd-view {
overflow-x: scroll;
overflow-y: hidden;
width: 300px;
border: none 0px RED;
}
.wmd-view-topscroll { height: 20px; }
.wmd-view { height: 200px; }
.scroll-div1 {
width: 1000px;
overflow-x: scroll;
overflow-y: hidden;
}
.scroll-div2 {
width: 1000px;
height:20px;
}
SEE DEMO
Finally managed to fix it with this code...
HTML
<div class="wmd-view-topscroll">
<div class="scroll-div">
</div>
</div>
<div class="wmd-view">
<div class="dynamic-div">
#Html.Markdown(Model.Contents)
</div>
</div>
CSS
.wmd-view-topscroll, .wmd-view
{
overflow-x: auto;
overflow-y: hidden;
width: 1000px;
}
.wmd-view-topscroll
{
height: 16px;
}
.dynamic-div
{
display: inline-block;
}
Javascript/JQuery
<script type="text/javascript">
$(function () {
$(".wmd-view-topscroll").scroll(function () {
$(".wmd-view")
.scrollLeft($(".wmd-view-topscroll").scrollLeft());
});
$(".wmd-view").scroll(function () {
$(".wmd-view-topscroll")
.scrollLeft($(".wmd-view").scrollLeft());
});
});
$(window).load(function () {
$('.scroll-div').css('width', $('.dynamic-div').outerWidth() );
});
</script>
Thanks for the answer given... It really helped me to understand the Inner Working. :)

Categories