How to full page a div element? - javascript

I wonder if there is any way to set one div container to full page (like a zoom, with no other elements of the page shown) and allow user to turn back to normal by doing a escape or click outside of the div element.

I use jQuery UI for this solution. It's really simple and straight forward.
Here's the Fullscreen working Demo of this effect
Here's the Fiddle broken down piece by piece
And of course, the code ->
The HTML ->
<div class="body">
Open Modal
<div class="overlay"></div>
<div id="modal" title="the modal"> Modal </div>
</div>
The CSS ->
body{
height:100%;
width:100%;
padding:50px;
}
.ui-widget-overlay{
z-index:10;
}
.ui-dialog{
z-index:20;
}
The jQuery ->
$('#modal').dialog({
'autoOpen' : false,
'modal' : true
});
$('#open-modal').click(function(){
$('#modal').dialog('open');
$('.overlay').addClass('ui-widget-overlay');
});
$(document).on('click', '.ui-widget-overlay', function(){
$(this).removeClass('ui-widget-overlay');
$('#modal').dialog('close');
});

Related

HTML / CSS / JS (JQuery) - draggable modal rezises window width / height

I'm currently trying to create a modal, which is hidden on the application start up. Once I would click the button, the modal appears.
This is working so far using the following code:
Modal HTML:
<div style="width:500px; display:none;" id="chatModal" class="panel panel-default chatModal">
<div class="panel-heading">
<h6 class="panel-title">Zworld Chat</h6>
<div class="heading-elements">
<ul class="icons-list">
<li><a data-action="collapse"></a></li>
<li><a data-action="reload"></a></li>
</ul>
</div>
</div>
<div style="overflow-y: scroll; height: 200px;" class="panel-body" id="chat-text">
<div>Chat messages:</div>
</div>
</div>
Modal show / dragable JS:
$('#chatBox').click(function()
{
if ($('#chatModal').css('display') == 'none'){
$('#chatModal').show();
$('#chatModal').draggable();
}
else
{
$('#chatModal').hide();
}
});
But once I drag the modal to the right or bottom side of the screen the whole layout would extend itself.
Live example (Storing auth credentials): http://pr0b.com:2000
Screenshot example: https://gyazo.com/0b55ab2f8f71ef7526d0fe2474883dde
Question:
How could I create the dragable function to not extend the layout?
In case the live preview will be inspected (Not responsive yet):
Open the live preview link.
Click login.
Click the little "message bubble" icon on the right of the input.
Drag the modal to the right or to the bottom of the site.
Your containing element is already set to take up the entire window, just set an overflow hidden on it.
#ui { overflow: hidden; }
You can use containment to keep it inside the parent window
$("#chatModal").draggable({ containment: "window" });

jquery loading screen before html

I'm trying to implement this codepen into an html page. The idea is that it fades away after everything on the page loads. This is what I currently have.
HTML
<div class="js">
<body>
<div id="preloader"></div>
<!-- WEBSITE -->
</body>
</div>
</html>
(* ALERT: You cannot try to close a div tag after having closed the body element *)
CSS
Lots of CSS so I put it on codepen
JQUERY
jQuery(document).ready(function($) {
$(window).load(function() {
$('#preloader').fadeOut('slow', function() {
$(this).remove();
});
});
});
So it seems to be working fine except I can't seem to figure out the purple background. The spinner works perfectly but if I put background: #774CFF; in the .js div#preloader it doesn't cover the entire page in purple, only within the spinner.
You assign the background-color on the #preloader, which has 30px width and height.
So, either you apply the background-color to the body
body{
background-color:#774CFF;
}
either you wrap the #preloader with another element and stretch it to fit the screen:
HTML
<div id="preloader-wrapper">
<div id="preloader">
</div>
</div>
CSS
#preloader-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:#774CFF;
}

Slide Toggle from Left to Right

I'm trying to slide a div from left to right, e.g. the structure would be like the following;
A link is placed on the left corner of a page (having a html table hidden with display: none css property), when this link clicked the hidden table slides from left to right.
Here is the code I'm trying;
HTML:
<div id="latest_threads_link">
<img src="images/latest_threads.png" alt="Latest Threads" title="Click Here to see latest threads of this section.">
<table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="tborder" style="display: none;" id="latest_threads_show">
'.$forum_threads_bit.'
</table>
</div>
CSS:
#latest_threads_link{
left:0;
position:fixed;
bottom:150px;
}
jQuery:
jQuery(document).ready(function($){
$('a[id^="latest_threads_click"]').on('click', function (e){
e.preventDefault();
$('#latest_threads_show').stop().slideToggle('slow');
});
});
What it does is actually the hidden table shows when I click on the link but NOT with slidding animation, it just shows like poping up into the page. Also the link jumps onto the top (rather then positioning on the same bottom: 150px)
Please help
Easiest way to do the sliding animations is to use the additional functionality of show/hide in jQuery UI.
$(document).ready(function(){
$('#click').click(function (){
$("#show").show('slide',{direction:'left'},1500);
});
});
http://jsfiddle.net/rjzJp/

