In my webpage I am trying to get a custom scroll bar. It is working fine.
Now I have a theme button which allows user to choose either a black theme or a white theme. For this I wrote two css files, one carbon.css and another quartz.css
When a user clicks on one of the themes, I am updating the css file with the below function.
I am able to see all changes correctly except the scroll bar. Until I hover my mouse over the scroll bar, that css change is not happening.
To be more clear, suppose i am in black theme. I am seeing black scroll bar. Now when I click the white theme, I am seeing all my background, text changing properly to white theme. But the scroll bar still remains in black theme. Once I move my mouse on to scroll bar it is updating the scroll bar to white theme.
How can I solve this problem?
Thanks!
Hey Anubav: here is the code I am working after including your changes:
trail.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<link href="./carbon.css" rel="stylesheet" type="text/css" id="extCSSFile"/>
<script type="text/javascript">
$(document).ready(function() {
function changeAndPaint(that){
var filename = $(that).attr('data-href');
$('#extCSSFile').attr('href',filename);
var newfile = $('#extCSSFile');
$('#extCSSFile').remove();
$(that).css('display','none').height(); //<--this is the trick to repaint
$(that).css('display','inherit');
var elem = $('<link href="" rel="stylesheet" type="text/css" id="extCSSFile"/>');
$(elem).attr('href',filename);
$('head').append(elem);
}
$('#carbonTheme,#quartzTheme').on('click', function(){
changeAndPaint($(this));
});
});
</script>
</head>
<body>
<ul id="nav">
<li id="carbonTheme" data-href="./carbon.css">carbon Theme </li>
<li id="quartzTheme" data-href="./quartz.css">Quartz Theme </li>
</ul>
<div>
<p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p><p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p><p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p>
<p></p>
<p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p>
<p></p>
</div>
</body>
</html>
carbon.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size:8.5pt;
width:inherit;
min-width:100px;
max-width:250px;
margin:10px;
background-color:#191919;
color:white;
}
ul{height:1000px;}
#carbonTheme, #quartzTheme{
text-decoration:underline;
color:blue;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color:#aaa;
}
::-webkit-scrollbar-thumb {
background-color:black;
}
quartz.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size:8.5pt;
width:inherit;
min-width:100px;
max-width:250px;
margin:10px;
}
ul{height:1000px;}
#carbonTheme, #quartzTheme{
text-decoration:underline;
color:blue;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color:#333;
}
::-webkit-scrollbar-thumb {
background-color:white;
}
To force the browser to repaint the complete DOM just do
$("#body").offset().Top;( body is the ID given to body tag to speed up the selector )A simple approach to your task can be just add a attribute
disabled="disabled"to your link elementInclude LINK in HEAD section as :
Include Script Below the link as :
Complete html page may look like :