I am using Twitter helper from Microsoft.Web.Helpers http://twitterhelper.codeplex.com/
But it is a bit delaying page load, so i am wondering is it possible to load the scripts of that helper after page is ready?
For example Twitter.Search("Hot Tweets") produce this scripts:
SCRIPTS:
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"/>
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'search',
search: 'Hot Tweets',
interval: 6000,
title: '',
subject: '',
width: 250,
height: 300,
theme: {
shell: {
background: '#8ec1da',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script>
And than that scripts producing this html:
HTML:
<div class="twtr-widget twtr-paused" id="twtr-widget-1">
<div class="twtr-doc" style="width: 250px;">
<div class="twtr-hd">
<div class="twtr-bd">
<div class="twtr-ft">
</div>
</div>
</div>
But it is not allowing to generate scripts separate so i would wrap them in to $(document).ready()
I can just split that code copy paste scripts and html separately....sounds a bit silly. So i am just wondering may be some one may suggest something more clever?
Using defer <script type='text/javascript' defer src=''></script> will cause your scripts to be run after the document has been parsed and loaded.
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js" defer></script>
<script type="text/javascript" defer>
new TWTR.Widget({
version: 2,
...
http://www.hunlock.com/blogs/Deferred_Javascript
Related
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
I have this code to embed a bot as a live chat using direct Line API instead of the usual iframe but when i put in my directline secrete key, the Bot is occupying the whole web page. I need it to appear by the bottom right of the web page and pop up as a life chat when a user clicks on it. Please someone should guide me in achieving this. Thanks
Your problem is about the way you are displaying your div including the bot: <div id="bot"/>
You can style this div to appear like you want; there are several samples provided on the bot Webchat Github project:
For sidebar display: https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/sidebar/index.html
For fullwindow : https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/fullwindow
I would highly suggest to take a look at the 1st sample which has a demo of narrow, normal and wide div
As Nicolas R suggested, you can style the container div <div id="bot"/> to position it at bottom right corner of web page. I achieved same requirement in a project, the following sample code works for me, you can refer to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<style>
.wc-chatview-panel {
width: 350px;
height: 450px;
position: relative;
}
#bot {
position: fixed;
bottom: 0;
right: 0;
}
.closechat {
top: 405px !important;
}
</style>
</head>
<body>
<div id="bot"></div>
</body>
</html>
<script>
BotChat.App({
directLine: { secret: "{your_directline_secret}" },
user: { id: 'You' },
bot: { id: '{Your_BotId}' },
resize: 'detect'
}, document.getElementById("bot"));
$(function () {
$("div.wc-header").prop("isopen", "true");
$("div.wc-header").click(function () {
var isopen = $(this).prop("isopen");
//alert(isopen);
if (isopen == "true") {
$("div.wc-chatview-panel").addClass("closechat");
$("div.wc-header").prop("isopen", "false");
} else {
$("div.wc-chatview-panel.closechat").removeClass("closechat");
$("div.wc-header").prop("isopen", "true");
}
})
})
</script>
Test result:
I'm new in Polymer and I trying to do mobile app use Polymer and Cordova.
I use neon-animated-pages for pretty animation, and now I have some issue with iron-ajax. When I open project in browser on localhost:8080 all my pages already loaded and if I change page I want to make iron-ajax request. How can i do this?
example index.html
<dom-module id="my-app">
<template>
<style>
// some style
</style>
<app-header-layout fullbleed>
<app-header>
<app-toolbar>
<div main-title>Title</div>
<paper-input label="page" value="{{page::change}}"></paper-input>
<paper-icon-button icon="menu"></paper-icon-button>
</app-header>
<div class="content">
<neon-animated-pages id="page"
selected="{{page}}"
attrForSelected="index"
entry-animation="slide-from-right-animation"
exit-animation="slide-left-animation">
<neon-animatable index="0"><login-app name="login"></login-app></neon-animatable>
<neon-animatable index="1"><profile-page name="profile"></profile-page></neon-animatable>
<neon-animatable index="2"><secondary-page name="secondary"></secondary-page></neon-animatable>
</neon-animated-pages>
</div>
<footer>
© Polymer project
</footer>
</app-header-layout>
</template>
<script>
Polymer({
is: 'my-app',
behaviors: [GlobalsBehaviour],
properties: {
page: {
type: Number,
reflectToAttribute: true,
value: 0
}
}
});
</script>
And example some page with iron-ajax:
<dom-module id="secondary-page">
<template>
<style>
:host {
display: block;
}
</style>
<div>secondary PAGE</div>
<div>Var value - {{my}}</div>
<iron-ajax
id="login"
url="https://www.some.url/"
method="get"></iron-ajax>
</template>
<script>
Polymer({
is: 'secondary-page',
properties: {
my: {
type: String,
value: 'my'
}
}
});
</script>
I set up video lesson site with moodle. I will share my video with jwplayer my code is shown below.
<p>
<script src="jwplayer/jwplayer.js" type="text/javascript"></script>
<script type="text/javascript"> jwplayer.key="KEY";</script>
</p>
<div id='player'>
<img src='jwplayer/preview.jpg' alt='RTSP Link' /><br />
</div>
<script type="text/javascript">
jwplayer('player').setup({
id : 'playerID',
fallback: false,
width: '920', height: '518',
image: 'jwplayer/preview.jpg',
sources: [{
file: "http://WowzaAdress:1935/vod/smil:Lesson1.smil/jwplayer.smil?protocol=rtmpe"
},{
file: "http://WowzaAdress:1935/vod/Lesson1.mp4/playlist.m3u8"
}],
rtmp: {
bufferlength: 3
},
});
</script>
I want to hide this code when users view with right click "Page source".
How can I do it?
I would use a tool like - http://www.dynamicdrive.com/dynamicindex9/encrypter.htm
So then you get:
<script>
<!--
document.write(unescape("%3Cp%3E%0A%20%20%3Cscript%20src%3D%22jwplayer/jwplayer.js%22%20type%3D%22text/javascript%22%3E%3C/script%3E%0A%20%20%3Cscript%20type%3D%22text/javascript%22%3E%20jwplayer.key%3D%22KEY%22%3B%3C/script%3E%0A%3C/p%3E%0A%3Cdiv%20id%3D%27player%27%3E%0A%20%20%3Ca%20href%3D%22rtsp%3A//WowzaAdress%3A554/vod/mp4%3ALesson1.mp4%22%3E%3Cimg%20src%3D%27jwplayer/preview.jpg%27%20alt%3D%27RTSP%20Link%27%20/%3E%3Cbr%20/%3E%3C/a%3E%0A%3C/div%3E%0A%3Cscript%20type%3D%22text/javascript%22%3E%0Ajwplayer%28%27player%27%29.setup%28%7B%0Aid%20%20%3A%20%27playerID%27%2C%0Afallback%3A%20false%2C%0Awidth%3A%20%27920%27%2C%20height%3A%20%27518%27%2C%0Aimage%3A%20%27jwplayer/preview.jpg%27%2C%0Asources%3A%20%5B%7B%0Afile%3A%20%22http%3A//WowzaAdress%3A1935/vod/smil%3ALesson1.smil/jwplayer.smil%3Fprotocol%3Drtmpe%22%0A%7D%2C%7B%0Afile%3A%20%22http%3A//WowzaAdress%3A1935/vod/Lesson1.mp4/playlist.m3u8%22%0A%7D%5D%2C%0Artmp%3A%20%7B%0Abufferlength%3A%203%0A%7D%2C%0A%7D%29%3B%0A%3C/script%3E"));
//-->
</script>
I have written a function in javascript for JQgrid.I checked it in JSFiddle and in JSfiddle it tells me that "your javascript code is valid".But when I run it in mvc3 razor, view grid is not display and it gives me an error in firebug that
TypeError: $("#list").jqGrid is not a function
below is my view file code
#model CBS.Models.Gledg
#{
ViewBag.Title = "JV";
}
<h2>JV</h2>
<link href="/Content/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="/Content/site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.multiselect.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tmpl.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqGrid.locale-en-4.1.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqGrid-4.1.2.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#list").jqGrid({
url: '/Home/GetJVLedg()/',
datatype: 'json',
mtype: 'GET',
colNames: ['Code', 'Remarks', 'Debit'],
colModel: [
{ name: 'Code', index: 'Code', width: 40, align: 'left' },
{ name: 'Remarks', index: 'Remarks', width: 240, align: 'left' },
{ name: 'Debit', index: 'Debit', width: 200, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Code',
sortorder: "desc",
viewrecords: true,
//imgpath: '/scripts/themes/coffee/images',
caption: 'Gledg'
});
});
});
</script>
<fieldset>
<legend> Journal Voucher</legend>
<div id="txtArea">
<label>
Voucher NO
</label>
<input type="text" id="" name="VID" maxlength="20" PlaceHolder="Voucher No..." />
<label>Remarks</label>
<input type="text" id="" name="Rem" maxlength="150" PlaceHolder="Remarks..." />
<label>Voucher Date</label>
<input type="Text" id="datepicker" name="VDate" />
</div>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</fieldset>
I searched a lot but no solution is found which can solve my problem. help me
Place your code inside
$(document).ready(function (){})
then it will work.
And make sure that you have mentioned all your script&css reference links to get JQGrid in head section
Has anyone had any luck with this?
I copied and pasted the exact example code here http://www.jqplot.com/deploy/dist/examples/barTest.html into my text editor. I added all the .js files and .css file required. when I run the page in any browser, I am not seeing the bars or the animation. I have looked at the source code on the above URL as well to see how it works. Could someone tell me why I can the animated bar chart on the URL but not from my desktop? What's different? Here is the exact code I copied:
<html>
<title>Untitled Document</title>
<link rel="stylesheet" href="js/jquery.jqplot.min.css" type="text/css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script>
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = [2, 6, 7, 10];
var ticks = ['a', 'b', 'c', 'd'];
plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
highlighter: { show: false }
});
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
</script>
</head>
<body>
<div id="chart1" style="margin-top: 20px; margin-left: 20px;width: 300px; height: 300px; position: relative;"></div>
<div><span>Moused Over: </span><span id="info1">Nothing</span></div>
</body>
</html>
here is what I see in the browser after running that code:
Thanks
For anyone interested, I've found the answer. The example code taken from the barchart.html page in my post doesn't appear to need the conditional syntax (below) in order to animate the bars:
$.jqplot.config.enablePlugins = true;
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
From the animate example on the examples page , the following code will do the trick:
animate: true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot: true,
I read the entire documentation and was doing a lot of playing around with the code. Eventually, I got to the full "examples" page (not the few listed on the tests and examples page which I initially viewed since it was listed first in the documentation). I really wanted to understand the plugin code since the developer took so much time to really provide a ton of info, comments and updates to his code base.