I'm an html noob and I just wanted to know if it's possible to make a text box in which you could type a website and when you click submit it will load the website in the iframe of your choice.
<html>
<head>
<title> Answer </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.frmSubmit').click(function(e)
{
$('#dynFrame').attr('src', $('.frmUrlVal').attr('value'));
e.preventDefault();
});
});
</script>
</head>
<body>
<form>
<input type="text" class="frmUrlVal">
<input type="submit" class="frmSubmit" value="Go">
</form>
<iframe src="http://www.google.com" width="100%" height="400" id="dynFrame"></iframe>
</body>
</html>
<html>
<head>
<script language="JavaScript">
function SendMe()
{
document.all.myframe.src = document.forms[0].txtval.value;
}
</script/>
</head>
<body>
<form name="myform">
<input type="text" name="txtval">
<input type="button" value="Go" onclick="javascript:SendMe()">
<br>
<iframe src="http://www.google.com" width="400" height="200" name="myframe"></iframe>
</form>
</body>
</html>
Related
I am using bootstrap to make my form. I am unable to use bootstrap datetimepicker in my project. Can master page be a problem?
Please help me out here.
Jquery and Sheets:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script type="text/javascript">
$(document).ready(function() {
$(function () {
$("#dp").click(function () {
$('#datetimepicker1').datetimepicker();
})
})
});
</script>
ASPX Code:
<div class="col-md-3">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span id="dp" class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
use var date_input = $('#<%=date.ClientID%>'); and set clientmodeid to static.
I'll be frank, I have little to no experience in asp.net. I've been building a website in Web Forms for a past few weeks. I would like to put a Signature control on a page on this site. I'm using SyncFusion.
I tried to add it to a new web form for testing;
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<%# Register Assembly="Syncfusion.EJ.Web, Version=14.4460.0.15, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ej:Signature ID="Signature1" runat="server"></ej:Signature>
</div>
</form>
</body>
</html>
But all I get is a blank page. What am I doing wrong?
EDIT:
This is the page source in the empty browser;
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="./test.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="a7KupFN2IvhJ2xB1RbT9gIJGuq/sSUKCZso7ZYfDhZZR5c9XFfZfctDoaphqu0eXI/FCiapkZDDbKmONWUwSOmQKYeon2OakrX+JCtQ7AzWaYNkS0W6XPn/XQBIl+5gAepOk5prBxAIOUrIv0L7g5r3+LM7yeET8ztjWzCD5ADZ/Vu9CmgE/1wjB9IylHFpocDDNZu4mUru4RbOR0yPzeuhBBdXxMk2Vi7PIUHJ7Dk8cRKdncxSwSsQlUyAZxcl1ZxbUP/vGdOBcxmx2ReO/AS+VvvDZUlfMq8bLkyMc7UJH+Xl+jyxlRCVLkVWIeC5sdMhqPYgnK8MRmlEkba+Nlk2Bipz6IEpvDXw/j+dEUVu/sKoB2O/CJzryw+Hqk27AG67pYTkVs7PRDyFv0+D2it1m023YGbJJX6FxV8GqNeUpPI/kR66jpkZES2RzwWCw3wfdhDocvBTcPGndETFi2Ed1lwbXYeqUXG+ER6kV/PILZSUhj5c74u8QFaKOUtVRMN0mALPkt5VDfmD9CTaKsoHI8H2zBSXPLche+evxHY8dLVJpE5N2MqyT1ETGj+PEPC5hMKaFRyf1KVopBqbPcbmGE+r2bJ/KXwvddQucuIYJPKBNE3gK0ab30ewSHW0fOaums+7P0hN8btfvSQGkFZwfiKerQq8Okpup7DJTB2WE3WFowT7XqYvmoatuqDt80l3VJQovJ3Mg+sJY0lpTg0eikqto6evySKW12tC9tmevkvvnbpoi4fNlmna/rwcO8Nu/wF/ns91CpC2xVHYDsg0x5dYz9vTHRYxJvbbH5WnqtJ5donHgPoM1UqFbDNve" />
</div>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
typeof EJ_ClientSideOnPostBack == 'function' && EJ_ClientSideOnPostBack();
return true;
}
//]]>
</script>
<div>
<div id="Signature1"></div>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" />
</div>
<script type="text/javascript">
//<![CDATA[
$("#Signature1").ejSignature({"strokeWidth":2,"enabled":true,"height":"400px","backgroundColor":"#ffffff","strokeColor":"#000000","clientId":"Signature1","uniqueId":"Signature1"});
//]]>
</script>
</form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"958d69901e2943e493e9b4da9976b691"}
</script>
<script type="text/javascript" src="http://localhost:55500/690a8379ccf649d289724e7760d89595/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Syncfusion Signature doesn't have any default height or width value. It has the both the height and width as 100% by default.It fits inside the given div. Hence we need to set the height value for the signature.
<div>
<ej:Signature ID="Signature1" height="400px" runat="server"></ej:Signature>
</div>
I want date picker. I don't want time. I am getting an error message like
my html coding is;
<div class="col-md-2 padding-size">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type='text' class="form-control" placeholder="Issue Date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
script code
<link rel="stylesheet" href="css\bootstrap.css">
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\style.css">
<link rel="stylesheet" href="css\font-awesome.min.css">
<link rel="stylesheet" href="css\bootstrap-social.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="js\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
<script src="js\jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
<script type="text/javascript">
$(function ()
{
$('#datetimepicker1').datepicker(
{
});
});
</script>
I cannot get that calandar when i click that textbox or calander addon.
thanks
You can't use .datepicker() it must be .datetimepicker().If you don't want the time just set the format parameter:
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' });
});
</script>
Article for reference - Bootstrap datetimepicker options
You need to do small change. Remove div's id and place that id in input tag with type="text" as shown below
<div class="col-md-2 padding-size">
<div class="form-group">
<div class="input-group date" >
<input type='text' class="form-control" placeholder="Issue Date" id="datetimepicker1"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Then add below script using same id
<script type="text/javascript">
$(function ()
{
$('#datetimepicker1').datepicker(
{
});
});
</script>
Use the below code:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link href="http://cdn.jsdelivr.net/bootstrap.datepicker/0.1/css/datepicker.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/bootstrap.datepicker/0.1/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker(
{viewMode: 'month',
format: 'dd-mm-yyyy'
});
});
</script>
</head>
<body>
<div class="input-append date" id="datepicker" data-date="02-2012">
<input type="text" readonly="readonly" name="date" >
<span class="add-on"><i class="icon-th"></i></span>
</div>
</body>
</html>
Change the date format as you wish by changing the format parameter.
Check out this http://jsfiddle.net/Kz2sW/
I am using kendo ui Mobile ModalView in my aspx page but i am unable to get the required output.On click of button it is showing the same page. I am new to Kendo ui. Please anyone help me.please refer kendo ui mobile modal view and suggest me how to use it in my project.
My code is
<head runat="server">
<title>Untitled Page</title>
<link href="CSS/kendo.common.css" rel="stylesheet" type="text/css" />
<%--<link href="CSS/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />--%>
<link href="CSS/kendo.default.css" rel="stylesheet" type="text/css" />
<link href="CSS/kendo.mobile.all.css" rel="stylesheet" type="text/css" />
<link href="CSS/Example.css" rel="stylesheet" type="text/css" />
<script src="Js/jquery1.7.1.min.js" type="text/javascript"></script>
<script src="CSS/kendo.min.js" type="text/javascript"></script>
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</head>
<body>
<form id="form1" runat="server">
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<img src="../../content/mobile/modalview/lens.png" class="camera-image" /><br />
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-
button">Login</a>
</div>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-
align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li><label for="username">Username:</label> <input type="text" id="username" />
</li>
<li><label for="password">Password:</label> <input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" type="button" data-
role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" type="button" data-
role="button">Register</a>
</div>
</form>
</body>
If you look at the example of the code you have used as starting point # http://demos.kendoui.com/mobile/modalview/index.html - you will find out that position of script tags with calls to Kendo framework are located at the bottom of the body tag, if you place them above the body as is shown in your example code, at that stage there is nothing to execute the script on. You need to move them at the correct place. Alternatively use jQuery ready command and call Kendo scripts from there.
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
Additionally, you can initialize the mobile application on the form, instead of the body, since the Views should be direct descendants of the application element.
Change code as per requirements
<html>
<head runat="server">
<title>Model view sample</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.mobile.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
</head>
<body>
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li>
<label for="username">Username:</label>
<input type="text" id="username" />
</li>
<li>
<label for="password">Password:</label>
<input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" data-role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" data-role="button">Register</a>
</div>
</div>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
This works fine.
Note
1: Model view should always use within <div data-role="view" ...>...</div>
2: Intialize kendo mobile application after document to be ready
(i.e var app = new kendo.mobile.Application(document.body))
i have a .html page
<head>
<title></title>
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<iframe id="EditorFrame" src="UploadTemplates.aspx" frameborder="0" style="height: 551px;
width: 794px"></iframe>
<br />
<p>
<textarea id="TemplateEditor1" cols="50" rows="15">
</textarea>
</p>
<input id="SaveTemplate" type="button" value="Save" />
</div>
</body>
</html>
and i have a server side page called UploadTemplates.aspx which is the src of iframe and the MARKUP of UploadTemplates.aspx page is
<head id="Head1" runat="server">
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<p>
<textarea id="TemplateEditor" cols="50" rows="15" runat="server" class="tinymce">
</textarea>
</p>
</div>
</form>
</body>
</html>
now my question is that how can i get vlaue on my html page of Tiny Editor using jquery which is placed on another page called UploadTemplate.aspx please help
If you got two separate pages you will need to do an ajax request to regulary save the editors content and deliver the saved content back on ajax response,