Excuse my newb question. I'm still in the beginning stages of learning javascript. I'm not sure If I can accurately describe to you guys what i'm trying to do, but i'll try.
Is it possible to load a javascript file onto an html page?
for example. Twitter gave me code for there twitter widget, and it's a javascript widget. I want to be able to display it on my page using the document.write method. Is this possible. Here is an example.
This is the code they gave me.
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#blahblah',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'blahblah',
width: 180,
height: 300,
theme: {
shell: {
background: '#ebebeb',
color: '#969396'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#bbbcbd'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script>
So, is it possible that I could write this to the html page like this?
document.write('<script src="http://widgets.twimg.com/j/2/widget.js"></script> '
<script>
'new TWTR.Widget({
version: 2,
type: 'search',
search: 'blah',
interval: 6000,
title: 'Follow Me On Twitter',
subject: '#blahBlah',
width: 180,
height: 300,
theme: {
shell: {
background: '#ebebeb',
color: '#969396'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#bbbcbd'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script> ');
or what I have to write each script as a seperate line like this?
document.write('<script src="http://widgets.twimg.com/j/2/widget.js"></script> ');
<script>
document.write('new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#ebebeb',
color: '#969396'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#bbbcbd'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script> ');
}
I tried THIS, but DW gave me a syntax error. Here is the ENTIRE script i'm writing.
<script type="text/JavaScript">
<!--
function changTwitter() {
var currentTime = new Date().getHours();
if (7 <= currentTime&¤tTime < 17) {
document.write('<' + 'script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#242124',
color: '#f0af4d'
},
tweets: {
background: '#333333',
color: '#c2c2c2',
links: '#f7bc63'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</' + 'script> ');
}
else {
document.write('<' + 'script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#17d1ff',
color: '#ff8fda'
},
tweets: {
background: '#ededed',
color: '#383838',
links: '#ff8aed'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</' + 'script> ');
}
}
You can do that, but you'll need to be sure that you break up the text </script> within the document.write call, because otherwise the browser will treat it as the end of the script tag that the document.write call is within. The usual way to do that is to either break the word up:
...blah blah blah</" + "script>");
or put a backslash in front of the forward slash:
...blah blah blah<\/" + "script>");
It is perhaps paranoid of me, but I do it (the first bit) for opening script tags as well.
In terms of whether you do it with one document.write call or two, it doesn't matter. document.write adds to the text stream that will be parsed by the HTML parser. It doesn't matter whether you write it all out at once or use a hundred individual calls to do it.
Update: Some points on the code you added to the question:
The code won't parse, you're using ' as the quote character for your document.write call, but you're also using it for strings within the code you're writing. Which means that the first ' within the code (which is after "type:") will end the document.write string.
Remember that document.write only works during the initial load of a page, as part of the parsing sequence. You can't call document.write later, in response to an event (or rather, if you do, the odds are very low that it will do what you want — it will try to replace the entire contents of the page). In the code you added to the question, you're defining a function changTwitter but never calling it. You'd have to call it to do anything.
Instead of outputting a completely different script, why not just use code within the script to adjust the color by time of day? Something like:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
(function() {
var currentTime = new Date().getHours()
shellColor,
shellBackground,
tweetColor,
tweetBackground,
linkColor;
if (7 <= currentTime&¤tTime < 17) {
shellColor = /*...whatever*/;
shellBackground = /*...whatever*/;
tweetColor = /*...whatever*/;
tweetBackground = /*...whatever*/;
linkColor = /*...whatever*/;
}
else {
shellColor = /*...whatever*/;
shellBackground = /*...whatever*/;
tweetColor = /*...whatever*/;
tweetBackground = /*...whatever*/;
linkColor = /*...whatever*/;
}
new TWTR.Widget({
version: 2,
type: 'search',
search: '#blahblah',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'blahblah',
width: 180,
height: 300,
theme: {
shell: {
background: shellBackground,
color: shellColor
},
tweets: {
background: tweetBackground,
color: tweetColor,
links: linkColor
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
})();
</script>
Just put the code in a separate javascript file, and include it with <script src="name_you_saved_it_under.js"></script> (put that in the <head> of whatever HTML document you want to include it in.
Using JQuery you could implement the following solution:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/**
* Function to load funcions dynamically
* by inserting a scrip tag into the head section
*
* #params <String> path to script
* #return none.
*/
function load_script(src) {
// docorate an empty elemend node with the correct
// script source and then append it to the head section
$('<script><\/script>').attr('src', src).appendTo($('head')[0]);
}
</script>
PS: This script has not been test but should be close to what you need.
Hope this helps.
Related
I want this:
Without having to start like this:
But for some reason the data only shows up when I use "hiddengrid: true,"
I tried following this demo and was only able to get the example to work by adding "hiddengrid: true," like so:
<body>
<div class="center" id="overGrid">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'api/codes',
editurl: 'api/codes',
colModel: [
{
label: "Edit Actions",
name: "actions",
width: 75,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{
label: 'Id',
name: 'id',
width: 150,
editable: true
},
{
label: 'Title',
name: 'title',
width: 100,
editable: true
},
{
label: 'Code',
name: 'code',
width: 100,
editable: true
},
{
label: 'Original Url',
name: 'originalUrl',
width: 200,
editable: true
}
],
align: 'center',
viewrecords: true,
rowList: [10, 20, 30],
width: 925,
height: 445,
rowNum: 20,
loadonce: true,
hiddengrid: true, // <-------------------- HERE
toppager: '#jqGridPager',
pager: '#jqGridPager',
caption: "Database"
}); jQuery("#jqGrid")
.navGrid('#pager', { edit: false, add: false, del: false, search: false })
.navButtonAdd('#pager', {
caption: "Add",
buttonicon: "ui-icon-add",
onClickButton: function () {
alert("Adding Row");
},
position: "last"
})
.navButtonAdd('#pager', {
caption: "Del",
buttonicon: "ui-icon-del",
onClickButton: function () {
alert("Deleting Row");
},
position: "last"
});
function fetchGridData() {
var gridArrayData = [];
// show loading message
$("#jqGrid")[0].grid.beginReq();
$.ajax({
url: 'api/codes',
mtype: 'POST',
datatype: 'JSON',
success: function (result) {
for (var i = 0; i < result.items.length; i++) {
var item = result.items[i];
gridArrayData.push({
id: item.id,
title: item.title,
code: item.code,
originalUrl: item.originalUrl,
});
}
// set the new data
$("#jqGrid").jqGrid('setGridParam', { data: gridArrayData });
// hide the show message
$("#jqGrid")[0].grid.endReq();
// refresh the grid
$("#jqGrid").trigger('reloadGrid');
}
});
}
fetchGridData();
});
</script>
</body>
Examples such as this don't seem to be working for me on their own so I keep having to reference other sources such as this that are much more complex and informative but possibly the reason for why I continue to have issues every step of the way.
Side Note
I should probably point out that I was only just recently introduced to jqGrid as a result of this question I asked about a week ago: " How can I separate my output using “onclick” and format the data to 20 per page?
"
I did a fairly decent job of documenting the steps that brought me to this point so it might be worth checking out for an in depth look as to what I am dealing with.
In short I am building an API in Asp.Net Core that sends and receives JSON data to my MongoDb database and then outputs the data to a single HTML page using jqGrid. So far I have created functioning Get, Post, Put, and Delete methods that return and send JSON data to my MongoDb database.
Update:
I have gone through the docs suggested by Tony Tomov and I understand their meaning. I just haven't the slightest clue to the solution to this problem. Everything I have thought to be a possible solution and tried from before and after I posted this question has given me a blank page without any errors.
I am trying to resolve the issue .I cant load this script http://orangeplacehotel.com/superbudget/ems-policy. Is there anything wrong with this code?? I tried putting alert and it works properly but still i cant see the plug-in loaded on the site.. Please help .. Thanks,
$(function() {
$('#nanoGallery1').nanoGallery({
kind:'flickr',
userID:'129251189#N05',
touchAutoOpenDelay: -1,
breadcrumbAutoHideTopLevel: true,
maxWidth: 948,
imageTransition : 'slide',
thumbnailWidth: 200,
thumbnailHeight: 126,
thumbnailHoverEffect: 'scaleLabelOverImage,borderDarker',
i18n: {
thumbnailImageDescription: 'view photo',
thumbnailAlbumDescription: 'open album'
},
thumbnailLabel: {
display: true,
position: 'overImageOnMiddle',
hideIcons: true, align: 'center'
},
thumbnailLazyLoad: true
});
});
alert("test");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
error is "NanoGallery is not a function"
I think you should check your plugin (in what nanoGaller() is defined) is included in page or not before running your code
Below is the code working fine
Its not a solution but might give you some idea
First include the jquery library then
$.prototype.nanoGallery = function(){
console.log(arguments);
}
$(function() {
$('#nanoGallery1').nanoGallery({
kind:'flickr',
userID:'129251189#N05',
touchAutoOpenDelay: -1,
breadcrumbAutoHideTopLevel: true,
maxWidth: 948,
imageTransition : 'slide',
thumbnailWidth: 200,
thumbnailHeight: 126,
thumbnailHoverEffect: 'scaleLabelOverImage,borderDarker',
i18n: {
thumbnailImageDescription: 'view photo',
thumbnailAlbumDescription: 'open album'
},
thumbnailLabel: {
display: true,
position: 'overImageOnMiddle',
hideIcons: true, align: 'center'
},
thumbnailLazyLoad: true
});
});
alert("test");
In My Sencha touch 2.0 app I am having an issue with a JW javascript video player not playing when there are two overlays up at the same time and I wanted to see if anyone could better elaborate on what is going wrong or what may be causing it so I can try and look around and try to figure out what is going on (i am new to sencha and javascript). I have the project loaded up at http://www.cox7.com/sean even tho it will only be run on an iPad.
Try the steps below to better see what I am talking about and also note that a lot of the jwplayer events are being logged in the javascript console so you can see whats going on......
1) click on any of the panels on the main page which will open a overlay with the video title description and a javascript video player. You will see that you can play the video.
2) do a search for "stem" in the search bar (top right corner of the main screen) this will then display a pannel with the search results.
3) click on any of the search results which will then open that same video player pannel but this time you will not be able to click the play button. It's almost like the pannel is not the top most element but I can still scroll and the onTouchStart event fires but the video never starts.
Anyone know what might be causing this? any help is much appreciated.
Here is my controller setup for the search result overlay....
showStreamSearchPopup: function showStreamPopup(list, index, node, record) {
//alert(record.get('title'));
//var record = getData().getStore().getAt(index);
StreamVideoSearchPlayerOverlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
centered: true,
width: '78%',
height: '68%',
styleHtmlContent: true,
listeners: {
painted: function() {
console.log('StreamVideoSearchPlayerOverlay painted');
},
activeitemchange :function() {
console.log('StreamVideoSearchPlayerOverlay activeitemchange');
}
},
items: [{
style: 'padding:1em;',
html:[ "<div class=\"postTitle\">",record.get('title'),"</div><div class=\"postDate\">Added on ",
record.get('date'),"</div><div class=\"postDesc\">",record.get('content'),"</div>"
].join("")
},
{
xtype: 'panel',
layout: 'card',
cls: 'videoPlayeriPad',
items:[{
xtype: 'jwplayer',
playerOptions: {
file: record.get('ipadvideo'),
image: record.get('poster'),
width: 500,
height: 281,
plugins: {
'gapro-1': { accountid: 'UA-23363754-1', idstring: '||title||' }
},
skin: 'http://www.cox7.com/wp-content/mediaplayer/skins/beelden/beelden/glow.xml',
}
}]
}
],
scrollable: true
}
);
StreamVideoSearchPlayerOverlay.show();
StreamVideoSearchPlayerOverlay.setActiveItem(2);
},
And here is my controller setup for the normal home screen asset overlay...
showStreamPopup: function showStreamPopup(list, index, node, record) {
//alert(record.get('title'));
//var record = getData().getStore().getAt(index);
StreamVideoPlayerOverlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
centered: true,
width: '78%',
height: '68%',
styleHtmlContent: true,
listeners: {
painted: function() {
console.log('StreamVideoPlayerOverlay painted');
},
activeitemchange :function() {
console.log('StreamVideoPlayerOverlay activeitemchange');
}
},
items: [{
style: 'padding:1em;',
html:[ "<div class=\"postTitle\">",record.get('title'),"</div><div class=\"postDate\">Added on ",
record.get('date'),"</div><div class=\"postDesc\">",record.get('content'),"</div>"
].join("")
},
{
xtype: 'panel',
layout: 'card',
cls: 'videoPlayeriPad',
items:[{
xtype: 'jwplayer',
playerOptions: {
file: record.get('ipadvideo'),
image: record.get('poster'),
width: 500,
height: 281,
plugins: {
'gapro-1': { accountid: 'UA-23363754-1', idstring: '||title||' }
},
skin: 'http://www.cox7.com/wp-content/mediaplayer/skins/beelden/beelden/glow.xml',
}
}]
}
],
scrollable: true
}
);
StreamVideoPlayerOverlay.setActiveItem(2);
StreamVideoPlayerOverlay.show();
}
I'm working with the Twitter search widget and currently I have the javascript embedded in the within the body tags of the HTML, something like this:
<body>
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'faves',
rpp: 1,
interval: 7200000,
title: '',
subject: '',
width: 500,
height: 65,
theme: {
shell: {
background: '#a4c9b9',
color: '#ffffff'
},
tweets: {
background: '#a4c9b9',
color: '#ffffff',
links: '#444444'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('exampleuser').start();
</script>
</body>
Instead though, I'd rather move all that javascript to the header (or maybe the footer?) tag, then simply have it rendered in the body without the tags. Is there a simple way to do this?
You can use one of either native JS...
window.onload = function() {
// your code here
};
or jQuery...
$(document).ready(function() {
// your code here
});
...to ensure the code will not run until the document has finished loading.
This explains the slight difference between window.onload and $(document).ready().
Another option would be to wrap your code in a named function and call it in the body somewhere but you would still have to put it in <script> tags.
EDIT: Using window.onload...
<html>
<head>
<script>
window.onload = function() {
new TWTR.Widget({
version: 2,
type: 'faves',
rpp: 1,
interval: 7200000,
title: '',
subject: '',
width: 500,
height: 65,
theme: {
shell: {
background: '#a4c9b9',
color: '#ffffff'
},
tweets: {
background: '#a4c9b9',
color: '#ffffff',
links: '#444444'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('exampleuser').start();
};
</script>
</head>
<body></body></html>
I am trying to eliminate replies and retweets in the twitter widget. So far the following code is not working:
Starting at line 1967 of widget.js:
var F = /twitter\.com(\:\d{2,4})?\/intent\/(\w+)/,
A = {
tweet: true,
retweet: false,
reply:false,
favorite: true
},
And this code in the body of the html page, likewise is not working:
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'search',
search: 'blahblahblah', // This shows all tweets with the hashtag #blahblahblah.
interval: 3000,
title: '',
subject: '',
width: 'auto',
height: 544,
theme: {
shell: {
background: '#cccccc',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#5e6a71',
links: '#aa0828',
reply:false,
retweet:false
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().start();
</script>
Any help in this would be greatly appreciated.
to eliminate Retweets try adding " -RT " into the search string.
I figured it out. In the search widget just set the search parameter like so:
search: 'from:#blahblahblah',
This limits the search query to only those tweets from the specific user. I hope this helps anyone who runs into this issue.
Just set your search query to :
"from:#blahblahblah -RT"
It will eliminate other replies, retweets and mentions!
I hope it will help you