Userscripts.org

Hi all

I'm doing a little toolbox for a browser game called "Glitch".
And I would need to load an url of mine into a new sidebar, on the left of the game screen (which is a full size swf - id: swf_div).

Here is the plan in two pics:
-before: http://i.imgur.com/ElWF2.jpg
-after: http://i.imgur.com/mVJNs.jpg

As you can see there is button on the left, that opens the frame when clicked, not displaying it over the content, but moving everything to the right.
Also it would be neat to have it as a jquery animation, like some of the "feedback" tabs do (but in my case full height and content offset):
http://www.building58.com/examples/tabSlideOut....

A gave try to a bunch of iframe scripts here, but all of them seem to add an "overlay" to the page, rather than actually being on the left of the default content.

Here is the (mockup) url, I'm willing to load on the side:
http://glitchcompanion.appspot.com/lite
I'm really just discovering how to create those scripts, so if anyone could post a full working example, it would be quite awesome :]

Tried to keep it simple.
Used CSS animation which is triggered by a button (div). Clicking on the button moves whole site by 300px.

(function() {
	// slide animation
	GM_addStyle("\
		.slide_out {\
			-moz-animation-duration: 3s;\
			-moz-animation-name: slide_out;\
			-moz-animation-fill-mode: forwards;\
		}\
		.slide_in {\
			-moz-animation-duration: 3s;\
			-moz-animation-name: slide_in;\
			-moz-animation-fill-mode: forwards;\
		}\
		@-moz-keyframes slide_out {\
			100% { -moz-transform: translateX(300px); }\
		}\
		@-moz-keyframes slide_in {\
			0% { -moz-transform: translateX(300px); }\
			100% { -moz-transform: translateX(0px); }\
		}\
	");

	// floating button, iframe
	GM_addStyle("\
		#toggle_sidebar {\
			border: solid 3px #003366;\
			background-color: #006699;\
			position: absolute;\
			left: 0px;\
			top: 350px;\
			width: 20px;\
			height: 50px;\
			cursor: pointer;\
		}\
		#sidebar {\
			border: none;\
			width: 300px;\
			height: 1000px;\
			position: absolute;\
			left: -300px;\
			top: 0px;\
			overflow: hidden;\
		}\
	");
	
	var btn = document.createElement("div");
		btn.id = "toggle_sidebar";
		btn.addEventListener("click", toggleSidebar, false);
	document.body.appendChild(btn);
	
	var ifr = document.createElement("iframe");
		ifr.id = "sidebar";
		ifr.src = "http://glitchcompanion.appspot.com/lite";
	document.body.appendChild(ifr);
	
	var toggleState = false; // false - closed, true - opened
	
	function toggleSidebar() {
		document.body.className = toggleState ? "slide_in" : "slide_out";
		toggleState = !toggleState;
	}
})();

Hey AmpliDude
This is great, lovin' it!
Had no idea you could do all that with CSS animation and no jQuery

Just one small thing to make it perfect,
sorry if my description wasn't that clear, but while I would like the content to move to the right, I would also like the layout of the site to adapt to the smaller width of the right part, with no scrolling bar at the bottom.
You can actually see it a bit in my two mockup pics, as the space on the right also get shrunk, so the layout of the page stays centered, just like this forum when you scale the window.

Thanks for making it short and efficient, it's a lot easier to understand!
After looking at the docs for those css transforms, I gave it a try with the scale()one added to the translation, but it was pretty weird looking

I tweaked the script a bit:
- the body is being scaled to 75% and moved to fit the sidebar
- the sidebar and button is moved from body to html element therefore it's not being scaled
- sidebar has it's own slide animation

Now it's all about the numbers, you need to play with them to achieve what you want.

