How to add Javascript into Blogger pages? - javascript

I have made a blog using blogger and now I want to customize it. All I want is to be able to add a button having Javascipt's onclick() in blogger's page behind HTML. I tried all the tricks but it is somehow not working.
<div>
<div>
<img src="C:\Users\dell\Desktop\goldfavicon.jpg" height="98px" width="98px"/>
</div>
<div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var btn = document.createElement("BUTTON");
window.open("http://www.amazon.com/tinny-tots-baby-bottle-cover/p/itme3h9rvenhxvxb?pid=BTCE3H9RGFD3Z7JR","_self")
}
</script>
</div>
</div>

I had the same problem recently.
You need to wrap your script like so
<script type='text/javascript'>
//<![CDATA[
function myFunction() {
var btn = document.createElement("BUTTON");
window.open("http://www.amazon.com/tinny-tots-baby-bottle-cover/p/itme3h9rvenhxvxb?pid=BTCE3H9RGFD3Z7JR","_self")
}
//]]>
</script>
The term CDATA tells the XML parser not to parse the wrapped text data. For more info on CDATA, check this answer.
Also I followed this advise:
Adding Scripts in Blogger is extremely straightforward. All you need
to do is to go to Blogger.com >> Your site >> Template >> Edit HTML.
Now it depends on you where you would like to paste your JavaScript
coding. However, we prefer you to add it above the tag because
this is the place where all technical things are present.
Hope it helps.

Related

Convert a line of text generated in a javascript file into a clickable link in HTML

