Is it possible to pass parameters in JQuery popup box??
there has two file
form.php <--The user will fill in the form like username.
when the form sumbit, it have a JQUERY pop up box to show his username that is the user fill in the form.
THX
My html code
<form method="get" onsubmit="return false;">
First name:<br>
<input name="firstname" type="text"><br>
<br>
<input type="submit" value="Submit" onclick="popupfunctioncall();">
</form>
<div class="popup-container">
<div class="popup-play"></div>
<div class="pop-popup white_content" id="light">
<div class="popup-close">
<span><font size="5">x</font></span>
</div><?php
echo $_GET["firstname"];
?>
</div>
<div class="black_overlay" id="fade"></div>
</div>
MY Css code
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);}
.white_content {
display: none;
position: absolute;
top: 0px;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: 500px;
width: 600px;
background-color: #ffffff;
z-index: 1002;
background-color: #fff;
z-index: 1002;
overflow: auto;
text-align: center;}
.popup-close {
position: absolute;
top: -2px;
right: 7px;}
My Javascript code
function popupfunctioncall(){
$('#light').fadeIn(600);
$('#fade').fadeIn(600);
}
$(document).on('click','.popup-close',function(){
$('#light').fadeOut(600);
$('#fade').fadeOut(600);
});
Please look below example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function popupfunctioncall(){
alert($('#username').val()+"/"+$('#color_name').val() );// you can user your popup here
}
</script>
</head>
<body>
<form>
<input type="text" name="username" id="username">
<input type="text" name="color" id="color_name">
<input type="submit" name="cub" value="submit"onclick="popupfunctioncall()">
</form>
</body>
</html>
First, you better to set an ID to the font tag inside the popup window like this.
<span><font id='content' size="5">x</font></span>
Then you can get the input value and set popup content as follow.
function popupfunctioncall(){
var firstname = $("input[name='firstname']").val();
$('#content').html(firstname);
$('#light').fadeIn(600);
$('#fade').fadeIn(600);
}
Hope this help.
Related
I have input in div and I wanna draw line center and underneath till the point where div ends.Like below.
I couldnt find anything to implement this.So I expect your help.
Here sample fiddle
<html>
<body>
<div style="border:1px solid black;height:200px">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
</div>
</body>
</html>
Try like this:
.lineLabel {
vertical-align: top;
line-height: 1.5em;
}
.line {
position: relative;
height: 100%;
display: inline-block;
}
.line:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
border-right: 1px solid black;
z-index: 0;
}
.line > input {
position: relative;
z-index: 1;
}
<html>
<body>
<div style="border:1px solid black;height:200px">
<label class="lineLabel" for="fname">First name:</label>
<div class="line">
<input type="text" id="fname" name="fname"><br><br>
</div>
</div>
</body>
</html>
The input needs another div around it so that its size can be used to find the centre. A pseudo-element is then used to draw the line.
I am trying to make a search bar that appears by overlapping other elements of the web page. A good example of what I am trying to achieve would be at this Page
As you can see when the search icon is pressed it pops up on the whole screen.
I have tried doing something like this:
<div class="search-overlay">
<body>
<!-- Bootstrap navbar goes here -->
<div class="orange-search">
<form action="search.php" method="post">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</body>
</div>
And the css:
.search-overlay {
width: 100%;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
background-color: rgba(16,37,66,0.9);
}
body {
background-color: #F5F5F5;
color:#F87060;
height:1000px;
/*background-image: url(res/imaage.png);*/
}
.orange-search {
/*this is the search bar inside and I know */
/*the display is hidden but I have jQuery code that changes that*/
display: none;
width:21%;
position: absolute;
left: 39.6%;
top: 48%;
}
When I do that I get an actual background behind all of the other elements.I will be happy with any working way to this.
P.S. Sorry for my very bad English it is not my first language and I am doing my best.
I changed i few things in your css which will allow the search bar to be displayed correctly
Note: <body> tag should be the parent of all DOM elements
See code snippet:
.search-overlay {
position: fixed;
z-index: 99999;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(16, 37, 66, 0.9);
}
body {
background-color: #F5F5F5;
color: #F87060;
height: 100vh;
margin: 0;
/*background-image: url(res/imaage.png);*/
}
.orange-search {
/*this is the search bar inside and I know */
/*the display is hidden but I have jQuery code that changes that*/
width: 21%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="search-overlay">
<!-- Bootstrap navbar goes here -->
<div class="orange-search">
<form action="search.php" method="post">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</body>
My code: https://jsfiddle.net/Metalnoypi/d7ocf929/#&togetherjs=HD16R9BLLF
I'm currently semi-new to javascript/html/css and I'm having trouble of having the main menu page disappear at the click of the start button, and then having the word Test appear as soon as the menu disappears. Any recommendations would be helpful! Also, if possible could you also explain how it works/?
<menu>
<div id="menu">
<body background="">
<divcenter>
<font color="blue"><font size="5"><center><h2> Realm of Rilthalk </h2></center></font></font>
<font color="magenta"><font size="5"><center><h3>The Origin Story</h3></center></font></font>
</divcenter>
<divbottomleft> <input type="button" id="start" class="hide" value = "Start Game"/> </divbottomleft>
<divbottomright><input type="button" id="quit" value = "Quit"/>
</divbottomright>
</body>
</div>
</menu>
<game>
<div id="game" class="toshow" style="display:none" >
<divcenter><font color="jade"><H1><center> Test </center></H1></font>
</divcenter>
</div>
</game>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$(this).parents("menu").hide();
$("game").parents("game").toggle();
});
});
</script>
My CSS Code is:
divcenter {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
divbottomleft {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: -200px;
}
divbottomright{
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: 130px;
}
You have the right idea, though your jQuery just needs some slight modification. It's actually surprisingly simple; all you have to do is hide the menu and show the game itself through the same click function:
$(document).ready(function() {
$(".hide").click(function() {
$("#menu").hide();
$("#game").show();
});
});
divcenter {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
divbottomleft {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: -200px;
}
divbottomright {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<menu>
<div id="menu">
<body background="">
<divcenter>
<font color="blue"><font size="5"><center><h2> Realm of Rilthalk </h2></center></font></font>
<font color="magenta"><font size="5"><center><h3>The Origin Story</h3></center></font></font>
</divcenter>
<divbottomleft>
<input type="button" id="start" class="hide" value="Start Game" /> </divbottomleft>
<divbottomright>
<input type="button" id="quit" value="Quit" />
</divbottomright>
</body>
</div>
</menu>
<game>
<div id="game" class="toshow" style="display:none">
<divcenter><font color="jade"><H1><center> Test </center></H1></font>
</divcenter>
</div>
</game>
I've also created a JSFiddle showcasing this here.
Hope this helps! :)
I would like to add a banner at the top of a website, but without touching the HTML file at all.
Here is the CSS code for the banner:
position: absolute;
top: 0px;
left: 0px;
height: 30px;
width: 100%;
background-color: #5d2c2c;
line-height: 0;
and I also have this code in my CSS file
h2:before{
content:url(https://something.png);
margin-right: 5px;
vertical-align: 10%;
}
h1:after {
content:url(https://smething.png);
float: right;
}
and here is my HTML code which i am not able to touch it:
<head>
<title>A title </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="file.css" />
</head>
<body>
<div id="content">
<h1>header1</h1>
<div id="test">
<h2>header2</h2>
<fieldset>
<legend>About You</legend>
<p id="UserInfo">What is your name?</p>
<div>
<input type="text" name="yourname" size="40" />
</div>
</fieldset>
<div id="footer">
<p>Thank you123</p>
</div>
</div>
</body>
</html>
I tried using ::before in the CSS file for the banner code but the picture before the h2 becomes up with the banner and i cannot separate them !!
Can anyone please help me??!!
I hope this code can help: jsfiddle
h1{
margin-top: 10%;
}
h1:before{
content:"";
position: absolute;
top: 0px;
left: 0px;
height: 30px;
width: 100%;
background-color: #5d2c2c;
line-height: 0;
}
Cat banner:
#content:before {
content: "";
background:url(http://lorempixel.com/800/200/cats) no-repeat;
width: 100%;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
#content{
margin-top:220px;
}
<div id="content">
<h1>header1</h1>
<div id="test">
<h2>header2</h2>
<fieldset>
<legend>About You</legend>
<p id="UserInfo">What is your name?</p>
<div>
<input type="text" name="yourname" size="40" />
</div>
</fieldset>
<div id="footer">
<p>Thank you123</p>
</div>
</div>
</div>
I have written a CSS/HTML code which is supposed to show the images of three cars and when you click on an image, a text box appears and you can write comments about the car into the text box and click on the submit button. I have checked and rechecked my codes and everything seems to be in order. I have saved the codes in the htdocs folder of XAMPP. Now, no PHP is involved in my codes, so I don't need a server to execute the file, but as far as I know, this should not matter. So, I type "localhost/index1.php" into the address bar and press return. What I get, surprisingly, is just the images of the three cars, but no submit button. And when I place my pointer on each car, the individual car image gets bigger (as expected) BUT a textbox does NOT appear. This should not be happening. So I decided to rename my file index1.html and saved it in the htdocs folder as before but STILL the situation persists. Please could someone tell me why I am not getting the textbox to appear when I click on the icon, and why no submit button appears either?
I HAVE NOW ADDED JavaScript to my code, and it's STILL not working!!!
<!DOCTYPE html> <html> <head> <style> body {
background-color: #ADD8E6;
}
#form {
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.car {
float: left;
margin: 2% 2% 5% 2%;
}
.car label img {
transform: scale(0.8);
transition-duration: 0.2s;
}
.car label img:hover {
cursor: pointer;
transform: scale(1);
}
.comment {
position: absolute;
visibility: hidden;
}
.comment input {
width: 128px;
font-size: 1em;
}
.car label img {
width: 128px;
display: block;
}
#button {
position: relative;
left: 66%;
margin: 2%;
visibility: hidden;
}
</style> </head>
<div id="form">
<form method="post" action="#">
<div class="car">
<label for="mercedesbenz">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="mercedesbenz" placeholder="Merc" />
</div>
</div>
<div class="car">
<label for="porche">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="Porche" placeholder="Porc" />
</div>
</div>
<div class="car">
<label for="bmw">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="bmw" placeholder="Beemer" />
</div>
</div>
<input id="button" type="submit" name="submit" value="Submit">
</form>
</div>
<script>
$('.car').click(function() {
$('.comment').css("visibility", "hidden");
$('#button').css("visibility", "hidden");
var id = $(this).children('label').attr('for');
var buttonOffset;
switch(id) {
case 'mercedesbenz':
buttonOffset = '0';
break;
case 'porche':
buttonOffset = '33%';
break;
case 'bmw':
buttonOffset = '66%';
break;
}
$(this).children('.comment').css("visibility", "visible");
$('#button').css("left", buttonOffset);
$('#button').css("visibility", "visible");
});
$('.comment').mouseleave(function() {
setTimeout(function () {
$('.comment').css("visibility", "hidden");
$('#button').css("visibility", "hidden");
}, 500);
});
</script>
</body>
</html>
I think that what you need is JavaScript to handle the click events:
When you click on an image: show the submit button and the comment box.
When you click on the submit button: hide the button and the comment box.
Note: I changed your button from type submit to button so you can see the effect. You should put it back as submit on your side.
// show comment box when clicking on image
$("img").on("click", function() {
$(".comment").css({visibility:"hidden"});
$(".comment." + $(this).parent().attr("for")).css({visibility:"visible"});
$("#button").css({visibility:"visible"});
});
// hide button and comment when submitting
$("#button").on("click", function() {
$(".comment").css({visibility:"hidden"});
$("#button").css({visibility:"hidden"});
});
body {
background-color: #ADD8E6;
}
#form {
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.car {
float: left;
margin: 2% 2% 5% 2%;
}
.car label img {
transform: scale(0.8);
transition-duration: 0.2s;
}
.car label img:hover {
cursor: pointer;
transform: scale(1);
}
.comment {
position: absolute;
visibility:hidden;
}
.comment input {
width: 128px;
font-size: 1em;
}
.car label img {
width: 128px;
display: block;
}
#button {
position: relative;
left: 66%;
margin: 2%;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="form">
<form method="post" action="#">
<div class="car">
<label for="mercedesbenz">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment mercedesbenz">
<input type="text" id="mercedesbenz" placeholder="Merc" />
</div>
</div>
<div class="car">
<label for="porche">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment porche">
<input type="text" id="porche" placeholder="Porc" />
</div>
</div>
<div class="car">
<label for="bmw">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment bmw">
<input type="text" id="bmw" placeholder="Beemer" />
</div>
</div>
<input id="button" type="button" name="submit" value="Submit">
</form>
</div>
.comment {
position: absolute;
}
You have comment boxes hidden
Change your submit button css to:
#button {
position: relative;
left: 66%;
margin: 2%;
}
Thus, here is the complete version:
http://jsfiddle.net/2khqdxtr/1/