I've got a problem that I can't quite get my head around.
I've built 3 identical templates in my CMS except for the CSS that they call (it's not WordPress and has no access to the application layer). I have plugged in my navigation, sidebar and footer in the theme files (think of these as "pages" in a WordPress site rather than the PHP shortcodes one would normally use). My page content is then dynamically served.
My issue is that these templates are going to be used across a number of different websites. Thus the contents of the navigation, sidebar and footer all need to be able to change depending on which site they are in use on. The business requirements are that I have to have only one of each of these pages. I can't just make 20 copies of the theme if I were to have to do 20 websites.
My initial idea is to use something like this....
var url = window.location.href;
var site1 = url.indexOf('site1');
var site2 = url.indexOf('anothersite');
var site3 = url.indexOf('thefinalsite');
if (site1 >= 0) {
$('.sidebar_info').append('<li>Login</li><br/><li>Another Link</li>');
}
else if (site2 >= 0) {
$('.sidebar_info').append('<li>Not Login</li><br/><li>Link</li>');
}
else if (site3 >= 0) {
$('.sidebar_info').append('<li>Unique Link</li><br/><li>Some other Link</li>');
}
else {
$('.sidebar_info').append('<li>Nothing</li>');
}
While I'm pretty sure I could make this work it would be a headache if every time a site was commissioned to be built I have to go into 3 different pages and update the functions. Plus ideally down the line a less technical person would be able to spin one of these up themselves.
Any ideas on other ways I could accomplish this with JS or jQuery?
Much appreciated!
Related
I'm sorry, I'm totally clueless in javascript, and try to understand the bit of codes I get the best I can...
I'm working on a forum which is hosted on an online server, which makes I can't touch the html (I just have access to the header and the footer). And on this forum, there is a tagcloud in which tags are sorted by popularity order: I want to sort them with my own order (sorted years, country by alphabetical order, etc.).
For that, I created a "sorted tag cloud" in the footer (.TagCloud-order) in which I sorted the tags manually, and I asked with javascript to replace the current unsorted tagcloud (.TagCloud) with my own sorted tag-cloud:
$(document).ready(function() {
if(window.location.href === "https://forum.cinestudia.fr/") {
$('.TagsPage-content .TagCloud').replaceWith($('.TagCloud-order').html());
} else {
}
});
It works on page load, but then if I go to another page of the forum (like "Toutes les discussions") and that I come back to the main page containing the tag-cloud ("Etiquettes", the page matching the url in my javascript code), the original unsorted tag-cloud is back. You can see the result here: https://forum.cinestudia.fr/
The problem, basically, is that $(document).ready(function() works only when the page launches, but after that it doesn't anymore.
What kind of function can I use for this action being true each time the reader is back on this main url?
(i know a solution would be to put a short timer to change the tag-cloud every 0.1 seconds or less, but it seems really heavy for the browsers...).
I'm creating a script where I want to check how many ad slots there are on a page. The way these slots are presented are like so:
//Adslot 1 declaration
gptadslots[1]= googletag.defineSlot('/150185454/Express/Home', [[1,1],[728,90],[900,250],[970,250],[970,90]],'div-gpt-ad-783061624906669251-1').setTargeting('pos',['top']).setTargeting('gwd', [ASPQ_adlwo6]).addService(googletag.pubads());
There are 5 instances of this on my static page so here is my logic around this.
The only consistent variable I can see is the following number as part of defineSlot which is "/150185454/". This is only defined within the <head> tag.
Here is my code so far which only covers the detection if there is an ad slot on the page:
var adUnit = '/150185454/',
headContent = document.getElementsByTagName('head')[0].innerHTML;
if (headContent.indexOf(adUnit) >= 0) {
console.log("UNIT IS ON THE PAGE");
}
Expectation:
If "/150185454/" is within the head then get the rest of the URL which would look like this: '/150185454/Express/Home'. The "Express/Home" is a page path within the site - we want to know which page this ad slot was presented on.
Then take only the page path name ('Express/Home') and append to a tracking URL.
I'm having trouble getting the rest of the URL after "/150185454/". I'm unsure how to achieve this as well as stripping the number to then append to the tracking URL which is posted.
I hope this is clear enough, please ask if more direction is needed.
Does anyone know how to write a function to select a specific page in JavaScript? The reason why I am asking is because I have multiple projects that use the same base master pages and placeholders. I need to be able to change some of the project's individual pages (CSS & HTML) with out changes applying to all of the pages in the particular project.
My JavaScript code:
function InitPage() {
$('div#rightContent img').replaceWith('<img src="newpicfile.jpg">');
}
The problem with the above code is it changes all of the divs with the id of rightContent. I just need it to target one page in particular.
Place this in the code -
function InitPage() {
if("http://mydomain.com/page.html" == location.href) {
$('div#rightContent img').replaceWith('<img src="newpicfile.jpg">');
}
}
I'm not sure if this question has been asked elsewhere but I can't find anything on it, so here goes..
I am currently hosting a website with which I use a small, simple Javascript function to add effects to certain list items on my navigation bar depending on whether the function is able to find certain matches to text in the address. Here is the function:
function NavBar(){
var address = (location.href);
if(address.search("index")!==(-1)){
document.getElementById('Nav-Home').firstChild.setAttribute('style', 'color: #cecece');
}
if(address.search("work")!==(-1)){
document.getElementById('Nav-Work').firstChild.setAttribute('style', 'background-color: #E5E5E5;');
}
if(address.search("library")!==(-1)){
document.getElementById('Nav-Tutorial').firstChild.setAttribute('style', 'background-color: #E5E5E5;');
}
if(address.search("contact")!==(-1)){
document.getElementById('Nav-Contact').firstChild.setAttribute('style', 'background-color: #E5E5E5;');
}
if(address.search("about")!==(-1)){
document.getElementById('Nav-About').firstChild.setAttribute('style', 'background-color: #E5E5E5;');
}}
Consequently, my pages are stored in the website directory under each folder name (Work, Tutorial, Contact and About). However, whether I store the index.html file in a separate folder or whatever I can't seem to find away to get the word "index" to appear in the site address (I'm aiming for something like http://site.com/index.html).
Does anyone have any way I can add the index.html to the default home page rather than having it cut off, or perhaps change my function?
Thanks very much
this is my first StackOverflow post. So I hope my question fits the standards.
I'm working on creating my own website using the YAML CSS Framework. ( http://www.yaml.de/docs/index.html )
On that page, they have it so as you scroll, the navigation menu stays at the top of the screen.
When I downloaded the framework, I found the below code in their domscript.js file.
So I understand that they added a class so it would stick.
What I would like to do is have a second menu of the same kind with different links right below it.
I copied and pasted the html code for the menu right below it and a second one did appear.
But as I scroll down, only the first one stays.
Any ideas on how I can get the second one to stay as well?
if (hOffset < top) {
if (nav.data(stickyClass) !== true) {
nav.addClass(stickyClass).data(stickyClass,true);
}
} else {
if (nav.data(stickyClass) !== false) {
nav.removeClass(stickyClass).data(stickyClass,false);
}
}
Yes, because an ID can use only once. If you want to this type of menu you have to create another id & copy the .js file & change the ID in that .js file.
I think this will work.