We Keep Coding

How can I change the background color of a complete section after clicking on one of it's child elements?

I am working on a personal project trying to match the below design:
I am on what I see as the hardest part. When clicking on one of the 6 different colored boxes, there should be further information popping up like below:
I am trying to first implement a background color change when the Facebook Ad Campaign box is clicked. When clicked, the background color of the whole container (which holds the 6 boxes) should change.
I believe jQuery is the right way to go about this but having tried the below it is not working:
$("#fbAdCampaigns").click(function(){
$(#container-parent").backgroundColor = "red";
}
Or, trying this to test if it changes the first out of the 6 boxes:
$("#fbAdCampaigns").click(function(){
$("#fbAdCampaigns").css({ "background-color": "#ffe"});
})
Neither are working as intended as nothing happens.
Please see what I have done so far here:
https://codepen.io/JoyFulCoding/pen/EzWyKv
Many thanks in advance for any assistance.

There are a couple of problems here.
Delete your in-line <script> tags after the imports and move them to the JS section, which would be an external file in a local project.
You only need one document.ready function.
Instead of .click use .on('click', function() ...)
Instead of .css('attribute': 'value') use .css('attribute', 'value')
As a best practice, you should not use inline CSS and Javascript when you already have CSS and JS files.
Here's some working code that doesn't do exactly what you want, but should give you the way forward:
$(document).ready(function() {
$("#menu").on('click', function() {
$("#icon").toggleClass("fa-times");
});
$("#fbAdCampaigns").on('click', function(){
$("#fbAdCampaigns").css("background-color", "#000000");
});
});

You're changing the color of the container, but it isnt visible because of the 6 boxes on top of it. Try something like this, which changes the color of each box when clicked:
https://codepen.io/aprouja1/pen/mYwEeX?editors=0010
function changeBackground(){
const clickedColor = this.style.backgroundColor;
divs.forEach(div=>div.style.backgroundColor=clickedColor)
}

You can add a class to the #fbAdCampaigns element to handle the CSS changes or use .css().
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").addClass("bg-color");
});
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").css("background-color", "#fff");
});
Using .addClass also means you can revert the change easily with .removeClass. Alternatively you could use toggleClass
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").removeClass("bg-color");
});
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").toggleClass("bg-color");
});
To access the entire container you can use the jQuery method .parent()
https://api.jquery.com/parent/
https://codepen.io/anon/pen/arwZZm

Proper Way Of Modifying Toolbar After Init in TinyMCE

I am extending a cloud-hosted LMS with javascript. Therefore, we can add javascript to the page, but cannot modify the vendor javascript for different components.
The LMS uses tinyMCE frequently. The goal is to add a new button on to the toolbar of each tinyMCE editor.
The problem is that since the tinyMCE modules are initialized in the vendor's untouchable code, we cannot modify the init() call. Therefore, we cannot add any text on to the "toolbar" property of the init() object.
So I accomplished this in a moderately hacky way:
tinyMCE.on('AddEditor', function(e){
e.editor.on('init', function(){
tinyMCE.ui.Factory.create({
type: 'button',
icon: 'icon'
}).on('click', function(){
// button pressing logic
})
.renderTo($(e.editor.editorContainer).find('.mce-container-body .mce-toolbar:last .mce-btn-group > div')[0])
});
});
So this works, but needless to say I am not totally comfortable having to look for such a specific location in the DOM like that to insert the button. Although this works, I do not believe it was the creator's intention for it to be used like this.
Is there a proper way to add the button to a toolbar, after initialization, if we cannot modify the initialization code?

I found a more elegant solution, but it still feels a bit like a hack. Here is what I got:
// get an instance of the editor
var editor=tinymce.activeEditor; //or tinymce.editors[0], or loop, whatever
//add a button to the editor buttons
editor.addButton('mysecondbutton', {
text: 'My second button',
icon: false,
onclick: function () {
editor.insertContent(' <b>It\'s my second button!</b> ');
}
});
//the button now becomes
var button=editor.buttons['mysecondbutton'];
//find the buttongroup in the toolbar found in the panel of the theme
var bg=editor.theme.panel.find('toolbar buttongroup')[0];
//without this, the buttons look weird after that
bg._lastRepaintRect=bg._layoutRect;
//append the button to the group
bg.append(button);
I feel like there should be something better than this, but I didn't find it.
Other notes:
the ugly _lastRepaintRect is needed because of the repaint
method, which makes the buttons look ugly regardless if you add new
controls or not
looked in the code, there is no way of adding new controls to the
toolbar without repainting and there is no way to get around it
without the ugly hack
append(b) is equivalent to add(b).renderNew()
you can use the following code to add the button without the hack, but you are shortcircuiting a lot of other stuff:
Code:
bg.add(button);
var buttonElement=bg.items().filter(function(i) { return i.settings.text==button.text; })[0];
var bgElement=bg.getEl('body');
buttonElement.renderTo(bgElement);

