Develop Reference

How to change CSS vars in ASP.NET MVC Core2 dynamically?

I want that the user is able to specify his favorite color. The whole page should then change to this specific color scheme.
My CSS is done with this as base:
:root {
--maincolor: black;
}
What would be the best way to change this variable inside my CSS dynamically on a button press or something like this?
PS: I would prefer to set this value only a single time and then be done with it
EDIT: Solution for me:
<script>
var color = "#Html.ViewData["Color"]";
document.body.style.setProperty('--maincolor', color);
</script>
Was enough to change --maincolor as i want. To set the color put this inside a controller:
ViewData["Color"] = "red"

Your best option, in my opinion, is to associate the user to a CSS class, not a color. Then, changing the class per user becomes trivial.
For example, you could store and retrieve this CSS class from your database or other persistence method. Then, upon retrieval, you could simply add the class to your element via Razor like so:
<div class="#UserColorClassName">
<p>
Any text you like here for User: #UserName
</p>
</div>
There are other variations of this method, as well. For example, you could create a database table of "UserCSSClasses" that would house class names and properties for different users.
Or, you could simply store the CSS hex-color and associate that with the user.
An example of this implementation would be as follows:
<div style="color: #(!string.IsNullOrEmpty(UserHexColor) ? UserHexColor : "")">
<p>
Any text you like here for User: #UserName
</p>
</div>
Edit: It sounds like you have a lot of changes to make on a per-User basis, not just one color. For this, I recommend the following solution:
Store the User/class association in the database or other persistence method as described above.
Instead of applying the class on elements inside of your view, apply it to the body element or that of a containing element.
This way, you can change as many classes as you want with CSS overrides:
body.User001 h1 {
color: red;
}
body.User001 p {
color: #c1c1c1;
}
body.User001 p span.caption {
color: red;
}
body.User002 h1 {
color: blue;
}
/* etc... */

How to create a Back button which will land at the specific text/link clicked on to view an image

What I am trying to do:
I have mutiple anchor links within text, each of which refers to and connects to a specific image (on the same page).
After the user views that image, I would like them to hit a 'Back' button, which will bring them back to the text where they clicked on the link, to continue reading from where they left off.
(I have created the button in the html, with an 'id' of 'backButton').
Note: I am new to JS and jQuery, and perhaps my inability to find a plugin or explanation of how to do this has something to do with a failure to do a search with a clear and concise explanation in a search box.
(It seems to me that this would be a fairly commonly used feature)
This is where I currently stand with my attempts to use jquery for this:
$(function(){
$('a').click(function(){
$(this).attr('id', 'backToLink').addClass('que');
$('#backButton').attr('href', '#backToLink');
});
});
(I will try to explain my reason for why I did each step so that someone might tell me why it is wrong):
$('a').click(function(){
For each anchor, when it is clicked on, do this function,
$(this)
Refer to the anchor link that was clicked,
.attr('id', 'backLink')
Give this anchor the 'id' of backToLink,
.addClass('que');
Add the class of que, which is set in my CSS file to give padding-top so that the text will be visible below the fixed-position header,
$('#backButton').attr('href', '#backToLink');
Set the #backButton href to go back to the original link in the text, which should now be #backToLink.
Note: I suspect it will be necessary to turn off that id of #backToLink after it is used,
so that the next time it is used it will not conflict with the first.

I think the issue here is if you want to use anchor navigation then you dont need to use html button. Just simply use anchors. Here is a simple example of what you want to achieve. You can add in logic to make it dynamic according to your needs or keep it like this with adding the number of links manually. Hope this helps.
P.S. css classes are used just to add spacing to demonstrate the scrolling.
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("a").click(function() {
scrollToAnchor($(this).attr('href').slice(1));
});
#container{
height:2800px;
}
#block1{
background-color:black;
width:100px;
height:100px;
margin-top:1000px;
display:inline-block;
}
#block2{
background-color:black;
width:100px;
height:100px;
margin-top:600px;
display:inline-block;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="container">
Link to Block 1
<br><br>
Link to Block 2
<br>
<div id="block1"></div>
Back to Link 1
<br>
<div id="block2"></div>
Back to Link 2
</div>

