Sidebar checklists not working

(@lillylark)

We have three sidebar selection lists that stopped working. Please tell me what is wrong with the following code?

Selection list 1: Accessibility Sites We Like

<div class="container-select">
	<label class="screen-reader-text" for="accessible-blogs-dropdown-1">Accessibility Sites We Like</label>
		<select id="accessible-blogs-dropdown-1" name="accessibleblogs-dropdown">
			<option value="">Select an Accessibility Blog or Website</option>
			<option value="http://www.accessibilitynewsinternational.com/" rel="nofollow noopener noreferrer">Accessibility News International</option>
			<option value="https://accessiblewebsiteservices.com/blog/" rel="nofollow noopener noreferrer">&lt;accessible-website-services&rt;</option>
			<option value="https://jimbyrne.co.uk/" rel="nofollow noopener noreferrer">Accessible Web Design by Jim Byrne</option>
			<option value="https://blogs.adobe.com/accessibility/" rel="nofollow noopener noreferrer">Adobe Accessibility</option>
			<option value="https://www.bbc.com/news/disability" rel="nofollow noopener noreferrer">BBC Disability News Index</option>
			<option value="https://www.bbc.com/news/blogs/ouch" rel="nofollow noopener noreferrer">BBC Ouch! blog archives</option>
			<option value="https://www.bbc.co.uk/programmes/p02r6yqw" rel="nofollow noopener noreferrer">BBC Ouch Best of features, videos and audio</option>
			<option value="https://www.pubcom.com/blog/index.shtml" rel="nofollow noopener noreferrer">Bevi's Blog (Pubcom.com)</option>
			<option value="http://www.blacktelephone.com/" rel="nofollow noopener noreferrer">Black Telephone: Disability Rights</option>
			<option value="https://www.boia.org/" rel="nofollow noopener noreferrer">Bureau of Internet Accessibility</option>
			<option value="https://www.doitmyselfblog.com/" rel="nofollow noopener noreferrer">I’ll Do It Myself</option>
			<option value="https://maccessibility.net/" rel="nofollow noopener noreferrer">Maccessibility (M12Y)</option>
			<option value="https://www.hhs.gov/web/section-508/making-files-accessible/index.html" rel="nofollow noopener noreferrer">Making Files Accessible</option>
			<option value="https://media-dis-n-dat.blogspot.com/" rel="nofollow noopener noreferrer">Media dis&dat</option>
			<option value="https://www.sigaccess.org/" rel="nofollow noopener noreferrer">SIGACCESS</option>
			<option value="https://uxmag.com/topics/accessibility" rel="nofollow noopener noreferrer">UX Magazine Topic Accessibility</option>
			<option value="https://nfb.org/blog" rel="nofollow noopener noreferrer">Voice of the Nation’s Blind Blog</option>
			<option value="https://www.webaxe.org/" rel="nofollow noopener noreferrer">Web Axe</option>
			</select>

<script type="text/javascript">
/* <![CDATA[ */
window.onload=function() {
  document.getElementById("accessible-blogs-dropdown-1").onchange = function() {
    var href= this.value;
    if (href) {
      var win = window.open(href,"_blank");
    }
  }
}
/* ]]> */
</script>
</div>

Selection list 2: Notable Sites We Like

<div class="container-select">
	<label class="screen-reader-text" for="noteable-blogs-dropdown-2">Notable Sites We Like</label>
		<select id="noteable-blogs-dropdown-2" name="notableblogs-dropdown">
			<option value="">Select a Notable Blog or Website</option>
			<option value="https://www.chronicle.com/" rel="nofollow noopener noreferrer">The Chronicle of Higher Education</option>
			<option value="https://growinggrayusa.com/blog/" rel="nofollow noopener noreferrer">Growing Gray USA</option>
			<option value="https://katechamberlin.com/" rel="nofollow noopener noreferrer">Kate's Blog</option>
			<option value="https://theocddiaries.com/uncategorized/learning-to-live-with-difficult-colleages/" rel="nofollow noopener noreferrer">Learning to Live with Difficult Colleagues</option>
			<option value="https://medicalfuturist.com/" rel="nofollow noopener noreferrer">The Medical Futurist</option>
			<option value="https://theocddiaries.com/" rel="nofollow noopener noreferrer">The OCD Diaries</option>
			<option value="https://rsf.org/en" rel="nofollow noopener noreferrer">Reporters Without Borders</option>
			<option value="https://www.nationalgeographic.com/science/" rel="nofollow noopener noreferrer">Science and Innovation</option>
					</select>

<script type="text/javascript">
/* <![CDATA[ */
window.onload=function() {
  document.getElementById("noteable-blogs-dropdown-2").onchange = function() {
    var href= this.value;
    if (href) {
      var win = window.open(href,"_blank");
    }
  }
}
/* ]]> */
</script>
</div>

Selection list 3: UX Sites We Like

<div class="container-select">
	<label class="screen-reader-text" for="ux-blogs-dropdown-3">UX Sites We Like</label>
		<select id="ux-blogs-dropdown-3" name="uxblogs-dropdown">
			<option value="">Select a UX Blog or Website</option>
			<option value="https://alistapart.com/articles/"  rel="nofollow noopener noreferrer">A List Apart</option>
			<option value="https://boxesandarrows.com/"  rel="nofollow noopener noreferrer">Boxes and Arrows</option>
			<option value="https://designmodo.com/"  rel="nofollow noopener noreferrer">Designmodo</option>
			<option value="https://www.smashingmagazine.com/category/ux-design/"  rel="nofollow noopener noreferrer">Smashing Magazine</option>
			<option value="https://www.uie.com/"  rel="nofollow noopener noreferrer">User Interface Engineering Blog</option>
			<option value="http://uxbookclub.dk/"  rel="nofollow noopener noreferrer">UX Book Club Copenhagen</option>
			<option value="https://www.uxbooth.com/"  rel="nofollow noopener noreferrer">UX Booth</option>
			<option value="https://www.uxlift.org/" rel="nofollow noopener noreferrer">UX Lift</option>
			<option value="https://uxmag.com/" rel="nofollow noopener noreferrer">UX Magazine</option>
			<option value="https://www.uxmatters.com/"  rel="nofollow noopener noreferrer">UXmatters</option>
			<option value="https://uxmyths.com/"  rel="nofollow noopener noreferrer">UX Myths</option>
					</select>

<script type="text/javascript">
/* <![CDATA[ */
window.onload=function() {
  document.getElementById("ux-blogs-dropdown-3").onchange = function() {
    var href= this.value;
    if (href) {
      var win = window.open(href,"_blank");
    }
  }
}
/* ]]> */
</script>
</div>

This topic was modified 1 day, 7 hours ago by lillylark. Reason: correct typo in a protocol

The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

Gerry
(@metamezzo)

17 hours, 13 minutes ago
Hello, selection list 3 (UX Sites We Like) seems to work for me, so it looks like the script in the last list is overwriting the load events of the previous two. Here is my suggestion for every script:
```
// Instead of the following...
window.onload=function() {

// Use addEventListener instead...
window.addEventListener('load', function() {
```
I would also suggest for each of the three scripts…
```
// Change this line...
var win = window.open(href,"_blank");

// Change to...
var win = window.open(href,"_blank","noopener,noreferrer");
```
Final suggestion to try is to remove every rel attribute in the option tags of the three selection lists, because it looks like they are not used.

Please try the changes on a test or staging site, or make sure you have a backup of the scripts you would be modifying to do the tests. Good luck!
- This reply was modified 17 hours ago by Gerry. Reason: Accidentally submitted reply

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.

Views