I have a Wordpress self-hosted website for extra content about a series of books. On the near future, I intend to let the user declare which book(s) from the series he/she has read - and whilst it would be just for fun, I thought I could take this idea further.
The thing is, since some content on generic pages might be considered spoilers if they haven't read some of the books, I would like to apply a different stylesheet based on logged in user - so if the user has read up until book 2, a stylesheet would be loaded in such a way that any paragraph with the class "book3" or higher would be automatically converted into a hidden paragraph with a spoiler alert. But if the user has already read book 3, a different stylesheet would be loaded; one that wouldn't do that, and would let the user see the content normally.
I reckon this could also be done with javascript, but I suppose CSS would be easier? I'd be up for answers based on both methods, of course (including jQuery regarding javascript).
You can accomplish this without javascript.
One way to do this would be to add an additional class to the body if a user has read a particular book. For example, if a user has read book 1 you would want to add the class 'read-book-1' to the body. You can accomplish this in WordPress using the body_class filter.
https://codex.wordpress.org/Plugin_API/Filter_Reference/body_class
Here is a stripped down example:
add_filter('body_class', function($classes) {
if(/* if user has read book 1 */) {
$classes[] = 'read-book-1';
}
return $classes;
}
Then, assuming your markup looks like this:
<p class="spoiler book-1">...</p>
You could override your spoiler style if the user has read book 1:
p.spoiler {
visibility:hidden;
}
.read-book-1 p.spoiler.book-1 {
visibility:visible;
}
Note that I'm just assuming you're using visibility: hidden; to hide spoiler text. There is more than one way to do this.
If you wanted to incorporate additional features, such as a link to reveal spoiler text, then you would need javascript. If you just wanted to reveal spoiler text on hover you can do it with just css:
p.spoiler:hover {
visibility:visible;
}
To load a different CSS file according to a Javascript variable you can use a switch statement. Each case would use document.write() to write in the . This needs to be done before the body of the HTML loads so you don't overwrite anything. The MDN page which is linked to explains the details for this.
switch (variable) {
case possibility1:
document.write("<link rel='stylesheet' href='___.css' type='text/css'>");
break;
case possibility2: ...
default: ...
}
Another alternative could be applying a class to spoilers. If content would be spoiled for book 2 and you know book2.hasRead === false, the hidden class would be applied to that content. Using element.classlist and getElementById is the easiest way that comes to mind.
Using a similar method to how responsive design uses different CSS for different situations could work as well but I don't know enough about that to advise how to do so.
Related
I want to insert my block of HTML into a Shopify shop after a certain section but the problem is that each shop can use one of thousands of different themes, each one having a different DOM structure.
I can create the Script Tag and I can try to insert my HTML like this:
(function() {
var child = document.createElement("div");
var text = document.createTextNode("This is a test message");
child.appendChild(text);
var parent = document.getElementByClassName("ProductSection");
parent.appendChild(child);
})();
And this will work if the theme has a section with a class name of ProductSection but it won't for the majority of them that don't. Let's say I have an image gallery I'd like to show but only on Product pages and after the product description, what's the best way to select the product description DOM node so that I can insert my image gallery after it?
I found a couple threads with similar problems:
https://community.shopify.com/c/Shopify-APIs-SDKs/Using-Script-tag-to-add-dynamic-content-to-product-template/m-p/457855
https://community.shopify.com/c/Shopify-APIs-SDKs/Need-to-add-a-button-to-the-Product-page-via-a-Script-Tag/m-p/413919
and they seem to come to a similar conclusion, yet there are apps on the Shopify app market that do exactly this, and I wonder how do they do it?
As suggested in the links shared by you, it is not possible to correctly identify the DOM element in all the cases. However, there are couple of different approaches that can be used.
1) One is to ask merchant to add some specific element to markup that you can later use for rendering your content via JavaScript.
2) Try to guess the DOM element via some specific tag or href value, but allow merchants to override the DOM element selector via some JavaScript variable.
3) Use approach 2 with a combination of pre-determined info. Saw this approach used by AfterPay. They have a pre-defined array of popular themes along with their selectors. Then they use the theme name property from Shopify.theme.name
and get the relevant selectors. This solution may not work in all cases, so do allow the merchant to override DOM selector via some JavaScript variable.
Afterpay.supportedThemes = {
alchemy: {
product: {
"2017-12-14": {
selector: ".quadd-wrapper"
}
}
}
}
AfterPay JS Source Code
If you know of any other plugins, you can inspect the JavaScript and have a look how they identify the selectors.
I am trying to build a progressively enhanced page that works for JS and non-JS users. I would like to hide some form controls initially for JS users, but always show them for non-JS users.
My question is about how to do this without creating a distracting "visible, then instantly hidden" flash of content for JS users.
For example, in the JS version, I want to collapse part of my search form, and instead show a 'click here for extra options' button. I do this as follows:
$(document).ready(function() {
$("#extra-options").hide();
...
$("#show-extra-options").click(function() {
$("#extra-options").slideToggle();
});
});
This works, but it means that for JS users, when the page loads, the extra options are visible for 500ms or so, then they vanish. It's rather distracting.
Is there any sensible way to get around this?
StackOverflow has just suggested this answer: is this sensible? Sorry if this is now a duplicate question, but I figure it's still worth writing this question in my own language, as I didn't find the answer during searching.
Add this in your script tag in the head:
$('html').addClass('js');
Then you can use that to show and hide elements:
.hasJs { display: none; }
.js .hasJs { display: block; }
.js .noJs { display: none; }
You can hide content for either users with or without Javascript:
<div class="hasJs">Some content only visible for JS users.</div>
<div class="noJs">Some content only visible for non-JS users.</div>
As the class and CSS are in the head, the elements will already be styled when they come into existance when the body is parsed.
Demo: http://jsfiddle.net/Guffa/YuAyr/
This is a similar approach to the one in the first answer to the question that you linked to, but this is somewhat cleaner because you don't have to add a class to the html element in the markup, and the code simply adds the class instead of removing it.
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
I have a search page that is used in multiple places with multiple 'themes' throughout my site. I have a few divs that can have their background color changed based on a radio button selection (whether they are enabled or not). I can do this just fine by changing the css class of the div on the fly with javascript.
However, these themes could potentially change, and the background color is grabbed from a database when the page is created. Right now I do this in the C# codebehind:
string bgStyle = "background-color:" +theme.searchTextHeaderColor +";";
OwnerSearchHeader.Attributes.Add("style", bgStyle);
In the Javascript I need to change this color to make it look disabled, and when the user clicks back to this div I need to re-enable it by changing it back to its original color. But since I only knew this color in the code-behind, I don't know what it was in the Javascript.
So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.
Alternatively I could create a hidden element, assign it the 'enabled' style, and use that as a reference in the JavaScript when enabling my div. This seems like a hack but maybe its the easiest way. I'm still new to a lot of this, so I'd appreciate any suggestions. Thanks for the input!
So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.
Yes, this is the anser; do this. In the <head> of your document add a <style> and put your CSS in there like so: (my Asp.NET is a little rusty so forgive me if it has some hicups ;) )
<style>
<!--
.divEnabled {
background-color:<%=theme.searchTextHeaderColor%>;
}
.divDisabled {
background-color:gray; /* or wtv */
}
-->
</style>
You could also put it in an external CSS file, which may be a good idea.
Then write some JavaScript to add/remove the class attribute (I'm going to ask that you don't call is the "CSS Class" ;) )
var ownersearchheader = document.getElementById("<%=OwnerSearchHeader.ClientId%>");
// changing the class attribute to `divDisabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivEnabled\b/, "divDisabled")
ownersearchheader.setAttribute("class", newClassAttribute);
// ... or,
// changing the class attribute to `divEnabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivDisabled\b/, "divEnabled")
ownersearchheader.setAttribute("class", newClassAttribute);
This is indeed a mouthfull, so, like #Haydar says, you might want to use jQuery, which offers easy-as-pie addClass(), removeClass() and toggleClass() methods.
You can use the jquery .toggleClass method.
Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
Here is the link to the api doc.
Jquery API