How to write CSS styles in a CSS files using JS?

Suppose I have a CSS file custom_style.css and a HTML file custom_render.html.
custom_render.html contains some input field to take input from user and than generates CSS styles based on those input.
Now I want to store those generated CSS styles in a CSS file called custom_style.css [that is located in my projects root directory], so that I can show the users a preview/output of their selections.
After googling I got a way to store those generated CSS in the same file [custom_render.html] using JavaScript, but I want to store them in custom_style.css.
Can anyone tell me how can I write CSS Styles in CSS files using JavaScript or other JavaScript framework.
- Thanks

Well, you can modify the parameters of objects in your stylesheets. For example:
document.styleSheets[i].rules[j].style.marginTop = "100px";
i being the number corresponding to the sheet you want to edit
and
j being which element rule you want to change the parameter for.
In this case I used marginTop as a paramater and 100px as a value but it could be whatever valid CSS you would like.

simple... (assuming this is what you trying to achieve)
var elem = document.getElementsByClassName('target_class');
// should use for loop to assign click event to each element containing this class
elem[0].onclick = function() {
elem[0].style.background = 'green';
elem[0].style.opacity = '0.2';
}
<div class="target_class" style="width: 200px; height: 200px; background: red"></div>

insertRule(rule, index)
This will inserts a new rule to the stylesheet, where the parameter "rule" is a string containing the entire rule to add (ie: #myid{color: red; border: 1px solid black}), and "index", an integer specifying the position within cssRules[] to insert the new rule.
document.styleSheets[0].insertRule("p{font-size: 20px;}", 0) //add new rule to start of stylesheet

Hashtag in URL for show div base on compare ID

Ok, I will try explain my question.
I need to add class ".active" into already existing class ".jobs", when URL have hashtag same as ID, inside tag with class ".jobs".
Here is working code just for one compare:
$(document).ready(function() {
var hashVal = window.location.hash.split("#")[1];
if(hashVal == 'programmer') {
$("#programmer").addClass('active');
}
});
In practice:
Someone will come to website www.domain.tld/jobs#programmer then I need compare "#programmer" from ULR with all existing IDs in all <div> tags, which also have class ".jobs", and if there will be someone with class="jobs" and also id="programmer", I need to add into this <div> tag class "active".
Is there a way to make jQuery code more variable? Like without having add comparison for each ID name? and also I need to move browser windows on position, where div with that ID it is.

var hashVal = window.location.hash.split("#")[1];
if($('#'+hashVal).hasClass('jobs')) $('#'+hashVal).addClass('active');

show content on specific page javascript

I am trying to show a div element on a specific page e.g. - example.com/my-account , right now it is showing on all my-account pages for example - example.com/my-account/lost-password
I know how to use JavaScript but not in webpages so can someone help me? This is how I would do it with JavaScript. I just need someone to help get this to work inside the php page I am trying to edit.
<script>
var cx = window.location;
var curWin = String(cx);
var myAccount = "http://example.com/my-account/";
if (curWin == myAccount){
<div id="banner"><img src="http://img.c5454o.png"></div>
}
</script>

If you open your developer tool, you can see that the body is assigned with classes (when using <body <?php body_class(); ?>>).
For example <body class="home page page-id-7 page-template-default">.
So from here on, you can tell css what to do like so:
#banner {display: none;}
body.page-id-7 #banner {display: block;}
So you don't realy need Javascript to detect a specific page and display a specific element.

Add Your condition like this
var cx = window.location;
if(cx.substr(-11)=="my-account/") {
//then do whatever you want
}
OR if your string is without last slash then..
if(cx.substr(-10)=="my-account") {
//then do whatever you want
}
substr(-11) function will cut your string of url from last 10 indexes so
you can apply your contion then.

if you want to show a div element on specific page then create a unique id on that page like <div id='UniqueId'> then go to javascript code and write,
jQuery Code is:
if($('#UniqueId').length > 0)
{
//show specific element
}