Is it possible to see if iOS 11’s Smart Invert is enabled using either JavaScript or CSS? I’d like my websites to work with it, seeing I (and probably a lot of other people) use it a lot.
Based on the answer posted in the comments above and using Modernizr.js you could do this fairly easily with a custom test.
Modernizr.addTest('colorinvert', accessibilityIgnoresInvertColors in window && !accessibilityIgnoresInvertColors);
This will add a class to the page's <html> element called colorinvert if the colors are being inverted, and nocolorinvert if not.
This should make it easy to apply custom css or javascript logic when the colors are inverted.
Vanilla js could analyze this property and do the same thing as modernizr as well -- something like this run during initial page load should work:
var classname = "colorinvert";
if(typeof(window["accessibilityIgnoresInvertColors"]) === "undefined" || accessibilityIgnoresInvertColors) classname = "no" + classname;
document.getElementsByTagName("html")[0].classList.add(classname);
Related
the iTop fourms are pretty inactive and I am pretty stuck so I thought I'd ask here if that is ok. I am attempting to add my own piece of javascript to work onchange of the iTop organization select bar.
Here is a link to iTop if needed: http://www.combodo.com/spip.php?page=rubrique&id_rubrique=8
Extra info on my iTop forum question, no answers yet: https://sourceforge.net/p/itop/discussion/922360/thread/dd1da92f/
So iTop is a piece of software made using php, html, js and css but I am new to php so I have ran into a little bit of a problem. I am trying to implement a piece of javascript which will change the top-bar of the css to a different colour based on organization, I made a small prototype independent of iTop and it works perfectly. However I am unable to add the onchange() method along with the javascript as the main user interface is generated dynamically using php. I have tried numerous ways to implement the javascript but none have worked. Here are some pictures of iTop and code to help:
This is a picture showing the inspect element of iTop and how I came to believe jquery-1.7.1.min.js may be the correct location to place the code.
So I have tried going into this file and copy and pasting in my Java Script code but in some locations it has no affect and within function(a){....} it results in iTop only displaying a blank page, I could be going about this totally wrong but from what I have seen this file seems to be the one I am to edit to get what I want.
here is the javascript i am trying to implement:
var changeStyle = function(){
//HTML
var selectedValue = document.getElementById("org_id").value;
//CSS
var trimColor = document.querySelector("#top-bar");
//BT
if(selectedValue=="3"){
//change banner colour
trimColor.style.backgroundColor= "#3498db";
}
//Bell Aliant
else if(selectedValue=="27"){
//change banner colour
trimColor.style.backgroundColor= "#f1c40f";
}
//Bell Canada
else if(selectedValue=="26"){
trimColor.style.backgroundColor= "#e74c3c";
}
else
trimColor.style.backgroundColor="#ecf0f1";
}
Here are some pictures of it working in my non iTop version of just HTML, JS and CSS:
This is an old question but I'll answer it anyway as the answer is still ok for the last versions of iTop.
To inject some JS in the page, you have to use the iPageUIExtension::GetNorthPaneHtml(iTopWebPage $oPage) API which gives you acces to the iTopWebPage object. Then you can use the various public methods such as "iTopWebPage::add_ready_script($sScript)" to inject $sScript into all of the backoffice pages. Moreover, the script will be executed once the DOM is ready.
You can find an example here.
class PageUIExtension implements iPageUIExtension
{
/**
* #inheritdoc
*/
public function GetNorthPaneHtml(iTopWebPage $oPage)
{
...
$oPage->add_linked_script(utils::GetAbsoluteUrlModulesRoot() . 'molkobain-handy-framework/common/js/handy-framework.js');
}
}
Note: You will need to make your own iTop extension, check here for how to do it.
Although I do not believe it is the best solution I have entered the following code into jquery-1.1.1.min.js as shown
And I have achieved the desired result, the trim now changes with the organization change, this however is not the perfect solution I was looking for and is a bit slow but not in the sense that you'd get annoyed, at least in my opinion. Mission Accomplished for the moment!
This question already has answers here:
Is there a way to create your own html tag in HTML5?
(18 answers)
Closed 8 years ago.
Would it be possible to do the following
<body>
<main>
<!-- CONTENT -->
</main>
<foot>
<!-- FOOTER CONTENT -->
</foot>
</body>
if I then wrote some JavaScript that did something along the lines of the following. Please note that I don't want you to write the actual code that goes here. This is just a mockup of the core functionality.
for(elem inside main){
elem.makeItBig();
}
for(elem inside foot){
if(elem is img){
elem.makeItSmall();
}
}
I am aware of this post Is there a way to create your own html tag in HTML5?. But I don't really want to create tags to style them but rather to provide identifying attributes to the DOM which I can hook into using JavaScript. Imagine something kind of like a class, but used in a way that you can stitch lots of PHP generated parts together using these tags.
If you use a made up tag in HTML is it ignored by your browser or will it throw an error.
You can use your own tags as far as I'm aware.
You'd need to do some mucking about to get them to work in older IE browsers.
The more important point is - why on earth would you want to? It wouldn't make your code very maintainable or future-proof. Just use classes on proper elements.
Can you create custom tags? yes. Is it a good idea? not really because your tag may not be recognized by some browsers as a valid html standard. you can check this: http://www.w3.org/MarkUp/html-spec/html-spec_4.html#SEC4.2.1
For custom elements specifications you can look at standards specification for custom elements : http://w3c.github.io/webcomponents/spec/custom/
Although your approach seems nice, just think about changing the size of another group of elements ... you would probably use the same function so why not do this:
var makeItBig = function(elem){...};
for(elem in main){
makeItBig(main[elem]);
}
this way you won't have to create a new method for each element you need to change.
But if you really need it that way you can make it like this:
var makeItBigFunction = function(){var elem = this; ...};
// create new methods
for(elem in main){
main[elem].makeItBig = makeItBigFunction;
}
// make use of them
for(elem in main){
main[elem].makeItBig();
}
Notice that there is a big difference between DOM object's properties (or methods) and HTML attributes.
Read more about it: Properties and Attributes in HTML
Feel free to use HTML5 tags like <content>, <header>, <footer>, <aside> etc.
You can read more about them here: http://www.w3schools.com/html/html5_new_elements.asp in section "New Semantic/Structural Elements". Those should be considered as supported in most modern browsers. Actually, you may use any other custom tags, however their default properties (display, position etc.) may be unpredictable.
Is it possible to strike the title
<title><s>My Title</s></title>
like this, so that the titlebar will show My Title?
Or is there a way to solve this with css?
From MDN on the <title> element:
The HTML Title Element defines the title of the document,
shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags are not interpreted.
So no, it cannot be done like that.
Update:
Other answers suggest using various combinations of unicode characters to accomplish a strike through, and even though that might be possible and could yield a decent result, I believe it comes with a large drawback.
I'm not an expert in SEO in any way, but from what I know, and according to Googles Search Engine Optimization Starters Guide the <title> is of great importance when it comes to search engine optimization. Their guide suggest that you should avoid:
Choosing a title that has no relation to the content on the page
Using default or vague titles like "Untitled" or "New Page 1"
My interpretation would be that using obscure characters in your title would be a direct violation of that, so based on that I would strongly suggest that you avoid it.
This is possible by using characters that have a strike built into them. But this is the only way. Using HTML markup or CSS will not yield the result you want.
Example using this: http://blog.imthy.com/2008/06/strikethrough-strikethrough-text.html
No, no browser known to me supports HTML rendering directly in the title bar, just the plaintext within the <title> tag will be displayed. The most you could hope to do is use some obscure characters where the line is part of each char - something very specific and something I care not to investigate.
You could use Unicode combining characters to add them. It will depend heavily on the font the OS/browser is using in the title bar on how it looks though.
function strike(text) {
var output = '';
for (var i = 0; i < text.length; i++) {
output += '\u0336' + text[i];
}
return output;
}
function strikeTitle() {
document.title = strike(document.title);
}
EDIT: Personally I like \u0337 the best.
It is not possible to change the rendering of the title element content in the title bar, if it is displayed there. This does not depend on specifications but on implementations: browsers use their own routines to display the title, and HTML markup or CSS settings do not affect this.
Nothing prevents us from styling the title element as such, e.g.
title { text-decoration:line-through; }
but this has by default no visible effect, since the element is not part of the displayed document content. Adding
head, title { display: block; }
makes it visible, and you can see (in modern browsers) the content as overstruck on the page. But this does not affect the title bar (and isn’t particularly useful).
Using special characters in the element content, you can create overstriking as shown in other answers. This will however create a considerable risk of messing things up, because the routines that browsers use to display title bars often use a limited character repertoire, showing unsupported characters e.g. as small boxes.
I'm afraid this isn't possible. The 'title' tag does not allow for any kind of formatting in its contents.
this is not possible, you can not control the <title> tag of a browsers window title with CSS.
Browser allows customization of the title of the document via two options
Fav icon 2. Title
Any customization with tags or css wil be ignored and only text and fav icon will be displayed on the title.
so if you want to play around title, you can still do with javascript, you can create animations that might work for you.
We've got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.
I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we've got good results we can take the contents of these three fields, put them in files and use them in our project.
I found the jQuery.cssRule plugin but it looks like it's basically abandoned (all the links go nowhere and there's been no development in three years). Is there something better or is it the only game in town?
Note: We're looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I'm not looking for something where the designer has to learn jQuery syntax and enter in individual .css("attribute", "value") type calls to jQuery.
Sure, just append a style tag to the head:
$("head").append("<style>p { color: blue; }</style>");
See it in action here.
You can replace the text in a dynamically added style tag using something like this:
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);
See this in action here.
The cleanest way to achieve this is by sandboxing your user-generated content into an <iframe>. This way, changes to the CSS won't affect the editor. (For example, input { display:none; } can't break your page.)
Just render out your HTML (including the CSS in the document's <head>, and write it into the <iframe>.
Example:
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();
If the user should be able to edit a whole stylesheet, not only single style attributes, then you can store the entered stylesheet in a temporary file and load it into your html document using
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');
sounds like you want to write an interpreter for the css? if it is entered by hand in text, then using it later would be as simple as copy and pasting it into a css file.
so if you have a textarea on your page to type in css and want to apply those rules when you press the button, you could use something like this (only pseudocode, needs work):
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
then you could write something to go through each element that your designer typed in, and get the current css rules for it (including those that you applied using some code like the snippet above) and create a css string from that which could then be output or saved in a db. It's a pain and much faffing around with substrings but unfortunately I don't know of a faster or more efficient way.
Hope this atleast gives you some ideas
Hallo All,I have a problem. I have written a very extensive script to change my body-background from a page-specific background-image to an other background-image. For refrence:My 'mypage.html' has a default background of class='image1' defined in the default stylesheet.I have written a script to change this to class='image10' or class='image11', which are defined in the persistent stylesheet. (Believe me, this is the short version, but this part works... well, is going to. No questions here.)My 'otherpage.html' has a default background of class='image2' defined in the default stylesheet and I want to be able to change this as well to the same 'image10' and 'image11' from the persistent stylesheet.Both default backgrounds have multiple differently colored versions in alternate stylesheets... Change the stylesheet and class='image1' links to another version of the image.All this is directed by cookies that are page specific as well. This makes finding a solution quite important, because otherwise I would have to set cookies for every single page. Which I find unacceptable.My question is, do I have to copy/past the whole script to my 'otherpage.html' and change al the 'image1's to 'Image2's or is there a way to javascript something like:
if(HTML = 'otherpage.html') {
(".image1" = ".image2")
}
Excuse my very amateuristic script. I have looked all over, but I wouldn't even know how to search for this... Hope someone can help, otherwise copy/past it is ;)
You can use this little script here
var currentPage = window.location.pathname;
if (currentPage == "/somepage.html") {
// change the body class name
document.getElementsByTagName("body")[0].className = "image2";
}
You can use a switch statement if you have multiple pages to test.
You can control the styles(background and other styles) through the base class which you can set it to body tag of the document or any root container. On page load check the page name and set the class names accordingly.
if(page == "otherPage"){
document.body.className = "image2";
}
Now all the classes falling under image2 will be applied.