I'm having some problems with very simple Lightbox behaviour. I need to modify this script to allow users to click on the overlay to close the form and also having problems with it only sitting in the div and not overlaying the whole screen.
http://jsfiddle.net/techrevolt/jkJ7E/
I also want it to fade in when clicked. I have looked on the net but makes no sense to me - I am new to JS and Jquery so any pointers would be great.
CSS:
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:888888;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
float:left;
}
.white_content {
display: none;
position: absolute;
top: 0%;
left: 25%;
width: 50%;
height: 100%;
padding: 16px;
border: none;
background-color: white;
z-index:999999;
overflow: auto;
float:left;
}
.textright{float: right;}
JS:
$(".showpop").click(function(){
$("#light").show();
$("#fade").show();
});
$(".hidepop").click(function(){
$("#light").hide();
$("#fade").hide();
});
HTML:
<input type="submit" class="button" value="Arrange to see a demo" />
<div id="light" class="white_content">
X
<br />
<br />
<form method="post" action="#">
<div class="row half">
<div class="6u"><input type="text" name="name" placeholder="Name" /></div>
<div class="6u"><input type="text" name="email" placeholder="Email" /></div>
</div>
<div class="row half">
<div class="12u"><textarea name="message" placeholder="Message" rows="6"></textarea></div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="button" value="Send Message" /></li>
</ul>
</div>
</div>
</form>
</div>
<div id="fade" class="black_overlay"></div>
Just extending the rest of the answers a bit
Use fadeIn() and fadeOut() inthis way to achieve the kind of effect you want both for 'close button' and for clicking on overlay
Check the FIDDLE
$(".showpop").click(function(){
$("#light").fadeIn();
$("#fade").fadeIn();
});
$(".hidepop").click(function(){
$("#light").fadeOut();
$("#fade").fadeOut();
});
$(".black_overlay").click(function() { $(this).fadeOut(); $("#light").fadeOut(); });
Use fadeOut and fadeIn. See the attached jsfiddle:
http://jsfiddle.net/R8ULU/
$(".showpop").click(function(){
$("#light").fadeIn();
$("#fade").fadeIn();
});
$(".hidepop").click(function(){
$("#light").fadeOut();
$("#fade").fadeOut();
});
Add this
$(".black_overlay").click(function() { $(this).hide(); $("#light").hide(); });
This will let you to close on click of overlay.
Add these lines at end
$('#fade').click(function(){
$(this).hide();
$("#light").hide();
});
updated fiddle
Related
My actual test website
1.) Click on the hero head image on the top
2.) The dark gray box of the form slides in
3.) Do not fill in the form
4.) Click once on the submit button
5.) Then click on the hero head again
6.) The blue box of the Thank you page slides in
This shouldnt happen this way.
Before adding the PHP functionality of the form, I want to test the onClick submit button (not the hero head) to slide in the blue box Thank you page when form is filled in.
jQuery - I set two classes one for the hero head to slide in the form and one for the Thank you page.
JSFIDDLE does not actually show the blue box instead it goes to 404 error page
<script>
$(".openNav").click(function() {
$('.box').show();
$('.box').toggleClass("slideUp");
});
$(".openNav2").click(function() {
$('.box2').show();
$('.box2').toggleClass("slideUp");
});
</script>
HTML -
<div class="box2 slideUp" style="display: none;">
<div class="info">
<div class="frm-details">
<div class="frm-name">THANK YOU!</div>
<div class="frm-header">I will get back to you ASAP!</div>
</div>
</div>
</div>
**<!-- DARK GRAY BOX SLIDES IN -->**
<div class="box slideUp" style="display: none;">
<div class="info">
<div class="frm-details">
<div class="frm-name">FILL OUT THE FORM</div>
<div class="form-box">
<form>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Full Name</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Email</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Text Number</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Company Name</label>
</div>
<div class="frm-group">
<textarea type="text" rows="6" required></textarea>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Message</label>
</div>
<div class="" id=""><button class="btn-submit" class="openNav2">SEND</button> **<-- CLICK TO SLIDE THE THANK YOU BLUE BOX**
</div>
</form>
</div>
</div>
</div>
</div>
**<!-- HERO HEAD TO CLICK -->**
<div class="img-circle"><img src="imgs/img-christian.png"></div>
CSS -
/* GRAY FORM BOX */
.box {
position: fixed;
width: 288px;
height: 100vh;
background-color: #0b151b;
z-index: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
top: 170px;
text-align: center;
margin: 0 auto;
right: 0;
left: 0;
box-sizing: border-box;
}
.box.slideUp {
height: 0;
}
/* BLUE THANK YOU BOX */
.box2 {
position: fixed;
width: 288px;
height: 100vh;
background-color: #0084ff;
z-index: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
top: 170px;
text-align: center;
margin: 0 auto;
right: 0;
left: 0;
box-sizing: border-box;
}
.box2.slideUp {
height: 0;
}
I am trying to slide through 2 different divs on my page with 2 buttons - next and previous.
it is basically like a setup wizard that you see while installing a software.
so here is the mark up:
<div id="container">
<div id="box1" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
<div id="box2" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
</div>
and here is the JQuery for both buttons:
$('#nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('#prv').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
I am able to do perform the "next" operation but not the "previous" one, there is a mistake with jquery, please help me with that.
you can also have a glance at this fiddle
Thank You
You must not use same ids for multiple elements. Use class attribute instead, see below markup and jquery;
HTML: Change id to class for previous and next buttons
<div id="container">
<div id="box1" class="box">
<button class="nxt">Next</button>
<button class="prv">Previous</button>
</div>
<div id="box2" class="box">
<button class="nxt">Next</button>
<button class="prv">Previous</button>
</div>
</div>
jQuery: make changes in jquery selector for class attribute and keep rest of the code as it is.
$('.nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('.prv').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
JSFiddle Demo
you have just missed .animate({left: '-50%'} in $('#prv').click(function(){}
JSFiddle link
You use same id for buttons in first div and in second div. It is not right and that's the source of problem. Check out this fiddle to see right version.
$('#nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('#prv1').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
background-color: white;
height: 500px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 100px;
margin-left: -25%;
}
#box2 {
left: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="box1" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
<div id="box2" class="box">
<button id="nxt1">Next</button>
<button id="prv1">Previous</button>
</div>
</div>
I tried many different options, none works. The most close to what I want is this following code.
<div>
<header class="w3-container w3-blue">
<h1>My website</h1>
</header>
<input id="surname_input" type="text" class="w3-input" placeholder="Name (required)">
<br/>
<div class="w3-container" style="position: absolute; bottom: 43px; top: 117.4px; left: 0px; right: 0px; overflow-y: scroll;">
<ul id="messages" style="position: absolute; bottom: 0px; z-index: -1;">
</ul>
</div>
<br/>
</div>
<form id="chat_form" style="position: absolute; bottom: 0px; width: 100%">
<textarea id="chat_input"
class="w3-input"
autocomplete="off"
placeholder="Enter text here..."
onkeyup="auto_grow(this)"
style="border-top: 1px solid #808080; height: 43px; overflow-y: hidden;"></textarea>
I can get the scroll working if I change the position from absolute to relative of the <ul> but then it just does not work as expected (the messages spawning just on the top of the input).
I though I made it work but apparently there are issues every way...
Any ideas? Thanks!
here is the link below ... i think it will help you to create this kind of work:
Sample code of chat application
I wanted to design an image uploader. For selecting an image we do this:
<input type="file" />
but I don't want to use that regular input, I have a div and I want that when user clicks on that, file selecting dialog opens and after that everything continues in standard way.
I want to use Angular.js rather than jQuery if possible because my project is under Angular.js
You dont need javascript to do this, please dont look at the inline style
<div style="position: relative; border: 1px solid red; width: 50px; height: 30px; line-height: 30px; text-align: center;" >
Open
<input type="file" style="opacity: 0.0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height:100%;" />
</div>
Note you need to add more crossbrowser opacity lines
see demo http://jsfiddle.net/yp2dykn5/
Edited this seams to be a populair question/answer.
So i updated this answer with the information below including cross browser opacity lines support.
div {
position: relative;
border: 1px solid red;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
}
.file_upload {
opacity: 0.0;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Netscape or and older firefox browsers */
-moz-opacity: 0.0;
/* older Safari browsers */
-khtml-opacity: 0.0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height:100%;
}
<form>
<div>
Open
<input type="file" class="file_upload" />
</div>
</form>
I would give the <input> element the CSS property display: none; Then I would apply whatever styling needed to fit your situation to a <label> element linked to the <input> through the use of the for attribute (link to w3school page). In all browsers I know of, clicking on the <label> of an <input> works the same as clicking on the <input>.
This solution only using CSS and does not use JavaScript. The <label> can be styled in any way that a <div> can be styled.
Edit: I elaborated on my answer since I noticed the complexity of the top answer.
.hide {
display: none;
}
.file_upload {
border: 1px solid red;
padding: 5px;
}
<label for="getFile1" class="file_upload">Open File</label>
<input type="file" id="getFile1" class="hide"/>
My suggestion with Jquery would be to keep a div and an input[type="file"].The input should be made hidden and trigger the click of input using JQuery, like below
HTML
<div id="id">Open</div>
<input id="yourinputname" type="file" name="yourinputname" style="display: none;" />
jQuery
$('#id').on('click', function() {
$('#yourinputname').trigger('click');
});
See the fiddle
My File upload form with bootstrap and fontawesome
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="path/to/fontawesome-all.css" />
</head>
<body>
<form method="post" action="upload.php" enctype="multipart/form-data" >
<div class="card mb-4 shadow-sm p-4">
<h4 class="my-0 font-weight-normal">Upload File</h4>
<div class="card-body">
<h2 class="card-title">
<label style="cursor: pointer;" for="file_upload">
<span class="text-muted fa fa-upload"></span>
</label>
<input type="file" id="file_upload" class="d-none"/>
</h2>
</div>
</div>
</form>
</body>
</html>
If you are using react: (sorry for the hideous indentation, stack would not let me format it correctly)
#getFile {
display: none;
}
<label htmlFor="getFile">
<FontIcon iconName="photo" className="uploadIcon"/>
<input type="file" id="getFile" />
</label>
I am trying to position an overlay over a div. I had the code working successfully when the div was guaranteed to be only one row, but I am struggling to obtain the proper height of the div when it breaks out. It appears that the div reports its single-row height, but displays a multi-line height after rendering.
function InitializeControls() {
console.log("Width: " + $('#PlanViewControls').width());
console.log("Height: " + $('#PlanViewControls').height());
console.log("innerHeight: " + $('#PlanViewControls').innerHeight());
console.log("outerHeight: " + $('#PlanViewControls').outerHeight());
$('#PlanViewControls').show();
$('#PlanViewControlsOverlay')
.stop()
.show()
.css({ opacity: .7 })
.width($('#PlanViewControls').width())
.height($('#PlanViewControls').height())
.offset($('#PlanViewControls').offset())
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
width: 100%;
min-width: 200px;
overflow: hidden;
padding: 5px;
}
#PlanViewControls > div
{
display: inline-block;
min-height: 20px;
}
<div id="PlanViewControlsOverlay">
</div>
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div class="separated" style="padding-top: 3px">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated" style="padding-top: 4px">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated" style="padding-top: 3px">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
Is it possible to obtain these metrics?
I've put your code into this fiddle, changed a part whith errors (what JSLint reported) with working code and put it into .ready() so it would get called.
Look from here, whether it helps. I didn't answered anything directly, but more precise question would help to nail down your problem (:
You don't need JavaScript at all!
Just cut and paste the #PlanViewControlsOverlay into the #PlanViewControls div. This way, you can use a percentual width and height to make it cover the whole area.
What you would do is add these lines of code in your css and getting rid of the display: none;.
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
width: 100%;
height: 100%;
display: block;
}
Here is an example: http://jsfiddle.net/uJrLT/21/