(function() {
	var wiw = window.innerWidth;
	var scale = 75; // scale by 75%
	var tX = 300 - parseInt(wiw * (1 - scale/100)/2); // translate body by X value to fit the sidebar, assuming 300px for the iframe
	// scale animation
	GM_addStyle("\
		.scale_out {\
			-moz-animation-duration: 3s;\
			-moz-animation-name: scale_out;\
			-moz-animation-fill-mode: forwards;\
		}\
		.scale_in {\
			-moz-animation-duration: 3s;\
			-moz-animation-name: scale_in;\
			-moz-animation-fill-mode: forwards;\
		}\
		@-moz-keyframes scale_out {\
			100% { -moz-transform: translate(" + tX + "px, -" + (100-scale)/2 + "%) scale(" + scale/100 + "); }\
		}\
		@-moz-keyframes scale_in {\
			0% { -moz-transform: translate(" + tX + "px, -" + (100-scale)/2 + "%) scale(" + scale/100 + "); }\
			100% { -moz-transform: translate(0px, 0%) scale (1); }\
		}\
	");
	// slide animation
	GM_addStyle("\
		.slide_out {\
			-moz-animation-duration: 3s;\
			-moz-animation-name: slide_out;\
			-moz-animation-fill-mode: forwards;\
		}\
		.slide_in {\
			-moz-animation-duration: 3s;\
			-moz-animation-name: slide_in;\
			-moz-animation-fill-mode: forwards;\
		}\
		@-moz-keyframes slide_out {\
			100% { -moz-transform: translateX(300px); }\
		}\
		@-moz-keyframes slide_in {\
			0% { -moz-transform: translateX(300px); }\
			100% { -moz-transform: translateX(0px); }\
		}\
	");

	// floating button, iframe
	GM_addStyle("\
		#toggle_sidebar {\
			border: solid 3px #003366;\
			background-color: #006699;\
			position: absolute;\
			left: 0px;\
			top: 350px;\
			width: 20px;\
			height: 50px;\
			cursor: pointer;\
		}\
		#sidebar {\
			border: none;\
			width: 300px;\
			height: 1000px;\
			position: absolute;\
			left: -300px;\
			top: 0px;\
			overflow: hidden;\
		}\
	");
	
	var btn = document.createElement("div");
		btn.id = "toggle_sidebar";
		btn.addEventListener("click", toggleSidebar, false);
	//document.body.appendChild(btn);
	document.querySelector("html").appendChild(btn);
	
	var ifr = document.createElement("iframe");
		ifr.id = "sidebar";
		ifr.src = "http://glitchcompanion.appspot.com/lite";
	//document.body.appendChild(ifr);
	document.querySelector("html").appendChild(ifr);
	
	
	var toggleState = false; // false - closed, true - opened
	
	function toggleSidebar() {
		document.body.className = toggleState ? "scale_in" : "scale_out";
		document.getElementById("toggle_sidebar").className = toggleState ? "slide_in" : "slide_out";
		document.getElementById("sidebar").className = toggleState ? "slide_in" : "slide_out";
		toggleState = !toggleState;
	}
})();

Yeah that's something like that I tried too with scale() (without all the details you added!)
But looks like its not gonna work with these transforms I'm afraid :\
I don't want the content to be shrunk and the text to look strange, it may just "adapt" to the new width of the remaining area, again just like this forum does for example.

Found these "transitions", next to the css animation docs, could be the way to go with "transition: width".
http://www.w3schools.com/css3/css3_transitions.asp
Having two container divs that change their width, the inside should follow smoothly?
I'm giving it a try now, but you're probably gonna be quite more efficient ;)

Thanks again for the help, I'm sure this kind of function will be useful to a bunch of people on this forum :]

Hmm well there is something moving, but that is not our sidebar :p

	// slide animation
	GM_addStyle("\
		.slide_out {\
			width:800px;\
			-moz-transition: width 2s;\
		}\
		.slide_in {\
			width:0px;\
			-moz-transition: width 2s;\
		}\
	");

Looks quite fun applied here:
https://developer.mozilla.org/en/CSS

Hello guys

I'm still looking for a way to do this thing :]

That game appears to require signing-up to be able to view the page of the actual game (and moreover they say it can take a few weeks to sign-up...), so I can't really test this very well. However, I agree that transitions are probably more suitable here than animations. So, here is a modification of AmpliDude's code to use transitions and avoid scaling (and otherwise match my style a little bit more) that might be of help:

