We Keep Coding

Replacing div with another on click

My knowledge of javascript is close to none and I'm trying to have a div be replaced on click by another div.
<div class='replace-on-click'>
<h1>Click to Insert Coin</h1>
<div class='replaced-with'>
<div class='info-text'>
<h1>Title</h1>
<h2>Subtitles</h2>
</div>
<ul class='info-buttons'>
<li><a href='#' class='b1'>Buy Tickets</a></li>
<li><a href='#' class='b2'>Find Hotels</a></li>
</ul>
</div>
</div>
I'd like it so when you click "Click to Insert Coin", that will disappear and make the .replaced-with div take its place, hopefully with some kind of fade transition if possible. How do I go about doing this?

We will make use of jQuery because it helps us to get you desired behavior done in a few statements. So first include jQuery from somewhere in your head part of your HTML document.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Then somewhere include this Javascript code (e.g. create index.js and include it the way like the library code).
$(document).ready(function() {
$('h1').click(function() {
$(this).fadeOut(function() {
$('.replaced-with').fadeIn();
});
});
});
It does the following: When your document is ready, it adds an event handler on h1 waiting for clicks. On click, it first fades out the h1 and when it's done, it fades the other element in.
In your HTML document, include the hidden attribute to the object that should be hidden initially.
<div class='replaced-with' hidden>
Here you can find it working as well: http://jsbin.com/cuqoquyeli/edit?html,js,console,output

jquery load() causes a tags to lose their href value

<div class="page">
Click!
</div>
<script>
$("a").click(function(){
$(".page").load($(this).attr("href"));
window.history.pushState("", "", '/'+$(this).attr("href"));
return false;
});
</script>
<!-- in another-page.php -->
Click here!
<!-- what the another-page.php looks like once it's been loaded by jquery -->
<a href>Click here!</a>
and then clicking on a link will load a page in a <div class="page"> BUT, I noticed at the top of the page, where there is a <h1>Title</h1> it lost the color i had defined h1 a {...} and then when inspecting element, instead of being the above h1, a thing, it was <h1><a href>Title</a></h1>

Something else is wrong here.
The issue I described occurs when you use <a href=/> not <a href="/">. I didn't test to check and see if the same occurs when using <a href=another-page.php> but found that, quoting the forward slash fixed the problem.

How to run javascript code on menu click

I'm creating a squarespace website in which I have a navigation bar.
I would like to add a javascript code as a link in the navigation bar.
The javascript code is the following:
<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript"> xMinicart("style=","layout=Mini"); </script>
</div>
I have the following html code: (I got it with FireBug)
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
page1
</li>
<li class="">
page2
</li>
</ul>
</nav>
I cannot edit the code above but I'm able to inject header code.
So, how can I add the javascript code as a third link in the navigation bar?
Thanks a lot!
edit
So I've added the following code
<script>
window.onload=function(){
$('nav ul').append('<li><a onClick="test()" href="javascript:void(0);">Link 3</a></li>');
}
</script>
but I need the original javascript code within the append. I need the actual code to be the link. How do I do that? If you see the javascript in Firefox you'll understand what I mean. I need the actual link it generates in the navigation bar.
Thanks!

window.onload=function(){
$('nav ul').append('<li><a onClick="yourFunction()" href="javascript:void(0);">Link 3</a></li>');
}
Since you specify you don't have direct access to the html. Only the header.
This will add your menu item with a link, that upon click, executes the function yourFunction(). It will add this item as soon as the page loads.
Note: You need jQuery for the above. But it is also possible with raw Js.

how to add this class using .append()

