HTML, JavaScript: Frameless Windows - javascript

How to produce frameless window in HTML5, JavaScript, please?
I searched the web and found mostly links to use libraries. I wish to develop my own frameless window from scratch, without using a third party library.
By frameless window I mean a window having no frames, no status bar, no default minimize button, no default close button, no roll bars... It looks like a standalone image with painted close button.
Would be anybody so kind and provide me with ideas or code that will be accepted by most of the browsers?
EXAMPLE:
As few of you asked, what exactly I mean, I found a very nice example at Rapidshare. There is a large blue/orange button in the middle of the screen saying Upload. Just press it, please, and a frameless window appears.
The window represents exactly what I am trying to achieve. I have seen it many times, when displaying enlarged images, or prompting for login information, etc.. I like the animation associated with displaying that window too.

just for quicks to show the concept ..
create two divs directly under body
<div id="backmask"></div>
<div id="contentwindow"></div>
<!-- somewhere else in your page -->
click me
css for these ( roughly )
<style type="text/css">
#backmask {
display:block;
width:100%;
height:100%;
background-color:black;
position:absolute; top:0; left:0;
z-index:1000;
display:none;
opacity:0.7;
filter:alpha(opacity=70);
}
#contentwindow {
display:block;
width:800px;
height:600px;
background-color:white;
position:absolute; top:50px; left:50px;
z-index:1001;
display:none;
}
.bodywithwinOpenClass { overflow:hidden; width:100%; height:100%; }
</style>
and then ( im using jquery for quicks )
<script type="text/javascript">
$(".showinwindow").click( function(e) {
/* we don't want the visitor to leave, stop the normal action */
e.preventDefault();
/* get what to show */
var contenttoload = $(this).attr.("href");
/* set the body up */
$("body").addClass("bodywithwinOpenClass");
/* show wins and masker */
$("#backmask").css("display","block");
$("#contentwindow").css("display","block");
/* load the content */
$("#contentwindow").load(contenttoload);
});
</script>
this was just typed in directly and not ran, contains no candy ( for positioning etc ) hope it explains the concept behind all the pluggins etc you will find
the reverse is needed to "close" it

no frames
That's your decision to use (i)frames in your document or not
no scroll bars
With CSS you can suppress scroll bars, or build a layout which resizes exactly to the window size
no status bar, no minimize, no close, no roll bars...
That is possible with chrome-feature descriptors when creating a popup with window.open. Yet, you will not be able to create unclosable windows, hiding the close buttons also requires some privileges.
You seem to want a fullscreen application. Have you considered using the new fullscreen API?

http://www.codelifter.com/main/javascript/amazingframelesspopup1.html <-- pretty much covers all you can do - you can't launch a chromeless browser window from a web page.
What are you trying to achieve?
That's easy enough - it's not a window - it's actually a div on the page floating over the rest of the page content - there are plenty of ways to do it with a framework like jQuery.
Tutorial
Essentially all you need is a hidden positioned div with a high z-index and a bit of script to show/hide it:
<div id="popup" style="z-index:1000;display:none;position:absolute;top:100px;left:100px;">Some content</div>
<button onclick="document.getElementById('popup').style.display='block';">Open</button>
<button onclick="document.getElementById('popup').style.display='none';">Close</button>

Related

How avoid horizontal html scrolling when a layer is show

I have a div .layer that darkens the entire page to highlight a modal, but when I trigger the event there is a problem to occupying 100% of the screen, and is that the scroll bar of the original browser is deleted
Is there any fancy way to make the div .layer, when is visible, keep the original bar scroll of the page?
In smartphones / tablet I do not find any problem when shooting the event .layer").show(); but on desktop screens the original scroll bar of browser is eliminated and the whole html document moves to right, taking its place.
What would be the correct way to avoid html to the right?
Thanks in advance!
HTML:
<div class="layer"></div>
<div class="open-modal">Open</div>
<div class="modal">
<div class="close-modal">Close</div>
</div>
CSS:
html {width:100%;min-height:100%;margin:0 auto;top:0;left:0;padding:0}
body {top:0;left:0;margin:0;padding:0;min-height:100%}
.layer {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
min-height:100vh;
background:rgba(0,0,0,.9);
z-index:2
}
.modal {display:none;z-index:1}
SCRIPT:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer").show();
$("body").css("overflow","hidden");
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
$("body").css("overflow","");
});
});
You need to get rid of your use of "overflow". I've included a link below to the Mozilla Developer Network docs for "overflow", but below is a quick quote explaining what's happening.
"hidden
Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container."
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Also, after one cycle of clicking Open and Close, if you were to click Open again, the word Close won't show up. That's because you're not using the .show() method to show that text upon clicking Open. Updated JavaScript below.
JavaScript:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer,.close-modal").show();
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
});
});