(function() {
  "use strict";

  var sidebarWidth = '300px';
  GM_addStyle(
    "body, #toggle_sidebar, #sidebar {\n" +
    "  -moz-transition-duration: 0.5s;\n" +
    "  -moz-transition-property: left, right;\n" +
    "}\n" +
    "body {\n" +
    "  position: absolute;\n" +
    "  left: 0; right: 0;\n" +
    "}\n" +
    "body.slide_out, #toggle_sidebar.slide_out {\n" +
    "  left: " + sidebarWidth + ";\n" +
    "}\n" +
    "#toggle_sidebar {\n" +
    "  border: solid 3px #003366;\n" +
    "  background-color: #006699;\n" +
    "  position: fixed;\n" +
    "  left: 0px;\n" +
    "  bottom: 6px;\n" +
    "  width: 20px;\n" +
    "  height: 50px;\n" +
    "  cursor: pointer;\n" +
    "}\n" +
    "#sidebar {\n" +
    "  border: none;\n" +
    "  width: " + sidebarWidth + ";\n" +
    "  height: 1000px;\n" +
    "  position: absolute;\n" +
    "  left: -" + sidebarWidth + ";\n" +
    "  top: 0px;\n" +
    "  overflow: hidden;\n" +
    "}\n" +
    "#sidebar.slide_out {\n" +
    "  left: 0;\n" +
    "}\n"
  );
  
  var btn = document.createElement("div");
    btn.id = "toggle_sidebar";
    btn.addEventListener("click", toggleSidebar, false);
  //document.body.appendChild(btn);
  document.querySelector("html").appendChild(btn);
  
  var ifr = document.createElement("iframe");
    ifr.id = "sidebar";
    ifr.src = "http://glitchcompanion.appspot.com/lite";
  //document.body.appendChild(ifr);
  document.querySelector("html").appendChild(ifr);
  
  
  var showSidebar = false; // false - closed, true - opened
  
  function setClass(elem) {
    if (showSidebar) {
      elem.className += ' slide_out';
    } else {
      elem.className = elem.className.replace(/\s*slide_out/, '');
    }
  }

  function toggleSidebar() {
    showSidebar = !showSidebar;
    setClass(document.body);
    setClass(document.getElementById("toggle_sidebar"));
    setClass(document.getElementById("sidebar"));
  }
})();

Wow, this is exactly it now!
Thanks to you both ^^
You could publish it in the scripts, it's great for a bunch of uses already

Now actually it works perfectly everywhere... except in that game screen doh :\
(nothing appears on the screen except the button, white page)
That's a full page swf, but maybe there's something in the css that conflicts
with the new properties?

I pasted the source from http://www.glitch.com/game/ if you have the time to have
a little look, thx again!
http://pastesite.com/39127
(nice ascii G right?)

EDIT: could be a position issue?
when I change the body position to static, the game screen reappears
...but yeah of course it's static and the sidebar just move on top of it

They seem to be setting the width of the main div with javascript, which is causing problems. Try

(function() {
  "use strict";

  var sidebarWidth = '300px';
  GM_addStyle(
    "#client_div, #toggle_sidebar, #sidebar {\n" +
    "  -moz-transition-duration: 0.5s;\n" +
    "  -moz-transition-property: left, right;\n" +
    "}\n" +
    "#client_div {\n" +
    "  position: absolute;\n" +
    "  left: 0 !important;\n" +
    "  right: 0 !important;\n" +
    "  width: auto !important;\n" +
    "}\n" +
    "#client_div.slide_out, #toggle_sidebar.slide_out {\n" +
    "  left: " + sidebarWidth + " !important;\n" +
    "}\n" +
    "#toggle_sidebar {\n" +
    "  border: solid 3px #003366;\n" +
    "  background-color: #006699;\n" +
    "  position: fixed;\n" +
    "  left: 0px;\n" +
    "  bottom: 6px;\n" +
    "  width: 20px;\n" +
    "  height: 50px;\n" +
    "  cursor: pointer;\n" +
    "}\n" +
    "#sidebar {\n" +
    "  border: none;\n" +
    "  width: " + sidebarWidth + ";\n" +
    "  height: 1000px;\n" +
    "  position: absolute;\n" +
    "  left: -" + sidebarWidth + ";\n" +
    "  top: 0px;\n" +
    "  overflow: hidden;\n" +
    "}\n" +
    "#sidebar.slide_out {\n" +
    "  left: 0;\n" +
    "}\n"
  );
  
  var btn = document.createElement("div");
    btn.id = "toggle_sidebar";
    btn.addEventListener("click", toggleSidebar, false);
  //document.body.appendChild(btn);
  document.querySelector("html").appendChild(btn);
  
  var ifr = document.createElement("iframe");
    ifr.id = "sidebar";
    ifr.src = "http://glitchcompanion.appspot.com/lite";
  //document.body.appendChild(ifr);
  document.querySelector("html").appendChild(ifr);
  
  
  var showSidebar = false; // false - closed, true - opened
  
  function setClass(elem) {
    if (showSidebar) {
      elem.className += ' slide_out';
    } else {
      elem.className = elem.className.replace(/\s*slide_out/, '');
    }
  }

  function toggleSidebar() {
    showSidebar = !showSidebar;
    setClass(document.getElementById("client_div"));
    setClass(document.getElementById("toggle_sidebar"));
    setClass(document.getElementById("sidebar"));
  }
})();