Change javascript variable in seperate element

I run a WoW guild forum based on php (phpbb), javascript and html. Ever since long, Wowhead allows links to be posted to their item/spell IDs etc. The basic code to the Wowhead JS and it's variables is:
<script src="//static.wowhead.com/widgets/power.js"></script>
<script>var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true }</script>
There is an extension that puts this code in the footer of every page via a HTML file. Every Wowhead link posted will be converted in a link with a tooltip explaining what it links to. The '"renamelink": true' portion of the wowhead_tooltips variable makes it as such that any link of an item or spell is renamed to the exact name of what it is linked to.
The problem: when I generate custom URLs using a Wowhead link, ie:
Teleport
instead of displaying 'Teleport' with a tooltip of Blink, it will rename the entire URL to Blink with an icon, as described in the wowhead_tooltips variable.
What I want to achieve is:
Any direct URL to Wowhead should be converted into a renamed spell/item.
Any custom URL to Wowhead should be retain it's custom text, but retrieve the tooltip.
This should both be possible on a single page.
The best solution I have come up with is to add an 'if' function to var wowhead_tooltips based on class, then add the class to URLs:
<script>if ($('a').hasClass("wowrename")) { var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": false } }</script>
<a class="wowrename" href="http://www.wowhead.com/spell=1953">Teleport</a>
This works, however, the problem with this solution is that once the script recognizes one URL with the class "wowrename" on the page it will stop renaming all links, meaning that custom URLs and direct URLs can't be mixed on a single page.
Any other solution I've tried, using IDs, defining different variables etc either don't work or come up with the same restriction.
Hence the question, is it possible to change Javascript variables (in this case "var wowhead_tooltips { "renamelinks": false}" per element (URL), based on id, class or anything else?

Direct link that gets renamed with tooltip and iccn.
Teleport
Custom link with tooltip and original text.
I've stored the original link text as a data attribute so we can restore it after it's been changed.
<a class="wowrename" href="http://www.wowhead.com/spell=1953" data-value="Teleport">Teleport</a>
Keep checking for when static.wowhead.com/widgets/power.js changes the last link text. Once changed, restore using the data-value value, remove the styling added that creates the icon and stop the timer.
$(function () {
//timmer
checkChanged = setInterval(function () {
// check for when the last link text has changed
var lastItem = $("a.wowrenameoff").last();
if (lastItem.text() !== lastItem.data('value')) {
$("a.wowrenameoff").each(function () {
//change value
$(this).text($(this).data('value'));
//remove icon
$(this).attr('style', '');
//stop timer
clearInterval(checkChanged);
});
}
i++;
}, 100);
});
This does cause the link icon to flicker on then off, but it is repeated after a page refresh.
JSFiddle demo

This is simple solution. It's not the best way.
var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true }
$('a').hover(function() {
if ($(this).hasClass('wowrename') {
wowhead_tooltips.renamelinks = true;
}
else {
wowhead_tooltips.renamelinks = false;
}
});
I don't know how exactly wowhead API works, but if wowhead_tooltips variable is loaded exactly in the moment when the user points the link with the mouse (without any timeout) - this can fail or randomly work/not work.
The reason can be that the javascript don't know which function to execute first.
I hope this will work. If it's not - comment I will think for another way.

You have to loop on all the links, like this:
$("a.wowrename").each(function() {
// some code
});

Replace ending on multiple img src

I have 10 buttons each with a different image and text. I have each button to click on/off and if another button is clicked I want the active button to turn off. I am struggling with the latter.
var x = 300;
//port1
$('#port1').click(
function(){
var src = $('.image', this).attr('src');
//var srcs = $(this).attr('src');
if($(this).hasClass("highlight")) {
$('.butt').removeClass('highlight');
$('.image', this).attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));
$('.p1').fadeOut(x);
}
else{
$('.butt').removeClass('highlight');
// $('.butt').attr('src').replace('_dark.png', '_light.png');
$('.butt img').each(function() {
var src2 = $('.image').attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1');
$('.image').attr('src', src2);
});
$('.talk').fadeOut(x);
$(this).addClass('highlight');
$('.image', this).attr('src', src.replace(/_light(\.[^.]+)?$/, '_dark$1'));
$('.p0').fadeOut(x);
$('.p1').fadeIn(x);
}
});
The problem I am running into is that when I click the button, it changes the src on all the other buttons to be exactly the same as this one and does not just change the ending on the other sources to '_dark'. I thought adding this 'each' function would help and it did not.
Edit: I am new to coding but i attempted a jsfiddle: http://jsfiddle.net/messedUP90/yxjoxe41/
The random computers that appear was the effect I am going for and the code I wrote to do it before I remembered that each icon was going to be different. Look at the first button titled "un" for where the error I am talking about happens.

