Develop Reference

How to edit a webpage's pseudo classes using Javascript?

I'm trying to create a Chrome extension that "unblurs" a series of images on a webpage. I'm very new to all this and I just wanted to know if I was on the right track.
From what I've seen, each image is contained in a tag that looks like this:
<div class="Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.3)::a Scale(1.2)::a--s Blur(12px)::a">
In order for the picture to be unblurred, the Blur(12px) pseudo class must be changed to Blur(0px). I'm not getting any results from what I've tried, but I feel as though my logic is right. All I want the extension to do is automate the process of using "Inspect Element" to edit the page.
var profilePic = document.getElementsByClassName("Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.3)::a Scale(1.2)::a--s Blur(12px)::a");
for(var i = 0; i < profilePic.length(); i++) {
profilePic[i].classList.remove("Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.3)::a Scale(1.2)::a--s Blur(12px)::a");
profilePic[i].classList.add("Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.0)::a Scale(1.0)::a--s Blur(0px)::a");
}
The images on the page should be unblurred, but nothing happens. I may not have my extension set up properly since I've just started looking into this stuff, but I was hoping that someone else with more experience could tell me if my code was okay.

Try this:
[...document.getElementsByClassName('Blur(12px)::a')]
.forEach(e => e.classList.replace('Blur(12px)::a', 'Blur(0px)::a'));
The problem with your current approach is that both classList.remove(..) and classList.add(..) expect a single parameter, a string representing a single class name or multiple string parameters representing single class names.

Squarespace - How to display description/custom text on index thumbnail on hover

Basically, I want to be able to show title and some text on hover on all my index thumbnail like this website.
http://www.timboelaars.nl/
However, in the current squarespace template that I am using (I believe it's called York), the markup is only grabbing the page title and therefore displaying the page title on hover. (See the below code block, you can see the page title in there, that's the only thing that the template displays on Hover)
<div class="index-item-text-wrapper">
<h2 class="index-item-title">
<a class="index-item-title-link" href="/google-shopping/" data-ajax-loader="ajax-loader-binded"><span class="index-item-title-text">**PAGE TITLE**</span></a>
</h2>
</div>
There's no field for me to put any HTML so I am seeking help to use javascript to manually inject custom HTML markup to every single thumbnail, then show them on hover.
TL;DR I want to be able to display more than just the title on hover (ideally my own HTML markup so I can customize the style) on my thumbnails but that's not supported by the template.
Here is my website http://shensamuel.com/
I am really weak at Javascript and I've searched for a solution for this problem for quite long. Any help will be much appreciated!
Thanks!

The following Javascript can be used to insert text for each tile on the page. The code would be inserted using the footer code injection area (unless you're using Developer Mode in which case you'd insert it with the rest of your scripts).
<script>
(function() {
var tiles = document.getElementsByClassName('index-section');
var thisTile;
var titleText;
var description;
var parent;
var i, I;
for (i=0, I=tiles.length; i<I; i++) {
thisTile = tiles[i];
titleText = thisTile.getElementsByClassName('index-item-title-text')[0];
parent = thisTile.getElementsByClassName('index-item-text-wrapper')[0];
description = document.createElement('span');
description.className = 'index-item-description-text';
switch(titleText.innerHTML.toLowerCase()) {
case "google shopping":
description.innerHTML = "Some custom text.";
break;
case "hana":
description.innerHTML = "More text that's custom.";
break;
case "wali":
description.innerHTML = "Custom text here.";
break;
case "cypress":
description.innerHTML = "Type anything you want.";
break;
case "ryde":
description.innerHTML = "Just another bit of text.";
break;
default:
description.innerHTML = "";
}
parent.appendChild(description);
}
})();
</script>
Observe the pattern in the code in order to add new tiles or edit existing ones. You will see that the script attempts to match (a lower case version of) the 'title' text and then inserts text based on each title. This allows you to add more in the future by repeating this 'case' pattern. Of course if you ever change the title of a tile you'd have to correspondingly change this Javascript code.
You can then style the description by inserting CSS via the Squarespace CSS Editor (or via your base.less file if using Developer Mode). For example:
.index-item-description-text {
display: block;
font-size: 1.2em;
color: #FFFFFF
}
Note that while there is an alternative method that would use each tile's respective URL to do an AJAX query and obtain meta data about each project (and therefore allow you to use the Squarespace content manager to insert this 'description'), that method seems unnecessarily complex for your case.
Update 8/17/2016: Regarding AJAX and how to disable AJAX loader in Squarespace: Jason Barone has suggested adding this snippet to your Code Injection > Footer to disable the "AJAX" pageloader. He noted that it will disable the smooth, AJAX transitions between pages, but will allow custom Javascript like usual.
<script>
//Credit: Jason Barone, http://jasonbarone.com/
window.Template.Constants.AJAXLOADER = false;
</script>
Also, some templates have an option to disable AJAX within the style editor (image credit: SSSUPERS):
Update 9/28/2016:
It has been reported that the code provided above no longer disable AJAX. However, some newer templates have added an 'Enable AJAX Loading' setting that can be toggled off.

