I am wondering how you can reference a particular folder/file in HTML so that it goes through the CSS, js, and HTML.
Basically, I have this code:
<input onclick="setTimeout(function(){location.href='Darkmode';}, 500);" type="checkbox"/>
<label></label>
I have a folder called Darkmode and inside that folder, I have darkmode.html, css, and js
I am using this as a subsite for my main site. For example, I have my main website, and inside that, I want to refer to the Darkmode files so that when I click the toggle button (I have that already) in my website, the site switches to the Darkmode.
Problem: How can I refer to all the Darkmode files at once so it refers to the HTML, css, and also the js.
If I change location.href='Darkmode'; to location.href='darkmode.html';, it only refers to the HTML and not the css of it neither the js. Is there a way, I can refer to all those files at once so the computer runs through the css, js and the HTML of the Darkmode?
If the HTML is different, you would want to just refer to the html file darkmode.html and in that html file, reference the proper CSS and JS files. But unless the design is a lot different, it's better practice to just change the CSS. You can do this without even changing the page by changing a single class in the body tag:
const btn = document.getElementById("darkmode")
btn.addEventListener("click", ()=>{
document.body.classList.toggle("darkmode")
})
body.darkmode{
background: #222;
color: #fff;
}
<button id="darkmode">Click to switch light/dark</button>
<h1>This is my webpage</h1>
<p>Here is a paragraph</p>
<ul>
<li>This</li>
<li>is</li>
<li>an</li>
<li>unordered</li>
<li>list</li>
</ul>
Related
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.
Let's say I have this wonderful html email letter. Gist.
And I would like to put it inside an HTML page made with bootstrap. Like this:
<div class='col-md-4'>
<h1>Hello</h1>
</div>
<div class='col-md-8'>
HERE
</div>
If I do it right away, my styles will break. Everything becomes a mess. If I start cutting out styles from the message, it will start losing its colors, font sizes, etc.
Basically, I would like to keep the message intact, but I need the following to be true:
Message keeps its email styles, not overriding outer document styling
Outer document keeps its bootstrap styles
Message fits perfectly into the col-md-8 div, without breaking anything
Is this even possible?
You can either use an iframe or you can use php include.
For the latter, just copy the email body content (content within the <body>....</body>) to a new file and name it say, email.php (Don't worry. There's only one line of php involved).
Then in your current webpage, add a php include line like this:
<div class='col-md-4'>
<h1>Hello</h1>
</div>
<div class='col-md-8'>
<?php include 'email.php';?>
</div>
And then, copy the css in the <style>....</style> to a new file, say `email.css' and link the current webpage (not the email.php) to that css.
N.B. Just make sure to rename your current webpage from someName.html to someName.php and also make sure that your email.php is in the same directory as the main file and you're good to go.
You mentioned that you want the styling of the main webpage and the email webpage to be independent of each other. For that, just wrap your email.php content with a div wrapper like this:
<div id="specialStyle">
<!-- your email content -->
</div>
Now for any elements whose id or class is same on both pages, say:
#commonName { /* <---- This is the main webpage --> */
font-size:14px;
}
#commonName { /* <---- This is the email webpage --> */
font-size:18px;
}
Just add #specialStyle to the email version like this:
#specialStyle #commonName {
font-size:18px;
}
I have some colors that when clicked I want to change the value of some css.
I want to change the color css value of this css :
article .teleprompter p
{
padding-bottom: 15px;
margin-bottom: 15px;
color:white;
}
The html:
<div class="swatch concrete" onClick="javascript:changeBTC('#95a5a6')"></div>
This is the java script I use for a similar function . This one changes the background color:
<script>
function changeBGC(color)
{
document.getElementById("teleprompter").style.backgroundColor = color;
}
</script>
Would it make a difference in JavaScript code if the css was in a separate style sheet?
don't add javascript: in onclick code - the borwser already knows it is javascript! You only need to add javascript: to an <a href> to tell the browser it is script rather than a URL:
So you just need this:
<div class="swatch concrete" onClick="changeBTC('#95a5a6')"></div>
or you could do this if you wanted to use a link:
<a class="swatch concrete" href="javascript:changeBTC('#95a5a6')"></a>
Your function is changeBGC, but you're executing changeBTC. Replace changeBTC('#95a5a6') with changeBGC('#95a5a6')
It will not make a difference if the css was in a seperate file as long as you are refering the css file in your html page.
Moreover in css you are refering the object as class in css (.teleprompter) and in javascript you are refering the object with id (getElementById). So either use id in both the places or class in both the places
I'm in a sort of conundrum. I'm in the process of revamping a Square Space website. And I'm using their beta 'developer' mode; which thus far seems to only allow the source of the CSS files, everything is within their 'blocks' or .page / .block. No .html or .php files to be found anywhere.
So I'm stuck within their 'Code Injection area' -- and for the footer. I set the footer contents, but the footer should show everywhere except for the homepage. I'm wondering if any of you know a way to write inline JS and / or CSS to ONLY hide the footer from the homepage; or by homepage URL?
<center>
<div>
<a class="footer" href="https://coolguys.squarespace.com/terms/">FAQ</a> •
<a class="footer" href="https://coolguys.squarespace.com/green/">GREEN</a> •
<a class="footer" href="https://coolguys.squarespace.com/wholesale/">WHOLESALE</a> •
<a class="footer" href="https://manbearpigs.squarespace.com/links/">LINKS</a>
<br>
<span>Hello World</span>
</div>
Doing this with pure CSS would be the most preferable.
I found this:
body.page-id-777 td#footer {
display:none;
}
But unsure how a page URL or etc; could translate into a page ID.
It is easily possible to do this with pure js.
if (document.url == "http://squarespace.com") {
document.getElementsByClassName("footer")[0].style.display = 'none';
}
I could be wrong, but I think squarespace puts a homepage class on the body for the home page and a page class for every other page. If this is the case (and I suspect you can test it fairly easily), then the following CSS should work:
body.homepage td#footer {display: none;}
body.page td#footer {display: table-cell;}
I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.
There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom
The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.