I am trying to add a google hangout button to my html file as shown below but when I run the html page , the button does not show.
<!DOCTYPE html>
<html>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div id="placeholder-rr"></div>
<script>
gapi.hangout.render('placeholder-rr', {
'render': 'createhangout',
'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
'widget_size': 175
});
</script>
</html>
First please check if any errors showing up in browser console using f12 key when on browser and reload the page.
Try adding this script as well alongwith platform.js to the page you want the hangout button.
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
Hope this helps
Example code:-
<div id="hangout-button-holder"></div>
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
$(document).ready(function(){
gapi.hangout.render('hangout-button-holder', { 'render': 'createhangout', 'topic': 'Its a demo app dont freak out', 'hangout_type': 'onair', 'initial_apps': [{'app_id' : 'xxxxxxxxxxx', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'LOCAL_APP' }],
'widget_size': 175 });
});
</script>
Related
I have a code like this:
parent.html:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#test").draggable().click(function() {
$("#objeto").attr('data', "child2.html").draggable();
});
});
</script>
</head>
<body>
<h2 id="test">text(draggable/click)</h2>
<object id="objeto" data="child1.html"></object>
</body>
and
child2.html:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#text").draggable();
});
</script>
</head>
<body id="text">child2 (draggable)
</body>
This works correctly, parent loads with child1 content and if you click on "text" it switches to child2, but what i want to know is:
am I downloading jquery.min.js and jquery-ui.min.js 2 times? or are is the second time pulled from cache? (since i'm asking for the same file again)
is there a way I could use jquery without including it on the child's header? (since it is already on the parent)
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>
I'm new to web development and I'm trying to understand how the DOM works.
I have a basic page with 2 buttons and some text. One of the buttons does a call to Jquery's Get function. My server returns some html with some script as well. Which is then added to my DIV on my main page which has an ID of 'content'
See below for the code.
Main Page
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
Code Returned
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
The Updated DOM - notice that my new javascript aren't seen.
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
What I'm trying to understand is;
1) Where does my new script code exist?
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
is it in memory only and not in the DOM?
2) I can get the warning to show correctly i.e $(".showmsg").click
fires and shows what is expected. So my my script can reference the existing libraries in the DOM which are needed. How does this work?
3) What is the best way to trouble shoot this code if I cannot see it in my browser?
Many thanks!
If you really want to append the script to the dom you need to use appendChild() not .html(). link about appendChild
An example of doing this would be
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.text = 'alert("test");';
$('div')[0].appendChild(script);
Here is a fiddle showing this.
I expect the following code to open the results of a google search in new window but it doesn't. Does anyone have any suggestions?
<body>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('001782268784890582031:k30dxi2nexc');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_BLANK);
customSearchControl.draw('cse');
}, true);
</script>
<!--<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />-->
</body>
No, you misunderstood the meaning of google.search.Search.LINK_TARGET_BLANK
this code should produce following search results: links with target=_blank.
Search results though will show up in the same window.
for reference - please see:
http://code.google.com/apis/websearch/docs/reference.html
I want to execute some javascript so I have my background.html page set up like this
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "contentscript.js"});
});
</script>
</body>
</html>
I would really like to use JQuery in this script, but I can't figure out how to get it to load. I don't want the content script to go off every time the user loads certain pages, just when they click the extension's button. Any ideas?
chrome.tabs.executeScript method has third parameter which is a callback function that executes when a script is loaded, which you can use to load more than one script in order:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "jquery.js"}, function() {
chrome.tabs.executeScript(null, {file: "contentscript.js"});
});
});
You don't need to include <script type="text/javascript" src="jquery.js"></script> into your background page if you don't plan using it there.