Here is my code:
Please fill out my form.
<script>
var test = document.getElementById('test');
var win = null;
test.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
win = window.open(test.href, null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
return false;
});
window.addEventListener('click', function(e) {
if(win != null) {
win.close();
win = null;
}
});
</script>
This code works fine, but i need like to display as light box, for example please refer this site, http://fancybox.net/ ,, I am new to javascript, can anyone one help me to do this,
Any help would be appreciated, Thank you.
To start working with javascript, you would need a javascript library API. You must have heard about JQuery, this makes your work easier than regular Javascript codes. JQuery have lots of plugins especially for lightbox gallery that you are looking for. One useful lightbox plugin is Colorbox.
Start by importing the libraries to your header just like below. You also might need some css files for the colorbox themes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="../jquery.colorbox.js"></script>
Then start using colorbox just like below
Please fill out my form.
$(document).ready(function(){
$("#test").click(function(){ //on clicking the link above
$(this).colorbox({ //this would capture the url from the href
width:'500px', //width of the colorbox
height:'auto', //height of the colorbox
initialWidth:'500px', //initial width upon loading
initialHeight:'auto', //initial height upon loading
speed:0, //animation speed
opacity:0.2, //background opacity
overlayClose: true, //close upon clicking anywhere
title:'Your Form Title', //your form title name
onComplete: function(){
//do something when the colorbox loaded completely
}
});
})
});
Take a look on this following example. This is custom light box without any plugin:
Updated Fiddle
jQuery:
var lightBox = $('#lightbox'),
lightBoxContent = $('#lb-content');
var positionLightbox = function() {
var veiwWidth = $(window).width(),
lbContentMargin = (veiwWidth / 2) - 148,
lbContent = $('#lb-content');
lbContent.css({
'left' : lbContentMargin,
'top' : $(window).scrollTop() + 50 + 'px'
});
};
$('#test').click(function(e) {
e.preventDefault();
lightBox.fadeIn(function() {
lightBoxContent.show();
});
positionLightbox();
});
$('#lb-close').click(function() {
lightBox.hide();
lightBoxContent.hide();
});
/*hide click outside*/
$(document).mouseup(function (e)
{
if (!lightBoxContent.is(e.target) // if the target of the click isn't the container...
&& lightBoxContent.has(e.target).length === 0) // ... nor a descendant of the container
{
lightBox.hide();
lightBoxContent.hide();
}
});
CSS:
body {color: #fff; font-family: arial; font-family: arial;}
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
text-align: center;
display: none;
}
#lb-content {
color: #222;
height: 150px;
width: 260px;
border: 16px solid #222;
background-color: #fff;
position: relative;
text-align: center;
padding-top: 10px;
border-radius: 4px;
display: none;
}
#lb-close {
display: block;
height: 22px;
width: 25px;
background-color: red;
color: #fff;
position: absolute;
top: -25px;
right: -25px;
cursor: pointer;
text-align: center;
border-radius: 10px;
}
You can go for jQuery Plugin also:
http://lokeshdhakar.com/projects/lightbox2/
http://dimsemenov.com/plugins/magnific-popup/
http://www.jacklmoore.com/colorbox/
Related
i don't have expirience with js, so i need help.
i found some js scripts, how to show loading gif for all submit buttons and i'm trying to show that gif for one submit button only.
How it looks like:
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
CSS:
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: none;
width: auto;
height: auto;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
it's one to one expample from: http://www.aspsnippets.com/Articles/Display-loading-image-while-PostBack-calls-in-ASPNet.aspx
And i need to use it for this button only:
asp:Button ID="InitDataButton" OnClick="InitData_Click" runat="server" Text="Show" Width="110px" Height="30px"
Okay. I don't know your server side but I checked the reference you provided. So here is another solution. Try move the script from the IsPostBack in Page_Load() to the button click handler for this button. I assume you are using VB, but the idea is the same for C#.
Dim script As String = "$(document).ready(function () { $('[id*=InitDataButton]').click(); });"
ScriptManager.RegisterStartupScript(this, "load", script, True)
Try this:
$( "#InitDataButton" ).submit(function( event ) {
alert( "Handler for .submit() called." );
ShowProgress();
event.preventDefault();
});
And LIVE EVENT is removed from version 1.9 onwards, so better avoid using it.
I have the following code that opens a new popup window while disabling the background, the problem is that I have to position this so that it's 100px from the top (already got that through the CSS #dialog) and also in the center of the screen, no matter what the user's resolution is?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;
filter: alpha(Opacity = 50);
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5
}
#dialog {
display: none;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
position: absolute;
z-index: 100;
background: white;
padding: 2px;
font: 10pt tahoma;
border: 1px solid gray
}
</style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br>[Close]
</div>
Show
</body>
</html>
CSS based solution to center:
You need to use these styles to make it appear dead-center:
position:absolute;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */
So position should be specified. The top and left should be 50%. The margin-left and margin-top should be negative one half of the width and height of the box respectively.
Notice that if you want your popup to appear on center even when page is scrolled you will have to use position:fixed instead with the draw back that it doesn't work in IE6.
Just do this:
.body {
position: relative;
}
.popup {
position: absolute;
max-width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
no matters the screen or popup size. This will center the <div class="popup"></div>.
What you need is called a light-box.
To create it you should modify HTML,CSS and JS code.
Let's say your lightbox consist only of the string "login form". (You can put everything you want there) The HTML code should look like this:
<div id = "loginBox">login form</div>
Now, we need to hide it with CSS:
div#loginBox {
display: none;
}
Now our box is not visible. Lets modify our box as you want it to be 100px from the top:
div#loginBox {
display: none;
top: 100px;
}
We will worry about disabling the background later.
Our next job is to make a button that will display the box when we need it. Easy-peasy:
<div id = "loginBox" >login form</div>
<a id = "displayButton">login</a>
Note that we don't need the "href" attribute, because that will move the screen on clicking and other unwanted behavior.
Let's attach event handler on the button via JS:
var IE = document.all ? true : false; // obligatory "browser sniffing"
function display_box() {
document.getElementsById("loginBox").style.display = "inline-block"; // or "inline"
}
window.onload = function() {
var login_box = document.getElementsById("loginBox");
if (!IE) {
login_box.addEventListener( "click", display_box , false );
}
else {
login_box.attachEvent( "onclick", display_box );
}
}
But you want it to be in the center of the screen? Then the function goes like this:
function display_box() {
var theBox = document.getElementsById("loginBox").style,
left = document.width / 2 - 50; // 150 because it is 300 / 2
theBox.display = "inline-block";
theBox.left = left.toString() + "px";
}
I would guess that you will want to close the window at some point and make the "disabled background" effect. To do so you can create a div class that extends on the whole screen, attach a "display" event on it, put some z-index in the css to be sure the loginBox is over the "disabled background", and attach a "close the loginBox" event on the "background" div. And now the final code looks like this:
Note that we care only about the placement of the login-button, because the other are hidden from view, and then modified by JS:
HTML:
<div id = "loginBox" >login</div>
<a id = "displayButton">login</a>
<div id = "backgroundDarkener"> </div>
CSS:
div#loginBox {
display: none;
top: 100px;
width: 300px; #it is important to know the width of the box, to center it correctly
z-index: 2;
}
div#backgroundDarkener {
background: #000;
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.8;
# needless to say, you should play with opacity or if you want your
# css to validate - background image (because I suspect it won't
# validate for old versions of IE, Safari, etc.) This is just a suggestion
}
JS:
var IE = document.all ? true : false; // obligatory "browser sniffing"
function display_box() {
var theBox = document.getElementsById("loginBox").style,
background = document.getElementsById("loginBox").style,
left = document.width / 2 - 150; // 150 is 300 / 2
theBox.display = "inline-block";
theBox.left = left.toString() + "px";
background.display = "inline-block";
}
function hide_box() {
document.getElementsById("loginBox").style.display = "none";
document.getElementsById("backgroundDarkener").style.display = "none";
}
window.onload = function() {
var login_box = document.getElementsById("loginBox"),
background = document.getElementsById("backgroundDarkener");
if (!IE) {
login_box.addEventListener( "click", display_box , false );
background.addEventListener( "click", hide_box , false );
}
else {
login_box.attachEvent( "onclick", display_box );
background.attachEvent( "onclick", hide_box );
}
}
A quick Google search found this;
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
This is where flexbox comes rescue now!
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
You need to use these styles to make div center:
width:500px;
left:0;
right:0;
margin:0 auto;
Simple, margin: 100px auto;. There's no need to do calculations in JavaScript.
Live Example
I have 2 <div>s with ids A and B. div A has a fixed width, which is taken as a sidebar.
The layout looks like diagram below:
The styling is like below:
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
}
I have <a id="toggle">toggle</a> which acts as a toggle button. On the toggle button click, the sidebar may hide to the left and div B should stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and div B should shrink back to the previous width.
How can I get this done using jQuery?
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Check working example at http://jsfiddle.net/hThGb/1/
You can also see any animated version at http://jsfiddle.net/hThGb/2/
See this fiddle for a preview and check the documentation for jquerys toggle and animate methods.
$('#toggle').toggle(function(){
$('#A').animate({width:0});
$('#B').animate({left:0});
},function(){
$('#A').animate({width:200});
$('#B').animate({left:200});
});
Basically you animate on the properties that sets the layout.
A more advanced version:
$('#toggle').toggle(function(){
$('#A').stop(true).animate({width:0});
$('#B').stop(true).animate({left:0});
},function(){
$('#A').stop(true).animate({width:200});
$('#B').stop(true).animate({left:200});
})
This stops the previous animation, clears animation queue and begins the new animation.
You can visit w3school for the solution on this the link is here and there is another example also available that might surely help,
Take a look
The following will work with new versions of jQuery.
$(window).on('load', function(){
var toggle = false;
$('button').click(function() {
toggle = !toggle;
if(toggle){
$('#B').animate({left: 0});
}
else{
$('#B').animate({left: 200});
}
});
});
Using Javascript
var side = document.querySelector("#side");
var main = document.querySelector("#main");
var togg = document.querySelector("#toogle");
var width = window.innerWidth;
window.document.addEventListener("click", function() {
if (side.clientWidth == 0) {
// alert(side.clientWidth);
side.style.width = "200px";
main.style.marginLeft = "200px";
main.style.width = (width - 200) + "px";
togg.innerHTML = "Min";
} else {
// alert(side.clientWidth);
side.style.width = "0";
main.style.marginLeft = "0";
main.style.width = width + "px";
togg.innerHTML = "Max";
}
}, false);
button {
width: 100px;
position: relative;
display: block;
}
div {
position: absolute;
left: 0;
border: 3px solid #73AD21;
display: inline-block;
transition: 0.5s;
}
#side {
left: 0;
width: 0px;
background-color: red;
}
#main {
width: 100%;
background-color: white;
}
<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>
$('#toggle').click(function() {
$('#B').toggleClass('extended-panel');
$('#A').toggle(/** specify a time here for an animation */);
});
and in the CSS:
.extended-panel {
left: 0px !important;
}
$(document).ready(function () {
$(".trigger").click(function () {
$("#sidebar").toggle("fast");
$("#sidebar").toggleClass("active");
return false;
});
});
<div>
<a class="trigger" href="#">
<img id="icon-menu" alt='menu' height='50' src="Images/Push Pin.png" width='50' />
</a>
</div>
<div id="sidebar">
</div>
Instead #sidebar give the id of ur div.
This help to hide and show the sidebar, and the content take place of the empty space left by the sidebar.
<div id="A">Sidebar</div>
<div id="B"><button>toggle</button>
Content here: Bla, bla, bla
</div>
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('slow');
$('#B').toggleClass('extended-panel');
});
});
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
background:orange;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
background:green;
}
/* makes the content take place of the SIDEBAR
which is empty when is hided */
.extended-panel {
left: 0px !important;
}
I want to scroll 2 divs when I start the page. I add to the onload the events, but it stops here:
var cross_marquee=document.getElementById(marque)
cross_marquee.style.top=0
Can someone help me?
The code is:
var delayb4scroll=2000
var marqueespeed=1
var pauseit=0
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
var actualheightDiv2=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.sty le.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+ "px"
}
function initializemarquee(marque, container){
var cross_marquee=document.getElementById(marque)
cross_marquee.style.top=0
marqueeheight=document.getElementById(container).o ffsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()" ,30)', delayb4scroll)
}
window.onload=initializemarquee('wtvmarquee', 'wtmarqueecontainer')
window.onload=initializemarquee("wtvmarqueeDiv2", "wtmarqueecontainerDiv2")
You're overwriting the onload event.
Create a function that initializes both marquees:
window.onload = function(e)
{
initializemarquee('wtvmarquee', 'wtmarqueecontainer');
initializemarquee("wtvmarqueeDiv2", "wtmarqueecontainerDiv2");
}
Additionally, shouldn't be cross_marquee.style.top="0px" ?
Just found another code and modified it to my situation, and its working :)
Tks for the help joel ;)
<style type="text/css">
.scrollBox {
/* The box displaying the scrolling content */
position: absolute;
top: 30px;
left: 200px;
width: 180px;
height: 200px;
border: 1px dashed #aaaaaa;
overflow: hidden;
}
.scrollTxt {
/* the box that actually contains our content */
font: normal 12px sans-serif;
position: relative;
top: 200px;
}
.scrollBox2 {
/* The box displaying the scrolling content */
position: absolute;
top: 300px;
left: 200px;
width: 180px;
height: 200px;
border: 1px dashed #aaaaaa;
overflow: hidden;
}
.scrollTxt2 {
/* the box that actually contains our content */
font: normal 12px sans-serif;
position: relative;
top: 470px;
}
</style>
<script type="text/javascript">
var scrollSpeed =1; // number of pixels to change every frame
var scrollDepth =200; // height of your display box
var scrollHeight=0; // this will hold the height of your content
var scrollDelay=38; // delay between movements.
var scrollPos=scrollDepth; // current scroll position
var scrollMov=scrollSpeed; // for stop&start of scroll
var scrollPos2=scrollDepth; // current scroll position
var scrollMov2=scrollSpeed; // for stop&start of scroll
function doScroll() {
if(scrollHeight==0) { getHeight(); }
scrollPos-=scrollMov;
if(scrollPos< (0-scrollHeight)) { scrollPos=scrollDepth; }
document.getElementById('scrollTxt').style.top=scrollPos+'px';
setTimeout('doScroll();', scrollDelay);
}
function getHeight() {
scrollHeight=document.getElementById('scrollTxt').offsetHeight;
}
function doScroll2() {
if(scrollHeight==0) { getHeight2(); }
scrollPos2 -= scrollMov2;
if(scrollPos2< (0-scrollHeight)) { scrollPos2=scrollDepth; }
document.getElementById('scrollTxt2').style.top=scrollPos2 +'px';
setTimeout('doScroll2();', scrollDelay);
}
function getHeight2() {
scrollHeight=document.getElementById('scrollTxt2').offsetHeight;
}
window.onload = function(e)
{
doScroll();
doScroll2();
}
</script>
I need to replace our Ajax Modal Popup controls with a JavaScript equivalent. We use this as a simple context sensitive help type popup. I did a quick browse but didn't see quite what I was looking for. I just need some text and a simple Close button/link, but I would like the page darkened below the popup, as it does with the Ajax modal control.
Can anyone suggest a nice JavaScript popup/help type solution that you've used?
I can provide you the code. Do your modifications as necessary, OK?
Page JavaScript:
function myPop() {
this.square = null;
this.overdiv = null;
this.popOut = function(msgtxt) {
//filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
this.overdiv = document.createElement("div");
this.overdiv.className = "overdiv";
this.square = document.createElement("div");
this.square.className = "square";
this.square.Code = this;
var msg = document.createElement("div");
msg.className = "msg";
msg.innerHTML = msgtxt;
this.square.appendChild(msg);
var closebtn = document.createElement("button");
closebtn.onclick = function() {
this.parentNode.Code.popIn();
}
closebtn.innerHTML = "Close";
this.square.appendChild(closebtn);
document.body.appendChild(this.overdiv);
document.body.appendChild(this.square);
}
this.popIn = function() {
if (this.square != null) {
document.body.removeChild(this.square);
this.square = null;
}
if (this.overdiv != null) {
document.body.removeChild(this.overdiv);
this.overdiv = null;
}
}
}
Now the HTML page, using the JavaScript file:
<html>
<head>
<script type="text/javascript" src="NAME OF THE PAGE!.js"></script>
<style>
div.overdiv { filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
background-color: #c0c0c0;
position: absolute;
top: 0px;
left: 0px;
width: 100%; height: 100%; }
div.square { position: absolute;
top: 200px;
left: 200px;
background-color: Menu;
border: #f9f9f9;
height: 200px;
width: 300px; }
div.square div.msg { color: #3e6bc2;
font-size: 15px;
padding: 15px; }
</style>
</head>
<body>
<div style="background-color: red; width: 200px; height: 300px;
padding: 20px; margin: 20px;"></div>
<script type="text/javascript">
var pop = new myPop();
pop.popOut("Jose leal");
</script>
</body>
</html>
Hope that this can help.
I've used the simplemodal jQuery plugin and I've been quite happy with it. You can check it out here.
Maybe you are looking for something like this? [ui.jquery.com]
It's the simplest one, and can come bundled with a lot of other eye candy. Of course you could also look around the rest of the jQuery plug-ins page, specially the Windows and Overlays section.
I developed a javascript library called Msg. It allows to easily create a modal window / popup. It creates an overlay behind it that darkens the background. It has no close button but it can be closed by clicking the background overlay.