I have the following html code:
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
Home
</li>
</ul>
</nav>
I need to add the following code before the </ul> tag:
<li class="">
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript">xMinicart("style=","layout=Mini"); </script>
</li>
However, to do so, I have to use jquery's append(). But I don't know the correct way to add the script type="text/javascript", src="https://app.ecwid.com/script.js?4549118"></script> and <script type="text/javascript">xMinicart("style=","layout=Mini"); </script> inside the append().
Thanks!
EDIT 1:
So you can see what I'm trying to do:
what I need is the following http://jsfiddle.net/u3NKD/5/ The results are two links. However, the second link (the one which says "sacola de compras), must be done with append(), not html. That's what I'm trying to do
EDIT 2:
I tried the code in this Jsfiddle http://jsfiddle.net/u3NKD/7/ and it works perfectly in Jsfiddle, but it does not work in my Squarespace website.
The code in my website is the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script>
window.onload=function(){
$('nav ul').append('<li id="hello"></li>');
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini","id=hello");
});
}
</script>
Any idea why it doesn't work in squarespace?
Thanks!

Have you tried using something like
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini");
});
to load the script and then activate the xMinicart object afterwards? I can't really understand why you're trying to do this on the fly without more context so that's the best suggestion I can offer.
https://api.jquery.com/jQuery.getScript/ (Load a JavaScript file from the server using a GET HTTP request, then execute it.)

If you really need to place it into that particular spot, then Try this: create a separate html file in the same directory, call it something like myli.html,
then you place this into it:
<ul id="myli">
<li class="">
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript">xMinicart("style=","layout=Mini"); </script>
</li>
</ul>
Then in your original page where you want this appended you do this, you have to create a dummy container like this
$('<div/>', {id:'dummycont', css: {display: 'none'}}).appendTo('body');
then
$('#dummycont').load('myli.html #myli, function(){
var li = $(this).find('#myli').html();
$('nav ul').prepend(li);
});
So basically this load event will load that particular #myli in the myli.html into a temp dummy container. Then you grab grab that content and prepend it to the target ul.
Let me know if that works for you. I havent tested it yet.

What you are doing is that you are just appending the script as a Text or innerText in the HTML DOM structure.
Call the Js using the getScript or Ajax call. (Ajax call with return type script is a getScript)
And in its return function Call the xMinicart function.
In you Dom just Append a 'li' with a specific id and in the getScript success function pass the id to xMinicart function/
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
Home
</li>
<li id="hello"></li>
</ul>
</nav>
Your Js call should be
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini","id=hello");
});
This will load the cart on the page.
Check the Jsfiddle here http://jsfiddle.net/u3NKD/6/

How would I change the HTML structure of a page using javascript?

I have this webpage for testing with content on it. In 3 other separate HTML files, I have 3 different navigation menus. What I want to do is include a dropdown menu on the testing page with 3 links in it. Each link would change the navigation on the testing page. For example, there is a default navigation on the testing page. Clicking link 1 in the dropdown would change that navigation. Same with link 2 and link 3. How would I do this in JavaScript or jQuery?

This should fit your requirements. For demonstration see this Fiddle.
<a id="link-1">link 1</a>
<a id="link-2">link 2</a>
<a id="link-3">link 3</a>
<div id="navigation"></div>
<div id="templates" style="display:none;">
<div id="navigation-menu1">navigation-menu1</div>
<div id="navigation-menu2">navigation-menu2</div>
<div id="navigation-menu3">navigation-menu3</div>
</div>
var menu1 = $('#navigation-menu1');
var menu2 = $('#navigation-menu2');
var menu3 = $('#navigation-menu3');
$('#link-1').bind('click', function () {
$('#navigation').empty();
$('#navigation').append(menu1);
});
$('#link-2').bind('click', function () {
$('#navigation').empty();
$('#navigation').append(menu2);
});
$('#link-3').bind('click', function () {
$('#navigation').empty();
$('#navigation').append(menu3);
});

The way jquery works is that you set up a listener to a certain event with custom code to run whenever that happens. Here's an example for the link:
<a id="mylink" href="home.html">Go Home</a>
The javascript(put this in between your and tags):
<script type="text/javascript">
$(document).ready(function() {
//This code gets run when the page is finished loading
$('a#mylink').click(function() {
//Handle the event here
});
});
</script>
You also asked how you can change HTML dynamically at run time. jQuery has a great function for this .html()
Say you have some html:
<div id="changeme">Hello</div>
The following jQuery:
$('#changeme').html("Goodbye");
Changes the page's html to the following
<div id="changeme">Goodbye</div>