How can I make part of my page always be in the same position relative to the screen?

I'm making a website, and I have a nav bar and a main content section, the nav bar is at the top of the screen and the main content in near the bottom of the screen. However, if I change my screen height, the main content section stays in the same place, and it goes out of my browsers viewport/window and disappears, which is perfectly normal and expected. But what I want is for the main content section to always be at the same place at the bottom of the screen, no matter what the screen size/resolution/height is. How can I accomplish this?
My website is jeffarries.com and what I'm talking about is on my home page, if you need a visual.
I've used JavaScript, and I'm not very familiar with it.
I have no experience with jQuery, however I'm fine implementing a finished jQuery script.
Thanks for your Time and Energy!
Please let me know if any further information in needed.
UPDATE: Since this question appears to be unclear, take a visit to my website, you will see the text that says "here you can learn about me and my adventures", I want that text to appear at the bottom of the browser window when loaded, however, I want it to remain in usual flow, being on top of the "recent activity" box. Basically I want the margin on top of the text to change based on the browser window height, keeping the text at the bottom of the browser window.
You can use archive this via CSS3 VH property [ View Port Height ]. For that you have to make one container and add its height to 100vh.
Here is the live demo - https://jsfiddle.net/8dptzvye/
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
.container{height:100vh}
.container span{position:absolute; width:100%; display:block; left:0; bottom:0; text-aling:center; padding:20px; background:black; color:#fff}
<div class="container">
<div class="cover">Extra Infomation </div>
<span>here you can learn about me and my adventures</span>
</div>
You may be looking for position: fixed
EDIT
If you want to change the margin based on the window size, you can use jquery's resize
$(window).resize(function () { /* change margin of element */ });

How to Make Info Boxes Appear on Website on Click

On certain websites, when a link such as "read more" is clicked, a popup box will appear, and the behind webpage will often darken. The popup box then contains information and can be closed by clicking a button in the corner.
I'd like to make several of them. Would I do so simply by creating a div and pehaps another one with a transparency to "darken" the webpage behind the popup or is there a code I could use in javascript?
Generally people here are suggesting lightboxes, which work wonderfully for galleries, but are complete overkill for info boxes like this. Lightboxes can slow your website down alot, as they require a lot of assets to be included, multiple HTTP requests for .css files and .js files, when your problem could be solved via CSS and JS.
Check out this fiddle: http://jsfiddle.net/3vmL6/1/
In your code you have a a simple div of a class modal-dialog, which is automatically hidden in the css (see the fiddle).
<div id="info-modal" class="modal-dialog">
<div>
x
<h2>Hello!</h2>
<p>You can display any information you want here!</p>
</div>
A simple snippet of JQuery in your document is used to call a specific instance of the modal-dialog, allowing you to have multiple unique divs using different ID's, but all belonging to the same class.
$("#click-me").click(function () {
$.ajax({
success: function (data) {
console.log(data);
$('#info-modal').addClass("show");
},
async: true
});
});
$(".modal-dialog .close").click(function(){
$(this).closest(".modal-dialog").removeClass("show");
});
If you're doing it yourself, you'd put an overlay over the entire page and give it a high z-index so that it will cover all of your dom elements. Then have a div, with a higher z-index positioned where you need it to be with the content you want.
An easier approach is to use a library that already has that functionality baked in
jQuery UI dialog - http://jqueryui.com/dialog/
bootstrap modal - http://getbootstrap.com/javascript/#modals
I believe this is what you are looking for: http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
What you are looking for is a lightbox/modal box. I recommand Magnific Popup because it works with responsive design, but colorbox is also very good.
You essentially are looking to work with modals so. Zurb provide a library to do just this for you in foundation. The library is called reveal. It's simple to use. I use it a good bit. You can see it here. Hope that helps.
http://zurb.com/playground/reveal-modal-plugin
This code should do what your asking for
window.onload = function() {
document.getElementById("member").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
<div id="overlay">
</div>
<div id="popup">
your readme text in here
</div>
#overlay
{
display:none;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#000;
opacity:0.5;
z-index:99999;
}
#popup
{
display:none;
position:fixed;
left:40%;
top:40%;
width:600px;
height:500px;
margin-top:-75px;
margin-left:-150px;
background:#FFFFFF;
border:2px solid #000;
z-index:100000;
}
they are called modals or dialogs, there are several frameworks that will help you in this case.
one of the most popular is bootstrap
http://getbootstrap.com/

How to put this div in center and lock everything else with light blue background

I have a div,
<div id="messagebox" style="display: none; cursor: default">
<asp:DropDownList ID="ddl" runat="server" EnableViewState="true" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged"/>
</div>
On click event, I am showing this div using,
$('#messagebox').show();
How can I put it in center of screen and also make background light dark, I want to dropdown list to trigger code behind so want to disable everything except this div,
I Edited your html and added it inside tabel. Now it's working fine and always
stay in center position even on window resizing. Check below demo
http://jsfiddle.net/NnckT/9/
Sounds like you want this div to function as a modal; you can add a <div> covering the entire background, e.g.:
<div id="cover" style="position:absolute; width:100%; height:100%; background-color: #fff; display:none; "></div>
...and then show it via the same .show() method:
$('#cover').show();
You may also need to play with the z-index property of both to get the layering correct. You could also explore jQuery's Dialog system, if using jQuery UI is in the realm of possibilities.
This is essentially a 'modal pop-up functionality', also called 'dark box' pop-up. You can achieve the 'modal pop-up' functionality either with Javascript, or with 'pure CSS'; the latter will work even in case of Javascript disabled. Here is a link to Modal Pop-Up demo implemented as pure CSS3/HTML5 solution (no any javascripting): http://webinfocentral.com/html5/ModalPopUp.htm
Essential part of it utilizes target attribute as shown in the listing below:
/*** pop-up div to cover entire area ***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
Refer to my article (http://www.codeproject.com/Tips/170049/Pure-HTML-5-CSS-3-Modal-Dialog-Box-no-JavaScript) for the complete solution.
I would use som kind of modal plugin: Here is a couple, lots of examples out there. No reason to develop one of your own if no other requirements?
http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html
You can use jQuery BlockUI Plugin to block the screen with your desired div accessible as a popup in centre of the screen
$(document).ready(function() {
$('#someButton').click(function() {
$.blockUI({ message: $('#cover') });
});
});
See demos over here: http://www.malsup.com/jquery/block/#demos
try this ..
var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height();//retrieve current window height
$('#messagebox').css('top',(windowHeight/2)+"px");
$('#messagebox').css('left',(windowHeight /2)+"px");
$('#messagebox').show();

jQuery lightbox plugin that scrolls with the page

Some of the JavaScript lightbox effects that I've seen position the lightbox relative to the viewport, so that when you scroll the page you will still see the lightbox.
The other kind are the ones that are positioned relative to the page contents. If you scroll a page containing one of these, the lightbox moves with the rest of the page.
I don't know what this second type is called (or if there is even a term for this behaviour).
I've looked at FancyBox and SimpleModal, but as far as I know, these are positioned relative to the viewport only.
What jQuery plugin allows lightboxes that scroll with the page?
that would actually be up to css.
lightboxes are just divs that are positioned absolutely (they move with the page) or fixed (they are positioned relative to the browser window.
Basic Lightbox HTML
<div class="lightbox_wrapper">
<div class="lightbox">
the lightbox content loaded by ajax
</div>
</div>
Basic CSS for a scrolling lightbox
div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:absolute; }
Basic CSS for a viewport fixed lightbox
div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed; }
Now I believe that most of the common lightboxes make you include their css, or they add it to the DOM on load. If they as you to include a css file then just look for the class that declares the properties of a lightbox and change the position method. otherwise you'll have to add the values to your own css and declare them as important like this.
CSS property marked as important
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed !important; }
as for another kind of lightbox, I haven't seen one so you'll have to explain more in a comment below...
Robert Hurst is correct in theory, but if you like FancyBox, it supports both modes via configuration
If you look at bottom of the http://fancybox.net/howto page, it has an option
centerOnScroll If true, content is centered when user scrolls page
here is an example of how you would invoke it:
jQuery(document).ready(function(){
$('#a').fancybox({
centerOnScroll: false
});
});
edit your lightbox CSS as below
#lightbox {
position: fixed;
}
to center your lightbox popup to the window edit the script as below
top = ($window.height()- YOUR_LIGHT_BOX_HIGHT) / 2;
I'm used Lightbox v2.51 and worked well. the only issue is that yet the background is scrolling while the pop up is fixed and centred.
I appreciate that this is an old question, however, I have seen that the JS gurus at designmodo have implemented a version of this very well:
http://designmodo.com/startup/#component-grid
Take a look at the showLargeImage function within the all.js file.

Categories