http://jsfiddle.net/gtf1dk0m/1/
You need to re-set the variable src.
This code does it:
$('.butt').each( function( index ) {
if ( $(this).attr('src') ) {
$(this).attr('src', $(this).attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1'));
}
});
ignore the fact that the image does not change color in the jsfiddle. it works in dreamweaver. :)

There is some strange code and naming conventions in this function... such as var src = $('.image', this).attr('src');... theres a lot unexplained by the question asked here and with no jsfiddle it's hard to imagine what you mean or see what HTML elements you're using...
so I will try to answer based on purely your description and not your code.
If you want to remove all instances of a class such as an active class you could simply do an each function however your later comments about it changing all other image sources once clicked is in this line $('.image').attr('src', src2);. You have effectively targeted all images under the class .butt which seems to be all of your images. Perhaps what you want is actually to iterate over all elements and remove the active state such as...
$(".butt img").each(function() {
//Remove Active Classes
if($(this).hasClass("activeImage")) {
$(this).removeClass("activeImage");
}
});
Then you are now free to take the clicked button and add its active state in...
$(".buttons").each(function() {
$(this).click(function() {
//Old Code
$(".butt img").each(function() {
//Remove Active Classes
if($(this).hasClass("activeImage")) {
$(this).removeClass("activeImage");
}
});
//New Code
$(this).addClass("activeImage");
});
});
Then in your CSS you could make sure that you have a rule like
.activeImage {
background-image: url("blah.png") !important;
/* You Get The Idea */
}

Javascript - how do I minimise this code example?

a quick question.
At the moment I have 12 links on a page, and 12 corresponding javascript codes that run when a each button is clicked.
I know 100% there must be a method of having 1 javascript code and the link passing a variable to it, so I don't have to have 12 different codes.
EG. Here is a link I'm currently using:
Anatomical Pathology
And the Javascript function that is run when the link is clicked loads some html from a php script into a div which is previously defined as level2:
$('#button1').click(function() {
level2.load("http://hello/script.php?url=poodles");
});
What I'd really like to do is something like this with the link:
Anatomical Pathology
And the function something like this, so I only need the 1 function not 12:
$('#button1').click(function() {
level2.load("http://hello/script.php?url=' + passurl + '");
});
How do I go about getting the data from the link tag into javascript, and also how do I add this passed variable into the url I want the javascript to pull data in from?

passurl isn't standard attribute, you should use data-passurl
$('#button1').click(function() {
var passurl = $(this).data('passurl'); // or $(this).attr('data-passurl');
level2.load("http://hello/script.php?url=" + passurl);
});

Why don't you utilize your hash there...
Anatomical Pathology
In your script
$(".button").each(function() {
// get the hash and extract the part we want store it in this enclosure
var url = $(this).attr("href").replace(/^#\//, "");
// create a click handler that loads the url
$(this).click(function() {
level2.load("http://hello/script.php?url=" + url);
});
});
This also brings about the possibility to extrapolate from that so that a hash passed through the url can also operate the script loading...

You can use the rel attributte (or any data- attributes if your using HTML5 Doctype) to save your URL and add a class to the links you want to execute your callback.
Anatomical Pathology
Your Callback:
$('a.button').click(function() {
level2.load("http://hello/script.php?url=' + $(this).attr('rel') + '");
});

For a more extensible solution you could consider making a json structure for your urls:
var urls = [{
"poodle":{
"url":"http://hello/script.php?url=poodle",
"someOtherData":"data"
},
"otherDog":{
"url":"http://hello/script.php?url=otherDog",
"someOtherData":"data"
}
}];
You would store some sort of key somewhere in your HTML element:
Anatomical Pathology
Then you would leverage this data structure in your functional code:
$('a').click(function () {
var key = $(this).attr('rel');
level2.load(urls[key].url);
});

As per Stuie, add a class to the links so that you can target them all at once. However, I don't see the need to fool with the hash, and I wouldn't add a bunch of click events either. Just delegate once and you're done:
<div id="wrapper">
Poodles
Schnausers
</div>
and the JS:
$('#wrapper').delegate('a.button', 'click', function(e) {
e.preventDefault();
var passurl = $(this).attr("href");
level2.load("http://hello/script.php?url=" + passurl); // assuming "level2" is valid from elsewhere
});
Where I have "#wrapper" you would designate any unique selector that is an ancestor of all your links. It's an element that listens for clicks on the a.button elements within.