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";
}
Related
I want to create column cards (like buttons).
in that cards, description should appear in its top and when it is clicked, separate link should be opened in new page.
every cards has its own description and link.it should not be hard coded by directly assigning the desc and link to it.and every function and elements should be assigned in javascript file not html.
the desc and link should given in an array like
Table={{"desc":"apple","link":"www.google.com"},{"desc":"banana","link":"www.youtube.com"}}
I tried this code and I'm getting only one card with last description and link
for(i=0;i<10;i++)
{
var temp=my.Table[i].link;
$('.demo').html('<div class="column"><p id="i"></p></div>');
document.getElementById(i).innerHTML ='' + my.Table[i].desc + '';
}
You can iterate the table object, after append what you should use.
HTML code:
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="script.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
<div class="demo">
</div>
</body>
</html>
And the jquery code looks like the following:
$(document).ready(function(){
const table=[{"desc":"apple","link":"www.google.com"},{"desc":"banana","link":"www.youtube.com"}];
table.forEach((v, i)=>{
$('.demo').append('<div class="column"><p id="temp_'+i+'">' + v.desc + '</p></div>');
});
});
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
As the title says i am having a problem when loading a page like
blabla/index.php with a slash at the end (blabla/index.php/).It loads the page without the css and js making the page look like crashed.And this happens in every page i have like blabla/projects.php/ etc.
Any idea how can i fix this problem? And why is this happening?
The code is :
In head.php
<DOCTYPE html>
<html>
<head>
<title>ΑPL Lifts</title>
<link rel = "stylesheet" href = "css/bootstrap.css">
<link rel = "stylesheet" href = "css/main.css">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, user-scalable = no">
<meta http-equiv="content-type" content="text/html" charset = "UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
</head>
and in another file :
<?php
include 'includes/head.php';
include 'includes/navigation.php';
include 'includes/leftContentColumn.php';
?>
<div class = "col-md-8 maincontent">
<h1 class = "main-title">Προφίλ Εταιρίας</h1><hr>
<div id = "profile">
<div id = "profileParOne" class = "col-md-11">
</div>
</div>
</div>
<?php
include 'includes/rightContentColumn.php';
include 'includes/footer.php';
?>
I think paths to your css and js are relative. somethings like ../myscript.js . You should rewrite it to use absolute path (relative to root) like /js/myscript.js
Ok i found the solution by changing the ccs and js paths into:
<link rel = "stylesheet" href = "http://localhost/apl/css/bootstrap.css">
<link rel = "stylesheet" href = "http://localhost/apl/css/main.css">
<script src = "http://localhost/apl/js/bootstrap.js"></script>
If I wrote the script code in my html file, the animation works. But if the animation code is in a js file, it just didn't work.
here is my animation code
$(document).ready(function(){
$(window).on("load", function() {
var cow = document.getElementsByTagName("cow");
TweenMax.to(cow, 2, {top:"1200px",ease: Back.easeOut});
}
)})
and here is what in the html file.
<!DOCTYPE html>
<html>
<head>
<link rel = 'stylesheet' type = 'text/css' href = 'cow.css'/>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js">
</script>
<script type="text/javascript" src = 'showanimationcow.js'></script>
</head>
<body>
<img id = "cow" src ="http://cdn.snappages.com/adwr7m/theme/338649/images/
13179326871659847108SimpleCowArt.svg.hi_1393086508.png">
</body>
I will very much appreciate your help!
You have to use document.getElementById("cow")
Also, it's not necessary to call $(document).ready and $(window).on("load",function() { the same time.
i want to use tinymce editor but my final html file must not contain any links to any sources or css files.
i mean there must not be any references to external resources, it should be embedded in one html
(all js files and css files)
performance is not important and the target browser is ie11 only.
i do not want any
<script src=".."> or
<link rel="stylesheet" type="css" href="..">
i want that
<script>
function tinymce..
</script>
same as style info also should be in this html without any reference to outside.
due to the limits of native browsers on java applictions (djbrowser), i can deploy one one file, i do not go
deeply into technical details of ie11 with dj.
is that possible? or any method? because when i copy paste tiny_mce.js directly into the html it fails. The reason may be dynamically created scripts which are made by document.write.
my test cases:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- DO NOT CHANGE TITE -->
<title>Editor</title>
<link rel="stylesheet" type="text/css" href="tiny_mce/themes/advanced/skins/default/ui.css">
<link rel="stylesheet" type="text/css" href="tiny_mce/themes/advanced/skins/default/content.css">
<style>
.mce-widget.mce-tooltip { display : none !important; }
</style>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/table/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/contextmenu/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/paste/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/themes/advanced/editor_template.js"></script>
<script type="text/javascript" src="tiny_mce/langs/en.js"></script>
<script type="text/javascript" src="tiny_mce/themes/advanced/langs/en.js"></script>
<script type="text/javascript">
function init() {
// Check that tinymce exists
if (typeof tinyMCE === 'undefined') {
alert("tinymce.js is missing");
return;
}
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "lists,style,linespace",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,listbox",
theme_advanced_buttons2 : "cut,copy,paste,|,outdent,indent,|,forecolor,backcolor",
theme_advanced_toolbar_align : "left",
theme_advanced_toolbar_location : "top",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : "true"
});
}
// Sets content
function JH_setData(html) {
try {
var oEditor = tinyMCE.activeEditor;
oEditor.setContent(html);
//Check whether decoding needed
//oEditor.setContent(decodeURIComponent(html));
} catch(e) {
//alert('exception occured' + e.description + ' ' + e.message);
return 'FAIL';
}
return 'OK';
}
// Gets the content
function JH_getData() {
var oEditor = tinyMCE.activeEditor;
var val = oEditor.getContent();
return val;
}
function setContent() {
JH_setData('test content');
}
function getContent() {
var content = JH_getData();
alert('content:' + content);
}
</script>
</head>
<body onLoad="init();">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%;height:100%"></textarea>
<input type=button class="button_fu_class" style="position:absolute;top:30px;left:600px;width:80px;height:23px" value="SetContent" onClick="javascript:setContent();">
<input type=button class="button_fu_class" style="position:absolute;top:30px;left:700px;width:80px;height:23px" value="GetContent" onClick="javascript:getContent();">
</body>
</html>
works, but if i copy pase the tiny_mce.sc into a script block whole page fails.
if i replace
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
with
<script type="text/javascript">
//content of tiny_mce.js
(function(d){var a=/^\s*|\s*$.....
</script>
it fails