We Keep Coding

making a background image dynamic and change every few seconds

What my code is doing:
creates an img tag that changes the image every 3 seconds.
background image is static
currently, we have a dynamic img tag that's changing every 3 seconds on top of a static background. reason being it was a test to see I could make it dynamic
What I want to do:
background-image inside the script tag to change and somehow make the URL() dynamic. Background image should change very 3 seconds
<div class="text-center background">
<p>come content</p>
<img id="image" src="~/images/baseball.jpg">
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccerball.jpg"], i = 0;
function changeimage()
{
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(changeimage, 3000);
</script>
</div>
<style>
.background{
background-image: url(/images/basketball.jpg); //<<<-----this line needs to be dynamic
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
}
</style>
I understand I may need to restructure my code a little. I just don't know how to go about doing it with a background. with a normal image tag it's easy because I simply reassign a new image path to the old Id.
Additional information:
framework: .netcore-mvc
bootstrap: 4.6

Just set the style of the background element, its practically the same as your current solution:
There's a good solution for this on SO: [Changing background-image with JavaScript]
<div id="background" class="text-center background">
<p>come content</p>
<script type = "text/javascript">
var background = document.getElementById("background");
var currentPos = 0;
var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccerball.jpg"], i = 0;
function changeimage()
{
if (++currentPos >= images.length)
currentPos = 0;
background.style.backgroundImage = "url(" + images[currentPos] + ")";
}
setInterval(changeimage, 3000);
</script>
</div>
This solution is pure HTML Javascript, there are image carousel controls and component based solutions that will help if you want to run the timing logic on the server, but this javascript is a very simple solution to the problem.

Converting HTML to PDF Invoice

I'm trying to generate HTML page ( C# Razor View ) that will be converted to PDF ( using wkhtmltopdf )and printed on pre-printed stationery.
My problems is, that the pre-printed stationery has a header ( easy )
and tear-off part at the bottom (4cm) which should be blank until the very last page where some additional information is printed.
The whole invoice is being generated as
<table><thead></thead><tbody></tbody></table>
So how can I set margin of X on every page except the last printed
and on that last printed page instead of margin actually print something?
Tried to use with last-child selector but that did not work.
Perhaps some other solution will be more suitable for this using .Net Core ( some linux apps can be used as well )?

You can use the CSS #page rule to specify the page margins. You can also use this to specify additional margins for left & right-hand pages (to account for binding) and for the first page but not, it would seem, for the last page!
/* Default left & right is 2cm, top & bottom margin is 4cm */
#page { margin: 4cm 2cm }
/* First page, 10 cm margin on top */
#page :first {
margin-top: 10cm;
}
/* Left pages, a wider margin on the left */
#page :left {
margin-left: 3cm;
margin-right: 2cm;
}
/* Right pages, a wider margin on the right */
#page :right {
margin-left: 2cm;
margin-right: 3cm;
}
Further reading: https://www.w3.org/TR/CSS21/page.html#page-box

Finally I got to the bottom of that.
As the top of the page should not be a problem ( can be handled the same way as well , but the table thead is another option )
My solution is:
wkhtmltopdf test.html --footer-html footer.html output.pdf
And the whole trick is withing the footer.html file:
<!DOCTYPE html>
<html>
<head>
<script>
var mainHeader = "test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>";
var secondHeader = "OOOOOOOOOOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPPOPO<br>";
function selectHeader() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2);
vars[z[0]] = decodeURIComponent(z[1]);
}
if (vars["page"] == vars['topage']) {
document.getElementById('main').innerHTML = secondHeader;
} else {
document.getElementById('main').innerHTML = mainHeader;
}
if (vars["page"] == vars['frompage']) {
document.getElementById('test').innerHTML = secondHeader;
}
}
</script>
</head>
<body onload="selectHeader()">
<div style="min-height: 6cm; background-color: aqua; max-height: 6cm; overflow:visible;">
<div id="main" onload="selectHeader()">
</div>
</div>
</body>
</html>
ps.
Read somewhere that without !DOCTYPE html it might not work.
Thanks for all the help

Scrolling Dynamic DIV

I have a DIV which has images and hyperlinks, which are added in C# by CODE
mStr.Append(" <div id='wn'>");
mStr.Append("<div id='lyr1'> <ul id='horiz'>");
if (dv.Count > 0) {
for (int i = 0; i < dv.Count; i++) {
mStr.Append("<li width='450' height='110' style='padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px;'>");
mStr.Append("<a href='PlayGame.aspx?GameID=" + GameLib.Utilities.Encrypt(dv[i][1].ToString()) + "'>");
mStr.Append("<img src='../" + dv[i][10].ToString() + "' width='156px' height='109px' style='padding-left:0px;' />");
mStr.Append("</a>");
mStr.Append("</li>");
}
mStr.Append("</ul></div></div>");
RelatedGames.InnerHtml.Remove(0, RelatedGames.InnerHtml.Length);
RelatedGames.InnerHtml = mStr.ToString();
}
..but the problem is that I want to scroll the DIV so that i can go through all images. I tried many ways in JQuery but it has been stuck and static. I will be grateful for any suggestions.
Or, is there any other way that the same functionality can be achieved?

