JavaScript by Chris Heath

clearFrame.js | external.link | collapseMenu.js | dailykosattention.user.js | dailykoswide.user.js | [back to chrisheath.us ⤶]

clearFrame.js [back to top]
Show a button to clear an iframe after clicking a link that opens in the iframe, and hide that button when it is clicked.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
//# sourceURL=InlineScript.js
//the above line allows chome to debug the inline js as if it was externally called
//
// Notes/Description: (show iframe reset button only when necessary)
// select the elements with the class name "frame" and
// add an event listener that adds the "showFrameClear" class
// to the element with id="frmClr" (the button that says 'clear iframe').
// This 'unhides'/shows the button to clear/reset the iframe
// after a link is clicked (the elements with "frame" class),
// which are the links that open in the iframe.
var frmlnks = document.getElementsByClassName("frame");
var x;
for (x = 0; x < frmlnks.length; x++) {
 frmlnks[x].addEventListener("click", function() {
  document.getElementById("frmClr").classList.add("showFrameClear");
 });
}
// Add a click event listener to the 'clear iframe' button 
// that will remove the "showFrameClear" class when clicked.
// This 're-hides'/hides the button to clear/reset the iframe
// after you click it, since the frame is now clear.
var clear = document.getElementById("frmClr");
clear.addEventListener("click", function() {
 clear.classList.remove("showFrameClear")
});
</script>

external.link [back to top]
Diplay an icon to designate external links.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
#__HTML:
<a href="#" target="_blank">Your link</a>

#__jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$("a[target='_blank']").attr({title:"Link opens in a new tab"}).addClass("new-tab");
</script>

#__CSS:
.new-tab:after {
    display: inline-block;
    content: "⇱";
    position: relative;
    top: -5px;
    margin-left: 2px;
    transform: rotate(90deg);
}

collapseMenu.js [back to top]
Collapse and show navigation menu lists (and 2nd level menu items too).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script type="text/javascript">
//# sourceURL=InlineScript.js
//the above line allows chome to debug the inline js as if it was externally called
//
// 
// section 1 (collapsable navigation menu)
// select all elements with the class name "collapse" and
// add an click event listener that toggles the "active" class 
// to change the background color and switch the +/-
// and then either display/hide the next sibling element
var exp = document.getElementsByClassName("collapse");
var y;
for (y=0; y < exp.length; y++) {
  exp[y].addEventListener("click", function() {
   this.classList.toggle("active");
   var c = this.nextElementSibling;
   if (c.style.display === "block") {
      c.style.display = "none";
    } else {
      c.style.display = "block";
    }
  });
}
// section 2 (2nd level collapse)
// same as section 1 but allows for a second level of expansion
// by allowing selecting elements with the class name "collapse2"
// and then performing the same actions as section 1
// not needed if you don't want a second 'menu' level
var xp = document.getElementsByClassName("collapse2");
var y;
for (y=0; y < xp.length; y++) {
  xp[y].addEventListener("click", function() {
   this.classList.toggle("active");
   var c = this.nextElementSibling;
   if (c.style.display === "block") {
      c.style.display = "none";
    } else {
      c.style.display = "block";
    }
  });
}
</script>

dailykosattention.user.js [back to top]
Makes a liquid layout, and gets rid of the ugly logo and bright orange.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// DKosAttent
// version 0.3
// 2005-06-24
// Chris Heath
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script.
//
// To install, you need Greasemonkey: http://greasemonkey.mozdev.org/
//
// To uninstall, go to Tools/Manage User Scripts,
// select "DailyKos Attention", and click Uninstall.
//
// --------------------------------------------------------------------
//
// WHAT IT DOES:
// --------------------------------------------------------------------
//
// ==UserScript==
// @name            Dailykos Attention
// @description     Makes a liquid layout, and gets rid of the ugly logo and bright orange
// @include         http://www.dailykos.com/*
// @include         http://*.dailykos.com/*
// ==/UserScript==

//First we remove the new garish logo from the webpage
  var mast = document.getElementsByTagName('img');

  if( mast )
  {
      mast[0].src = "";
      mast[0].alt = "";
      mast[0].height = "0";
      mast[0].width = "0";
  }

//This is the function for changing any styles
function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

//Now lets change some of the styles...
//First we get rid of the silly fixed width column image in the background and set the color to whiteaddGlobalStyle('body {background:#fff url(); color: #000; padding: 0; margin: 0; font: 13px/1.6 Verdana, Arial, sans-serif; line-height:1.45em ! important;}');
//Make things liquidaddGlobalStyle('#container {background: url(); width: 100%; border: none; margin: 0 auto; position: relative; background-color:white ! important;}');
//Push the main text to the left side and let it auto expandaddGlobalStyle('#main {position:absolute; left:0px; padding:0px 244px 0px 25px; margin:0px; width:auto; background-color:white; z-index:1 ! important;}');
//Hide those god damn blinking adsaddGlobalStyle('#ads {display:none; ! important;}');
//Make the mainmenu flush right	and set logo as the background image
//Yeah its ugly - but so is the source HTML flow...a pain for making liquid layouts
//plus I didn't know how to add a new element before everything else in a divaddGlobalStyle('#sidebar {position:absolute; right:0px; margin:0px; width: 240px; font-size: .9em; padding:150px 0px 30px 0px; margin-top:0px; border-left:solid 1px #ccc; background-color:white; background: url(http://img155.echo.cx/img155/176/littleman019ma.jpg) top left no-repeat; z-index:2 ! important;}');
//Tone down that damn bright orangeaddGlobalStyle('#sidebar h3 {background:#e59044;  font-weight:bolder; color: #FFF; padding: 0.25em 15px 0.15em 15px; ! important;}');addGlobalStyle('#sidebar a {border-bottom:solid 1px #ccc; ! important;}');addGlobalStyle('#sidebar li a {border-bottom:none; ! important;}');addGlobalStyle('#footer {display:none ! important;}');
//Make the comment cells indent less
//addGlobalStyle('dd {margin-left: 16px ! important;}');

