Develop Reference

Fade in one div, fade out all other divs, by clicking a link

I am trying to create a webpage. The three top menu buttons open each new submenus. In the submenus I have buttons that need to open one div and close the others.
I have kind of successfully figured how to do that but the way I implemented it is very inefficient and I want to make it better. I found this http://jsfiddle.net/n53qg/ from stackoverflow which is pretty much what I want to do but for some reason can't get it to work. Even if I straight out copy paste all the HTML, CSS and JS to their respective files, linked the css and js + jquery to the HTML, it doesn't work. I'm baffled.
This is the way I implemented this: http://jsfiddle.net/mk92jtgz/6/ It takes a lot of work to add new divs so I need a way to close all the others in a simpler way.
EDIT: I'd like to understand why I can't get the copy-pasted code from jsfiddle to work in my own files. I would also respect some guidance on how to achieve what I have done in a more efficient way.
$("#button1").click(function() {
$("#menu2").fadeOut("slow", function() {
$("#menu3").fadeOut("slow", function() {
$("#menu1").fadeIn("slow");
});
});
$("#button1").css("background-color", "white");
$("#button3").css("background-color", "#f6c54e");
$("#button2").css("background-color", "#f6c54e");
currentDay();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Tooltips not working

OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!

I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});

Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)

jQuery .attr Not Working Properly, Miss-Retrieving Links

This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.

Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.

Using jQuery (or JavaScript) to find and replace HTML special characters

I've been banging my head against a wall here for hours.
Long story short, I have a webpage that spits out the following HTML:
™
That HTML, of course, does not display properly so I need to dynamically convert to the following to get a proper trademark symbol:
™
I'm trying to achieve this either through JavaScript or jQuery.
I found one solution that works locally on a test webpage I set up:
$('body').html($('body').html().replace('™','™'));
But the problem is when I add that to the actual website it needs to go on, it does not work and instead seems to have some kind of conflict the the other jQuery methods being used.
I'm at my wit's end. Any help would be greatly appreciated. Thanks!
EDIT: Sorry everyone... To be more specific, this is a WordPress website and the problem appears on a page that is generated via this sitemap plugin: http://wordpress.org/extend/plugins/sitemap-generator/.
The problem is not with that plugin necessarily, but in how that plugin interprets WordPress page titles with special characters.
There is a page that I created in WordPress which needs to have a title with the ™ symbol at the end, so in the WordPress page title area I added
™
to the end of the title text. This totally works in all aspects of the website, except that when this plugin reads the title it converts it to
™
I suppose I could try to edit the plugin and how it handles HTML special characters in WordPress page titles, but I knowledge of php is not incredibly strong so I thought an easier fix would be to manipulate the output using js since there is only 1 instance that needs to be fixed.
I am going to try the solution presented below and I will report back with the findings.
Thanks again!
ADDITIONAL EDIT:
Ok using the solution posted below I got it to work. However the placement of the new code is important. When I put it at the end of my JavaScript the dropdown menus in my navigation bar would not work. When I put the new code before my JS menu call, everything seemed to work fine.
Perhaps someone on here can shed some light as to why I need to put this new line of code before the call to the navigation method (superfish).
Here is the new JS that's included in the header. Note the new line near the top that starts with "document.body.innerHTML"
<script>
$(document).ready(function(){
document.body.innerHTML = document.body.innerHTML.replace(/&trade;/g, "™");
$("ul.sf-menu").supersubs({
minWidth: 12, // minimum width of sub-menus in em units
maxWidth: 27, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish(); // call supersubs first, then superfish, so that subs are
// not display:none when measuring. Call before initialising
// containing tabs for same reason.
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
cleartypeNoBg: false // This fix is needed to prevent black pixels from disapeparing during transitions in IE. Must use jquery.cycle.min for this attribute to be supported.
});
$(".section_page_list li:last").css({borderBottom: 'none'});
$(".striped_table td:even").addClass("make_divider");
$(".striped_table tr:even").addClass("alternate");
$(".homepage_article_table td:odd").addClass("alternate");
$(".homepage_article_table tr:last td").css({borderBottom: 'none'});
$(".striped_table tr:first-child").addClass("first");
$(".report_table tr:first-child").addClass("first");
$(".press_table tr:even").addClass("alternate");
$(".press_table tr:first-child").addClass("first");
$(".press_table tr td:first-child").addClass("no_border");
});
</script>

If its due to jQuery conflict the below should solve it. Its plain JavaScript code.
document.body.innerHTML = document.body.innerHTML.replace(/™/g, "™");
Don't you have access to the server side code of the page? If you have it then you would be better changing that code to spit the required thing instead of using JS.

For Brackets like characters
If you want to replace characters like ( or ) etc. you can make use of \ before that character.
e.g. If I want to replace () with word 'Hidden'
return x.replace(/\(\)/g, 'Hidden');

What does your source say? If the source has '™' then you probably have a javascript error before ever hitting this line.
I'd suggest it's also possible that your live server is further encoding your output - so that '™' becomes '™'

ajax code to change image on webpage in template

i have one website which is working on templates.
in the template there is one main image & i want to replace that main image on some pages only not on full website. what i am looking for is to change the main image to new image on page where i need with ajax.
when i see the css of that template i found following code to show image
.top-bg{
background:url(../images/top-bg.jpg)
top center no-repeat;
position:relative;
}
and on php page i found following line which bring image.
<div class="top-bg">
i need ajax / jquery code to change image.
my basic logic is, i will get that image URL from MYSQL databse and assign to one variable and then i will change the image which come from database, actually its one page displaying products and i want to display main image of product with ref to loaded product, i hope you will understand what i need at the end...
Thanks
Thanks for every one how reply, i found the solution
$(document).ready(
function(){
$('#imageContainer').css("background-image", "url(images/cube.jpg)");
}
);
this did trick for me what i need, any way thanks and also for -ve voting thanks... :((

While I think Ajax is the wrong solution for your problem, I'll offer you the following (which, at least, meets your question):
$('#changeImage').click(
function(){
$('#imageContainer').load('http://path.to.php/file.php #imageID');
return false;
}
);
Clicking an element of id="changeImage" will load the contents of id="imageID" from the php file located at the url of http://path.to.php/file.php into an element (presumably div, but whatever) of id="imageContainer".
That said, I'd suggest following #Nick Craver and #Aaron Digulla's advice and use CSS.
If you view source there's a working demo of jQuery's load on my site (posted in response to a different SO question) at http://davidrhysthomas.co.uk/play/loadDemo.html.
Edited in response to comment from OP.
To do this automatically, on page-load:
$(document).ready(
function(){
$('#imageContainer').load('http://path.to.php/file.php #imageID');
}
);

You don't need any JavaScript at all for this, just include another stylesheet (or <style> block) on the webpages you want the imaged changed on. Just have this in there:
.top-bg { background:url(../images/other-image.jpg); }
Or the <style> version:
<style type="text/css">
.top-bg { background:url(../images/other-image.jpg); }
</style>
As long as this is declared after that template stylesheet, that background property will override the template one, and you'll have your custom image on just those pages.

I think AJAX is the wrong approach here. AJAX should be used to load new data when the user interacts with the web page.
Your problem can be solved much more simple: If you can add an AJAX call to the code of the page, why not simply add a new CSS style:
.tob-bg {
background:url(../images/other.jpg) top center no-repeat;
}
Or create a second template and use that for all but the main page.