I have the following mark-up:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="jqueryFancyBox.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<title></title>
</head>
<script type="text/javascript">
$(document).ready(function () {
$.fancybox({
'showCloseButton': true,
'hideOnContentClick': true,
'href': '#popUpAnnouncement',
'centerOnScroll': true
});
});
</script>
<body>
<form id="form1" runat="server">
<div>
<div style="display: none" id="popUpAnnouncement">
close
lalalalala
</div>
<input type="button" id="btn" value="lala" />
</div>
</form>
</body>
</html>
The modal pops up at pageload but after it closes the div is still shown at the top of the page. How do I hide the div, after it's been closed.
Thanks in advance!
Not sure if it has to do with your problem, probably not. But make sure you place the script tag inside head or body, not between them.
You can use the onClosed option:
...
<script type="text/javascript">
$(document).ready(function () {
$.fancybox({
'showCloseButton': true,
'hideOnContentClick': true,
'href': '#popUpAnnouncement',
'centerOnScroll': true,
'onClosed': function(){$('#popUpAnnouncement').hide();}
});
});
</script>
</head>
<body>
....
Related
Below is my design and code where I am trying to redirect to previous page on button click which doesnt work.
<asp:ImageButton ID="btn_back" runat="server" ImageUrl="~/go_back.jpg" OnClientClick="Back()" Height="41px" Width="49px" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel='stylesheet' href='style_demo.css' type='text/css' media='all' />
<style type="text/css">
.auto-style5 {
height: 33px;
}
</style>
<script type="text/javascript">
function Back() {
debugger;
history.go(-2);
return false;
}
</script>
</head>
<body>
Use the following:
history.back();
If your desired page is always your last page you navigate from, you can go back.
window.history.back();
I have copied this code from a website http://www.aspdotnet-suresh.com/2012/04/jquery-dropdownlist-selection-for.html and its not showing me the desired output, I'm Naive at this but the calendar is not visible below the textbox which should as per the code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1970:2012'
});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>
You can also set up calendar by using ajax calendar extender..
<asp:CalendarExtender ID="txtDate_CalendarExtender" runat="server"
Enabled="True" TargetControlID="txtDate" Format="dd/MMM/yyyy">
</asp:CalendarExtender>
As per you First statement you copied the code so check that your application contain js folder or not
Make sure that your website project includes the reference files in your project
css/ui-lightness/jquery-ui-1.8.19.custom.css
js/jquery-1.7.2.min.js
js/jquery-ui-1.8.19.custom.min.js
If not you can download the same from jquery site and include same in your project or provide http path for reference files
I want to use the bootstrap framework along with http://silviomoreto.github.io/bootstrap-select/. it just doesnt work. Below are the codes. Please help.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Final_Year_Project_Allocation_System.silviomoreto_bootstrap_select_d4ec9bd.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link href="bootstrap-select.css" rel="stylesheet" type="text/css" />
<link href="bootstrap-select.css" rel="stylesheet" type="text/css" />
<script src="../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="bootstrap-select.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</form>
</body>
</html>
please help.
I don't see a reference to the actual bootstrap.css ?
You need to have something like (note the order - it's important):
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap-select.css" rel="stylesheet" type="text/css" />
Then the JS
<script src="../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap-select.js" type="text/javascript"></script>
Make sure the path is correct of course.
EDIT
I'm also pretty sure that boostrap.js has a dependency on jquery - so make sure you include it as well (before the bootsrap.js).
EDIT 2
I also suspect that your paths are not correct. If this is the path for your javascript:
"../bootstrap/js/bootstrap.js"
Then most probably the path for your css would be (assuming that you just dropped bootstrap as-is and didn't place it in a different folder):
"../bootstrap/css/bootstrap.css"
I have some .aspx pages with one master pages. I want to give client side validation to all controls on the .aspx pages. For this i am using jquery validation.(ketchup plugins of validation by ashley on papermashup.com tutorials)
It works properly on .aspx page "Without" master page.
But when am using same code & link files on master page then it is not working.
Code without master page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="validation_demo.aspx.cs" Inherits="webpages_validation_demo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery.ketchup.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.validations.basic.js"></script>
<link rel="shortcut icon" href="../../Styles/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../CSS/jquery.ketchup.css" rel="stylesheet" type="text/css" />
<link href="../CSS/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../CSS/style_menu.css" rel="stylesheet" type="text/css" />
<link href="../CSS/Form_style.css" rel="stylesheet" type="text/css" />
<link href="../CSS/StyleSheet2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../image/jquery.js"></script>
<link href="../CSS/modalbox.css" rel="stylesheet" type="text/css" />
<script src="../Js/CommonFunctions.js" type="text/javascript"></script>
<script src="../Js/CommonValidations.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#signup').ketchup();
});
</script>
</head>
<body>
<form action="" runat="server" method="post" id="signup">
<div style="margin-left:300px;margin-top:50px;">
<input type="text" class="validate(required ,number, minlength(10) ,maxlength(10))" name="number" />
</div>
</form>
</body>
</html>
Code with master page:
master page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Master_demo.master.cs" Inherits="webpages_Master_demo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery.ketchup.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.validations.basic.js"></script>
<link rel="shortcut icon" href="../../Styles/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../CSS/jquery.ketchup.css" rel="stylesheet" type="text/css" />
<link href="../CSS/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../CSS/style_menu.css" rel="stylesheet" type="text/css" />
<link href="../CSS/Form_style.css" rel="stylesheet" type="text/css" />
<link href="../CSS/StyleSheet2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../image/jquery.js"></script>
<link href="../CSS/modalbox.css" rel="stylesheet" type="text/css" />
<script src="../Js/CommonFunctions.js" type="text/javascript"></script>
<script src="../Js/CommonValidations.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#signup').ketchup();
});
</script>
</head>
<body>
<form action="" runat="server" method="post" id="signup">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
aspx pge with master page:
<%# Page Title="" Language="C#" MasterPageFile="~/webpages/Master_demo.master" AutoEventWireup="true" CodeFile="demo_validation1.aspx.cs" Inherits="webpages_demo_validation1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(document).ready(function () {
$('#signup').ketchup();
});
</script>
<div style="margin-left:300px;margin-top:50px;">
<input type="text" class="validate(required ,number, minlength(10) ,maxlength(10))" name="number" />
</div>
</asp:Content>
I think you are missing the form element on your masterpage with the ID of signup
-- Update
OK
Change your input to the following
<input type="text" data-validate="validate(required ,number, minlength(10) ,maxlength(10))" name="number" />
Redownload the ketchup plugin here
https://github.com/mustardamus/ketchup-plugin/downloads
and use the following line
<script type="text/javascript" src="js/jquery.ketchup.all.min.js"></script>
instead of
<script type="text/javascript" src="../js/jquery.ketchup.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.validations.basic.js"></script>
This works for me.
why the below javascript code always returns null (mean alert) ?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div>
<telerik:RadComboBox ID="RadComboBox1" runat="server">
</telerik:RadComboBox>
</div>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
var combo = $find("<%= RadComboBox1.ClientID %>");
alert(combo);
</script>
</telerik:RadCodeBlock>
</form>
</body>
</html>
thanks in future advace
best regards
try:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function pageLoad() {
var combo = $find("<%= RadComboBox1.ClientID %>");
alert(combo);
}
</script>
</telerik:RadCodeBlock>
Certain scripts need to run/load first before $find will work.