I am trying to write text to the background of a blazor application.
I want it to show all my method calls in the background (so it looks techy!)
Does anyone know the best way to do this? I have researched but found nothing as of yet.
On the HTML/CSS side, it should be something along these lines:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#content{
position: absolute;
top: 0%;
left: 0%;
font-size: 50px;
color: black;
-ms-transform: translate(-50%,-50%);
}
#background{
color: darkgray;
}
</style>
</head>
<body>
<div id="background">
This is my<br/>
background<br/>
content ...<br />
</div>
<div id="content">
This is my overlay content.
</div>
</body>
</html>
Two content blocks are created with the div tags: one for the foreground and one for the background. JavaScript can then be used to animate/adjust the background content accordingly to get your required effect.
I have a webBrowser:
webBrowser1.DocumentText = #"<html lang='en'>
<head>
<meta charset='utf-8'>
<title></title>
<style type='text/css'>
.red
{
color: red;
}
</style>
</head>
<body>
<div class='red'>red text</div>
sad adad a das
</body></html>";
I want to get the full source of the webBrowser:
textBox1.Text = webBrowser1.DocumentText;
But it results only:
<HTML></HTML>
It works if I display in a MessageBox before set the textBox1.text:
MessageBox.Show(webBrowser1.DocumentText);
It's weird. How can I get the full source?
Here is a proper way to display HTML from string in WebBrowser control
var html = #"<html lang='en'>
<head>
<meta charset='utf-8'>
<title></title>
<style type='text/css'>
.red
{
color: red;
}
</style>
</head>
<body>
<div class='red'>red text</div>
sad adad a das
</body></html>";
webBrowser1.DocumentText = "0";
webBrowser1.Document.OpenNew(true);
webBrowser1.Document.Write(html);
webBrowser1.Refresh();
// Will return html you provided
textBox1.Text = webBrowser1.DocumentText;
To answer your initial question directly, how to get FULL SOURCE no matter what:
WebBrowser1.Document.GetElementsByTagName("HTML").Item[0].OuterHtml;
Make it a habit to use this and NOT DocumentText because if you make any changes to DocumentText after it's been set, for example, changing the InnerHTML of a tag, those changes wont save to DocumentText.
I just slapped a TextBox onto one of my WinForms and updated the text to the above code and it shows all my HTML without issue. Here's an example of me filling in my WebBrowser in case you've got a typo or something in your code:
WebBrowser1.Navigate("about:blank");
WebBrowser1.Document.OpenNew(false);
WebBrowser1.Document.Write("<html><head><title></title></head><body></body></html>");
I never had any luck writing the DocumentText directly. This method worked without issue.
I have successfully implemented image cropping solution with help of this article Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET. It work fine, but on page load, I want to show default cropping area. just like in below picture. I mean when page is opened that contained picture for cropping, it show default coordinates, however, user can edit these one.
I want to highlight 100x100 coordinates.
This is a closed solution http://jsfiddle.net/kLbVM/3/ In this example, when we click on button it highlights the coordinate, but I need the same thing, when page is loaded.
I am looking for same thing, just like in linkedin.com
Edit: Here is my page source...
<head runat="server">
<style>
#imgProfileImage
{
width: auto;
height: auto;
}
.jcrop-handle
{
background-color: #333;
border: 1px #eee solid;
font-size: 1px;
width: 7px;
height: 7px;
}
</style>
<link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.pack.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="imgProfileImage" runat="server" width="400px" height="400px" />
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
<br />
<asp:Button ID="btnCrop" runat="server" Text="Crop Picture" CssClass="accentheader"
OnClick="btnCrop_Click" />
</div>
</form>
<script type="text/javascript">
jQuery(document).ready(function () {
var jcrop_api;
jcrop_api = $.Jcrop('#imgProfileImage');
jcrop_api.setSelect([0, 0, 100, 100]);
jcrop_api.enable();
jQuery('#imgProfileImage').Jcrop({
onSelect: storeCoords
});
});
function storeCoords(c) {
jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
};
Now its....
Try these steps:
When you do 'Jcrop(element)', element should be an img, not a div or any other tag, so move your id="cropbox" attribute from div to img:
<div >
<!-- |________ -->
<!-- | -->
<img id="cropbox" src="..." />
</div>
Specify width and height on .jcrop-handle class:
.jcrop-handle{
background-color:#333;
border:1px #eee solid;
font-size:1px;
width:7px; //explicit width
height:7px; //explicit height
}
Enable resizing 'interactivity' handlers after setSelection:
jcrop_api.setSelect([0,0,100,100]); //default selection on page load
jcrop_api.enable(); //enable resize interactivity
Live demo
http://jsfiddle.net/kLbVM/4/
So you want it to set the default dimensions on page load.
$(function(){
jcrop_api.setSelect(getDimensions());
});
Put the code on the "Shown" event of the form, and it will do what you need. Assuming you are using a .Net form to show the page, that is.
I think that there is an event that is called after a document has finished loading, which can be used to put the code in, if you need to load the page from the internet, first.
At any case, and whatever the actual platform, since the code works in an event(button click) it will work in the respective Form/Document event after it has been loaded and before is shown. It will not work in a "Load" event.
If you look closely at the image above you will see a hit box being rendered on the Microsoft Chart Control. This is being displayed when I click on a DataPoint on the Microsoft Chart Control. The DataPoint has a postback value defined, and the Chart has its On_Click event handler implemented. I am able to cause this image map to render through right-clicking or left clicking.
My setup is such:
Completely empty .aspx base page EXCEPT it has a master page. The master page setup is slightly unique in that there is a "WebForms" master page and a "Root" master page. The "WebForms" master page inherits from the "Root" master page. This is because I have an ASP.NET AJAX page integrated into an MVC solution. I experience no issues with this setup in any other browser. (Also, during testing, I removed the dependence on the intermediary MasterPage -- the issue was still present. I am confident in saying that the hierarchy of master pages is not the source of this issue.)
MasterPageFile="~/Views/Shared/WebForm.master" is the MasterPage declaration on my base page.
The WebForm MasterPage looks a bit like this:
<asp:Content ContentPlaceHolderID="MainContentRoot" runat="server">
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</asp:Content>
There are other content place holders, but I believe this is the only relevant one. Do note that I have wrapped this place holder in starting form tags. This allows me to separate "form" tags from Html.StartForm() and EndForm() as is normal for MVC.
The Root.Master:
<%# Master Language="C#" Inherits="System.Web.UI.MasterPage" %>
<%# Import Namespace="CableSolve.Web.Controllers" %>
<!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><asp:ContentPlaceHolder ID="TitleContentRoot" runat="server" /></title>
<asp:ContentPlaceHolder ID="CssContentRoot" runat="server" />
</head>
<body>
<div id="ContentPlaceHolder" style="height: 100%" class="ui-widget">
<asp:ContentPlaceHolder ID="MainContentRoot" runat="server" />
</div>
</body>
Once again, there are other place holders, but I believe these to be the only relevant ones.
I have disabled all CSS on the pages and I still see this occurring.
So.. what I can assume is that the client ID for the image map is not being properly handled in this scenario. The UniqueID is modified by the fact that there are content place holders. Look at the following:
INTERNET EXPLORER 9.0.8112 HTML MARKUP:
<div class="rdContent" id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C">
<img id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0" style="width: 979px; height: 1494px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;" alt="" src="/csweb_IISVS2010/Dashboard/ChartImg.axd?i=chart_63c65dfd662c42fd9a14723465b4db62_3.png&g=4b336a3ffbc346309c1eb2197ee6fe4c" useMap="#ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap"/>
<map name="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap" id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap">
GOOGLE CHROME 13.0.782
<div id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C" class="rdContent">
<img id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0" src="/csweb_IISVS2010/Dashboard/ChartImg.axd?i=chart_63c65dfd662c42fd9a14723465b4db62_1.png&g=f6ae9770eb0d497187804e384e37a51d" alt="" usemap="#ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap" style="height:1448px;width:983px;border-width:0px;">
<map name="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap" id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap">
I am relatively new to web development. What are my options for debugging this further, or patching the issue? I was shooting bullets in the dark in order to stumble into the fact that it was the Master Pages introducing the issue.
Thanks for reading and your time. Cheers.
EDIT: It occurs with compatibility mode enabled or disabled. I moved the form tags to within the content place holder of my base page and experienced no differences.
EDIT2: I also removed the intermediary Master Page. I felt that this could've been a large source of problems, but this issue still arises with just one master page being used.
TL;DR: When my chart control is located inside of a ContentPlaceHolder I am able to see the image map when left or right-clicking on the area containing the image map. This only happens under Internet Explorer.
(post-bounty edits):
I've tried resetting the CSS by using the CSS code-snippet provided by Ryan Ternier. I referenced it using the code snippet below. Dashboard.css' contents was the code snippet provided by Ryan. No effect.
<link rel="stylesheet" type="text/css" href="../Content/Dashboard/Dashboard.css?t=<%= DateTime.Now.Ticks %>" />
I've tried clearing the link's focus. My concern here is that what I'm clicking isn't really a link, it's an image with a map, and the map is becoming visible. No effect.
I read about the Link Scrubber add-on for Adobe Dreamweaver. This did not seem relevant to the project at hand. I am using Visual Studio 2k10, but I did some googling around in an attempt to find comparable steps for VS. I found none.
Sometimes browsers can default a CSS if there is none defined. Haveyou tried to clear all default CSS?
You might want to look at link scrubbing: http://www.projectseven.com/extensions/info/remscrub/
You could also try: a:focus { outline:none; } in a CSS
Clearing Default CSS:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
from: http://meyerweb.com/eric/tools/css/reset/
For good measure, add EnableTheming="false" to your <%# Master... %> directive. This explains your symptom of only seeing this with a MasterPage. I've had this issue with Menu controls.
Take a look at http://msdn.microsoft.com/en-us/library/ms228176(v=vs.80).aspx for a feeble description of this option.
Also, I haven't been able to compile your example because I can't seem to get the assemblies to load for the Chart tags. However if the above doesn't work, from what I understand the chart is rendered as an imagemap.
The image map tag has a property called hidefocus which should do what you want. If possible can you try to add some brief javascript or try an updated CSS attribute?
CSS - http://css-tricks.com/829-removing-the-dotted-outline/
a
{
outline: 0;
}
Javascript option instead - You can change the a tag to the id of your control but be careful to make sure you get the right one after it's generated.
$('a').focus(function(){
$(this).attr("hideFocus", "hidefocus");
});
Hopefully this works.
Original Comment Have you tried these CSS properties? I see you've tried focus, but not active.
a:active
{
outline: none;
overflow: hidden; /* careful with this one */
}
a:focus
{
-moz-outline-style: none;
}
Also I found some JavaScript that may help for IE found at http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links
var links = document.getElementById('nav').getElementsByTagName('a');
for ( var i = 0; i < links.length; i++ ) {
links[i].onmousedown = function () {
this.blur();
return false;
}
links[i].onclick = function() {
this.blur();
}
if ( /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent) ) {
links[i].onfocus = function() {
this.blur();
}
}
}
I'm fairly new to asp and i am trying to understand why exactly this is not working.
What i atempting to do is set up a panel within a page that will have both horizontal and vertical scrollbars on the page.
The page is set up like this:
a header
a panel:
Inbetween that is a large amount of literal statements along with headers that have anchor tags along with return to top anchor tags, and a few images.
and then a footer.
All of this works.
However, when i open the page in a browser, the panel does not have a scroll bar appear. This causes for only the first 1000px or so of the statements inbetween the panels to appear. Also if you click one of the anchor tags at the top of the page it will lead to another section of the panel. Which is what i want it to do, however, it will only show the beginning of that section and then that somehow spills over into and covers the footer of the page.
<body style="background-color:#C9E8FF; overflow:hidden; width:100%; height:100%">
<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%"
ScrollBars="Both" style="margin-right: 145px">
html/asp inbetween panel.
</asp:Panel>
</body>
What i think the problem has something to do with the way height has been declared, however even when i give heigh the exact px value i need or just do not include height i still have the same issue stated above.
this is the panel i am using.
What i would like to know is what, is the reason for why this panel is not working correctly and how to fix it.
Any help of suggestions are greatly appreciated.
I applied the 100% width and height to both the body and the html elements as well as setting the margin to 0.
I also included some javascript to add some dummy content.
Hope it helps.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var html = ''
for (i = 0; i < 100; i++) {
html += 'Some default content...<br/>';
}
$('#content').html(html);
});
</script>
<style>
html, body
{
margin:0px;
width:100%;
height:100%;
overflow:hidden;
background-color:#C9E8FF;
}
</style>
</head>
<body>
<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%"
ScrollBars="Both" style="margin-right: 145px">
<div id="content"></div>
</asp:Panel>
</body>
</html>
I would enclose the panel in a regular div and set the style to the div to be overflow:scroll.
That should create scrollbars for you automatically when the panel's width exceeds the div's width. See here a little example.
Remove overflow:hidden from CSS styling html,body.
because this hides any overflow or scroll bar on the page.
Regards,
Ajay