If you make a WinForms app and add a WebBrowser control and navigate to this page:
http://www.llrx.com/features/deepweb2010.htm
The application will stop responding. IE, Chrome and Mozilla won't. Any idea of "what am I doing wrong"?
The lines of CSS below are freaking it out:
/* MSIE PC */
#logo a { background-image: expression(this.runtimeStyle.backgroundImage = "none", this.innerHTML = '<img src="http://www.llrx.com/themes/llrx/images/logo.gif" border="0" alt="' + this.innerHTML + '">'); }
#tagline a { background-image: expression(this.runtimeStyle.backgroundImage = "none", this.innerHTML = '<img src="http://www.llrx.com/themes/llrx/images/h2.gif" border="0" alt="' + this.innerHTML + '">'); }
You're assigning a node's innerHTML to an image's ALT attribute but the innerHTML contains unescaped HTML so you end creating some very funky HTML like:
<img alt="<img alt="<img alt="<img alt="
A screenshot might show better:
He's right.
WebBrowser wb = new WebBrowser();
wb.Parent = this;
wb.Visible = true;
wb.Navigate("C:\Test.html");
With the smallest form of the html:
<!DOCTYPE html>
<html>
<head>
<base href="http://www.llrx.com/" />
<style type="text/css" media="all">#import "/themes/llrx/style.css"; #beta2fix a:hover {color: #000;}</style>
</head>
<body>
<div>
<h1 id="logo">Test</h1>
</div>
</body>
</html>
Be damned if i know why (yet).
Related
I have one page called Page1 which have a button.
<button onclick="redirecttodivofotherpage(); "></button>
The other Page2 have 3 Div
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
I want to redirect to div3 on button click of Page1 button.
How to do it with controller or jquery.
You could try something like this:
<button class="js-btn"></button>
$(function(){
$(".js-btn").on("click",function(){
window.location = "..../#div3";
});
})
The string "..../#div3" represent the relative url of your page and at the end has a #div3. This way, using window.location, you would be redirected to the page you want and using #div3 to the section you want.
This can be done with cookies. Setting a cookie with id you want to scroll, and then, when the new page is loaded, read the cookie and scroll to defined id. I used the very popular plugin jquery-cookie.
Check this sample solution Note: Click on Events to nav to the other page.
**http://plnkr.co/edit/hBJj69nP6kvrEuoCVw3k?p=preview**
try this working demo, that will work
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button class="click">Click Me</button>
<div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;">
hello anuradh
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".click").on('click',function(){
window.location = "#mydiv";
});
});
</script>
</body>
</html>
or else you can scroll it nicely like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button class="click">Click Me</button>
<div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;">
hello anuradh
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".click").on('click',function(){
//window.location = "#mydiv";
$('html, body').animate({
scrollTop: $("#mydiv").offset().top
}, 2000);
});
});
</script>
</body>
</html>
Use a window.location.hash to scroll to the element with the id
<button class="js-btn"></button>
$(function(){
$(".js-btn").on("click",function(){
window.location.hash = "#div3";
});
});
Try this, it works for me:
<a class="className">link</a>
$(".className").on("click", function () {
window.location = "yourPage.html#divId";
});
I am trying to print one gridview . For that I gave a button and on button click I call javascript for printing tha grid.
function doPrint() {
var prtContent = document.getElementById('<%= grdHistoricalData.ClientID %>');
prtContent.border = 0; //set no border here
var WinPrint = window.open('', '', 'left=50,top=100,border=1px,width=1000,textAlign=center,height=1000,toolbar=0,scrollbars=1,status=0,resizable=1');
WinPrint.document.write(prtContent.outerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
This code is working fine but only thing is that print preview of gridview data is displaying left align.Normally Girdview Data is showing center align but when we print data shows in left align.
Gridview normal appearance
Print Preview of Gridview
Please help to do center align in print preview of Gridview.
There are several solutions I use in different circumstances.
1) external file. Load a small file to a iframe and call for data from parent.
<!--print.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Printer version</title>
<script type="text/javascript">
window.onload = function () {
var a = this.parent.getContent();
document.body.innerHTML = a;
}
function printMe() {
window.print();
}
</script>
<link href="/Styles/print.css" media="print" rel="stylesheet" />
</head>
<body>
</body>
</html>
Parent document.
<div id="divPrint" style="display:none;">
<div class="popup">
<div style="overflow:hidden;">Printer Version
<div style="float:right;">
<input type="button" ID="btnPrnClose" value="X" onclick="return closePrint()" />
</div>
</div>
<iframe id="frPrint" style="width:100%;"></iframe>
</div>
</div>
</div>
<script type="text/javascript">
function getContent() {
return '<div>' +
'<div class="right no-print" onclick="printMe();" style="cursor: pointer;" title="Print"> \
<img alt="Print" src="/images/printer.png" /></div>' + document.getElementById('gvOuterContainer').innerHTML+ '</div>';
}
function closePrint() {
document.getElementById('divPrint').style.display = 'none';
}
function PrintMessage() {
document.getElementById('divPrint').style.display = '';
document.getElementById('frPrint').src = "print.html?a=" + Math.random();//force no-cache
return false;
}
</script>
2) Print from the page.
<style type="text/css" media="print">
*
{
border: none!important;
}
.noprint,.popup
{
display: none!important;
}
#scrollContainer
{
width: auto!important;
}
.pop-show
{
display: table!important;
left: 0;
margin-left: 0;
top: 0;
width: 100%!important;
z-index: 100;
}
/* and so on */
</style>
Details may differ.
Finally got answer , I need to set gridview property that resolve this issue
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
I am intending to show a Div with loading image during page post-backs to inform the user about a runing operation. I am using a simple javascript function that shows the div, when I call this JavaScript from an html input button (without postback), the div is appearing normally. But when I use it with a post-back button, (by setting its OnClientClick property), the div is appearing, but without the image unloaded (showing as a box with unloaded image). I am not able to figure where the problem is, I even tried adding the image as a hidden html control so that it is preloaded before the post-back, but with no prevail. Here is my aspx code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function PleaseWait(message) {
message = message ? message : PleaseWaitDefaultMessage;
var dsoctop = document.all ? window.document.body.scrollTop : window.pageYOffset;
var el = document.getElementById("PleaseWaitDiv");
el.style.top = (dsoctop + 100) + "px";
el.style.left = "0px";
el.innerHTML = "<div style='background-color:white;border: solid 0px black; width:100%;'><img src='" + WebSiteBaseURL + "Images/bigrotation2.gif' /><h3>" + message + "</h3></div>";
el.style.display = "";
}
</script>
<asp:Literal ID="InitLiteral" runat="server" EnableViewState="false"><script>var PleaseWaitDefaultMessage = "{0}"; var WebSiteBaseURL = "{1}"; </script>
</asp:Literal>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="PleaseWaitDiv" style="width: 100%; position: absolute; top: 0px; display: none;
text-align: center; z-index: 2; max-width: 1024px; min-width: 600px; height: 260px;
overflow: hidden; background: #fff; margin: 0 auto; left: 0; right: 0;">
</div>
<asp:Button ID="btnTestPleaseWait" runat="server" OnClientClick="PleaseWait();"
Text="Test Please wait with postback" onclick="btnTestPleaseWait_Click"
/>
<input type="button" onclick="PleaseWait();" value="Test Please wait no postback" />
</div>
</form>
</body>
</html>
and here is my code behind:
protected void Page_Load(object sender, EventArgs e)
{
InitLiteral.Text = string.Format(InitLiteral.Text, "Please Wait.....", Page.ResolveClientUrl("~/"));
}
protected void btnTestPleaseWait_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
I had same problem. I solved it by loading same image in another img tag with style="dispaly:none" attribute. (Don't do visible="false")
Img tag with display:none forces browser to load image when page is loaded.
I think the problem occurs because POST request gets sent before loading div comes into existence, therefore the GET request for IMG is sent immediately AFTER POST request is sent, and because server is busy processing POST request it takes time to respond because of which browser fails to display the image.
Hope this helps!
I am using slayeroffice's custom alert box, slayeroffice(period)com/code/custom_alert/. (Can't post more than two links) On my browser it shows up like this. The alert box is the blue one in the middle of the screen.
http://i.stack.imgur.com/u1TEz.png
On my local it shows up like this, I highlighted the alert box. I wish i could image link this.
It works on the same version version of browser but one of them is on local.
http://i.stack.imgur.com/0xehV.png
What am I doing wrong?
Here's my code integrated with slayeroffice's code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="Test1" %>
<%# Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!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>Untitled Page</title>
</head>
<body>
<script type="text/javascript">
function showPopUp(){
setTimeout(function() {alert("Warning");}, 5000);
}
function delayer(){
showPopUp();
}
// constants to define the title of the alert and button text.
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt); //overrides alert method
}
}
function createCustomAlert(txt) {
// shortcut reference to the document object
d = document;
// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;
// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";
// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(false) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { removeCustomAlert();return false; }
}
// removes the custom alert from the DOM
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
</script>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="delayer();return false;" />
</form>
</body>
</html>
You are missing the styles:
<style type="text/css">
#modalContainer {
background-color:transparent;
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}
#alertBox {
position:relative;
width:300px;
min-height:100px;
margin-top:50px;
border:2px solid #000;
background-color:#F2F5F6;
background-image:url(alert.png);
background-repeat:no-repeat;
background-position:20px 30px;
}
#modalContainer > #alertBox {
position:fixed;
}
#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:#78919B;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
}
#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:3px;
border:2px solid #000;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#78919B;
text-decoration:none;
}
</style>
I've been working on an usercontrol with a jquery timer in it. At first I had the jquery within the usercontrol. But when I add 2 of those controls to my page the second usercontrol isn't showing it's data very well.
Now I've put the jquery into the mainpage and the usercontrol only uses the id's of the jquery.
Here is my usercontrol:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"
Inherits="WebUserControl" %>
<style type="text/css">
#mainpanel
{
width: 145px;
height: 123px;
}
</style>
<div id="mainpanel">
<div>
test</div>
<div id="shortly" style="background-color: #FFFFFF">
</div>
<button id="resetButton">
Reset
</button>
</div>
Mainpage:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>
<!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>hoi</title>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<link href="Css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.countdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
$("#mainpanel");
});
shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
$('#shortly').countdown({ until: shortly,
onExpiry: liftOff, layout: '{sn}',
});
$('#resetButton').click(function () {
$('#mainpanel').effect("highlight", {}, 700 );
$('#shortly').effect("highlight", {}, 700 );
shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
$('#shortly').countdown('change', { until: shortly });
});
function liftOff() {
// refresh the page
window.location = window.location;
}
});
</script>
</head>
<body>
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
<uc1:WebUserControl ID="WebUserControl2" runat="server" />
</body>
</html>
But still my usercontrols are acting weird, now my question is: "How can I make the SAME usercontrols work properly on ONE page?"
Both of those use the same jquery code but the buttons etc. should only work within the usercontrol itself.
As David suggests, seeing as you are repeating the user controls and you are explicitly setting their id, you will end up with several controls that share the same id on the page. I imagine that $("#someid") will return the first element in the page and not necessarily the one you really wanted.
David is suggesting adding CSS classes to the elements in your user control (this has nothing to do with jQuery - although the jQuery you write will refer to them).
For example
<%# Control Language="C#" %>
<div class="mainpanel">
<div>
test
</div>
<div class="shortly">
??
</div>
<button class="resetButton">
Reset
</button>
</div>
[PS. note that you should probably remove your CSS from your user control as repeating each time the control appears on the page is bad practise e.g. include this either in your main page or a separate CSS file]
<style type="text/css">
#mainpanel
{
width: 145px;
height: 123px;
}
#shortly
{
background-color: #FFFFFF
}
</style>
Your script can then be something like
$(function () {
// function that does something exciting?
var liftOff = function() {
// ....
};
// Get a date that is some (short) time in the future
var getDeadline = function() {
var shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
return shortly;
};
// Attach click handler to all our buttons
$("div.mainpanel button.resetButton").click(function(event){
// I am assuming that you will not be nesting these controls?
var $mainpanel = $(this).parents("div.mainpanel") // this will find the mainpanel div that contains the pressed button
.effect("highlight", {}, 700 );
$("div.shortly", $mainpanel) // this will find any div with the class = shortly inside mainpanel
.countdown('change', { until: getDeadline() });
});
// Start all countdowns going on page load
$('#shortly').countdown({
until: getDeadline(),
onExpiry: liftOff,
layout: '{sn}'
});
});
Your user control is using id="" on elements. Id's must be unique within a single html page. If you need to attach css styles or something to query via jquery, you need to use classes instead of id's so that the second control doesn't break the convention that id's must be unique.