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
}
Related
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>
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;
}
i'm really new to all this coding things etc. (1 month :P) and actually i try some things with jQuery.
I used the search function but actually it's quite hard for me to understand everything :P
My goal is:
When i hover over an image another image which sits on top of it slides up and another slides down.
They're all images - i don't want to publish the Website and only want to use it on my Computer for testing ^^
Also the picture on the top should be hidden at first. (I know how to do it but i actually don't know if it will be shown when using slideDown)
HTML:
<div class="newschange">
<div class="News wow fadeInDown animated"><img src="images/News.png" /></div>
<div class="newstext wow fadeInUp animated"><img src="images/newstext.png" /></div>
<div class="newshover"><img src="images/alt/newstext.png" /></div>
</div>
My jQuery Script: (it's actually in the header of the HTML)
<script>
$(function() {
$('.News').mouseover(function (){
$(.'newstext').slideUp(300);
$(.'newshover').delay(400),slideDown(300);
});
})
</script>
CSS (i don't know if this is necesarry for this :P)
.newshover {
position: absolute;
left: 802px;
top: 455px;
width: 359px;
height: 35px;
}
.newstext {
position: absolute;
left: 781px;
top: 456px;
width: 446px;
height: 32px;
}
.News {
position: absolute;
left: 377px;
top: 276px;
width: 854px;
height: 318px;
}
The problem is just that nothing happens when i hover over it :)
Here is a Screenshot:
http://i.stack.imgur.com/dzyFH.png
The 1. image is the whole thing with at the top "News" the image and the rounded rectangle.
NEWS SECTION! is the one i want to show AFTER i hover over the first image.
The red Text behind it is the one i want to hide when i hover over the first image. :)
//solved Code
<script>
$( document ).ready(function() {
$(".News").on('mouseenter',function () {
$(".newshover").delay(600).slideToggle(500);
$(".newstext").slideToggle(500);
});
$(".News").on('mouseleave', function(){
$(".newshover").slideToggle(500);
$(".newstext").delay(600).slideToggle(500);
})
});
</script>
<script>
$(function(){
$(".newshover").hide(0);
})
</script>
If I understood well your question this piece of code should work: https://jsfiddle.net/5naaq121/
HTML:
<div class="newschange">
<div class="News"><img src="http://maalaeasurfresort.com/wp-content/uploads/2014/09/beach_cy.jpg" /></div>
<div class="newstext"><img src="http://www.honduras.com/wp-content/uploads/2012/05/white-sandy-beach2-300x200.jpg" /></div>
<div class="newshover"><img src="http://www.lakecountyparks.com/_images/whihala_beach/wb_beach.jpg" /></div>
</div>
JS:
$(function(){
$('.newschange').mouseenter(function (){
$('.newshover').slideUp(300);
$('.newstext').delay(400).slideUp(300);
})
});
CSS:
.newschange {
display:block;
width:300px;
height:200px;
position:relative;
overflow:hidden;
}
.newshover {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
.newstext {
position: absolute;
left:0;
bottom:0;
width:300px;
height:200px;
}
.News {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)
Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )
I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.
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