//Last we add the Daily Kos name on top of the logo and make it link home. Its ugly but it works!
var main, newElement;
main = document.getElementById('main');
if (main) {
    newElement = document.createElement('div');
		var s = '<a href="/" style="color:#ffc080; line-height: .8em; opacity: 0.7">Daily Kos</a>';
		newElement.setAttribute("style", "position:absolute; right:0px; padding:0px 0px 0px 0px; width:194px; color:white; font-size:40px; z-index:3");
		newElement.innerHTML = s;
    main.parentNode.insertBefore(newElement, main);
}

dailykoswide.user.js [back to top]
Makes a liquid layout for widescreen displays, and gets rid of the ugly logo and bright orange.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
// DKosWide
// version 1
// 2006-05-08
// Chris Heath
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script.
//
// To install, you need Greasemonkey: http://greasemonkey.mozdev.org/
//
// To uninstall, go to Tools/Manage User Scripts,
// select "DailyKos Wide", and click Uninstall.
//
// --------------------------------------------------------------------
//
// WHAT IT DOES:
// --------------------------------------------------------------------
//
// ==UserScript==
// @name            Dailykos Wide
// @description     Makes a liquid layout for widescreen displays, and gets rid of the ugly logo and bright orange.
// @include         http://www.dailykos.com/*
// @include         http://*.dailykos.com/*
// @include         http://dailykos.com/*
// ==/UserScript==

//First we remove the new garish logo from the webpage
//(this no longer works with new ajaxy dkos)
/*  var mast = document.getElementsByTagName('img');

  if( mast )
  {
      mast[0].src = "";
      mast[0].alt = "";
      mast[0].height = "0";
      mast[0].width = "0";
  }
*/

//This is the function for changing any styles
function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

//Now lets change some of the styles...
//First we get rid of the silly fixed width column image in the background and set the color to whiteaddGlobalStyle('body {background:#fff url(); color: #000; padding: 0; margin: 0; font: 13px/1.6 Verdana, Arial, sans-serif; line-height:1.45em ! important;}');

//Make things liquidaddGlobalStyle('#container {background: url(); width: 100%; border: none; margin: 0 auto; position: relative; background-color:white ! important;}');

//Push the main text to the left side and let it auto expand with a 244px buffer of padding for the right menuaddGlobalStyle('#main {position:absolute; left:0px; padding:0px 250px 0px 25px; margin:0px; width:auto; background-color:white; z-index:1 ! important;}');

//Hide those god damn ads
//(personally I use adblock extension and whitelist dailykos)
//(the result is that no ads show on the front page, but they do show on all other pages)addGlobalStyle('#ads {display:none; ! important;}');

//Make the mainmenu flush right	and set logo as the background image
//Yeah its ugly - but so is the source HTML flow...a pain for making liquid layoutsaddGlobalStyle('#sidebar {position:absolute; right:0px; margin:0px; width: 240px; font-size: .9em; padding:150px 0px 30px 0px; margin-top:0px; border-left: thin dotted lightgrey; background-color:white; background: url(http://img155.echo.cx/img155/176/littleman019ma.jpg) top center no-repeat; z-index:2 ! important;}');

//Tone down that damn bright orangeaddGlobalStyle('#sidebar h3 {background:#e59044;  font-weight:bolder; color: #FFF; padding: 0.25em 15px 0.15em 15px; ! important;}');addGlobalStyle('#sidebar a {border-bottom:solid 1px #ccc; ! important;}');addGlobalStyle('#sidebar li a {border-bottom:none; ! important;}');addGlobalStyle('#footer {display:none ! important;}');

//Remove the garish top mastheadaddGlobalStyle('#mastheadSpan {display:none ! important;}');

//Make the comments also have full width capabilites (not sure if 'e' needs to be in thereaddGlobalStyle('#comments,#e {width:100%;_width:100%;}');

//Modify the width of the comments as they indent
//(this was my final touch)addGlobalStyle('#comments ul.i0 li {margin-left:0}');addGlobalStyle('#comments ul.i0 li .cx {width:90%}');addGlobalStyle('#comments ul.i1 li {margin-left:24px}');addGlobalStyle('#comments ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li .cx {width:96%}');addGlobalStyle('#comments ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li .cx {width:96%}');addGlobalStyle('#comments ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li .cx {width:96%}');addGlobalStyle('#comments ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li .cx {width:96%}');addGlobalStyle('#comments ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li .cx {width:96%}');addGlobalStyle('#comments ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li .cx {width:96%}');addGlobalStyle('#comments ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li .cx {width:96%}');addGlobalStyle('#comments ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li .cx {width:96%}');addGlobalStyle('#comments ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li ul.i1 li {margin-left:0}');

//Last we add the Daily Kos name on top of the logo and make it link home. Its ugly but it works!
var main, newElement;
main = document.getElementById('main');
if (main) {
    newElement = document.createElement('div');
		var s = '<a href="/" style="color:#ffc080; line-height: .8em; opacity: 0.7">Daily Kos</a>';
		newElement.setAttribute("style", "position:absolute; right:0px; padding:0px 0px 0px 0px; width:194px; color:white; font-size:40px; z-index:3");
		newElement.innerHTML = s;
    main.parentNode.insertBefore(newElement, main);
}

[back to chrisheath.us ⤶]