How do I set this div's style in the style sheet? - javascript

<style type="text/css">
#[':0:adId'] { /* this does not work */
background:red;
}
</style>
<div id=":0:adId">Loading...</div>
Google Maps use this id format. How do i set the style?

You simply need to escape the : with a \:
<style type="text/css">
#\:0\:adId {
background:red;
}
</style>

You could do this with a attribute selector, like so:
div[id=":0:adId"] {
background: red;
}
This will not work in all browsers(you guessed IE), so you might have to include some javascript to do the trick there:
$('div[id=":0:adId"]').css({
background: '#FFF'
});
(Uses jQuery)

Related

Is it possible to assign a class to :root?

As I am thinking about solutions to another problem of mine, I am trying to understand to which extend CSS elements can inherit from other elements. Specifically, having the following definition
.dark {
background-color: black;
}
.light {
background-color: white
}
is it possible to programmatically assign (with JS, probably) one of these classes to the :root element?
It can be done easily with JS.
Select the element:
const root = document.querySelector(':root')
Assign the class to it:
root.classList.add('light')
All together:
const root = document.querySelector(':root')
root.classList.add('light')
Or, instead of having two classes, it might be better to have a :not() selector:
:root:not(.dark){
background-color: white;
}
:root.dark{
background-color: black;
}
I would use (and have used) CSS variables for this.
:root {
--background-color: black;
}
.background {
background-color: var(--background-color);
}
Then change the CSS variable with javascript.
In HTML, :root is equivalent to <html> (doc):
In HTML, :root represents the element and is identical to the
selector html, except that its specificity is higher.
A possible solution would be to apply the class to <html>:
document.getElementsByTagName("html")[0].classList.add('dark')
.dark {
background-color: red;
}
<html>
hello
</html>

Make perfect scrollbar visible by default