Google Custom Search Accessibility

When we include Google Custom Search capability on our website, we get automatic code returned from Google containing some Google branding - images - that do not have alt tags for accessibility. I couldn't find a solution other than to write my own JavaScript to add alt tags to these images. Here is my solution, but my question: is this something that we should or shouldn't do? I want to make sure all parts of the website pass accessibility tests.
var x = document.getElementsByClassName("gsc-branding-img");
for (i = 0; i < x.length; i++) {
if(x[i].tagName == "IMG") {
x[i].alt = "";
}
}

The image in question is the Google logo, and it's presented as part of a phrase "powered by Google", where "Google" is the logo image. This phrase doesn't make sense to a screen reader user without alternative text.
Here's the section of the Google Custom Search plugin in question:
<td class="gsc-branding-text">
<div class="gsc-branding-text">powered by</div>
</td>
<td class="gsc-branding-img">
<img src="https://www.google.com/uds/css/small-logo.png" class="gsc-branding-img">
</td>
Here's a variation on your solution to add alternative text to that image:
document.querySelector('img.gsc-branding-img').alt = "Google"
view it at jsfiddle
You could also add the text content to the parent tag and visually hide that text with CSS.

This article on Making Google CSE Accessible was helpful in building a solution (for your same question) in a previous project I worked on.
You can build a callback like:
window.__gcse = {
callback: imgAltTagsFix
};
var imgAltTagsFix = function() {
$('img.gsc-branding-img').attr("alt", "Google Custom Search Branding");
$('input.gsc-search-button').attr('alt', "Google Custom Search Button");
};
Be sure to check out the Using the JavaScript API to render elements section for more details on how to expand this solution.

JavaScript - writing html elements that don't show up?

I'm trying to write some code in javascript that uses a user's cookies to display a box containing some information. The page opens with some boxes containing news articles from Google News RSS feeds. I'm using a 3rd party app for the RSS; the feed is included in the HTML code as such:
<script language="JavaScript" src="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fnews.google.com%2Fnews%3Fq%3Dbarack%2Bobama%26output%3Drss&num=4&date=y&targ=y&utf=y&css=feed" charset="UTF-8" type="text/javascript"></script>
The user can move the boxes around, and I want to store the box locations using cookies so that if a user revisits the page, the boxes will be in the same location. However, when I try to load the page from the information in the cookies, the boxes are blank. This is an example of what my code looks like (RSS feed for news using keyword "Barack Obama"):
// Render boxes into HTML
function renderItem(container) {
var wrapper = document.getElementById(container);
var div_box = document.createElement('div');
var feed_url = 'http://www.feedroll.com/rssviewer/feed2js.php src=http%3A%2F%2Fnews.google.com%2Fnews%3Fq%3Dbarack%2Bobama%26output%3Drss&num=4&date=y&targ=y&utf=y&css=feed';
var div_box_feed = document.createElement('div');
var feed_script = document.createElement('script');
feed_script.setAttribute('language', 'JavaScript');
feed_script.setAttribute('src', feed_url);
feed_script.setAttribute('charset', 'UTF-8');
feed_script.setAttribute('type', 'text/javascript');
div_box_feed.appendChild(feed_script);
div_box.appendChild(div_box_feed);
wrapper.appendChild(div_box);
}
When the page loads, the box appears but the news articles from the RSS feed are not there and the box is empty. When I look at the source code, however, it is identical to the code of the initial boxes (which did display the news articles).
Does anybody know what's wrong?
Thanks!

