In my asp page, i want to show a popup window whenever user clicks the button.The popup window contains one text box and submit button for getting the filepath from the user.
for example : i want a popup like this in stackoverflow site...
Please hele me to get this...
Here is a EDITED:demo.Customize it to suit your needs.Let me know if need further help.
I have added a link which will display the popup on click.
After that the popup div is the actual popup , the popup div contains another div , just to hold the contents , in this case textbox and buttons.Here is the Html part.
<a id="popuplink" href="#">Click Me</a>
<div id="popup">
<div id="content">
<input type="text"/><input type="Button" value="Browse..."/>
<input id="popupclose" type="Button" value="Close"/>
</div>
</div>
Here is CSS:
#popup
{
display:none;
position:fixed;
width:250px;
height: 150px;
top: 50%;
left: 50%;
margin-left:-155px;
margin-top:-110px;
border:5px solid red;
background-color:#DEDFDE;
padding:30px;
z-index:102;
font-family:Verdana;
font-size:10pt;
border-radius:10px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
font-weight:bold;
}
#content
{
height:auto;
width:250px;
margin:60px auto;
}
#popupclose
{
margin:35px 0 0 80px;
width:50px;
}
EDIT:
To get the value of the textbox check This demo
To call the javascript function on click of Asp.Net Button , try doing something like this.
Create a function which will show the popup.
function ShowPopUp()
{
$('#popup').show("slow");
}
And on button click try this,
ClientScript.RegisterStartupScript(GetType(), "popup", "ShowPopUp()", true);
Additional Information MSDN
If I understand you correctly you want to use window.open, here's some info: https://developer.mozilla.org/en/DOM/window.open
Do you need something like this (this is a crude example as I don"t know the name of your page, etc, etc...):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function open_win() {
window.open("mypage.html");
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>
</html>
However I'd advise doing this in an unobtrusive manner.
Related
I want the screen to scroll down to the div. This div has an ID of 'weather-data'
I have tried the following;
document.getElementById('weather-data').scrollIntoView();
I have also tried using anchor tags this did not seem to work
The button which the user will click:
<button id="submit" onclick="myFunction()">
Submit
</button>
The function that runs when the button is clicked:
function myFunction(){
cityName();
getData();
clear();
document.getElementById('weather-data').scrollIntoView();
}
This is the div I want the screen to scroll to:
<div id="weather-data">
</div>
use the anchor tag to link the the div
body{
margin: 0;
}
div{
height: 100vh;
border: 1px solid black;
}
<html>
<body>
<div id='a'>a</div>
<div id='b'>b</div>
<div id='c'>c</div>
<div id='d'>d</div>
<div id='e'>e</div>
<button><a href='#c'>go to c</a></button>
</body>
</html>
I fixed the issue I had to write an if statement to check if there was any text in the h1 element.
if(weatherMain != null){
document.getElementById('icon').scrollIntoView();
document.getElementById('weather-main').scrollIntoView();
}
Been trying to make a button which opens a div containing another html page. I had the button working but the main page was opening with the div shown already, I needed it hidden. After messing it all up I'm stuck on this. The button doesn't work.
html
<p>Press the button</p>
<button id="button1" onClick="show()">Show / Hide</button>
<div id="Ahover">
<object type="text/html" data="http://validator.w3.org/"></object>
</div>
css
#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px;
}
js
$('#button1').click(function(){
$('#Ahover').toggle()
});
Fiddle
Any help, what I'm I doing wrong? And is this even possible.
Thanks, got it working in the end by moving the script into tag.
Try This code:
HTML:
<p>Press the button</p><button id="button1">Show / Hide</button>
<div id="Ahover">
<object type="text/html" data="http://validator.w3.org/" >
</object></div>
CSS:
#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px;
display:inline-block
}
JS:
$('#button1').on('click',function(e){
$('#Ahover').toggle();
});
Demo is here:
https://jsfiddle.net/Dee0565/aaqfykz3/2/
html:
<p>Press the button</p><button id="button1" >Show / Hide</button>
<div id="Ahover"></div>
js:
$('#button1').click(function(){
$('#Ahover').toggle();
$("#Ahover").html('<object data="http://validator.w3.org/" />');
});
css:
div {
height: 100%;
}
object {
width: 100%;
min-height: 100%;
}
js fiddle: http://jsfiddle.net/SsJsL/
Check out the working demo here - http://jsfiddle.net/x2qjdfwk/
The only change is to remove the show() function from the button as you are already applying the jQuery click event to it.
<p>Press the button</p><button id="button1">Show / Hide</button>
And make sure you include the jQuery library.
I created a comment button.
I want that when the user click on the button a model window will open. The model window should contain a keyboard for writing the comment.
This might help you a little bit. We can't code an entire keyboard for you.
HTML:
<input type="button" value="Show the keyboard!"> <!-- the button -->
<div id="wrapper"> <!-- the keyboard -->
<!-- type your code here, make sure that it's css is like the textarea below, display:none;. Then copy-paste the jquery line which says 'textarea', and change 'textarea' to whatever element you added. -->
<textarea></textarea>
</div>
CSS:
#wrapper {
position:relative;
margin-top:30px;
background-color:#CCC;
width:400px;
height:0px;
}
textarea {
display:none;
margin:0 auto;
width:200px;
height:160px;
}
jQuery:
$(document).ready(function() {
$('input').click(function() { // when the button is clicked...
$('#wrapper').animate({ height: '+=200px'},100);
// ...increase the height of the wrapper by 200px
$('textarea').css({ 'display': 'block'});
// ...make sure that the textarea is visible
})
});
Link to JSFiddle: http://jsfiddle.net/16fuhf6r/3/
Comments with code explanation are included.
I'm trying to open 2 reports through one button to make our process a little bit quicker. Everything works fine as soon if i only put one link in the "onclick" event but as soon as i put both of them in only one them opens.
This is what i tried.
<script type="text/javascript">
function itsa()
{
window.location.href='http://*******/****/******/*****/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={*******************}&View={**********************}&CacheControl=1';
}
function other()
{
window.location.href='http://*******/****/******/*****/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={*******************}&View={**********************}&CacheControl=1';
}
</script>
<div class="wrapper">
<input type="button" style="width:180px; height: 75px; background:gray; color:white;font-size:larger; font-weight:bold; left: 214px;"onclick="itsa();other();" value ="Generate Excel report"/>
</div>
and i also tried
<div class="wrapper">
<input type="button" style="width:180px; height: 75px; background:gray; color:white;font-size:larger; font-weight:bold; left: 214px;"onclick=" window.location.href='http://*******/****/******/*****/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={*******************}&View={**********************}&CacheControl=1'; window.location.href='http://*******/****/******/*****/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={*******************}&View={**********************}&CacheControl=1';" value ="Generate Excel report"/>
</div>
Any ideas?
Thank you.
You need to open up each report in a popup. Use window.open("URL") instead of window.location.href to do so.
I have a html/JavaScript project that i am working on and i am encountering problems.
I am making a sign-up form for an email newsletter and i have it in a div element in the middle of a page like so:
(i know, its structure is really messed up but i am just playing around right now.)
<div id="overlay"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center><div id="nothin" class="form">Sign Up For Our Newsletter<br><br>
<table><TD width="50%" valign="middle"><img class="round"src="picture1.jpg" height="150" width="250"></td><td width="5%"></td><td width="40%" valign="middle"><form>
<input type="text" class="round"required id="name" width="190"><br><br>
<input type="email" class="round"required id="email" width="190"><br><br>
<input id="submit"type="submit" class="button"value="Submit Your Email" onclick="success()"><br>
</form></td></table></div></center></div>
The problem i have is i made the script below so when you submit you get a success message and a button that should close down the div, leaving the webpage:
<script>
function success()
{
document.getElementById("nothin").innerHTML="<div id='form2'>Success!<br><br>Thank You!<br> You have successfully signed up for the Our newsletter!<br><button onclick='hide()' class='button'>Continue</button></div>";
}
</script>
When you click on the button "continue" it should run the function "hide()":
<script>
function hide()
{
document.getElementById("overlay").innerHTML="";
}
</script>
My problem is that when the "continue" button is clicked, it only closes <div id="nothin>
not "overlay" like it should. Do you have any idea why? Should i use some other method to close it?
Here is the CSS for the form, it wont work that well without it:
<style>
#overlay {
z-index: 16777271;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.form, .form2{
background-color:white;
color:black;
width:500;
height:250;
align:center;
border-radius: 40px;
border:dashed darkgreen;
}
.round{
border-radius:8px;
}
.button{
background-color:green;
border-color:green;
border-radius:45px;
height: 40px;
width:190px;
}
.BUTTON:HOVER{
background-color:darkgreen;
border-color:darkgreen;
border-radius:45px;
}
</style>
In the hide() function you are making the contents of "#overlay" element empty while element itself, remains.
One solution can be hiding the element.
This should work -
function hide(){
document.getElementById("overlay").style.visibility = 'hidden';
/*
//or setting the display to none
document.getElementById("overlay").style.display = 'none';
*/
}
Suppose you have a html code like
<div id ='parentWow'>
<div id='ChildHello'>
Some Content
<div>
</div>
If you want to remove the child of id "ChildHello" from the parent, instead of just making their visibility "hidden", you can use the following javascript
document.getElementById("ChildHello").parentNode.removeChild(document.getElementById("ChildHello"))
This helps... (y)