New to designing on the Volusion platform and stuck after investigating the help topics on the support forms. I need to override a CSS style on all pages but my default.asp homepage. I am attempting to do this with javascript but it doesn't seem to be working.
Here is the demo for the site: http://v1330583.ovjk2w9aumkd.demo19.volusion.com/default.asp
I am attempting to modify my #content rule by beginning with this Javascript:
<script type="text/javascript">
//<![CDATA[
if (location.pathname == "/ProductDetails.asp") ||
location.pathname.indexOf("-p/") != -1 ||
location.pathname.indexOf("_p/") != -1)
var onHomepage = true;
if(!onHomepage)
document.writeln("\n<style type='text/css'>content {
padding: 20px background-color: #fff}</style>\n\n");
//]]> </script>
Can anyone tell me
Where I should inset this code.
If there is a better way to do this.
Would really appreciate any help!
There's a much simpler way to do this in Volusion without Javascript. If you log in to your dashboard, go to 'Design->File Editor" and then click on the template HTML file (it will be under the heading 'Template Files', you'll be in the main template file for your site.
In between the <body> tags you'll just add a div with an id of "if_not_homepage" and the site will only read the contents of this div if not on the default.asp page. For example:
<div id="if_not_homepage">
<style type="text/css">
#content{
padding:20px;
background-color:#fff;
}
</style>
</div>
OR you could call a separate stylesheet completely from within this div (for example):
<div id="if_not_homepage">
<link rel="stylesheet" href="/v/vspfiles/templates/YOUR_TEMPLATE/css/inner_style.css" />
</div>
If you place the stylesheet within the directory "/v/vspfiles/templates/YOUR_TEMPLATE/css/" you'll be able to edit the stylesheet from within the File Editor in the Volusion dashboard as well (like your other stylesheets).
Alternately, there is a div with an id of "if_homepage" that is read only if the user is on the default.asp (opposite of "if_not_homepage").
On a completely separate note, in your code above, you are missing either a class (.) or id (#) selector on 'content' in your CSS, so that may have something to do with it as well.
Instead of a style tag, I think you are better off setting the style directly with jQuery (if the DOM is loaded) or writing out a link tag to a separate style sheet.
Related
I can't seem to figure out why this wont work. I have a footer.html file in my main directory, one level above the directory this file is located in. I'm trying to include it on all the pages in the website, without having to have the footer.html file copied into every subdirectory. I assumed that a simple ../ preceding the footer.html would work, like it does in HTML, but maybe it doesn't work in jquery? It works fine on all the pages in the top level directory where the footer.html file is located. Can someone tell me what I'm missing here? It validates as correct. I'm sure it's something I'm overlooking. The whole point of making one footer.html page is so that I can update it in one place and it updates on every page, if I can't figure this out, it sort of defeats the purpose. Also: should I move the script to the head tag instead of nesting it inside the footer div tag?
HEADER:
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title></title>
<style>
body {background-color:#000000; color:#ffbb00;}
a, h1 {color:#ffffff;}
.center-div {
margin: 0 auto;
width: 1084px!important;
background-color:#000000;}
div.rule { margin: 0 auto;
width:50%;
height:1px;
background:#ffbb00;
align:center;
overflow:hidden;}
</style>
</head>
FOOTER:
<div id="footer">
<script>
$( "#footer" ).load( "../footer.html" );
</script>
</div>
You are mixing metaphores here.
jQuery's .load uses a URL which doesn't conform with file-system methods. You'll need to either use the absolute reference to the URL of the footer or use some javascript to figure out what it is. For example:
window.location.href.substr(0,window.location.href.lastIndexOf("/")+1)+"footer.html"
That's pretty goofy, but it finds the last "/" in your URL then cuts everything after it and appends footer.html to it.
Since your code is inside the block it's trying to look up, it's probably not loaded yet. Best practice is to wrap jquery calls in a $(document).ready(). Also, it's cleaner to not use relative stuff in your url's like ../. If you use relative paths that start with a slash like /templates/footer.html, you can reuse the same script on all your pages.
All other questions I've found relating to this are about changing specific elements, or changing the CSS file with a button, but what I'm looking to find out is:
Is there a script that will swap an entire CSS file whenever the page is refreshed?
I.e. I've got my core style.css and supplementary {color}.css files which replace certain elements in style.css, and I'd like those supplementary CSS files to be loaded randomly on refresh.
Sorry, I don't even know where, to begin with this. Hopefully, someone can offer some pointers?
Thank you.
Fundamentally this is just a matter of picking something at random, e.g.:
<head>
<!-- ... -->
<script>
var sheets = ["sheet1.css", "sheet2.css", "sheet3.css"];
var sheet = sheets[Math.floor(Math.random() * sheets.length)];
document.write('<link rel="stylesheet" href="' + sheet + '">');
</script>
<noscript>
<link rel="stylesheet" href="sheet1.css">
</noscript>
<!-- ... -->
(One of the rare cases where document.write isn't actually a bad solution.) Note the noscript fallback will always use the same stylesheet on browsers with JavaScript disabled.
All you need to do to load a CSS-file with Javascript is to add a <link> element to the DOM/body and it will be loaded automatically.
So in your <head> section you could include a <script> tag that just randomly selects a color.css from an array and generate the link tag, preferably as early as possible in the file to prevent flickering.
<script>
var colors = ['red.css', 'blue.css', 'green.css'];
var colors_idx = Math.floor(Math.random()*colors.length);
document.write('<link href="'+colors[ colors_idx ]+'" rel="stylesheet" type="text/css" />');
</script>
(PS. There are cleaner ways to inject HTML, keeping it concise to focus on the solution. Use your favorite approach, document.write can be a bit fickle.)
I’m “developing” a web site from Sharetribe (this is a website to create marketplaces). Sharetribe limited the “freedom” of a developer. We can add anything to the <head> of the website. So in the <head> I can change the CSS of the website, and this is great because I can change the appearance of the website.
What I’d like to do is to add HTML tags, like buttons, divs, etc. If I can do that, it would be great.
I believe this can’t be done, but first, I’d like to question — who knows, maybe I’m wrong.
It's a bit hacky, but you can use javascript to "insert" or "append" html to the body of the webpage through the head.
If you only have access to the head element, but not to the body, then you could try to use Javascript to add elements into the body. This only works if script tags are allowed and it has to be said that it is not really a good way of coding. But if it is the only way...
My idea (to make it a bit easier) : Include jQuery and add elements to the body by using the append function. So: you go to the jQuery downloads page, download the file and include it in the head tag. Now, you can access the body tag and insert some custom code like this:
$("body").append('<h1>Hi! I am a headline</h1>');
Pure JavaScript way:
var sibling = document.querySelector('.sibling');
var newSibling = document.createElement('div');
newSibling.className = 'sibling';
newSibling.innerHTML = 'Appended before the below div';
document.body.insertBefore(newSibling, sibling);
<body>
<!-- Already Existing HTML -->
<div class="sibling">I wish I had a sibling</div>
</body>
Quick jQuery way:
Include jQuery inside your head. Include the custom jQuery code inside <script></script> within <head>.
$(document).ready(function() {
$('.sibling').append('<div class="sibling">Hey! I am here</div>');
$('.child').wrap('<div class="child">You are not orphan anymore!</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Already Existing HTML -->
<div class="child">I wish I had a parent</div>
<div class="sibling">I wish I had a sibling</div>
</body>
I'm creating a website that uses jQuery .load() to present content that is stored in divs on another .html page, as follows
index.html head:
<link href="css/prism.css" rel="stylesheet" />
<script type="text/javascript" src="js/prism.js"></script>
index.html:
$('#content').load('project_info.html #example', function() { $(this).fadeIn(".25s"); });
project_info.html's corresponding div:
<div id="example">
<pre><code class="language-css">p { color: red }</code></pre>
</div>
I'm trying to get the prism.js code block to display correctly, and while
<pre><code class="language-css">p { color: red }</code></pre>
works properly when I embed it in index.html, it won't seem to inherit the prism.js file, just the prism.css stylesheet. It seems the prism.js file won't manipulate the "content" div. Any ideas?
After you load the remote content onto your page, you'll need to manually apply prism to it. After some brief search, looks like prism.js provides this method:
highlightElement: function(element, async, callback) { ... }
I'm assuming can use Prism.highlightElement(document.getElementById('example')) to highlight the code inside #example.
(Also see this example: https://github.com/PrismJS/prism/blob/b551696fbdf8905d52ca67e1a9ae50a3ccfeab92/examples.js)
I am creating a website (http://yic.am) using wordpress and the theme includes a background and a "subpage_content_bg". The subpage-background is a semi-transparent white background that wraps around the content making it easier to read. I would like the subpage background to become position:fixed instead of position:absolute when you scroll down, so that when it reaches the top of the page it scrolls with the page.
I have found several pages describing and demonstrating the function when the subject is a picture, comment box or text in the actual post or page. However, I cannot seem to find a description for when the picture is a part of the css stylesheet.
The subpage-extract from the stylesheet looks like this:
#sp .content_wrapper_sbl {
width:940px;
min-height:320px;
margin:-107px auto 0;
padding:45px;
position:relative;
z-index:20;
background:url(../../images/subpage_content_bg.png) 0 0 no-repeat;
}
Where should I place the javascript for the function (I am trying to use the function from the above link)? I would like it to be for all pages and posts (except the cover-page)
How do I make the subpage image the target of the function? Is it possible to make the #sp or content_wrapper_sbl the target?
I have been trying a lot of different things for a lot of times - but I am very new to web-designing and coding. I hope all the necessary information is included - any help would be much appreciated.
The code I am working is this: http://jsfiddle.net/EahRx/870/
It looks like you've pretty much got it nailed in that fiddle, haven't you? It's personal preference how you want to arrange your javascript files, I guess. Personally, I like to use the Google library to load my jQuery...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
and then load any other plugins you might be using...
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
and finally I usually build a custom jQuery file and call it, surprise surprise, "jquery.custom.js"...
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
So the final javascript include list looks like this...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
This way the jQuery library is loaded first because the likelihood is that all other javascript files depend on it. Then the plugins are loaded, finally your custom file is loaded because that might depend on some of the earlier plugins being loaded first - for example, your custom file might want to tweak a slideshow file loaded in one of your plugins.
If, for any reason, you are not able to edit the head of your template file to add your javascript include you can add it to the bottom of your HTML like this...
<head>
[META INFO & TITLE]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
[CSS AND STUFF]
</head>
<body>
[YOUR WEB PAGE STUFF]
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
</body>
</html>
Hope this helps point you in the right direction.
Oh, and remember to add the old "document ready" gubbins to the jquery.custom.js file too...
$(document).ready(function(){
[YOUR JQUERY HERE]
});