Here is my site: http://dkurf.esxsb.servertrust.com/
I need to create specific styling for this page: http://dkurf.esxsb.servertrust.com/ProductDetails.asp?ProductCode=dfhs
I don't have access to the html for that page so i need to override the styles that are throughout the site only for that page.
This is the bit of javascript the company that hosts my ecommerce store provided (Volusion, p.s. don't ever use them they are a css nightmare!)
<script type="text/javascript">
//<![CDATA[
if (location.pathname == "/ProductDetails.asp" ||
location.pathname.indexOf("-p/") != -1 ||
location.pathname.indexOf("_p/") != -1)
document
.writeln("\n<style type='text/css'>.pricecolor{ background:#000; }</style>\n\n");
//]]>
</script>
But if any one has any suggestions, it would be super helpful!
Thanks!
Untested, but should work.
Should theoretically fail if there's no <head> tag.
var appendStyle= function(css){
var code = document.createTextNode(css);
var style = document.createElement('style');
style.type='text/css';
style.media='all';
style.appendChild(code);
document.getElementsByTagName('head')[0].appendChild(style);
};
(function(){
var _ol = typeof(window.onload)==='function' ? window.onload : function(){};
window.onload = function(){
_ol.apply(this,arguments);
if(window.location.href.indexOf('ProductDetails.asp?ProductCode=dfhs')!==-1) { try{
appendStyle("\
.pricecolor{ background:#000; }\
body{ background:#f0f }\
");
alert('new style appended successfully');
}catch(e){ alert('error appending style: '+e) }};
};
}());
Related
I'm wondering if there is a way to get a handle on the DOM element that contains the script inside it. So if I had:
<script type="text/javascript> var x = ?; </script>
Is there a way that I can assign "x" a reference to the script element that contains "x"?
There isn't a truly safe way.
The closest you can come is to use getElementsByTagName to get all the scripts, get its length, get the last script element, then work from there.
This can fail if the script is deferred or if the script has been dynamically added to the page before another script element.
You could include some marker text in the script element, and then (similar to what David said), you can loop through all the script elements in the DOM (using getElementsByTagName or whatever features your library, if you're using one, may have). That should find the element reliably. That would look something like this (live example):
<body>
<script id='first' type='text/javascript'>
(function() {
var x = "MARKER:first";
})();
</script>
<script id='second' type='text/javascript'>
(function() {
var x = "MARKER:second";
})();
</script>
<script id='third' type='text/javascript'>
(function() {
var x = "MARKER:third";
})();
</script>
<script id='last' type='text/javascript'>
(function() {
var scripts, index, script;
scripts = document.getElementsByTagName("script");
for (index = 0; index < scripts.length; ++index) {
script = scripts[index];
if (script.innerHTML.indexOf("MARKER:second") >= 0
&& script.id !== "last") {
display("Found MARKER:second in script tag #" + script.id);
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
})();
</script>
</body>
Note that, like the script above, if you're looking for a script tag marker from within a different script tag, you'll need to handle that. Above it's handled by checking the ID of the script tag, but you can also just break it up in the one you don't want to find, like this (live example):
if (script.innerHTML.indexOf("MARKER:" + "second") >= 0) {
display("Found MARKER:" + "second in script tag #" + script.id);
}
trying to solve this one and it's a doosey.
Basically I have a typeform popup show once specific pages to get feedback from users but it currently loads every time the page loads.
Would much rather users just see it once per visit.
I tried this with no luck:
<style type="text/css">
div#slider {
/* Hide the div */
display: none;
}
.typeform-share{
display:none;
}
</style>
<div class="slider"><a class="typeform-share button" href="https://sombees.typeform.com/to/xxxxx" data-mode="popup" data-auto-open=true data-hide-headers=true data-hide-footer=true data-submit-close-delay="0" target="_blank"> </a> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script></div>
<script type="text/javascript">
var cookie = document.cookie;
if (cookie.indexOf('visited=', 0) == -1) {
var expiration = new Date();
expiration.setDate(expiration.getDate()+1);
document.cookie = 'visited=1;expires=' + expiration + ';path=/';
var element = document.getElementById('slider');
element.style.display = 'block';
}
</script>
Don't know much about Typeform, but testing this out I figured out what is wrong with your code.
So first of all you should wrap it in something like:
$(window).on('load', function(){ ... }
Now, second and most important thing is that Typeform does not display overlay or modal in the slider div, but in a newly created div which it puts at the end of the page.
Like you see in he picture above. In my case class of the div is .jktBHD but this can be different for you. I don't know.
So, knowing this you should change your code to something like this:
$(window).on('load', function(){
var cookie = document.cookie;
if (cookie.indexOf('visited=', 0) == -1) {
var expiration = new Date();
expiration.setDate(expiration.getDate()+1);
document.cookie = 'visited=1;expires=' + expiration + ';path=/';
//
// THE IMPORTANT PART
//
var element = document.querySelector('.jktBHD');
element.style.display = 'block';
}
})
<style type="text/css">
.jktBHD {
display: none;
}
</style>
I tested this out and it works for me. Hope it will work for you too.
I added this to the head, but it's not working:
<script>
var xpathname = (window.location.pathname);
if (xpathname ==('/')) {
$('body').addClass('home');
}
</script>
The site is here: http://xotdr.unxpr.servertrust.com/
Volusion doesn't allow developers to code freely so there are a lot of workarounds that I need to implement, unfortunately.
Edit: I want the class to show only on the home page body.
Since you added this to the head you need to execute this snippet when body tag is available:
$(function() {
var xpathname = window.location.pathname;
if (xpathname == '/') {
$('body').addClass('home');
}
});
<script>
var bodyclass=document.createAttribute("class");
bodyclass.value="home";
document.getElementsByTagName("body")[0].setAttributeNode(bodyclass);
</script>
Give this a try
var b = document.getElementsByTagName('body')[0];
b.className += 'home';
I know it's a old post, but the question will remain useful.
var xpathname = (window.location.pathname);
var ndeBody = document.getElementsByTagName("body")[0];
if (xpathname ==('/')) {
ndeBody.classList.toggle("home");
}
else{
ndeBody.classList.toggle("home");
}
When I go to that URL you have syntax error:
Uncaught ReferenceError: x$ is not defined
e.g. you want to delete the x in x$('body').addClass('home');
I'm working on a small project where if the user enters the Konami code on a site, a filter is applied to every element (for now, will be better in the final version). Right now I have:
<script type="text/javascript">
var success = function() {
var css = 'div { -webkit-filter: blur(10px); }',
head = document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var konami = new Konami(success);
</script>
and I'm using http://snaptortoise.com/konami-js/ which has successfully run when used with a redirect instead of a function (documentation says I can create a new Konami with the method shown above, or with a url string to be used as a redirect).
I've gotten javascript alert messages to show, but cannot implement this filter. What did I do wrong?
Keep the class in your stylesheet:
.blurred {
-webkit-filter: blur(10px);
}
And then add it to your <body> tag:
var success = function() {
document.body.className = 'blurred';
};
You never append style to the head:
head.appendChild(style);
http://jsfiddle.net/ExplosionPIlls/2mTJf/
You need to add head.appendChild(style).
JS Fiddle http://jsfiddle.net/NMetj/
I'm wondering if there is a way to get a handle on the DOM element that contains the script inside it. So if I had:
<script type="text/javascript> var x = ?; </script>
Is there a way that I can assign "x" a reference to the script element that contains "x"?
There isn't a truly safe way.
The closest you can come is to use getElementsByTagName to get all the scripts, get its length, get the last script element, then work from there.
This can fail if the script is deferred or if the script has been dynamically added to the page before another script element.
You could include some marker text in the script element, and then (similar to what David said), you can loop through all the script elements in the DOM (using getElementsByTagName or whatever features your library, if you're using one, may have). That should find the element reliably. That would look something like this (live example):
<body>
<script id='first' type='text/javascript'>
(function() {
var x = "MARKER:first";
})();
</script>
<script id='second' type='text/javascript'>
(function() {
var x = "MARKER:second";
})();
</script>
<script id='third' type='text/javascript'>
(function() {
var x = "MARKER:third";
})();
</script>
<script id='last' type='text/javascript'>
(function() {
var scripts, index, script;
scripts = document.getElementsByTagName("script");
for (index = 0; index < scripts.length; ++index) {
script = scripts[index];
if (script.innerHTML.indexOf("MARKER:second") >= 0
&& script.id !== "last") {
display("Found MARKER:second in script tag #" + script.id);
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
})();
</script>
</body>
Note that, like the script above, if you're looking for a script tag marker from within a different script tag, you'll need to handle that. Above it's handled by checking the ID of the script tag, but you can also just break it up in the one you don't want to find, like this (live example):
if (script.innerHTML.indexOf("MARKER:" + "second") >= 0) {
display("Found MARKER:" + "second in script tag #" + script.id);
}