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
Related
In other words, I need to generate css classes and inject them somehow into the page.
I need to modify the classes at runtime in C#.
Why?
Let's say my razor component renders thousands of elements and I need to change width of all those elements.
Rather than modifying style attribute on many elements I would like to just modify single css rule.
JS interop is acceptable.
First, avoid placing style tags inside components. Each time the component is rendered, so is the style tag. In addition, it makes it difficult for other developers to find your CSS if it is scattered all over the app in components.
I don't normally suggest using inline styles, but CSS variables have really changed my outlook on this. CSS property variables allow you to dynamically pass values to your CSS at runtime using the style attribute.
#* This belongs in app.css *#
<style>
:root {
--my-width: 100px;
}
.example {
background-color: #ccc;
width: var(--my-width);
}
</style>
#* ^ This belongs in app.css *#
<h1>Hello, Blazor REPL!</h1>
<label>Width</label>
<input #bind-value="#width" />
<p class="example" style="--my-width: #width">My Width is #width</p>
#code {
string width = "100px" ;
}
You can see an example of this running in the browser here. https://blazorrepl.com/repl/cFOdkmPA10gU73Hl18
I had a similar thing I needed to edit in Blazor. Long story short is MatBlazor Tabs adds a style="pointer-events: auto;" that I needed to disable when loading data.
https://www.matblazor.com/Tab
I solved it like this:
index.html:
window.ChangeMatBlazorTabPointerEvents = (loadData) => {
var allTabs = document.querySelectorAll('.mdc-tab__content');
allTabs.forEach((tab) => {
if (loadData) {
tab.style.pointerEvents = 'none';
}
else {
tab.style.pointerEvents = 'auto';
}
});
}
Blazor (razor) file::
#inject IJSRuntime JSRuntime
await JSRuntime.InvokeVoidAsync("ChangeMatBlazorTabPointerEvents", loadData);
Example why I had to do it:
<MatTab Label="Threats and Countermeasures" Style="pointer-events: inherit;">
Renders this:
<div class="matBlazor_theme_12345678-1234-1234-1234-123456789012 mat-tab-label mdc-tab" style="pointer-events: inherit;" role="tab" tabindex="0" id="matBlazor_id_82bcf7fc-5f04-48a0-aff0-d24dcc0b0ac3" _bl_92=""><!--!-->
<span class="mdc-tab__content" style="pointer-events: auto;"><!--!-->
<span class="mdc-tab__text-label">Threats and Countermeasures</span><!--!-->
</span><!--!-->
<span class="mdc-tab-indicator "><!--!-->
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span><!--!-->
<span class="mdc-tab__ripple"></span>
</div>
Does not currently work due to <span class="mdc-tab__content" style="pointer-events: auto;">
The following code does not work either since the tab will still have style="pointer-events: auto;"
<MatTab>
<LabelContent>
<span style="#((loadData ? "pointer-events: none;" : ""))"> Threats and Countermeasures </span>
</LabelContent>
<ChildContent>
Content
</ChildContent>
</MatTab>
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>
With the use of namespace, i'm trying to make a div-element in Javascript where if you hover over the div it'll change color and change back when not hovering over it. Please help!
Is this what you need? There is many ways to do it, I used plain js. The css you put whetever you want.
I don't understand what the namespace means in your situation.
Following are the respective javascript, css and html. But things like this you can google and find the parts that you need.
function changeColors(){
if(document.getElementById("myElement").classList.contains('class1')){
document.getElementById("myElement").classList.remove('class1');
document.getElementById("myElement").classList.add('class2');
}else{
document.getElementById("myElement").classList.remove('class2');
document.getElementById("myElement").classList.add('class1');
}
}
.class1{
color:red;
}
.class2{
color:blue;
}
<div>
<h3 id="myElement" class="class1" onmouseover="changeColors()"
onmouseout="changeColors()">
Hello
</h3>
</div>
Is there a way to extract hardcoded styles in html documents to external css file ? If not, do you have an idea on how to do this? Have you ever done it before ?
Example, from:
<div style="background-color: red">
<a style="font-weight: bold"></a>
</div>
to
<div id='st-01'>
<a id='st-02'><a/>
</div>
#st-01 { background-color: red }
#st-02 { font-weight: bold }
Not exactly what you are looking for but if you don't mind copying and pasting your HTML, try this. Not too many features but it does the job!
http://extractcss.com/
https://github.com/peterlazzarino/Inline-CSS-Extractor
You can use some JS/JQuery code to extract the styles, clear them, give elements an ID and add up css.
Check this example, you may extend it further.
$(document).ready(function(){
var i = 0;
var css = "";
$("div,a").each(function(){
$(this).attr("id","st-"+i);
css += "#"+$(this).attr("id")+"{"+$(this).attr("style")+"}";
$(this).removeAttr("style");
i++;
});
$("style").html(css);
});
http://jsfiddle.net/d8TaJ/
I have following links
<ul class="dropdown dropdown-horizontal">
<li>Wall</li>
<li>Introduction</li>
<li>Activities</li>
<li>Reviews</li>
<li>Recommendation</li>
<li>Photos</li>
<li>Discussion</li>
</ul>
and if I click on any link then it must be high lighted.
I think you want the a:active CSS psuedo-selector.
You don't need javascript to do this. Some CSS rules are enough.
Depending on which behaviour you need you could use one or all of this HTML pseudo-selectors (:link, :visited, :hover, :active).
The link selector specifies the behavior of the link when It's not clicked nor activated for any reason, in other words in its normal state.
The :active pseudo-class adds a style to an element that is activated.
If you need to be more specific and for example want to highlight what you mouseover (in other word only when the link is under your mouse) put this in the head section of your HTML:
<style type="text/css" media="screen">
a:hover { background: #fbdbe8; color: #F55B99;}
</style>
If you want to highlight what you already visited vs what not put this in the head section of your HTML:
<style type="text/css" media="screen">
a:visited { background: #fbdbe8; color: #F55B99;}
</style>
Then every clicked link would be highlighted when you come back to the page.
You can, of course add the style rules I said in an external .css file instead of having them in the head.
Hmm:
<a href="#" id='photos'
onclick="var photos=document.getElementById('photos');photos.style.background='chartreuse';false;">
Photos</a>
The easiest way would be to use jquery
You would have somthing like:
$('.menuItem').click(function() {
$('.current').removeClass("curret"); // To remove the highlight from the previous selection
$(this).addClass("current")
});
Then in your css you would declare current with the styles you want. One advantage of this vs the css pseudo selector is that you can do something like $(this).parent() to access the parent element of the link, in case your menu is a ul.