I am using perfect scrollbar for custom scroll bar. It is working fine.
But the scrollbar is visible only when you mouse over on the container.
How do I make this visible all the time?
$('.container').perfectScrollbar();
Demo
From the perfectscrollbar wiki:
How can I make the scrollbars always visible?
The reason why it's hidden by default is that opacity: 0 is used.
Please change all references of it to opacity: 0.6. If using .scss,
modify the line #include opacity(0) to #include opacity(0.6) in the
scrollbar-rail-default mixin and run gulp build to build .css and
.min.css files.
If you're not willing to modify the CSS files but would like to make
it always visible, please add following lines anywhere after
perfect-scrollbar.css is loaded.
.ps-container > .ps-scrollbar-x-rail,
.ps-container > .ps-scrollbar-y-rail { opacity: 0.6; }
Also, an example code may be helpful to see how to achieve it.
Here is example https://github.com/noraesae/perfect-scrollbar/blob/master/examples/always-visible.html
So, if you modify your JSFiddle by pasting the following into your html, it works.
<div class="container">
<div class="content"></div>
</div>
<style>
.ps-container > .ps-scrollbar-x-rail,
.ps-container > .ps-scrollbar-y-rail { opacity: 0.6; }
</style>
In addition you have to make sure perfect-scrollbar is updated at the right time. If the content is loaded dynamically, call ps.update().
Warning, make sure the the call is made after your data is loaded, on VueJS I had to do it in the 'nextTick' function :
this.$nextTick(() => {
ps.update();
});
},
I guess a timeout may works too.
.ps__rail-x,
.ps__rail-y {
opacity: 0.6;
}
This worked for me.
Try this. This will work even if the container class doesn't exist in you application
.ps> .ps__scrollbar-x-rail, .ps> .ps__scrollbar-y-rail{
opacity: 0.6;
}
I'm using ngx-perfect-scrollbar in Angular 8 and fixed problem by adding the following styles
.ps > .ps__rail-x,
.ps > .ps__rail-y {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script>
<style>
h1 { text-align: center; }
.container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
.container .content { background-color: red; width: 1280px; height: 720px; }
</style>
<style>
/* to make scrollbars always visible */
.always-visible.ps-container > .ps-scrollbar-x-rail,
.always-visible.ps-container > .ps-scrollbar-y-rail {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Default</h1>
<div class="container">
<div class="content">
</div>
</div>
<h1>Always visible</h1>
<div class="container always-visible">
<div class="content">
</div>
</div>
<script>
window.onload = function () {
[].forEach.call(document.querySelectorAll('.container'), function (el) {
Ps.initialize(el);
});
};
</script>
</body>
</html>
I had the same issue. Make sure you are rendering the content first and after that you are creating the scrollbars. No CSS changes are needed. I'm using perfect-scrollbar.jquery.js

How to hide the "body" statement in css and javascript

but after a treatment i want to hide it so i did this:
CSS Code :
body {
text-align: center;
background: url(../images/greenbg.png);
color: #fff;
font-family: myriad pro;
}
body#hide{
visibility: hidden;
}
But i cant't find a way to use the " body#hide" property in my javascript code .
Any idea please?
Thank you in advance
F. Calderan is right, but in this case to avoid any misunderstandings(with already declared IDs) it's better to use css classes.
For Example:
<style>
.inVisible{
visibility: hidden;
}
</style>
<script>
function HideBodyElement(){
document.body.className = "inVisible"
}
</script>
<body>
<button onclick="HideBodyElement()">Hide body</button>
</body>
just use
document.body.id = "hide"
and the css rule you wrote will be applied to your body

New <style> element not working in IE

I currently have an HTML page that has a grey BODY background. Now I would like to overwrite this and change this to white using Javascript. I also would like to change some other elements' padding and margin. I try to accomplish this using the innerHTML property.
The thing is everything is working, apart from the newly introduced element, which is not applied in IE7 or IE8. It does work in FireFox however.
<script>
// if using jQuery
$(document).ready(function() {
document.body.innerHTML = '
<style type="text/css">
body {
background-color: #FFFFFF
!important; }
#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums {
padding: 0 !important;
margin: 0 !important;
}
</style>
<div style="text-align: left; background-color: #FFFFFF">' +
document.getElementById('WebPartctl00_SPWebPartManager1_g_7118b319_c5b0_4214_a46d_27131866cde3').innerHTML +
'</div>';`
});
</script>
Can you please advise?
Many thanks!
The <style> tag is only valid inside the <head>, though some browsers may respect it in other places. If you want to change the body background or other properties with a script, use the appropriate .css() method in jQuery.
$(document).ready(function() {
$("body")css("backgroundColor", "#FFFFFF");
$("#todayBirthdays,#weekendBirthdays,#noBirthdays,#todayJubileums,#weekendJubileums").css("margin", "0");
});
Why not just
$('body').css('background-color', '#fff');
$('#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums').css('padding', 0).css('margin', 0);
See the CSS property of jQuery and also the addclass method. This is much easier than what you are doing!
$('body').css( { backgroundColor: 'value1' } );
$('#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums').css( { padding: 'valuex', margin: 'valuey' } );
Although I think you should be using addClass instead.
.myClass { /* Some styling */ }
$('#x, #y, #z').addClass(myClass);
<html>
<head>
<style type="Text/css">
body { background-color: #AAA; }
</stye>
</head>
<body>
<script type="text/javascript">
var style = document.createElement('style');
style.innerHTML = 'body { background-color: #F0F; }';
// add any other styles inside this style element
document.getElementsByTagName('head')[0].appendChild(style);
</script>
</body>
Demo of appending to the <body> and the <head>
If you are stuck on adding in an inline style which is what you asked then use the following:
$("<style type=\"text/css\"> body{background-color: #FFFFFF;} #todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums { padding: 0 !important; margin: 0 !important;} </style>").appendTo("Head");
This will append your styling to the head element of the document. However in reality the better way to go if you are going to use jQuery or javascript is to just change the values of the background.
document.getElementByTagName(body).attribute(background-color)="#FFFFFF";
OR
$("body").css("background-color", "#FFFFF");

removeAttr / addClass issue on IE6

This question was asked here but the issue wasn't resolved.
Please see this jsfiddle on IE6 : http://jsfiddle.net/RnsxM/2/
Basically a sprite image (not png fixed) won't update correctly in IE6. The class seems to be applied (and works without javascript) but the combinaison removeAttr + addClass seems broken.
I tried :
!important css statement
use of background-position-x or background-position-y
Does someone know a workaround ?
Not to do with scripting, this is a simple CSS brokenness. Something in IE6's selector engine can't cope with the idea of there being two #id.class rules with the same #id on a single stylesheet. This shorter example demonstrates:
<style type="text/css">
#sprite.pos1 { background: red; }
#sprite.pos2 { background: yellow; }
</style>
<div id="sprite" class="pos2">Hello</div> <!-- White in IE6! -->
You can avoid it by putting the IDs and classes on different elements, or just breaking the stylesheet up into two:
<style type="text/css">
#sprite.pos1 { background: red; }
</style>
<style type="text/css">
#sprite.pos2 { background: yellow; }
</style>
<div id="sprite" class="pos2">Hello</div>
#bobince is right. I'm make a jsfiddle and run it in IEtester and I see that IE6 does not accept the selector:
#sprite.pos1
but accepts:
.pos1
I think basically is that and I recommend you that make an alternative selector for IE6, something like this:
#sprite.pos1 { background-position: -120px 0; }
.pos1 { _background-position: -120px 0; }
#sprite.pos2 { background-position: -240px 0; }
.pos2 { _background-position: -240px 0; }

Categories