How do I embed sharethis javascript into another javascript file? - javascript

Basically here is the code I have, it adds the share buttons to the existing page. Now what I want to do, is add the sharethis button(which gets called via javascript) next to the twitter image(on the right)
Share javascript:
<script type="text/javascript">
(function() {
function replaceAll(text,strA,strB){while ( text.indexOf(strA) != -1)
{text = text.replace(strA,strB);} return text;}
var share = {"html":"<div class=\"share\" style=\"text-align: left;\">\n\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n\t\t<tr>\n\t\t\t
<td colspan=\"16\" style=\"padding: 0px;\">\n\t\t\t\t<h4 style=\"margin-bottom:
0px\">Share this with others! <\/h4>\n\t\t\t<\/td>\n\t\t<\/tr>\n\t\t<tr>\n\t\t\t\n\t
\t\t<td align=\"center\" style=\"padding: 0px 0px 0px 0px;\">
<a href=\"http:\/\/twitter.com\/home?status=TTIITTLLEE (UURRLL)\" title=\"Click to
share this page on Twitter\"><img src=\"http:\/\/img.site.com\/images\/sm\/16
\/Twitter%2001.png\" border=\"0\"\/><\/a><\/td>\n\t\t\t<td width=\"0\"> <\/td>
\n\t\t<\/tr>\n\t<\/table>\n<\/div>"};
share.html = replaceAll(share.html, "UURRLL", location.href);
share.html = replaceAll(share.html, "TTIITTLLEE", document.title);
$(function() {
$("#question .post-taglist").append("<div style='float:right'>"+share.html+"</div>");
});
})();
</script>
Sharethis button javascript that I'm trying to add:
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=394f24b1-b257-4daf-a92d-334c05a91b58&type=website&buttonText=More%20Services&post_services=email%2Csms%2Caim%2Cmyspace%2Clinkedin%2Cfriendfeed%2Cwordpress%2Cblogger%2Ctypepad%2Cbebo%2Clivejournal%2Cxanga"></script>
Can anyone help me do this? Thanks
Can you guys also tell me where the new code should go?

Since you seem be using jQuery already, just use getScript()

Related

How to add Automatically Changing Footer Credit using Javascript?

I want to make a footer credit protection using javascript. I've seen one using jquery. But it didn't worked properly. I want to apply that code to my blogger templates. I've written the following javascript code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function lol(){
var footer = document.getElementById("mycreditlink");
if (footer.hasAttribute("href")) {
footer.setAttribute("href", "http://grplusbd.net");
}
if (footer == null){
window.location.href = "http://grplusbd.net";
}
}
window.onload = function(){lol();};
</script>
</head>
<body>
<div>
Powered By <a href='http://google.com' id='#mycreditlink'>My Site</a>
</div>
</body>
</html>
But it isn't working properly either. I want it to make the footer url change automatically and if the id="mycreditlink" is removed by the client, it will redirect automatically to my website home. I need help immediately. If the code works, I will enode it and add to my templates.
<div>
Powered By <a href='http://google.com' id='mycreditlink'>My Site</a>
</div>
There is a error here: id='#mycreditlink' need to be like: id='mycreditlink'
And
function lol(){
var footer = document.getElementById("mycreditlink");
if (footer.hasAttribute("href")) {
footer.setAttribute("href", "http://grplusbd.net");
}
if (footer == null){
window.location.href = "http://grplusbd.net";
}
}
window.onload=function(){lol();};
or
window.onload=lol();
You can make use of jQuery as I have done below...
<script type="text/javascript">
function lol(){
var footer = jQuery("#mycreditlink");
if (footer) {
jQuery(footer).attr("href", "http://grplusbd.net");
}
else {
window.location = "http://grplusbd.net";
}
}
window.onload = function(){lol();};
</script>

Random button that reload a div or script not page using jquery or javascript

I'm really new at this and I need a random button on my page that would show a new line of information in a div every time someone click on the random button. I was also wondering if there is over 800 lines is it possible to put it in an outside file as txt or html.
Here is what I got so far and well it doesn't work and I'm getting confuse... Please help
<script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#text').hide();
$('a#random').click(function(){
$('#text').toggle();
})
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('#text').innerHTML=textarray[rannum];
}
var textarray = [
"Hello",
"How are you",
"Good Bye"
];
$("#text").load()
})
</script>
<body>
<div id="text">Line to Show</div>
RANDOM
</body>
Uh. Pretty much this:
$('a#random').click(function(){
$('#text').toggle();
RndText(); //you're good
});
Although I will point out that RndText() uses document.getElementById when it could use $("#text") instead. (there's a .html() method that will write the value instead of the .innerHTML property).
document.getElementById is also not currently working because you used "#text" instead of "text", jQuery uses CSS selectors, getElementById does not.
Add execution of RndText when you clicks on Random button.
$('a#random').click(function(){
$('#text').show();
RndText();
})
This will give you a button and you can run this code by clicking the button below. However, I did not quite understand you second part of the question: 800 lines in separate file, what do you wanna do with it? Tell me so that I can helo you further...
Editted:
<?php
$data = file_get_contents('demo.txt');
$lines= split("\n",$data);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var textarray = <?php echo json_encode($lines); ?>;
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
$('#text').text(textarray[rannum]);
console.log(textarray[rannum]+" "+rannum+" "+textarray.length);
}
$(document).ready(function(){
$('#text').hide();
$('#random').click(function(){
$('#text').show();
RndText();
});
});
</script>
<body>
<div id="text"></div>
<button id="random">RANDOM</button>
</body>

