I am trying to implement Looper theme to my blazor server-side app, and I have the javascript libraries referenced at the end of the in _Host.cshtml.However some scripts in theme.min.js is not running. Why?
<script src="/Library/vendor/jquery/jquery.min.js"></script>
<script src="/Library/vendor/popper.js/umd/popper.min.js"></script>
<script src="/Library/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/Library/vendor/pace-progress/pace.min.js"></script>
<script src="/Library/vendor/stacked-menu/js/stacked-menu.min.js"></script>
<script src="/Library/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/Library/javascript/theme.min.js"></script>
<script src="_framework/blazor.server.js"></script>
My problem is that while
<div data-toggle="drowndown"></div> works, but hamburger menu toggle
<button class="hamburger hamburger-squeeze mr-2" type="button" data-toggle="aside-menu" aria-label="toggle aside menu"><span class="hamburger-box"><span class="hamburger-inner"></span></span></button>
does not work. What am I missing here? What am I doing wrong? My theme change script also isn't running. If I step through theme.js and I can see that this script runs when blazor is not active (commenting out blazor.js) but with blazor active, this script does not run.
(line 610) in /library/javascript/theme.js
}, {
key: "toggleAside",
value: function toggleAside() {
var _this4 = this;
var $trigger = $('[data-toggle="aside"]');
$trigger.on('click', function () {
var isShown = $('.app-aside').hasClass('show');
$trigger.toggleClass('active', !isShown);
if (isShown) _this4.hideAside();else _this4.showAside();
});
}
My educated guess is that theme.js is using something that blazor does not allow? Is anybody experienced enough with Looper theme (or with javascript in general) to know why it wouldn't work? Particularly the hamburger toggle and the theme switching code
(line 1992 in /library/javascript/theme.js)
var Looper = function () {
var Looper = new Theme(); // toggle skin thought button
$('[data-toggle="skin"]').on('click', function (e) {
e.preventDefault();
var skin = Looper.skin === 'dark' ? 'default' : 'dark';
Looper.setSkin(skin); // we need to refresh our page after change the skin
location.reload();
}).each(function () {
var isDarkSkin = Looper.skin === 'dark';
var $icon = $(this).find('.fa-moon');
if (isDarkSkin) {
$icon.addClass('far');
$icon.removeClass('fas');
}
}); // make it global
return Looper;
}();
This is the website https://worshipground.azurewebsites.net/ You can use the inspector tool to see that blazor has been correctly loaded and all the javascript files are loaded in /library/javascript and /library/vendor/...
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- End Required meta tags -->
<title> Starter Template | Looper - Bootstrap 4 Admin Theme </title>
<base href="~/" />
<meta name="theme-color" content="#3063A0">
<link rel="apple-touch-icon" sizes="144x144" href="Library/apple-touch-icon.png">
<link rel="shortcut icon" href="Library/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600" rel="stylesheet">
<link rel="stylesheet" href="/Library/vendor/open-iconic/font/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="/Library/vendor/fontawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="/Library/stylesheets/theme.min.css" data-skin="default">
<link rel="stylesheet" href="/Library/stylesheets/theme-dark.min.css" data-skin="dark">
<link rel="stylesheet" href="/Library/stylesheets/custom-app.css">
<link rel="stylesheet" href="/Library/stylesheets/custom.css" data-skin="default">
<link rel="stylesheet" href="/Library/stylesheets/custom-dark.css" data-skin="dark">
<script>
var skin = localStorage.getItem('skin') || 'default';
var isCompact = JSON.parse(localStorage.getItem('hasCompactMenu'));
var disabledSkinStylesheet = document.querySelector('link[data-skin]:not([data-skin="' + skin + '"])');
// Disable unused skin immediately
disabledSkinStylesheet.setAttribute('rel', '');
disabledSkinStylesheet.setAttribute('disabled', true);
// add flag class to html immediately
if (isCompact == true) document.querySelector('html').classList.add('preparing-compact-menu');
</script>
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="/Library/vendor/jquery/jquery.min.js"></script>
<script src="/Library/vendor/popper.js/umd/popper.min.js"></script>
<script src="/Library/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/Library/vendor/pace-progress/pace.min.js"></script>
<script src="/Library/vendor/stacked-menu/js/stacked-menu.min.js"></script>
<script src="/Library/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/Library/javascript/theme.min.js"></script>
<script>
Object.defineProperty(WebSocket, 'OPEN', { value: 1, });
</script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
You may find you have your work cut out in terms of making a JavaScript heavy template work nicely in Blazor.
You will probably need to utilise IJSRuntime
https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0
I think I know where this problem comes from! If you comment out the following code on the "Host.cshtml" file, this problem will most likely go away!
<script>
Object.defineProperty(WebSocket, 'OPEN', { value: 1, });
</script>
But!!!! You will get some javascript errors related to "WebSocket" instead! something like this:
"WebSocket is not in the OPEN state"
Or
"Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State."
The cause of these errors is a conflict between "pace.min.js" file and "blazor.server.js" file! You can check this link for more information and get more help
I want the below javascript to update the specific css link bootstrap.min.js if the page is named mypage.html.
How would I do that?
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/bootstrap377.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/some_other_stylesheet.css"/>
<script type="text/javascript">
var filename = location.href.split("/").slice(-1);
if (filename == "mypage.html") {
HOW DO I DO THIS: update the above stylesheet link to be bootstrap400.min.css (or should this script be before the css link?)
}
</script>
</head>
<body>
this is a test
</body>
</html>
Use document.querySelector to get a reference to the link element, then change the href property the usual way.
var filename = location.href.split("/").slice(-1);
if (filename == "mypage.html") {
var link = document.querySelector("link[href='/css/bootstrap377.min.css']");
link.href = "/css/bootstrap400.min.css";
}
I try to get the value in JQTE Text Editor . I want to get only values without any HTML element or design.
I tried this bus this is giving me styles also in the values when I do some styling on UI . But I want only value without style. Any help would be great for me .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Crea Application</title>
<link href="css/jquery-te-1.4.0.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../js/thirdparty/jquery-1.11.2.js"></script><![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script>
<!--<![endif]-->
<script src="js/thirdparty/jquery-te-1.4.0.min.js"></script>
<!-- <script src="js/thirdparty/jquery.cookie.js"></script>
<script src="js/thirdparty/jquery.loadmask.min.js"></script>
<script src="js/thirdparty/jquery.maskinput.js"></script>
<script src="js/thirdparty/jquery.bpopup.js"></script>
<script src="js/thirdparty/jquery-date-time.js"></script>
<script src="js/thirdparty/jquery.datetimepicker.js"></script>
<script src="js/thirdparty/jquery-timepicker.js"></script>
<script src="js/thirdparty/jquery-center.js"></script>
<script src="js/thirdparty/jquery.jqdock.js"></script>
<script src='js/thirdparty/jquery.scrollto.js'></script>
<script src='js/thirdparty/moment.js'></script>
<script src='js/thirdparty/bowsy.js'></script> -->
</head>
<body>
<textarea cols="2" rows="3" name="textarea" class="jqte-test" id="mytextarea"></textarea>
<button class="status">Toggle jQTE</button>
<script type="text/javascript">
$(".status").click(function()
{
// alert($("textarea#mytextarea").html());
jqteStatus = jqteStatus ? false : true;
$('.jqte-test:first').jqte({"status" : jqteStatus});
console.log($("#mytextarea").html());
jqteStatus = jqteStatus ? false : true;
$('.jqte-test:first').jqte({"status" : jqteStatus});
});
</script>
</body>
</html>
Since the field is nested inside of the jqte block you can go up the DOM to get to a level that allows just getting the text:
For example if your field was "emailsubject":
$("#emailsubject").closest(".jqte").find(".jqte_editor").eq(0).text();
So going up the DOM we find the closest element with the style ".jqte", then we go down the DOM to find the next style of ".jqte_editor". Since this will be a jQuery object, we need to get the first occurance with .eq(0) and finally just get the text with .text()
You can simply remove the HTML formatting with:
var myContent = $('.jqte-test').val();
var final = $(myContent).text();
I am developing a website using HTML5 and AngularJS. I want to develop a site in Hindi language. One requirement is that the site should allow to enter text in the Devanagari alphabet even in devices that do not have the appropriate keyboard.
Time ago I hot-linked a Microsoft bookmarklet that's no longer available (http://ilit.microsoft.com/Bookmarklet/Script/Hindi.js) which would convert from English to Hindi: you type "kya" and then get the corresponding Hindi characters.
Can you suggest tools to do the same, using this or other system?
Download code from http://www.gamabhana.com/?q=node/3
Extract downloaded folder. Now your folder have the following content
gamabhana_js have all js files that you need. Open the index.html in browser and enter something in textarea. Then you can see corresponding Hindi fonts instead of English. You can edit that index file and use according to your need.
Following is a sample code that I edited If I click on hindi then I will get Hindi fonts instead of English
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/GA1000.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/GA0010.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/GA0640.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/gamabhanaLib.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/fileio.js"></script>
<script language="JavaScript" type="text/javascript" >
gw1=null;
var hindi=false;
function myCustomOnInit()
{ try{
if(hindi==true){
gw1= new gamabhanaPhoneticHandler("elm1_ifr",'__devanagari__','__roman__','#gamabhana#');
gw1.MrAutoCor=true;
GphRegisterForMasterUpdates(gw1);
}
}
catch(e){}
}
function LanguageList_onchange() {
gw1.SetPriLanguage(document.getElementById('LanguageList1').value);
}
function arrangekbhelp()
{
document.getElementById('kbhelpdiv').style.left=(window.document.body.clientWidth-400) + "px";
if((window.document.body.clientWidth-400)<0)
document.getElementById('kbhelpdiv').style.left=0 + "px";
}
function hindi1(){
hindi=true;
myCustomOnInit();
}
function togglekbhelp()
{
arrangekbhelp();
if(document.getElementById('kbhelpdiv').style.display=='block')
document.getElementById('kbhelpdiv').style.display='none';
else
document.getElementById('kbhelpdiv').style.display='block';
return;
}
window.onresize=arrangekbhelp;
</script>
<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,langselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
oninit : "myCustomOnInit",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "omkar",
staffid : "9383"
}
});
</script>
<!-- /TinyMCE -->
</head>
<body>
<form>
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> </textarea>
</form>
<button onclick="hindi1()">Hindi</button>
</body>
</html>
1, I downloaded the all these three files(JS and CSS) in my local system and tried it is not working as it is directly referring from URLS.
2, Even If i use URL src and href it is not working with the IE.IE also not saying any error.
Please help me to know what am doing wrong.
PART 1 :
<link rel="stylesheet" type="text/css" href="jquery/css/jquery-ui-1.10.2.custom.css" />
<script src="jquery/js/jquery-1.9.0.js"/></script>
<script src="jquery/js/jquery-ui-1.10.0.custom.min.js"></script>
PART 2 :
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
HTML CODE :
![<script>
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
</script>
<style>
.tooltip
{
background-color:#F8D2DA;
}
.tooltipqty
{
text-align:right;
}
</style>
</head>
<body>
<p><label for="age">Your age:</label><input id="age"
title="<table class='tooltip'><tr><td class='tooltipqty'>20.00</td><td>31-01-2013</td></tr>
<tr><td class='tooltipqty'>0.02</td><td>01-01-2013</td></tr></table>" />
</p>
</body>][1]
Replace $(this).prop('title') with $(this).attr('title').
jsfiddle
Didn't see it was IE related. Didn't know either that jsfiddle had problems in IE 8 ...