Rich-text Reply

Add new element tag to a page (<style>)?

gauteremen 06-02-16

Add new element tag to a page (<style>)?

Hi guys!

 

A short question. 

I am trying to add a <style> tag with some content inside to a page I am testing. 

I need the CSS code for a "sticky on top". I got the JavaScript covered, as I have done this before in another test.

 

What I am doing right now is this:

$('head').prepend('<style> .stick{position:fixed;width:100%;top:0px;z-index:3;} </style>');

I thought I knew my way around JQuery, but it seem that this does not work correctly (and it is early in the morning here i Norway). Can you see what the issue is?

 

All help is appreciated! Man Very Happy

CouchPsycho 06-02-16
 

Re: Add new element tag to a page (<style>)?

Is there any page, where one can see it? Myabe your z-Index is too low? Set it to 100 and try to set left to zero also.... just a guess



"the essence of the creative act is to see the familiar as strange." (anonymous)
robertchan 06-02-16
 

Re: Add new element tag to a page (<style>)?

Here's an ES6 solution I came up with, it should work if it's the only code in your variation code, otherwise, you'll want to wrap your existing code accordingly.

 

/*jshint esnext: true */
/*jshint browser: true */
(() => {
	'use strict';
	const appStr = '.stick { position:fixed; width:100%; top:0px; z-index:3; }',
	 	  css    = appStr,
	      head   = document.head || document.getElementsByTagName('head')[0],
	      style  = document.createElement('style');
		
		  style.type = 'text/css';

		  style.styleSheet ? style.styleSheet.cssText = css 
						   : style.appendChild(document.createTextNode(css));

		  head.appendChild(style);
})();

 

Robert Chan

Experimentation Hero
JasonDahlin 06-02-16
 

Re: Add new element tag to a page (<style>)?

Hi @gauteremen,

The code looks fine.  I believe the issue lays in how CSS rules are processed and/or the actual HTML of the widget you are trying to modify aka "Specificity, Precedence, and Importance"

 

Check this great article that explains how to determine which CSS rule is applied: http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

 

The key points here are that the page may be skipping your rule due to:

1- it was applied before an equally specific rule (last rule wins)

2- it is less specific that the rule you are trying to modify

3- it is less important that the rule you are trying to modify

 

To get around this, this is one time where using "!important" is pretty much a requirement.

$('head').prepend('<style> .stick{position:fixed !important;width:100% !important;top:0px !important;z-index:3 !important;} </style>');

 

--Jason Dahlin
Analytics and Testing Guru Smiley Happy
Experimentation Hero
gauteremen 06-03-16
 

Re: Add new element tag to a page (<style>)?

Thanks @robertchan! I will try this out. I have some additional code (sticky on top stuff), so I need to do some wrapping.
gauteremen 06-03-16
 

Re: Add new element tag to a page (<style>)?

Great article @JasonDahlin! @robertchan had a different approach, but I'll be sure to check out your solution as well Smiley Happy
JasonDahlin 06-03-16
 

Re: Add new element tag to a page (<style>)?

@gauteremen - my response is only relevant if the code you are using works when you run it in the console but is not working when you add it via Optimizely.  If you are having issues getting the feature to work correctly, since @robertchan already started you down a path, stick with that.  good luck!

--Jason Dahlin
Analytics and Testing Guru Smiley Happy
Experimentation Hero
robertchan 06-03-16
 

Re: Add new element tag to a page (<style>)?

Anytime @GAUTERMEN!
Robert Chan

Experimentation Hero
gauteremen 06-06-16
 

Re: Add new element tag to a page (<style>)?

@robertchan

 

Hi again,

 

Thanks for the nice solution.

However, I have gotten myself yet another challenge.

 

The code you provided added the style nicely to the page.

 

But, the "sticky" code do not run. I've tried to nest it as best as I can, but I cannot seem to get it right.

 

Do you have the time to give it a peek?

I have earlier made an inquery about this, but not in the current setting.

 

I have added the scroll-anchor class and scroll-banner class repectively. I get "Cannot read property "top" of undefined" when I force-run the variation. Here's the code (your snippet on top, stick-snippet below):

 

/*jshint esnext: true */
/*jshint browser: true */
(() => {
	'use strict';
	const appStr = '.stick { position:fixed; width:100%; top:0px; z-index:3; }',
	 	  css    = appStr,
	      head   = document.head || document.getElementsByTagName('head')[0],
	      style  = document.createElement('style');
		
		  style.type = 'text/css';

		  style.styleSheet ? style.styleSheet.cssText = css 
						   : style.appendChild(document.createTextNode(css));

		  head.appendChild(style);
})();

var $ = window.$;
function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('.scroll-anchor').offset().top;
    if (window_top > div_top) {
        $('.scroll-banner').addClass('stick');
    } else {
        $('.scroll-banner').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

 

Any smart workaround?

I've attached some images to provide some more information.

1.png
2.png
3.png
4.png
robertchan 06-06-16
 

Re: Add new element tag to a page (<style>)?

The error is telling you that .scroll-anchor does not exist. You might want to have a look at setting up a promise for what you're attempting to do: https://spring.io/understanding/javascript-promises
Robert Chan

Experimentation Hero