Including <div></div> in a library

I have a few "div" sections that are called by my Javascript function using document.getElementById('ID_NAME').style.display='block'.
My question, is there a way to include these "div's" in a .js, .css or another type of library sourced from my header?
If I copy and paste the div code directly into the head it works fine, however, when I try to include it in my .js or .css libraries it wont execute.
CODE
<script type="text/javascript>
function myFunction() {
var a = window.location.href;
var b = "http://www.myblog.com/";
if (a == b) {
setTimeout(function(){
document.getElementById('EXAMPLE1').style.display='block';}, 3000);}}
window.onload = myFunction();
</script>
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
I know there has to be a way to insert "div" code into a library. I need some of my clients to "src" it into their own websites easily.
Much appreciated Stack community!
Jon
In another separate JS file, divs.js:
divs.js
function changeDiv(){
document.getElementById('EXAMPLE1').style.display='block';
}
index.html
<script src="divs.js"></script>
<script type="text/javascript">
function myFunction() {
var a = window.location.href;
var b = "http://www.myblog.com/";
if (a == b) {
setTimeout(changeDiv, 3000);
}
window.onload = myFunction();
</script>
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
Also, there seems to be syntax errors in your code. Try to run this file with a JS console (use something like "Firebug") for debugging purposes.
I wanted to post that I finally worked this problem out. While my Javascript library wouldn't support code with some code in it, I was able to convert everything with DOM.
OLD CODE::
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
NEW CODE::
var embed = document.createElement('embed');
embed.setAttribute("src", "http://www.domain.com/");
embed.setAttribute("width", "100%");
embed.setAttribute("height", "100%");
var content = document.createElement('div');
content.id = 'EXAMPLE1';
content.className = 'offer_content';
content.appendChild(embed);
document.getElementsByTagName('body')[0].appendChild(content);

How to replace the special characters in js

i want add this to my html,but it didn't work .
var html = '<div id="youkuplayer"></div>'
+'<script type="text/javascript" src="http://player.youku.com/jsapi">'
+'player = new YKU.Player("youkuplayer",{'
+'client_id: "81dab93633c39ff0",'
+'vid: "XNjQ4Nzk5MTA0_ev_1",'
+'width: "240",'
+'height: "200",'
+'autoplay: false,'
+'show_related: false'
+'});'
+'</script>';
$("#added_video").css("display","block").append(html);
but if i use a static html include this,it works.
Your problem is the SCRIPT tag, which jQuery chokes on.
See this answer for some possible solutions: How to dynamically insert a <script> tag via jQuery after page load?
Some error in your code,you need add '</script><script>' in your code like this:
var html = '<div id="youkuplayer"></div>'
+'<script type="text/javascript" src="http://player.youku.com/jsapi"></script><script>'
+'player = new YKU.Player("youkuplayer",{'
+'client_id: "81dab93633c39ff0",'
+'vid: "XNjQ4Nzk5MTA0_ev_1",'
+'width: "240",'
+'height: "200",'
+'autoplay: false,'
+'show_related: false'
+'});'
+'</script>';

Why won't my script update my div dynamically like it's supposed to?

<html>
<head>
<style type="text/css">
body {
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
color: #FFFFFF;
}
</style>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
function sleep(ms)
{
var dt = new Date();
dt.setTime(dt.getTime() + ms);
while (new Date().getTime() < dt.getTime());
}
function update() {
while (0 < 1) {<?php $contents = file_get_contents("my url here");
?>
var count = <?php echo $contents ?>;
document.getElementById('div').innerHTML = count;
sleep(1500);
}
}
</script>
</head>
<body onload=update()>
<iframe id="iframe" src="my url" style="visibility: hidden;"/>
<table width=100% height=100%>
<tr height=80%>
<td width=100%>
<center>
<div id="div"></div>
</center>
</td>
</tr>
</table>
</body>
</html>
When viewing the source code in-browser, the var is set correctly, but it won't set the content of the div. I am positive that the url the PHP script is pointing to is accurate and contains only a script to grep a number from an external page.
Thanks in advance!
To answer the question, why isn't it running... your onload needs quotes:
<body onload="update()">
but the others have posted better ways to go about it using jquery.
Assuming that the value of file_get_contents("my url here") yields 42 (for example), you are aware that you're creating an infinite loop which will set the content of #div to 42 over and over again every 1.5 seconds? I.e., var count will always, constantly be 42 and won't change, since PHP is evaluated only once on the server.
Furthermore I would suspect that your sleep function could pose a bit of a problem, since it creates another tight loop. I wouldn't be surprised if this script simply blocked the browser without ever updating anything since it's caught in an infinite loop. The way to delay execution in Javascript is to use window.setTimeout or window.setInterval.
I guess what you're looking for is an AJAX solution of some kind, if you would tell us what it is you want to do. Since you're including jQuery (without actually using it), you should have a look at jQuery.get(), coupled with a setInterval to update the div periodically.
Something like:
window.setInterval(function () {
$.get("my url here", function (data) {
$('#div').html(data);
});
}, 1500);
var count = <?php echo $contents ?>;
document.getElementById('div').innerHTML = count;
You are asking the webserver for variable $contents through php, which will always be a static number unless you reload the page. Try using jQuery, as the poster above mentioned.

Categories

Resources