Greasy Fork

Need help with a simple script

I just want to set the attributes of en element from fixed to relative idk what im doing wrong


// ==UserScript==
// @name Reyanime no fixed bars
// @version 1.0
// @author Roxz
// @description Hace que las barras no se muevan al hacer scroll
// @include http://reyanime.com/*
// @include https://reyanime.com/*
// ==/UserScript==


function () {
var barra = document.getElementById("top-barra"),
negro = document.getElementById("negro"),
blue = document.getElementById("izq-blue-fixed");

barra.style.position = "relative";
negro.style.position = "relative";
blue.style.position = "relative";

})();

Missing '(' before function (). Needs to be (function () { script })();

(function () {
var barra = document.getElementById("top-barra"),
negro = document.getElementById("negro"),
blue = document.getElementById("izq-blue-fixed");

barra.style.position = "relative";
negro.style.position = "relative";
blue.style.position = "relative";

})();

Like that? Cause it's not working either.

Try:

(function () {
var barra = document.querySelector(".top-barra"),
negro = document.querySelector(".negro"),
blue = document.querySelector(".izq-blue-fixed");

barra.style.position = "relative";
negro.style.position = "relative";
blue.style.position = "relative";

})();

That worked. Thanks. Whats the difference between getElementById and queryselector? When do you use querySelector?

The elements you wanted to target have no id name, only a class name.

Thanks. I keep testing it and it doesnt work consistently on some subdomains the "negro" stays fixed does that happen cause not all the var are all together on the same page?

Give me the url for which that occurs on and I will check it out.

for example http://reyanime.com/dokidoki-precure-la-pelicula-1/

I made a separate script just with the var negro and it works on that page but if I add the rest of the vars it doesnt.

Try this:

(function () {
var negro = document.querySelector(".negro"),
barra = document.querySelector(".top-barra"),
blue = document.querySelector(".izq-blue-fixed");

if (negro) negro.style.position = "relative";
if (barra) barra.style.position = "relative";
if (blue) blue.style.position = "relative";

})();

Edit:
Also try this // @include http://reyanime* instead of // @include http://reyanime.com/*
Will include more pages.

Thanks again. I tried the if thing but i guess my syntax was off.

If using Greasemonkey 0.9.8 or above, try this (copy/paste):

// ==UserScript==
// @name Reyanime no fixed bars
// @version 1.0
// @author Roxz
// @description Hace que las barras no se muevan al hacer scroll
// @include /^https?://reyanime.*$/
// @grant none
// ==/UserScript==

(function () {
var negro = document.querySelector(".negro"),
barra = document.querySelector(".top-barra"),
blue = document.querySelector(".izq-blue-fixed");

if (negro) negro.style.position = "relative";
if (barra) barra.style.position = "relative";
if (blue) blue.style.position = "relative";

})();

Or, you can do it with style injection:

// ==UserScript==
// @name Reyanime no fixed bars
// @version 1.0
// @author Roxz
// @description Hace que las barras no se muevan al hacer scroll
// @include http://reyanime.com/*
// @include https://reyanime.com/*
// ==/UserScript==

(function () {
	var $css = document.createElement ('style');
	$css.textContent = '\
	.top-barra,.negro,.izq-blue-fixed {\
		position:relative !important;\
	}';
	document.head.appendChild ($css);
})();

Thanks both guys. Since my last comment the issue was alrready solved.