I've been trying to change the background color of these buttons on stackoverflow:
If I edit the background property in Firefox's inspector, everything functions as expected:
However, once I run a greasemonkey script to change it, I run into issues. It's like my script permanently froze the background of the button:
var tags = document.getElementById("nav-tags");
tags.style.background = "#1D3239 none repeat scroll 0% 0%"
Every stackexchange post I've looked over and every article I've found through Google search says that the way to change the property of a CSS class is to set it through object.style, but since I'm experiencing this behavior of the background freezing and never changing along with only the tag button changing and none of the others, it leads me to believe that setting the background of the style is really just changing (and freezing) the background of the element and not the class.
How can I change the background of the class (not just that one element) and not have it permanently freeze the change (I want the orange highlight to still happen)? Even if the buttons had classes, the only way I know to access them is through document.getElementsByClassName() which would return elements and not the class. I don't know how to edit the class directly through JavaScript.
Also, on the topic of the orange highlight, I don't see a property for it anywhere in the Firefox inspector window. Where can I find it so that I know what to modify?
Label the buttons with the same class, say "orangeToBlack", then use CSS:
.orangeToBlack {
background-color: orange;
}
.orangeToBlack:hover {
background-color: black;
}
Related
Image link- scss style issue
I tried to change cursor style from pointer to default. But when I save the file and reload react app, the style is not changing. Tried to write code but SO keeps showing a message, guess I am doing it wrong.
When I inspect the element, the cursor default stile has been stiked through and a blue tick was appeared near cursor pointer , which was not even in my code.
Please check the image link above.
In the image attached you have a typo, should be cursor: default not dafault.
If the style is strike-through it means your style got overridden after.
Try to use the !important attribute:
cursor: default !important;
I have a module that shows/hides content when engaged with via hover or focus states.
I want to have the hidden content within the first section visible when you first arrive on the page, and then once a user engages with the module, have its current functionality take over.
I've tried to isolate this section via the CSS using .color:first-child -- You'll notice a red border around the section that I'd like expanded on page load within the codepen below.
https://codepen.io/ckatz/pen/XQaKdB
Is this something that can be accomplished solely in CSS, or would JS or JQuery need to be employed?
You could create an 'active' class with the same styles as the hover classes and apply it only to the first one, but it would not be removed upon interaction with the module. You could use sibling selectors to overwrite them while the other divs are focused/hovered, but it would revert when the user goes somewhere else. Ultimately you'd need JS to detect that something had been hovered/clicked and remove the styles permanently.
.color:hover, .color.active {
/* Change the flex-basis so that we know what
size to transition to on hover. Arbitrary,
based on our design/content.
*/
flex-basis: 20em;
}
.color:hover .details, .color.active .details {
opacity: 1;
}
And some JS that detects mouseover to remove the class, but you could use clicks and/or whatever other events you deem necessary:
const module = document.getElementsByClassName('color-list')[0];
module.addEventListener('mouseover', function() {
const firstBox = document.getElementsByClassName('light-brown-55')[0];
firstBox.classList.remove('active');
})
I made a working fork here
Evernote places a max-width limit on web view content, and I have identified its location in Chrome developer tool(F12). Evidence: Unticking the checkbox beside "max-width" will stretch the table to full window width.
My question is, how can I remove that css statement with JavaScript code?
I have tried this:
document.getElementById("container").style.removeProperty("max-width")
but in vain.
The above web page can be reached at http://www.evernote.com/l/ABXYD6q6bM9MyaAfRs78hQnq6VMINfVJODg/
Given that this statement isn't set as inline style, you won't be able to remove it.
However, you could change its value and set it to none by adding an inline style declaration, which will override the current value.
Demo:
var elem = document.getElementById('container');
elem.style.maxWidth = 'none';
Not sure how webview works, but could you try using javascript to add a new class to it that added a max-width of 100%?
document.getElementById("container").classList.add('no-max-width');
then in the styles.css put
.no-max-width {
max-width: 100%; }
If that's not possible, then try
document.getElementById("container").style.maxWidth('100%');
Though I sometimes have trouble with .styles so not sure if that is exactly right, plus I've read it's better to add classes rather than play with css styles in JS, but also not sure how accurate that is.
I have a strange problem in my web-app (php) that I noticed recently.
1 month ago it worked just fine.
When I hover above a certain < TEXTAREA > or over 2 buttons (add, exit),
in a DIV, the DIV gets filled with its background color, making the INPUT, TEXTAREA and 2 buttons invisible.
This DIV is practically a window with 2 inputs and an OK and exit button,
that I hide and show, as a "window" thing would be in Windows.
The moment I hover any other button in the page (so I do a mouseOver), the DIV
shows up again, and it starts working the proper way.
So the problem is when i hover on the TEXTAREA and the 2 buttons, the DIV gets gray.
thanks!
i hope it's not a Chrome bug, in Firefox it seems to work,
but again in Opera it doesn't. So strange.
took at look at your site in Chrome and was able to replicate your problem easily.
by using the "Element Inspector" i removed overflow:hidden from .my_links_header_container and could no longer replicate the problem.
i tested it several times by reloading the page.
on page load, the problem existed, but immediately. after i removed the overflow:hidden, it 100% did not occur again.
on a side note, you have an inline style="display:block" on your .add_link_table, which is not really a table element but a div. that's redundant because a div is a block element by nature -- perhaps it was a table element previously?
i also noticed several elements whose natural display was overridden by your CSS. i think part of this problem is related to flip-flopping your elements and displays.
Seems to be a webkit issue.
This may not be a good solution, but give it a try
I am modifying you addLink method (use plain javascript or jquery selectors as you like, Ive kept the original code as it is)
function addLink()
{
var addLinkTable = $("#add_link_table");
if(document.getElementById('add_link_table').style.display=='block')
{
document.getElementById('add_link_table').style.display = 'none';
}else{
addLinkTable.css("visibility","hidden");
document.getElementById('add_link_table').style.display ='block';
setTimeout(showTable,10);
function showTable(){
addLinkTable.css("visibility","visible");
}
}
document.getElementById('link_name').focus();
}
Try it out with by switching visibility or opacity or height
I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC
I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:
There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }