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.
Related
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
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'>
I'm trying to make simple webpage here is my body in HTML code
<body runat="server" id="BodyTag" style="height: 1171px; width: 1148px;">
<form id="form1" runat="server">
On Page_Load in my Form.aspx.cs file i want to generate random number from 1 to X
where X is the number of files in a specific folder(folder containing images) then i want the body background image to be this random generated number as long as the image names in the folder are 1,2, ... , ... Here is my code
protected void Page_Load(object sender, EventArgs e)
{
string path = "C:/Users/FluksikartoN/documents/visual studio 2012/Projects/FLUKSIKARTON/FLUKSIKARTON/WebPhotos/BackGroundPhotos";
int countF = Directory.GetFiles(path, "*.*", SearchOption.AllDirectories).Length;
Random rand = new Random((int)DateTime.Now.Ticks);
int n = rand.Next(1, countF);
BodyTag.Style["background-image"] = "C:/Users/FluksikartoN/documents/visual studio 2012/Projects/FLUKSIKARTON/FLUKSIKARTON/WebPhotos/BackGroundPhotos/" + n.ToString() + ".jpg";
}
body background image does not change, it stays white and i dont understand why.Please do not hesitate to ask more information if you need
This is better achieved with css. Since you need a way to do it from code, the easiest option that comes to my mind is do it with generated Javascript
Javascript
<script type="text/javascript">
document.body.style.background = "url('http://localhost:53942/images/_65209699_fanbase_bbc.jpg')";
document.body.style.backgroundRepeat = 'no-repeat';
</script>
Applying it to your code
protected void Page_Load(object sender, EventArgs e)
{
string script = "<script type=\"text/javascript\">
document.body.style.background = \"url('http://localhost:53942/images/_65209699_fanbase_bbc.jpg')";
document.body.style.backgroundRepeat = 'no-repeat';
</script>\";
ClientScript.RegisterClientScriptBlock(this.GetType(), "background-changer-script", script);
}
This will just spill the Javascript to the bottom of your page and will be executed by the browser, changing the background as expected. Check the intellisense for Javascript and CSS for other background properties that can be set
You likely need to use a web relative URL:
BodyTag.Style["background-image"] = "http://localhost/FLUKSIKARTON/WebPhotos/BackGroundPhotos/" + n.ToString() + ".jpg";
Another approach would be to provide 1 CSS class per image and then switch which is being used:
CSS
.image1 {
background-image: url('/FLUKSIKARTON/WebPhotos/BackGroundPhotos/1.jpeg');
}
C#
BodyTag.CssClass = string.Format("image{0}.jpeg", n);
I have a view that I pass to Rotativa (wkhtmltopdf) to get a PDF version of the view for users to print, once they click the "print button":
Here is the rendered view that will be converted to PDF if the user clicks the "print" button
Here is the button code from the view
<div id="print-pdf" align="center">
<a id="print-me" class = "print-btn"
href='#Url.Action("PrintMyView", "Report",
new { id = Model.MonthlyReportID,
clubKeyNo = Model.ClubKeyNumber,
month = Model.ReportMonth,
year = Model.ReportYear }, null)'>Print Report</a>
</div>
Common sense tells me that I need to remove the button before the PDF is generated from the view, so users don't get a PDF with a button on it:
I tried hiding the button (.hide()) and also removing it (.remove())
but the PDF is still rendering with the button:
<script type="text/javascript">
$(document).ready(function () {
$('#print-me').show();
$('#print-pdf').click(function () {
$('#print-me').hide();
});
});
</script>
Anything else that I could try here?
Thanks!
You can do a version for PDF so you can handled what and what no should be printed
what are running in javascript does not work because then executed when the doom is ready, but the Rotativa will not execute any javascript
so, you render just what you need
#if (Model.mustPrint){
<div id="print-pdf" align="center">
<a id="print-me" class = "print-btn" href='#Url.Action("PrintMyView", "Report",
new
{
id = Model.MonthlyReportID,
clubKeyNo = Model.ClubKeyNumber,
month = Model.ReportMonth,
year = Model.ReportYear
}, null)'>Print Report</a>
</div>
}
Try this css:
#media print
{
#print-me
{
display:none;
}
}
ref
Rotativa does not render as print media, but as a browser, you must force rendering as print.
Send the "--print-media-type" argument
Doing this you can use css to hide if the media for print
#media print {
.noprint {
display: none! important
}}
Ex:
return new ViewAsPdf("Details", obj)
{
CustomSwitches = "--print-media-type"
}
Complete example:
return new ViewAsPdf("Details", obj)
{
CustomSwitches = "--print-media-type",
FileName = your_name_report.pdf",
PageOrientation = Orientation.Portrait,
PageSize = Size.A4,
PageMargins = new Margins(0, 0, 0, 0),
PageWidth = 210,
PageHeight = 297
};
I need to get css styles from code behind in asp.net c#, haven't found solution on the web, is it possible to get it directly from styles.css file or do I need to workaround?
I'm using themes in my web app, but I also need to do some server processing and I need colours from ccs files, which are different for each user of course:s
You should be able to retrieve the current styles with the following approach:
var targetElement = document.getElementById("myFancyElement");
var currentStyles = window.getComputedStyle(targetElement, null);
var color = currentStyles["color"];
document.getElementById("myCurrentColor").value = color;
The next step would be to post that color value back to the server. Which could either get posted as json with an XHR request, or simply set as a form value via a hidden input element, like so:
<input type="hidden" runat="server" name="myCurrentColor" id="myCurrentColor" />
Cs file
protected void Button1_Click(object sender, EventArgs e)
{
Panel1.CssClass = "RedBackground";
Panel1.Style.Add("font-size", "200%");
/// get value back
string pvalue = Panel1.Attributes["class"] ;
or
btn_4.Attributes.CssStyle["property"]
}
Html File
<style type="text/css">
.RedBackground
{
background-color: Red;
}
<asp:Panel ID="Panel1" runat="server">
Hello
</asp:Panel>