This code show appointment schedule like the image i provided :
but it didn't appear on apple [ safari / chrome ]
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> <div class="row"> <div class="col-md-11"> <script type="text/javascript"> Sys.Application.add_load(function () { demo.scheduler = $find("<%= RadScheduler1.ClientID %>"); }); </script> <script type="text/javascript" src="scripts.js"></script> <script src="TelerikCode.js" type="text/javascript"></script> </telerik:RadScriptBlock>
i cant understand the problem so i didn't try any solution
Related
First of all: It's my first time using javascript.
I wanted to implement the Before/After Plugin into Powerpoint. So I created a html file that I loaded with a webbrowser object in Powerpoint. That worked basically but the plugin requires me to define the height and width statically for the pictures I use:
<html>
<head>
<meta charset="UTF-8">
<title>SomeTitle</title>
</head>
<body>
<div id="container">
<div><img alt="before" src="pics1/before.jpg" width="3696" height="1583" /></div>
<div><img alt="after" src="pics1/after.jpg" width="3696" height="1583" /></div>
</div>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
$('#container').beforeAfter({
imagePath: 'js/',
showFullLinks: false
});
});
</script>
</body>
</html>
So I wanted to implement the function that the size is statically defined but determined once in the beginning by the size of the screen. After experimenting a bit I found a solution that works partly:
<html>
<head>
<meta charset="UTF-8">
<title>SomeTitle</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
/* <![CDATA[ */
var wi=screen.availWidth-20;
var img1=document.createElement("img");
img1.alt="before";
img1.src="pics1/before.jpg";
img1.height=wi*img1.height/img1.width;
img1.width=wi;
document.getElementById("container").appendChild(img1);
var img2=document.createElement("img");
img2.alt="after";
img2.src="pics1/after.jpg";
img2.height=wi*img2.height/img2.width;
img2.width=wi;
document.getElementById("container").appendChild(img2);
/* ]]> */
</script>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$('#container').beforeAfter({
imagePath: 'js/',
showFullLinks: false
});
});
/* ]]> */
</script>
</body>
</html>
The problem now is/are following:
Firefox: Does not load the pictures at the first time but after refreshing it works perfectly.
IExplorer: It does not show anything.
Chrome: It does not show aynthing.
Powerpoint WebBrowser: It does not show aynthing.
I already tried to fix by the "$(document).ready(function() {..." part but it does not help at all.
What's wrong here?
Ok, I have seen a couple of questions on this topic - I have an html5 page and I am trying to apply a music stream player but the jquery script is conflicting with another jquery script.
My code is below, I have tried the no conflict method but to no avail I might be applying it wrong. This is just the script portion of my code I have video gallery playing also; the gallery plays fine but the player shows but doesn't play at all. Everytime I load the page I get a message stating : Adobe Flash Player security null is trying to connect with an internet based location which is webservinghosting.ca (the site I'm streaming the station from).
<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.6/jquery.min.js"></script>
<script type="text/javascript">
//create this naming for Jquery 1.3.2 version
var jq_1_6 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.forms').dcSlickForms();
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#showcase").awShowcase(
{
content_width: 900,
content_height: 400,
auto: true,
interval: 3000,
continuous: false,
arrows: true,
buttons: true,
btn_numbers: true,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: false,
transition: 'fade', /* hslide/vslide/fade */
transition_delay: 0,
transition_speed: 500,
show_caption: 'onload' /* onload/onhover/show */
});
});
</script>
<link type="text/css" href="http://www.websavershosting.ca/jplayer/skin/jplayer.websavers.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.websavershosting.ca/jplayer/jquery.jplayer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://fennel.websavers.ca:2199/system/streaminfo.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div id="jp-album-art">
<img id="cc_strinfo_trackimageurl_wlezfm" class="cc_streaminfo" />
</div>
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>mute</li>
<li>unmute</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-title"><span id="cc_strinfo_summary_wlezfm" class="cc_streaminfo">Loading Track ...</span></div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#jquery_jplayer_1").jPlayer({
ready: function () {
jQuery(this).jPlayer("setMedia", {
mp3: "http://209.172.54.130:9025/;stream/1"
});
},
swfPath: "http://www.websavershosting.ca/jplayer/Jplayer.swf",
supplied: "mp3",
solution: navigator.userAgent.indexOf("Trident/6")>-1 ? "flash" : "html,flash"
});
});
</script>
You are using jQuery file twice causing issues.
try removing last one:
<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
if you need to use multiple files on same page.
<script type="text/javascript" src="jquery-1.1.3.js"></script>
<script> $113 = jQuery.noConflict(true);</script>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
Now to access version 1.1.3 you need to use $113 like
$113('.element').val();
while $ for version 1.6.2.
Try this:
if you have more jquery scripts:
<script src="../jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var first= $.noConflict(true);
</script>
<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="../jquery-1.2.2.js"></script>
<script type="text/javascript">
var second= $.noConflict(true);
</script>
I have a content editor webpart in sharepoint with the following code, However the countdown is not working.
What I noticed is that this site is using an old version of jquery 1.6.3, I wonder if that might be the cause or not.
<script src="/Style%20Library/countdown/jquery.countdown.js" type="text/javascript">
<link rel="stylesheet" type="text/css" href="/Style%20Library/countdown/jquery.countdown.css" />
<script class="ms-rteForeColor-3" type="text/javascript">
$(function () {
var austDay = new Date(2013, 7 - 1, 27);
$('#countdown').countdown({until: austDay});
});
</script>
<div id="countdownBox">
<h3 class="ms-rteElement-H3 ms-rteForeColor-3">Countdown to go-live</h3>
<span class="countdown" id="countdown"></span>
</div>
Update 1
Error in firefox console. the error is flooded too many times on the console
Timestamp: 10/07/2013 08:13:21
Warning: Error in parsing value for 'filter'. Declaration dropped.
Source File: https://xx/Communities/xx/Pages/project-xx.aspx
Line: 0
Source Code:
alpha(opacity=99.00000000000007)
this is the generated html, I wonder if the css has to be in the head?
<DIV id=WebPartWPQ7 class="ms-WPBody noindex" allowDelete="false" width="100%" HasPers="false" WebPartID="c1b5cf92-534f-4d23-8cd0-8c0fbe8f541b">
<SCRIPT type=text/javascript src="/Style%20Library/countdown/jquery.countdown.js">
<link rel="stylesheet" type="text/css" href="/Style%20Library/countdown/jquery.countdown.css" />
<script type="text/javascript">
$(document).ready(function() {
var austDay = new Date(2013, 7 - 1, 27);
$('#countdown').countdown({until: austDay});
});</SCRIPT>
<DIV id=countdownBox>
<H3 class="ms-rteElement-H3 ms-rteForeColor-3">Countdown to go-live</H3><SPAN id=countdown class=countdown></SPAN></DIV></DIV>
The jsFiddle works fine: http://jsfiddle.net/Fnsgk/3
However you should add a closing script tag:
<script src="/Style%20Library/countdown/jquery.countdown.js" type="text/javascript">
</script>
Can you please tell me why this handlebars.js example will not work? I get a jquery error?
TypeError: e is null in the jquery
looks like its happening here $(document).append(theTemplate(theData));
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/handlebars.js"></script>
<script type ="text/javascript">
$(document).ready(function () {
var theData = { headerTitle: 'Shop Page', weekDay: 'Wednesday' };
var theTemplateScript = $("#header").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$(document).append(theTemplate(theData));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script id="header" type="text/x-handlebars-template">
<div> {{ headerTitle }} </div>
Today is {{weekDay}}
</script>
</div>
</form>
</body>
</html>
I changed my jQuery version to 1.7.2 and it fixed the problem.
still not sure what changed in the newer version
looks like the issue was appending to document if I change it to body it worked.
$('body').append(theTemplate(theData));
I have a test server with a page using jquery autocomplete. The autocomplete feature works fine if I connect to the server using Firefox 3.6. Unfortunately it doesn't work in Chrome or Firefox 5. Here is the html:
<html>
<head>
<title>Test Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link type="text/css" href="/static/css/jquery-autocomplete/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
<script>
$(document).ready(function(){
url = "/autocomplete/";
$("#searchInput").autocomplete({
source: url
});
});
</script>
<link rel="stylesheet" href="/static/css/site.css" />
</head>
<body>
<div id="content">
<script language="JavaScript">
<!--
function setSearchUrl() {
searchUrl = "/search/" + document.searchForm.nickname.value + "/"
document.searchForm.action = searchUrl;
}
//-->
</script>
<h3>Search</h3>
<form
name="searchForm"
action="/search"
method="get"
onSubmit="setSearchUrl()"
autocomplete="off">
<input id="searchInput" type="text" name="nickname" autocomplete="off">
<input type="submit" value="Search">
</form>
<script language="JavaScript">
<!--
document.searchForm.nickname.focus();
//-->
</script>
</div>
</body>
</html>
Any ideas on what might be going awry?
edit: firebug (in both browser versions) did not show any errors. Development tools in Chrome did not seem to complain either.
Thanks!
-Travis
Check out this fiddle: http://jsfiddle.net/jensbits/AmvsX/
It should get you pointed in the right direction and the setSearchUrl function should not be necessary.
I'll be this line is your offender:
document.searchForm.nickname.value
What do you get when you type that expression into the console?