I've noticed on a lot of sites with custom highlight colors, if you press CTRL + A, the default highlight color, blue, always manages to creep through. Why is that? In making my own site, I have my own custom color too, but I also have the same problem. Does anyone know how to keep this from happening?
http://www.smashingmagazine.com/, http://www.admixweb.com/ are both examples of the CTRL + A problem.
Selection styles are mostly browser dependant, and might not be customisable in all browsers. Here is an example of how to configure such styles.
p.normal::selection {
background:#cc0000;
color:#fff;
}
p.moz::-moz-selection {
background:#cc0000;
color:#fff;
}
p.webkit::-webkit-selection {
background:#cc0000;
color:#fff;
}
Such styling are very risky to use and should not be depended upon.
Smashing Magazine is declaring their CSS selection as follows:
::selection{background:#333; color:#fff}
::-moz-selection{background:#333; color:#fff}
Hitting Cmd + A on my Mac yields the anticipated behavior in Chrome 12.
Related
I have a css class "buttonClass". I have a few pseudo-classes, of note: "buttonClass:hover".
In one case I have used two different images, and the hover feature works at switching between images.
In another case I'm using sprite style images and the pseudo class should adjust the background position appropriately.
When I used object-position the hover feature worked great in Chrome, but wasn't working in IE11, just to find out that IE doesn't support object-position.
So I switched to background-position. In the debugger switching the position values gets me the effect I need, but for some reason in the modal window where the button is, the hover feature is not working.
Classes are:
.buttonClass {position:absolute; bottom:15px; left:340px; background-position:0 0; background-repeat: no-repeat; width:118px; height:60px; }
.buttonClass:hover {position:absolute; bottom:15px; left:340px; background-position:-120px 0; background-repeat: no-repeat; width:118px; height:60px;
JavaScript file excerpt:
g = document.createElement('button'); g.className = 'buttonClass';
Other attempts have used the following in the JavaScript to no avail:
g.onmouseover = function () {
g.classList.remove("buttonClass")
g.classList.add("buttonClass:hover")
}
g.onmouseout = function () {
g.classList.add("buttonClass")
g.classList.remove("buttonClass:hover")
}
Adding a breakpoint has no effect...as thought the code is never implemented, However, changing values in the JS file and in the css does impact the contents if the div tag being used as a button.
Sites I've tried:
https://www.quora.com/Can-I-add-the-hover-pseudo-class-to-an-element-using-JavaScript
Setting CSS pseudo-class rules from JavaScript
https://www.w3schools.com/css/css_pseudo_classes.asp
Unfortunately, the code I'm working with is already existent and too large to paste a miniature functional piece. I'm trying to debug it so the features work "as advertised" so to speak.
Answers can come in the form of direct suggestions or references to sites or already answered questions that I've missed due to my particular formatting of inquiry.
Sorry, this wasn't a pseudo-class or browser issue. It was an inheritance issue. The button inherited from several divs up a pointer-events:none attribute. So adding pointer-events:all to the button class resolved the hover issue.
I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.
I am trying to create a button on a web page to increase the page size, font size image size etc. This is for a Special needs school website in order to make it more accessible. website is www.applefieldsschool.co.uk. Please note it is a work in progress.
So far I have managed to come up with this;-
<button onclick="body.style.zoom='300%'">Zoom 300%</button>
This works but simply magnifies what is rendered on the page and is not responsive. My page is HTML5 and CSS3 responsive to different viewport sizes etc.
If I use the keyboard shortcut Ctrl+ and Ctrl- This does exactly what I need. I now need to program a button to utilise the keyboard shortcut.
Sadly this is getting a little beyond my javascript skills (which I have only just, in the last week, started to play with) Thanks in advance.
It's not possible to tell your browser to 'Use the CTRL + + keys'.
Here is another thread which lists some possible alternatives. In particular:
body {
transform: scale(1.1);
transform-origin: 10% 10%;
// add prefixed versions too.
}
You can also set the font-size. Unless you did all your sizes in em, which is relative to the font size, this won't really zoom the page as such, but it will (obviously( change the size of the font (which may still be acceptable for you).
You can try this:
var value = event.keyCode;
Call it from onkeydown="keyCode(event);"
And here is the list of keycodes:
http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
I guess the zooming is browser specific (please corret me if i'am wrong)
I'd recommend to add multiple styles, that you append on the website and define by your self.
for example, some CSS
/*default -no styles*/
body
{
font-size: 14px;
}
body.big
{
font-size: 20px;
}
body.omg
{
font-size: 25px;
}
body.omg img
{
width: 150%;
}
The pain with this is, that only the text will be scaled up. You will have to adress certain items to make them appear bigger. Like the <img> in the example.
Then you can address the styles on button click (you should maybe use something like jQuery to make this more clean...)
<button onClick="document.getElementsByTagName('body')[0].className ='big';">+ Zoom</button>
<button onClick="document.getElementsByTagName('body')[0].className ='omg';">++ Zoom</button>
Update here in an working example, using jQuery: http://jsfiddle.net/9DCry/
I have found a javascript function that inverts colors on webpage:
String javascript = "javascript: (function (){var newSS, styles = '* { background-color: black ! important; color: green !important; }a:link, a:link * { color: green !important; text-style: underline; }a:visited, a:visited * { color: #7f0000 !important; }a:hover, a:hover * { color: red !important; }';var elemHead = document.getElementsByTagName(\"head\")[0];var elemCSS = document.getElementById(\"darkenCSS\");if (elemCSS){elemHead.removeChild(elemCSS);}else{newSS = document.createElement('link');newSS.rel = 'stylesheet';newSS.href = 'data:text/css,' + escape(styles);newSS.id = \"darkenCSS\";elemHead.appendChild(newSS);}})();";
Is it possible to run this automatically?
By that I mean load www.google.co.uk and apply this javascript function.4
Hope that makes sense, I don't know much about javascript.
CLARIFICATION:
I want to know if this javascript function can be appended to a URL at all. Something like http://www.google.com/?Javascript_blah_blah_blah
FURTHER CLARIFICATION:
I am making a basic web browser in Android. I want to invert colours on the webpage.
I have made a button, that executes this javascript on the page. This works. But needs the user to press the button each time.
I want to make a switch to make permanently inverted.
So I need to browse to the url input and have it invert the colours automatically.
Hope this helps
Yes, paste the string without quotes into the address bar. Be sure that the psuedo-protocol javascript: is at the beginning
addition by rlemon
You first need to modify your script to unescape the escaped quotes, then add a new bookmark to your addressbar. Edit the bookmark and change the location to
javascript:%20(function%20(){var%20newSS,%20styles%20=%20'*%20{%20background-color:%20black%20!%20important;%20color:%20green%20!important;%20}a:link,%20a:link%20*%20{%20color:%20green%20!important;%20text-style:%20underline;%20}a:visited,%20a:visited%20*%20{%20color:%20#7f0000%20!important;%20}a:hover,%20a:hover%20*%20{%20color:%20red%20!important;%20}';var%20elemHead%20=%20document.getElementsByTagName("head")[0];var%20elemCSS%20=%20document.getElementById("darkenCSS");if%20(elemCSS){elemHead.removeChild(elemCSS);}else{newSS%20=%20document.createElement('link');newSS.rel%20=%20'stylesheet';newSS.href%20=%20'data:text/css,'%20+%20escape(styles);newSS.id%20=%20"darkenCSS";elemHead.appendChild(newSS);}})();
There you have it!
No, you can't "just run" javascript appended to a URL. This is security breach (will be). But you can use
bookmarklets ('URL' that begins with javascript:),
browser plugins (Chrome/FF/Safari - all can do this) or
you can look for plugin that can run userscripts. This is something like Greasemonkey.
Also you can try Fluid (Site Specific Browser, MacOS X only)... I think you get an idea.
BTW if you want/need to write bookmarlet you can run on specific site and want something to start - check this article: http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/
The easiest way if you are using Firefox (it is said the add-on works in Chrome and Opera, but I never tried it) is to install Greasemonkey and create a userscript for the domain(s)/URLs you want - www.google.co.uk/*, www.google.com/* etc.
However things like this are better done with Stylish extension, but you can use only CSS there, no JavaScript. But in what you presented, the following CSS fragment should work like a charm:
* { background-color: black ! important; color: green !important; }a:link, a:link * { color: green !important; text-style: underline; }a:visited, a:visited * { color: #7f0000 !important; }a:hover, a:hover * { color: red !important; }
There are lots of userscripts and userstyles available on the web.
You could use Chrome + http://defunkt.io/dotjs/ to achieve that. That's exactly the purpose of this extension: automatically run some JS scripts on specific websites.
It's OSX only for now but I guess there are some other extensions doing that as well.
I've spent numerous hours trying to figure out how to get this slider to use li's with background images rather than img's.
The reason for this is that I intend to use the slider for Wordpress & many Wordpress themes apply their own css properties to images (such as 'max-width') which will often break the slider. I would appreciate if anyone could check out the following scripts and change it to work with li's :) I've been trying myself but for some reason all it would do is load forever never showing any images..
Here is the script:
http://pastebin.com/8J9uwRtZ
In the meantime I will continue to try figure this out myself. I would appreciate if anyone could help me out.
Here is a test site with an example of the slider not working with the theme 'Thematic' which applies a 'max-width' of 100% to images & an example of a theme which doesn't (hence the slider works perfectly). FYI removing the max-width from 'Thematic' & other themes fixes the slider everytime so this is definitely the problem; hence why I wish to use li's instead of img's.
http://www.matthewruddy.com/demo/ <- not working
http://www.matthewruddy.com/demo/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true <- working
Thanks to anyone who can help! Matthew.
As akonsu said, your best bet is applying a specific image style to the lof class. The default style defined by the themes image.css file only gets applied for.. you guessed it.. default images. Properly redefining it in the lof class will overwrite that rule and use the new style. If your browser still doesn't seem to be picking it up, throw a big fat !important to the end of the style rule and everything except IE6 will pick it up just fine.
Max-width is only applied to images with no other specific rules present, hence "cascading" style sheets. CSS rules marked !important take precedence over other rules for the same type. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence. ie:
p { color: blue !important; }
.container h3 { do stuff }
.container p { color: red; }
In every browser except IE6 the font color for all paragraph elements will be blue as long as your doctype is properly set and your not getting tossed into quirks mode. However, doing something like this:
p { color: blue; }
.container p { color: red !important; }
Will show a red font color for all paragraph elements in the container only, for all browsers. This works because even if IE6 doesn't understand the !important rule, it still fully understands cascading rules and will apply the style based on what was last defined.
So in your case, the following rule works just fine and fixes your display problems in IE:
ul.lof-main-wapper li img { max-width: none !important; }