You never declared column_div here:
wrapper.appendChild(column_div);
Did you mean:
wrapper.appendChild(div_box);
?

I believe that by default script elements created in this manner have their async attribute set to true, so the rest of your code will execute before your JS has been retrieved.
Where does the column_div variable come from?

You're missing a question mark to separate the post variables from the URL, so the URL is resolving to
var feed_url = 'http://www.feedroll.com/rssviewer/feed2js.php%20src=http%3A%2F%2Fnews.google.com%2Fnews%3Fq%3Dbarack%2Bobama%26output%3Drss&num=4&date=y&targ=y&utf=y&css=feed';
It should be
var feed_url = 'http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fnews.google.com%2Fnews%3Fq%3Dbarack%2Bobama%26output%3Drss&num=4&date=y&targ=y&utf=y&css=feed'

How to link to highlighted text on another page

I have a static HTML page where I am using span tags and javascript to highlight selected portions of text. On a separate page, I would like to link back to this HTML page and have specified highlighting active. See provided code below.
The issue is the required style="background: transparent" tag. It has to be there so that the highlight is only active when clicked upon, but this also means that when I attempt to link to this page as specified below, the highlight is not active.
Any help would be much appreciated. Thanks.
Clicking this link highlights specified portions of text in the document.
<span title="Warscape"><a title="Warscape" onclick="highlightSpan(this.getAttribute('title'))" href="">Warscape</a></span>
This is the text that is highlighted when clicked.
<span title="Warscape" class="highlight" style="background: transparent">During this month while we have been building Fort No 1 Spring field Missouri, quite a No of Regiments have arrived from the north & now the Army of the Frontier [is?] formed</span>
Code to link to page with highlighting.
<a href="j_62sept.html?highlight=Warscape">
CSS re. highlighting
.highlight {background:#bcdbda;}
Javascript re. highlighting
function highlightSpan(spanTitle)
{
var spans = document.getElementsByTagName("span");
// take away color
for (var i = 0; i < spans.length; ++i)
{
spans[i].style.backgroundColor = "transparent";
}
// add color
for (var i = 0; i < spans.length; ++i)
{
if (spans[i].getAttribute('title') == spanTitle)
{
spans[i].style.backgroundColor = "#bcdbda";
}
}
}

I recognise that this is an old thread, but this problem can now be addressed for Chrome using the Scroll to Text Fragment feature described here:
https://chromestatus.com/feature/4733392803332096
In short, it allows you to provide a link which jumps to a specific string of text and (in Chrome's implementation) highlights that section. A basic version of the link would look like this:
https://en.wikipedia.org/wiki/Cat#:~:text=Felis%20catus

when your clicking the links to the page where the highlighting takes action (<a href="j_62sept.html?highlight=Warscape">
) you need to somehow read querystring value on that page to highlight the right span. You can use javascript for this. See this example: http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx

This is an interesting question. If you'd like to have the javascript pick up on parameters in the url, you can use the window.location.href parameter to pull it out. So, quite simply the following function:
function CheckForHighlight(){
href = window.location.href;
values = href.split('?')[1] // Remove the url
highlight = values.split('=')[1]; // Grab the second parmeter
highlightSpan(highlight); // Highlight it!
}
Please Note that this is a very basic example. I encourage learning through simplicity, and this function can be expanded to dynamically parse all url varaibles. Brain Exersise for you!