how does accordion works?

I'm not asking how to show/hide content upon click.
All I want to know is how by placing 2 divs, one on top the other, I can get the effect that by clicking on the bottom div, it "closing" the upper div. that's all. Not exactly accordion, but this is enough for my situation.
I tried to achieve this by animating the upper div height to 0, after clicking the bottom div. It works but not smoothly enough. and IE browsers didn't like it:
JQUERY
$('#BottomDiv').click(function() {
$('#UpperDiv').animate({ height: '0px' }, "slow");
});
in the markup side, both divs are position - relative:
HTML
<div id="UpperDiv" style="height:190px; width:100%; margin-top:80px; position:relative">
</div>
<div id="BottomDiv" style="width:100%; position:relative; z-index:10; float:left;" >
</div>
So I was just curious maybe there is a better way to achieve this, like jQuery accordion does it. Smooth and works for all browsers.
Assuming a structure such as:
<div id="accordionWrapper">
<div id="UpperDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
<div id="MiddleDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
<div id="BottomDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
</div>​
Then I'd suggest:
$('#accordionWrapper .accordionSlides').click(
function(){
var cur = $(this);
cur.siblings().children().not('h2').slideUp(); // hides
cur.find('p').slideToggle(); // shows
});​
JS Fiddle demo.
References:
children().
click().
find().
not().
slideToggle().
slideUp().
Does this help ?
Markup:
<div id="UpperDiv" style='background:red;height:200px;'>
</div>
<div id="BottomDiv" style="background:Gray;height:200px;">
</div>
Javascript:
$('#BottomDiv').click(function() {
$('#UpperDiv').slideUp("slow","linear");
});
$('#BottomDiv').click(function() {
$('#UpperDiv').css("display", 'none');
});
The simple solution is above, however, more elegant would be to define a css class such as:
.invisible
{
display: none;
}
and you can make something invisible by using the addClass function and you can remove this class by using removeClass from the tag to make it visible again.

Hiding page loading

My HTML markup looks like that
<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>
I'm trying to hide whole page loading process with following solution.
CSS Rules:
#loading {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-image:url("img/load/tr.png");
z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}
And Jquery
$(document).ready(function(){
$('#loading').fadeOut(500);
});
Now, the problem is page loads like that:
first ugly draft of page (for 1-2 seconds)
appears loading div
loading whole content
disappears loading div
You can see it in action
I don't understand why loading div appears after 1-2 seconds?
I want to prevent 1).
I think this is a pretty simple one.
First make sure jQuery is called in your section.
First, wrap all the content of your page (except the loading div) in a div called
<div id="content-wrapper">
CONTENT HERE
</div>
Then using CSS set:
#content-wrapper {
visibility:hidden;
}
Then just make the jQuery into a function like this:
$(window).load(function(){
document.getElementById("content-wrapper").style.visibility="hidden";
$('#loading').fadeOut(500, function()
{
document.getElementById("content-wrapper").style.visibility="visible";
});
});
and I can see you're using Nivo Slider. Me too ;)
Edit: I fixed it, now it works perfectly. (You don't need the onload event in your body tag anymore)
Check out the example here: JSFiddle
Try moving the styles for loading to be inline instead of relying on the full external css file to load. If you look at Google Chrome Developer Tools and the Network tab, or a similar tool, you'll see the content of the page loads first, as expected, but then you have to wait until the external css is loaded and downloaded, and then the referenced image in the css file is loaded. Placing the style inline should assist in getting the loading element to display as soon as it can, or at least sooner.
<div id="loading" style="position: fixed;left: 0;top: 0;
width: 100%;height: 100%;background-image: url(core/design/img/load/tr.png);z-index: 100;"><img src="core/design/img/load/load.gif"></div>
Why not start everything else inside a <div style="display: none;" id="loaded">, and then when the loading has finished use $("#loaded").fadeIn()?

Categories