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.
Related
is there any way you can send an email from c# asp.net with a html page with css.
Currently I am sending the email but when I open in gmail it does not capture the css included in the htmlpage
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color:navy;
color:white;
font-family:Menulis;
margin-left:40px;
}
div {
margin:0 auto;
}
img{
border-radius:5px;
width:200px;
height:300px;
margin-right:200px;
display:block;
float:right;
}
</style>
</head>
<body>
<div>
<h1>User {user_email} Error Report</h1>
<p>The following error occured when user is trying to reset password
from pswrd_recover.aspx page:</p><br/>
<img src="https://pcappliancerepair.files.wordpress.com/2016/11
/38644550_m.jpg?w=585"/>
<p>{error_message}</p>
</div>
</body>
</html>
Gmail removes the entire head portion of your email’s HTML. So, it will also remove any style elements.
You need to inline your CSS, like this:
<body style="background-color:navy; color:white;font-family:Menulis;margin-left:40px;">
<div style="margin:0 auto;">...</div>
<img style="border-radius:5px;width:200px;height:300px;margin-right:200px;display:block;float:right;" src="https://..." />
</body>
I want to show date and time picker. I googled many times but not getting anything. I download the files from the "keduoi.com" and used in mu project but its not working properly showing only textfield. I am trying from this link.
Here is code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="LaterTime_Pick_up.aspx.cs" Inherits="LocationBasedTaxiServices.LaterTime_Pick_up" %>
<!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>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script type="" src="js/jquery.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="to-do">
<input id="datetimepicker" style="width:200px;" />
</div>
<script type="">
$(document).ready(function () {
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value: new Date()
});
});
</script>
<style scoped>
#to-do {
height: 52px;
width: 221px;
margin: 30px auto;
padding: 91px 0 0 188px;
background: url('../../content/web/datepicker/todo.png') transparent no-repeat 0 0;
}
</style>
</div>
</body>
</html>
It's showing only textfield.
I am not sure unless you can tell exactly what error you are getting. But if you have not added js file then go ahead and do it first.
There are different plans available to get kendo ui. Refer This
There is documentation by kendo for using datepicker in asp.net application.
Link Here
You must include the Javascript for kendoui.
<script src='xxxx/kendo-uixxx.js'></script>
kendo.all.min.js is missing in your code.
You also can use jQuery.UI, it sometimes easier for beginners to start building client interfaces with jQuery.
jQuery UI: http://jqueryui.com/
jQuery UI Datepicker: http://jqueryui.com/datepicker/
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.
Is there a way to read the style attribute of body inside an iFrame?
I've tried using multiple combinations of Body, NativeElement, Frame and other Properties, but so far I had no luck.
<iframe id="iFrame" width="100%" height="500" frameborder="0" src="some source">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body style="margin: 0px; padding: 0px;height:500px;">
</body>
</html>
</iframe>
Example:
_browser.Frame(Find.ById(frameId)).Body.GetAttributeValue("style")
Iframe may be inside a different form, did you tried?
it happend once to me, the iframe was in a different form(nested form)
I want to replace all font-size-parameters in a html document (css attributes).
I'm using .net with c#.
I guess it could be done with some regular expression.
Am I forgetting some other ways to set the font size?
Example:
<html>
<head>
<style type="text/css">
.t {
font-size: large;
}
</style>
</head>
<body>
<span style="font-size: medium" />
</body>
</html>
into:
<html>
<head>
<style type="text/css">
.t {
font-size: large_replaced;
}
</style>
</head>
<body>
<span style="font-size: medium_replaced" />
</body>
</html>
if you use relative unit like em, ex etc for all font dimensions in your page. By adjusting
only html elements' size you manage all fonts
big fonts
html{
font-size:18px;
}
smaller fonts
html{
font-size:18px;
}
you can manage that form javascript, better (also using cookies).
I ended up using the following regex to find where to replace:
/style=\"[.]*font-size:(?<size>[^;]*);[^\"]*[\"]/
/<style[^<]*font-size:(?<size>[^;]*);[^<]*[<]/