I just want to show image , that is stored in the backend. But the image is not shown. I get this error:
downloadIcon.jpg:1 GET http://localhost:4200/assets/hepchat/images/downloadIcon.jpg 404 (Not Found)
I do it like this:
return $"<img src='./images/downloadIcon.jpg' alt=\"Download\"/>";
And I have a css class like this:
.msgdownload {
position: relative;
width: 50px;
height: 25px;
display: block;
}
.msgdownload::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
And I dont want to do in the css class something like this:
background: url(../hepchat/images/download.jpg) no-repeat bottom;
Because then I cant have alternative text, when the image is not found.
Thank you.
You can solve it by putting the image to the /src/assets folder.
Something like:
/src/assets/hepchat/images/downloadIcon.jpg
Related
I'm trying to play a video in my C# WinForm.
Here is what I have so far:
I have a webViewer control in my form, and the following code:
// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);
Here is what it looks like when I run my app:
The problem is that the video does not fill up the entire webViewer (which is the white part in the image).
I have the webViewer1.Anchor property set to all, so when I resize the form, the webViewer resizes based on the form.
Note:
When the user clicks the fullscreen button the problem is fixed. But this is a bad solution for me because it's a bad experience for the user. Plus, the user may not know that they need to click the fullscreen button. This is what that looks like:
How do I make the video take up the entire webViewer without the user having to click the fullscreen button?
Also, as a side-question, when the user clicks the "YouTube" button, it opens Internet Explorer, and not the default browser. How do I fix this?
You need to fix the styling of your page:
// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html style='width: 100%; height: 100%; margin: 0; padding: 0;'><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "</head><body style='width: 100%; height: 100%; margin: 0; padding: 0;'>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);
This ensures that the HTML and BODY tags occupy 100% of the page, and that allows the child iframe to occupy 100% of the page. That generates this HTML:
<html style='width: 100%; height: 100%; margin: 0; padding: 0;'>
<head>
<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
</head>
<body style='width: 100%; height: 100%; margin: 0; padding: 0;'>
<iframe id='video' src='https://www.youtube.com/embed/5aCbWqKl-wU' style="padding: 0px; width: 100%; height: 100%; border: none; display: block;" allowfullscreen></iframe>
</body>
</html>
I think you need to set up an Aspect Ratio.
Checkout the document here
https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
I am using vs2019. I don’t know why. After trying it, it is in a black state and does not display the video.
I'm new to .net core and wanted to know if im doing anything wrong or missing anything to get my Background-clip: text; to work, like it does in any other platforms...
I've also tried to debug this problem in multiple web browsers, such as Chrome and Microsoft Egde.
I've tried Background-clip: text; and -Webkit-Background-clip: text; and nothing seems to work. It says that the text value is not valid for Background-clip
Here's my code: Style.css
.text-container p {
-webkit-text-fill-color: transparent;
font-size: 150px;
background-image: url("https://s31.postimg.cc/yaze1agjv/abstract-background-canvas-249798.jpg");
background-repeat: repeat-x;
background-position: bottom;
background-size: cover;
animation: animate 30s linear infinite;
text-align: center;
margin-top: 17%;
text-transform: uppercase;
font-weight: 900;
width: 100%;
height: 100%;
-webkit-background-clip: text;
background-clip: text;
}
#keyframes animate {
0% {
background-position: left 0px top 10px;
}
40% {
background-position: left 800px top 10px;
}
}
Index.cshtml
<html class="backimg">
<body>
<p class=text-container> Hello World!</p>
</body>
</html>
*** Edit: I tried to debug this problem on another text editor, and this code works fine. Is there something wrong with .NET core when it comes to background-clip: text; ? Online code editor : JSFiddle ( https://jsfiddle.net/2m6pwvqo/14/ )
you are right css syntax for media query, but it's not like that in Razor web page...
you can put extra # sign and try with below
##keyframes animate{
}
I have created a WebBrowser control in the xaml,
and bind some html via string to it. It's working fine .
But the WebBrowser will never auto adjust its height.
<phone:WebBrowser
HorizontalAlignment="Stretch"
Margin="0,6,0,0" Name="myWebView"
VerticalAlignment="Top" />
private void WebBrowser_OnLoaded(object sender, RoutedEventArgs e)
{
String htmlTags = "<html><head><meta charset='UTF-8'/><meta name=\"viewport\" content=\"width='480', initial-scale='1'\"></head><body><center>{0}</center></body></html>";
myWebView.NavigateToString(String.Format(htmlTags, getHTMLContent());
}
public string getHTMLContent()
{
StringBuilder htmlBody = new StringBuilder();
htmlBody.Append("<table cellpadding=\"0\" cellspacing=\"0\" width=\"704\" height=\"484\" background=\"https://known.com/img/back/123456.jpg\" style=\"background-repeat: no-repeat; background-position: center;\">");
htmlBody.Append("<tr>");
htmlBody.Append("<td valign=top>");
htmlBody.Append("<div style=\"position: absolute;\">");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 132px; height: 132px; top: 44px; left: 44px; z-index:0;\">");
htmlBody.Append("<img src=\"https://known.com/img/icon/87654.jpg\" width=\"100%\" height=\"100%\"/>");
htmlBody.Append("</div>");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 704px; height: 484px; top: 0px; left: 0px; z-index:0; \">");
htmlBody.Append("<img src=\"https://known.com/img/icon/234255.jpg\" width=\"100%\" height=\"100%\"/>");
htmlBody.Append("</div>");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 440px; height: 264px; top: 184px; left: 184px; z-index:0; font-family:times; font-size:14px; color:#FFFFFF; \" align=\"center\">");
htmlBody.Append("<div style=\"display: table-cell;vertical-align: middle;\">");
htmlBody.Append("</div>");
htmlBody.Append("</div>");
htmlBody.Append("</div>");
htmlBody.Append("</td>");
htmlBody.Append("</tr>");
htmlBody.Append("</table>");
return htmlBody.ToString();
}
What I want the WebBrowser to be
1) Auto adjust its height depends on the HTML String. If i pass only one image mean, it should auto adjust depends on the image.
It there is no content mean, browser should hide itself.
2) Should not scrollable, because the WebBrowser already stretch its height to fit the content.
How can I make it? Please let me any idea to resolve my problem.
You need to use javascript to get the height of the rendered html and set it to your WebBrowser control.
Here is an implementation of this.
I am attempting to design a site for someone who wants both the Contact Us page in the bottom portion of the menu and above their logo in the top right corner.
As such here is the client code:
This is the top menu above the logo:
<ul class="topnavigation" style="width:1000px; border-bottom-style: none; height: 40px;">
<li class="highlight" style="width:100px; height: 40px; font-family:Calibri; float:right;">Contact Us</li>
<li style="width:100px; height:40px; font-family:Calibri; border-left:1px solid white; border-right:1px solid white; float:right;">Home</li>
</ul>
And this is the menu under the logo:
<ul class="navigation" style="width:1000px; height:40px; border-bottom:none;">
<li style="width:150px; font-family:Calibri; height: 40px; border-right:1px solid white;">About Us</li>
<li style="width:150px; font-family:Calibri; border-right:1px solid white; height: 40px;">Applications</li>
<li style="width:200px; font-family:Calibri; border-right:1px solid white; height: 40px;">Features and Benefits</li>
<li style="width:200px; font-family:Calibri; border-right:1px solid white; height: 40px;">Technical Specs</li>
<li style="width:150px; font-family:Calibri; border-right:1px solid white; height: 40px;">Contact</li>
<li style="width:145px; font-family:Calibri; border-right:none; height: 40px;">Recognition</li>
</ul>
To highlight which page the user selected I used some javascript (which I have been trying to learn lately) and CSS
JavaScript:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('.topnavigation li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
$('.navigation li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
});
CSS:
ul.navigation
{
margin: 0px;
padding: 0px;
list-style: none;
background-color:#0071BB;
height:34px;
border-bottom:none;
}
ul.navigation li
{
float: left;
position: relative;
top: 0px;
left: 0px;
}
ul.navigation li a:last-child{}
ul.navigation a
{
color:white;
display: block;
padding: 8px 8px;
text-decoration: none;
}
/*background color of LI*/
ul.navigation li.highlight
{
background:Darkblue;
}
/*Text color for A*/
ul.navigation li.highlight a
{
color:white;
}
ul.navigation li:hover
{
color:white;
background-color:darkblue;
background: darkblue;
}
a, a:visited
{
color:#000;
}
ul.topnavigation
{
margin: 0px;
padding: 0px;
list-style: none;
background-color:#0071BB;
height:34px;
border-bottom:none;
}
ul.topnavigation li
{
float: left;
position: relative;
top: 0px;
left: 0px;
}
ul.topnavigation li a:last-child{}
ul.topnavigation a
{
color:white;
display: block;
padding: 8px 8px;
text-decoration: none;
}
/*background color of LI*/
ul.topnavigation li.highlight
{
background:Darkblue;
}
/*Text color for A*/
ul.topnavigation li.highlight a
{
color:white;
}
ul.topnavigation li:hover
{
color:white;
background-color:darkblue;
background: darkblue;
}
With this implementation if the user clicks on any page it highlights the page. But if they click on the Contact Us in the top corner is only highlights the Contact Us in the bottom menu and not the top menu. I found that strange and is a question in itself for me because I would expect it to highlight the top portion and not the bottom portion. (If anyone can answer that as well I would appreciate it - because I don't see how it is recognizing it).
So, how can I have both the top contact page navigation and bottom contact page navigation highlight at the same time. I am assuming that this will be done with java script and not on the C# code.
I have attempted to combine the two such as
$('.navigation li a' & '.topnavigation li a').each(function () {
but realized this probably wouldn't work because it is indexing. Although I am not sure. I attempted to set them as an "if equivalent" so if both href were the same then it would highlight them. Nothing I have done has worked (although amusingly I have gotten some odd results highlighting other navs).
So, any suggestions? Point me in the right direction? Something I am not seeing or how can this be done? Is this going to be needed to be done in C#? Can JavaScript do it?
Please let me know. This is the first question I have asked so I am frustrated on this.
You really don't need an each here, nor do you need to combine selectors unless you're doing something special based on their root class. You just need a way to match things up. Here is a demo - http://jsfiddle.net/jayblanchard/AEY5h/
EDIT: The original code still works (you need to remove e.preventDefault(); for your site)
$('li a').click(function(e) {
e.preventDefault(); // just for this demo
var thisHREF = $(this).attr('href'); // get the href of the clicked item
$('li').removeClass('highlight'); // remove all the classes
$('a[href="' + thisHREF + '"]').closest('li').addClass('highlight'); // add the class to the items that have the same href
});
To highlight the elements where your page matches up add the following (outside of the above block)-
var currentPage = location.pathname.substring(1);
$('a[href="' + currentPage + '"]').closest('li').addClass('highlight'); // adds highlight to current page element
In the fiddle I have replaced the location info with jsfiddle's info so that both Contact Us elements are highlighted - http://jsfiddle.net/jayblanchard/AEY5h/1/
You can combine jQuery selectors using a comma like this:
$('.navigation li a, .topnavigation li a').each(function () {
Notice that the comma is included inside the single quotes.
jQuery errors, Remove default .highlight class from list-items
In your .topnavigation menu, don't provide preselected .highlight classes.
You have a preselected item with class .highlight, which may be why it appears that your script is working to highlight the item in your .topnavigation menu, but not your .navigation menu.
Also, your jQuery has some errors and I recommend combining selectors since the .each() function is the same for both.
This corrected version should do the trick (if there are no preselected items with .highlight):
$(document).ready(function () {
var str = location.href.toLowerCase();
$('.topnavigation li a, .navigation li a').each(function () {
if (str.indexOf($(this).attr('href').toLowerCase()) > -1) {
$(this).parent().addClass("highlight");
}
});
});
Example JSFiddle: http://jsfiddle.net/gfullam/0rppzomt/
The correct way to combine multiple selectors into one with jQuery is not like this:
$('.navigation li a' & '.topnavigation li a')
but rather like this:
$('.navigation li a, .topnavigation li a')
Here's a link to more documentation on the multiple selector usage. Make that change in your javascript and you should properly be selecting all the elements you're trying to target.
I have the following situation:
I've got a header, content, and a footer.
Now the header and footer have a fixed height and are always on the screen.
css for footer and header:
#footer {
background-color:#e6e6e6;
width:100%;
height:46px;
bottom:0;
left:0;
position:fixed;
border-top:1px solid #7F8C8D;
z-index:101;
}
#header {
border-bottom:1px solid black;
height:45px;
background-color:#828282;
color:#FFF;
position:absolute;
top:0;
left:0;
right:0;
z-index:105;
width:100%;
box-sizing:border-box;
}
As for the content i have the following:
#content {
background: #9cbbe3 url(../img/backgr.gif) repeat-x;
right:0;
left:0;
background-size:auto;
position: absolute; top: 0px; bottom: 0px;
overflow: auto;
}
Now this works! at first...
But then i go and maximize and minimize the window, and i end up with two scroll-bars.
When i refresh the page the problem is fixed. and re-sizing works as far as I've noticed. but when maximizing and restoring the window i end up with two scroll-bars.
How can i solve this preferably using CSS?
Maybe this works out for you:
html, body { overflow: hidden; }
Try changing your overflow
overflow: auto;
to:
overflow: hidden;