Simply add the following CSS:
#lyr1 {
overflow: auto;
}
Overflow is a CSS property that specifies how content that is larger than its parents should be displayed. The default value is visible, which means that everything will be displayed, even if it goes beyond the size of its parent (which it does, in your case). Setting it to auto will make everything that doesn't fit in the parent hidden, and will add scrollbars whenever necessary. To make scrollbars always visible, do overflow: scroll;.
Live demo: http://jsfiddle.net/DanVicBez/kNk4y/

Just use a css property overflow:scroll to the target div
<div id='lyr1' style='overflow:scroll'>

How do you style WebView control in Windows Store App?

I have C# / XAML win store app which receives various data from json. one piece of it - html string.
I display that string using WebView.NavigateToString
However I don't see how can I style it. Normally I would use blend to get default style and then edit it. But Blend doesn't let me style WebView.
I ended up wrapping the json html into
<body style='background-color:black;color:white' />
but this approach doesn't let me use theming which the rest of the application does.
What is the 'proper' way to style and / or format content of the WebView?

Another solution is making a WebViewContentHelper (or so) class. You may pass the theme and style the CSS according to that. For example:
string content = WebViewContentHelper.WrapHtml(originalHtmlString, backGroundColor, webView.ActualHeight);
webView.NavigateToString(content);
You can adapt this class that already copies the Font styling from Windows 8 and gives you horizontal scrolling, also arranges content in columns, just as ItemDetails Template:
class WebContentHelper
{
public static string HtmlHeader(double viewportWidth, double height) //adapt parametres
{
var head = new StringBuilder();
head.Append("<head>");
head.Append("<meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=0\"/>");
head.Append("<script type=\"text/javascript\">"+
"document.documentElement.style.msScrollTranslation = 'vertical-to-horizontal';"+
"</script>"); //horizontal scrolling
//head.Append("<meta name=\"viewport\" content=\"width=720px\">");
head.Append("<style>");
head.Append("html { -ms-text-size-adjust:150%;}");
head.Append(string.Format("h2{{font-size: 48px}} "+
"body {{background:white;color:black;font-family:'Segoe UI';font-size:18px;margin:0;padding:0;display: block;"+
"height: 100%;"+
"overflow-x: scroll;"+
"position: relative;"+
"width: 100%;"+
"z-index: 0;}}"+
"article{{column-fill: auto;column-gap: 80px;column-width: 500px; column-height:100%; height:630px;"+
"}}"+
"img,p.object,iframe {{ max-width:100%; height:auto }}"));
head.Append(string.Format("a {{color:blue}}"));
head.Append("</style>");
// head.Append(NotifyScript);
head.Append("</head>");
return head.ToString();
}
public static string WrapHtml(string htmlSubString, double viewportWidth, double height)
{
var html = new StringBuilder();
html.Append("<html>");
html.Append(HtmlHeader(viewportWidth,height));
html.Append("<body><article class=\"content\">");
html.Append(htmlSubString);
html.Append("</article></body>");
html.Append("</html>");
return html.ToString();
}
}

You cannot style/extend webview apparently, Webview is not a derivative of control subclass (it does not have a control template) and is rather hosted in its own HWND. You are probably better off using webviewbrush. See this sample

You can style like this
public static string Scape(string htmlContent, string fontColor)
{
var htm = "<html> <head> <script type=\"text/javascript\"></script> <style> body { color: "+ fontColor +"; } </style> </head> <body>" + htmlContent +"</body></html>";
return htm;
}

Show only Vertical scrollbar in ModalDialog window?

I am using following code to open a modalwindow:
function OpenPopup(rn) {
var winargs = null;
var winsettings = "help:no;status:no;maximize:yes;minimize:no;dialogHeight:450px;dialogWidth:820px;edge:sunken;scroll:yes;center:yes;resizable:yes;";
winargs = window.showModalDialog("../PopUp.aspx?id=" + rn , winargs, winsettings);
}
Here the property scroll provides only Yes and No option. I want only Vertical scroll bar and not Horizontal one. How should I achieve this ?
Can anyone help me on this issue ?

Make sure that the width of PopUp.aspx is not more than the dialogWidth:820px;
try this
<body style="width:820px;">
on PopUp.aspx

Have you tried the following:
Specify the width to it:
function popupWindow(url, width)
{
window.open('url', 'win_name', 'width=' + width);
}
And depending upon your layout, you could use the css as well:
<style type="text/css">
overflow-x:hidden;
</style>
Source: stackoverflow

Please check this solution:
did you make the div scrollable? i.e.
<div style="position:absolute;top:0;left:0;width:100px;height:100px;overflow:auto;"></div>
also make sure that you do not have any element (table, div, span) in the the div who's width is greater than the container width + 25px (needed for vertical scroll bar)
http://forums.asp.net/t/1450847.aspx/1