Sorry for the incredibly lame question, but as a brand new programmer all the answers I've found while searching all day are for other problems not specific to me so I decided I'd post about it.
I have taken it upon myself to convert a sample "Random Quote Generator" program I found into a small web based app that can produce random links at the touch of a button, but as I soon found out just replacing the example quotes with the links of my choice only produced normal un-clickable text.
I have tried many things relating to messing with the div's and the id tags but nothing works for me.
My code for the html is as follows:
<html>
<head>
<title>Simpsons Episode Generator</title>
</head>
<body>
<h1>Simpsons Episode Generator</h1><br>
<img src="https://vignette2.wikia.nocookie.net/simpsons/images/9/97/Mr_Burns_-_the_box.jpg/revision/latest?cb=20121215235014" alt="Mr Burns box">
<div id="linkDisplay">
<!-- Link will pop up here -->
</div>
<!-- Button to call the javascript and prduce a link -->
<button onclick="newLink()">New Episode</button>
<!-- javascript declared -->
<script src="javascript.js"></script>
</body>
</html>
So as you can see, it just calls the javascript to run the randomiser then prints the result.
The javascript is as follows:
//Links To Episodes
var links = [
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/'
];
//Select 1 Link at random and push it to the HTML
function newLink() {
var randomLink = Math.floor(Math.random() * (links.length));
document.getElementById('linkDisplay').innerHTML = links[randomLink];
}
All i want is to just make the click the HTML is receiving after the button is pressed to be clickable.
Thanks for reading and sorry for asking such a simple sounding question but i really have been looking all day how to do it by myself...
If you want to navigate to that URL, you don't need to "click the link", you can just change the location of the window:
window.location.href = links[randomLink];
If you want to make a link to that location, so people can click it, make that <div> an <a>
<a id="linkDisplay" href='#' />
(the # means it will just go to the top of the page) and then update the href as needed:
document.getElementById('linkDisplay').href = links[randomLink];
You need to inject an anchor tag into the HTML to allow users to be able to click on a random link
//Links To Episodes
var links = ['http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/',]
//Select 1 Link at random and push it to the HTML
function newLink() {
var randomLink = links[Math.floor(Math.random() * (links.length))];
document.getElementById('linkDisplay').innerHTML = ''+randomLink+'';
}
<div id="linkDisplay">
<!-- Link will pop up here -->
</div>
<!-- Button to call the javascript and prduce a link -->
<button onclick="newLink()">New Episode</button>

How do I redirect an href link in Squarespace?

I am trying to redirect a link on a clickthrough title on an image in Squarespace. Currently, it directs you to the path ending in '/beast/' and I'd like to replace it to '/blog'.
Here is the html code
<div class="collection-detail-wrapper" id="yui_3_17_2_4_1461830927597_1433">
<span class="folder-title">FORTE INDEX HOME</span><span class="folder-separator"> / </span><span class="collection-title">'LES SAUTEURS' WINS IN BERLIN</span>
</div>
And I've tried using either of these two codes both in the Header and Footer Code Injection sections
Javascript:
<script src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var a = document.querySelector('a[href="https://mauricio-gonzalezaranda-ec4f.squarespace.com/beast/"]');
if (a) {
a.setAttribute('href', 'https://mauricio-gonzalezaranda-ec4f.squarespace.com/blog')
}
</script>
JQuery:
<script src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("#yui_3_17_2_4_1461830927597_1432").attr("href", "https://mauricio-gonzalezaranda-ec4f.squarespace.com/blog/");
</script>
or
<script src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(".collection-detail-wrapper").attr("href", "https://mauricio-gonzalezaranda-ec4f.squarespace.com/blog/");
</script>
None of these have given me any results.
This shouldn't require any coding at all. Squarespace offers the ability to create a link inside of an Image Block and you can point it anywhere you want. See link: https://support.squarespace.com/hc/en-us/articles/205814528.

JS return a link to the page with certain ID in it

Is there a way for JavaScript to find the page that an ID is on and return a link to that page?
For example, if I had a paragraph tag with id="test" on a page called test.html could I get a JavaScript variable to be set to a link to test.html because it has an id="test" on it.
I have probably explained this really badly but I was just wondering if it was possible.
Thanks.
Example of code on test.html
<p id="test"></p>
It is not perfect but I have found a way (kind of) to do this.
HTML:
<input id="tosearch" type="text">
<button id="search" type="button" onclick="getsearch()">Search IDs</button>
<p id="searchout"></p>
<script src="search.js">
</script>
<p hidden id=".id">examplepage.html</p>
<p hidden id=".id2">examplepage2.html</p>
JavaScript:
function getsearch() {
var search = document.getElementById("tosearch").value;
search = "." + search;
var page = document.getElementById(search).innerHTML;
page = page.link(page);
document.getElementById("searchout").innerHTML = page;
}
This allows you to search for an id and returns a link to the page with the id but you have to manually put all the ids and links in.

How to find active tag formats using jQuery?

I have a situation with sample code as follows:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>
<h1>The header</h1>
<div>
matter ia always matter matter ia <strong>bold matter</strong> matter matter <em>italics matter</em>matter ia <em><strong>bold italics matter</strong></em>lways matter
</div>
</p>
</body>
</html>
I am just trying to retrieve the specific tags like body->p->div->em->strong when I click on "bold italics matter" using jQuery. Is there any standard method to retrieve as per the click event?
If you wan to get the tag name of the element which is clicked, then you can use:
$('*').click(function(e) {
e.stopPropagation();
console.log($(this).prop('tagName'));
});
Fiddle Demo
I'm not completely sure about what you are trying to accomplish. If you are trying to retrieve the tag itself that the text is contained in, i would recommend that you put a <span> tag in around the the text in question and do an onclick="function()" or simply put the onclick right on the <strong> tag.
As far the the JQuery/Javascript goes, if you want to retrieve the content, it looks like
var foo = document.getElementById.innerHTMl("id");
However, this requires you to have an id in your tags which is probably the best, if not
'standard' method of retrieving the content that is within the tag.
After reading your comments, i am editing this post:
The best way to get the parent elements is to use the JQUery .parent() function. I'd imagine that you would just recursively state something like this:
var foo = $("nameofelement").parent();
I hope this is more of what your looking for.
Thanks for contributing everybody. At last I made it myself with the following code.
$(document.body).click(function(e){
var Tags=[], Target=e.target, stat_msg="";
Tags.push(Target.tagName);
while($(Target).parent().get(0).tagName!=="BODY")
{
Tags.push($(Target).parent().get(0).tagName);
Target=$(Target).parent();
}
Tags.push("BODY");
for(i=Tags.length;i>0;i--)
stat_msg=stat_msg+Tags[i-1]+" ";
alert(stat_msg);
});

Add button after script tag

I have a javascript that I want my users to be able to put on their sites. In this javascript, I want to generate a simple button, that is located exactly where the javascript has been pasted into the site. How can I do this? It would be simple if I could give my <script> tag an id and then just getting the element with the specific ID and appending after it, but I can't.
For example if I have something like this:
<body>
<p>test para</p>
<p>test para</p><p>test para</p><p>test para</p>
<p>test para</p>
<div>test div</div>
<script src="embed.js" type="text/javascript"></script>
<div>last div</div>
</body>
I want my button to be placed right between test div and last div (before or after the script tag, it doesn't matter). Can I do this?
Could you just use after -
$("div:contains('test div')").after('<input type="button"/>');
This would obviously be better if you could give the 'div' an id or a class rather than finding it by the text it contains.
jQuery can find a script tag using -
$("script[src='embed.js']").after('<input type="button"/>')
Demo - http://jsfiddle.net/7GPx7/1
embedding JavaScript something you may want to consider is your visitors may not have jQuery enabled on their sites, so you could bloat the call by loading jQuery or construct your requirement in pure JavaScript.
The embed snippet for your visitors
<script id="eduard_luca" src="http://cdn.example.com/embed.js" type="text/javascript"></script>
embed.js
var element = document.createElement('a');
element.setAttribute('href','http://google.com');
element.innerHTML = 'Click Me';
document.getElementById("eduard_luca").appendChild(element);
I Hope this help you with your project.

Categories