Amazing, it totally works!
There's a bit of motion easing in their script apparently that mixes strangely with the transition, but apart from that it's perfect :]

Now I guess I have to finish the actual page inside that iframe
They're releasing new features in their API so it's gonna be fun
Actually I'm probably having more fun with that than the game itself

Come visit in game some time ;)
cheers
lemo

Okay my tool in that frame is almost done, was faster than I expected :]

Only thing is that I noticed this script only works in Firefox and not in Chrome. I'd like to make it available to everyone in the game, and I know a bunch of them use Chrome.

I tried with TamperMonkey as well, but the button disappear, or just doesn't act at all.
Looks like it's around those GM_* functions, but I'm not quite sure...
Anyway, if you have any idea, I would love to have it run in Chrome too ^^

Ah, yeah, Chrome doesn't provide the GM_* functions. Here is an alternative for GM_addStyle that I picked up somewhere

  function GM_addStyle(css) {
    var head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    var style = document.createElement('style');
    style.type = 'text/css';
    try {
      style.innerHTML = css;
    } catch(e) {
      style.innerText = css;
    }
    head.appendChild(style);
  }

Also, for cross-browser transitions, one has to specify the property many times with different prefixes. E.g. -moz-transition-* for Firefox, -webkit-transition-* for Safari and Chrome, -o-transition-* for Opera, etc.

Thanks!
I saw about the cross-browser transitions sometime ago then I completely forgot
Actually when installed with TamperMonkey for chrome, GM_addstyle seems works out of the box, just had to add the -webkit :]
But I'll add the function I guess, so people won't even have to get TamperMonkey

Now, same problem again, it works everywhere except for the game page, even with the last version of the code.
It's a bit different this time, the button appears for a fraction of second, then disappears :\

The version that worked before no longer works (meaning they changed the page)? Or it still works with Firefox, but isn't yet working with Chrome?

(I'm a bit confused about what code you're using since the last version I posted had assumed there was an element with the id client_div and would fail an any page that didn't have such an element...)

Sorry I wasn't clear at all
The last script still works with Firefox, what I'm describing just happens in Chrome.

And after I noticed that, I just wanted to try with the previous "all sites" code,
also with the -webkit and GM_ function changes, and those worked just fine in Chrome on other urls

Hmm, well, to the extent that the file you pasted loads, it looks about the same in Chrome and Firefox to me. It obviously isn't loading fully though, which limits how much I can directly analyze the issue.

However, Firefox (with Firebug) and Chrome both have tools that let you view and modify the DOM and applied styles ("Inspect Element" from the context menu). If you poke around a bit (perhaps with the two browsers open side-by-side), that might help you figure out why they are behaving differently.

Hey there!
An update as I released the sidebar for the game last week
(busy summer with other things :p)
People seem to like it quite much, but apart from firefox, there are still a few issues with chrome and safari.
(I tried to mess around with the z-index...feels like it behaves differently in chrome)
Also they unlocked the invite system recently, so if you thought the game looked interesting, I can send you an invite if you like :]