We Keep Coding

How to set active TAB /active/color-changed or whatever similar event on the selected TAB

I know it has been explained in many places here but I can't get it to work.
It concerns: how to use JavaScript which is in - under wwwroot created - folder in a *.js file.
What I am using:
Blazor Server App empty (VS2022, C#).
I only need/use Server App in VS2022 C# and empty - without any predefined navbars and other elements. So there are no any *.cshtml files except one which is automatically created while creating a "Blazor Server App Empty" in VS 2022 and that is "_Host.cshtml"
And I don't want to use any other template in VS 2022, only this one mentioned.
So, after creating a "page" using this in VS integrated template, I added following in MainLayout.razor (I am using *razor and only razor - no any cshtml):
// this was originally created as in the template in VS2022
#inherits LayoutComponentBase
//this one also:
<main> #Body </main>
// That is what I added here in MainLayout.razor, it's from this site: [http://jsfiddle.net/Ag47D/3/](https://www.stackoverflow.com/)
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="home">Home</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="link">Link</li>
</ul>
</div>
</div>
</div>
</div>
And then I added the css part to the existing "site.css" in that simply VS 2022 project:
`.navbar #nav > .active > a {
color: red;
}`
And finally - and that is the big issue for me to understand WHRE/HOW to handle that . a simply JavaScript part (you can find that on the same site mentioned):
` $(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});`
I added that to a created folder in wwwroot, the flder is called: "js" and the file inside that folder is called: "setactivetab.js". In that file is the mentioned part of javascript.
In "_Host.cshtml" I added then that, here the part of that _Host.cshtml where you can see what I added:
`....
....
Reload
<a class="dismiss">🗙</a>
</div>
<script src="~js/setactivetab.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>`
So I tried with:
<script src="~js/setactivetab.js"></script>
and:
<script src="js/setactivetab.js"></script>
and:
<script src="~/js/setactivetab.js"></script>
But nothing worked. I mean: TABS are shown on the page - no question about that - but if I click on one of that TABs - nothing happens, the color isn't changed.
Somehow I am not able to understand how to use a self created/from google downloaded, JavaScript for simply changing of the color or to set a selected TAB as active/current or however we can use that.
I tried so many examples described on the web. I can't get that working - maybe I am missing/not understood some fundamental knowledge of using a JavaScript. I simply don't know the way how one can use that.
Can you please post me here a working example of a navigation TABS, ideally self created and simply? Important is: WHERE to put a javascript and how to access that properly so the clicking on a TAB wil lchange his color and stay so until I click on another TAB in a simply - if possible: horizontal, not vertical, navigation bar.
I have enough from searching/reading of many web sites descriptions as there works all and if I copy&paste some simply example, it doesn't work.

Why first page is left blank on printing with vue-html2pdf which internally uses html2pdf.js

Hi i'm facing the problem with printing using vue component called vue-html2pdf
The problem as follows:
the pagination does not break the page when content added. on print page becomes 3
the first page is printing as blank on click of download
Here is the setting i'm using for printing:
<vue-html2pdf
:show-layout="false"
:float-layout="true"
:enable-download="true"
:preview-modal="true"
:paginate-elements-by-height="1400"
filename="nightprogrammerpdf"
:pdf-quality="2"
:manual-pagination="false"
pdf-format="a4"
:pdf-margin="10"
pdf-orientation="portrait"
pdf-content-width="800px"
#progress="onProgress($event)"
ref="html2Pdf"
>
Here is a demo: https://codesandbox.io/s/vue-html-to-pdf-example-forked-3lijbr?file=/src/App.vue:95-532

After playing around with your codesandbox, I found solution:
remove section, then the first blank page gone.
<!--
<section slot="pdf-content">
<ContentToPrint />
</section>
-->
<ContentToPrint slot="pdf-content" />
but pagination of the new pdf still looks strange, to fix that remove the in ContentToPrint, than the pdf looks perfect to me.
<template>
<div style="margin: 12px 12px">
<img src="https://picsum.photos/500/300" />
<!-- <div> -->
<p>
<strong
><a href="https://www.nightprogrammer.com/" target="_blank"
>Nightprogrammer.com</a
></strong
I guess the library can't accept too much div.
Here is my modified codesandbox. pdf looks better if you open standalone page (https://1puw7d.csb.app)
https://codesandbox.io/s/vue-html-to-pdf-example-forked-1puw7d?file=/src/App.vue

Just replace the section element by a div and should fix it for you.

Unable to link photos or images to CodePen

I am trying to link images and sound files to my Code pen link using a drop box share link.
<div class="container">
<div class="row second-line">
<div class="col-12">
<div data-key="32" class="key">
<kbd>BAR</kbd>
<span class="sound">808</span>
</div>
</div>
</div>
</div>
<audio data-key="32" src="https://www.dropbox.com/s/qqusqet38wnfexr/8081.wav?dl=0"></audio>
Neither the background image in my css file or sound file for my keyboard event is working. This works perfectly on my local files with local sounds/img.
I am trying however to use dropbox to upload them since you cannot upload files directly to CodePen.
Is this not supported? I could of sworn I have seen this done before, or maybe I am doing something wrong and Ignorant.

Check out this Codepen. I'm using the following code:
<audio data-key="32">
<source src="https://dl.dropboxusercontent.com/content_link/bHRDoVQqFTHeLSx1YSynP8x5KaNfBIWyWzPG4zOvb9gBEyGBwNKImdcgmVZutije/file?dl=0&duc_id=dropbox_duc_id" type="audio/mpeg">Audio element not supported.
</audio>

You can use exact url of image so that it works fine.
https://photos-2.dropbox.com/t/2/AACwpnCZJSbovN9dSgYlI99tOkrG8qmOjDZQDmRE03cK9g/12/644080844/jpeg/32x32/3/1485946800/0/2/concert.jpg/EO2mxJ0FGA4gBygH/Q3aEGidy4B1EqGjlfgLcFxUvOVFcbpl2vDpixRv4ch8%2CznWx3nvuARPFZAfPD5avW9mleflEhRqDt5xXxIga2K8?dl=0&size=1280x960&size_mode=3
above url is the exact image url you can replace in your css.
background: url('https://photos-2.dropbox.com/t/2/AACwpnCZJSbovN9dSgYlI99tOkrG8qmOjDZQDmRE03cK9g/12/644080844/jpeg/32x32/3/1485946800/0/2/concert.jpg/EO2mxJ0FGA4gBygH/Q3aEGidy4B1EqGjlfgLcFxUvOVFcbpl2vDpixRv4ch8%2CznWx3nvuARPFZAfPD5avW9mleflEhRqDt5xXxIga2K8?dl=0&size=1280x960&size_mode=3') no-repeat center center fixed;
Hope it helps you.

Script not evaluating in non-chromium-based browsers

Ok, so my company has a downloads page allowing visitors to download information about products or catalogs which can be found here: Downloads
The problem is, when you click on the Brandfolder image, a popup is supposed to appear, which works fine on Google Chrome, Opera, & Safari. However in Internet Explorer and Mozilla Firefox I get a console error stating that:
Brandfolder is not defined
referring to this file:
<div class="container-fluid page-downloads" id="downloads-page-container">
<div class="content-well col-sm-10 col-sm-offset-1 col-xs-12" style="float: none;">
<div class="col-xs-12 col-sm-12" style="padding: 0; margin-bottom: 65px;">
<h1 class="downloads-title">BRANDFOLDER</h1>
<hr />
<div class="brandfolder-section col-xs-12 col-sm-6">
<!-- ONCLICK ISSUE --><button onclick="Brandfolder.showEmbed({brandfolder_id: 'finisswim'});return false;" title="FINIS, Inc. Logos & Other Brand Assets" style="border: none; background-color: transparent; padding: 0; margin: 0;">
<img src="/sca/site-images/Brandfolder-Web-Button.jpg" class="downloads-banner img-responsive catalog-img" alt="Brand Folder">
</button>
</div>
</div>
...
...
...
</div>
</div>
<!-- BRANDFOLDER JS FILE -->
<script type="text/javascript" async="true" src="//d2sdf28wg0skh3.cloudfront.net/bf.min.js"></script>
So I made sure that the file is being loaded and that the content matches, which it does. and then I went to the console, logged window, and checked if Brandfolder populated, and it didn't (but it did in Chrome, Opera, & Safari).
Since it wasn't working, I pulled it down to my localhost, fired it up and it worked fine on all browsers... wtf
my localhost is an exact copy of the live site which is hosted through the NetSuite SuiteCommerce Advanced platform (hate this platform with a passion) any ideas what could be going wrong, seeing how it works in chromium-based browsers but not in others, and works fine in a development environment?
any input is appreciated! - Thanks

Paul with Brandfolder here. For some reason, probably due to NetSuite, the JS snippet for bf.min.js isn't getting loaded in Firefox but it is on other browsers.
Make sure that the following JS code is getting fired on every browser:
<script type="text/javascript">(function(){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src="//cdn.brandfolder.com/bf.min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>

I set breakpoints on the following function:
if (document.addEventListener && document.addEventListener("DOMContentLoaded", init, !1),
/WebKit/i.test(navigator.userAgent))
var _timer = setInterval(function() {
/loaded|complete/.test(document.readyState) && (init(),
clearInterval(_timer))
}
, 10);
window.onload = init;
The init function is called only on webkit because of the /WebKit/i.test(navigator.userAgent) statement.
In my opinion the DOMContentLoaded event is fired before the script is loaded successfully.

windows.print results in empty page

So I'm trying to add a print button to an html page. Most of the page is not supposed to appear in print, so I hide everything in print and then reveal only the one div that is supposed to be printed (or this is what I'm trying to do). But when I try the print button out, the resulting page is completely empty. The html structure of the page looks like this:
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
And here is the CSS that is supposed to hide everything except the div with the id "results_page" (of course the buttons in that div are also supposed to be hidden in print).
#media print {
*{
background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
display:none;
}
div#fullpage #results_page{
display:block;
}
#result_image,
#result_text {
float: none;
margin: 50px;
}
}
The javascript function is pretty simple, depending on what button the user clicks it adds the "unprintable" class to the picture element and then prints the document (I'm not sure if the html, the css or the js are the culprit here, this is why I include all of this in the question):
function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}
So, given all of this, what could be causing the empty page my printer spits out?

For anyone who is having this problem(especially if using bootstrap), it may be a CSS issue and NOT a javascript issue.
My dilemma was that we had a print button towards the top of the page that called "window.print()" function. And it resulted in a blank print preview page. The weird part was that is was working completely fine several weeks ago.
So first, like many threads have mentioned, check that this is not a javascript issue indeed. My call to window.print() did truly bring up the print preview window(meaning we weren't accidentally overriding the print function with another variable somewhere.)
The issue was with Bootstrap's container and container-fluids classes not displaying for print modes. Apparently these classes are being told to be not displayable on print styles(presumably from bootstrap style sheet).
All I had to do was add the following CSS print rules:
.container, .container-fluid {
width: auto;
display: block!important;
}
and it displayed again! This is also hinted at through bootstrap documentation here: http://getbootstrap.com/getting-started/#support-printing
So in a nutshell, check if the CSS is the issue, and stop blaming that poor Javascript.

Here you go:
function print_stadtarchiv(print_picture) {
if(!print_picture) $('#result_image').addClass('unprintable');
return window.print();
}
It also looks like you have no DOCTYPE or html tags... This is likely to cause all sorts of rendering/not-rendering based issues.
<!DOCTYPE html>
<html>
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
</html>

To anyone having the same problem: I couldn't figure out what was causing it, but I could get it done using the window.frame approach elaborated in this answer.