I need to have a stylesheet link removed from my HTML head when the user clicks a link. I found the following, but I need a MooTools equivalent.
To remove a stylesheet simply give it an id
<link href="cssFolder/sheet2.css" rel="stylesheet" type="text/css" id="sheet2">
And insert the following script just before tag
<script type="text/javascript">
$(document).ready(function () {
jQuery('#sheet2').remove();
});
</script>
window.addEvent('domready', function() {
$('sheet2').destroy();
});
Information:
domready event
$
Element.destroy()
Try this:
sheet = document.getElementById(sheet2)
sheet.parentNode.removeChild(sheet)
Related
I created a ViewComponent which display a Table that require some plugin for enable specific functionalities. Inside the ViewComponent I tried to create a specific section:
#section DataTableScripts{
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
unfortunately I discovered that a ViewComponent cannot load a #section.
So I tried to include the script directly in the ViewComponent, but the problem is that the scripts are loaded before of JQuery which is loaded inside the _Layout, specifically:
ViewComponent
<script src="~/js/JQuery/jquery.dataTables.js"></script>
<script src="~/js/JQuery/dataTables.buttons.min.js"></script>
<script src="~/js/JQuery/dataTables.keyTable.min.js"></script>
<script src="~/js/JQuery/dataTables.responsive.min.js"></script>
<script src="~/js/JQuery/dataTables.select.min.js"></script>
<script src="~/js/JQuery/dataTables.bootstrap4.js"></script>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
Layout
<script src="~/js/jquery.min.js"></script>
so in this case I'll get:
jQuery is not defined
How can I manage this situation?
Simply set the Layout for your ViewComponent .
#{
Layout = "/Views/Shared/_Layout.cshtml";
}
#section DataTableScripts{
<div>It works </div>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
Here's the screenshot that works :
[Edit]
This approach does not seems a good way to do that . As #Kirk Larkin says , this will make the Layout render twice . Another patch is to write a new RefinedLayout.cshtml and set the Layout of ViewComponent as the RefinedLayout :
#{
Layout = "_RefinedLayout.cshtml";
}
#section DataTableScripts{
<div>It works </div>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
For more information , refer workaround by MortenMeisler
You are using<script src="~/js/JQuery/jquery.dataTables.js"></script> twice. Just keep it once.
Specifying another layout for viewcomponents with scripts will duplicate scripts. And #section is just ignored during rendering.
So I replaced jquery document ready with plain javascript domcontentloaded and any jquery can be written inside domcontentloaded. Not a permanent good approach but works for me.
<script>
document.addEventListener('DOMContentLoaded', function (event) {
console.log($ === jQuery)
});
</script>
This is Google Optimize CSS Delivery page. At the bottom google suggests use this code to load CSS file at the end of the page body:
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="small.css"/>
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
</body>
My questions is why not just use this one line to do the job? Especially we are in HTML5 world.
<link rel="stylesheet" type="text/css" href="small.css"/>
</body>
When a browser is parsing an HTML response, it does so line by line. And when it encounters a <link> element, it stops parsing the HTML and goes to fetch the resource set by the element's href attribute.
What the code is doing is wrapping the CSS in a <noscript> element as a fallback, and instead of blocking the page load, making a request for the CSS after the page has finished loading. It is a way to manually give a <link> element similar behavior to the <script> element's defer attribute.
Hello how do i implement the sidebar from semantic ui? I would like to use the first example on the list.
http://semantic-ui.com/modules/sidebar.html#/definition
I tried copy-pasting the whole div section and putting it on my html
For the javascript(? not really sure), the
$('.left.demo.sidebar')
.sidebar('toggle')
;
i tried putting it on
button onclick , and
function then using href to call
but sidebar is not showing.. what am i doing wrong
You have to include the jQuery library in the <head></head> section of your page:
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
And the semantic.js file:
<script language="javascript" src="[your path here]/semantic.js"></script>
Which you have to download from:
http://semantic-ui.com/
(It's located inside the folder dist. Copy that file in the desire location and populate src with the right path)
BETWEEN <HEAD></HEAD>:
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script language="javascript" src="[your path here]/semantic.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.left.demo.sidebar').sidebar('toggle');
});
</script>
When you add jQuery to your project you can trigger your sidebar by adding this code to your .js file:
$('.element.to.trigger.sidebar').on('click', function () {
$('.left.demo.sidebar')
.sidebar('toggle');
});
i have One xml file which contain some css and script links i want to apply this dynamically on page load i want to do this on page load please help?
xml File---
<template>
<theme id="1" name="default">
<css>
<name>css/style.css</name>
<name>css/normalize.css</name>
<name>css/grid.css</name>
<name>css/prettyPhoto.css</name>
</css>
<js>
<name>js/jquery.easing.1.3.js</name>
<name>js/jquery.prettyPhoto.js</name>
<name>js/js.js</name>
<name>js/jquery.stellar.min.js</name>
<name>js/waypoints.min.js</name>
</js>
</theme>
</template>
i have done this using jquery but the problem is when i adding debugger between
script and execute code step by step using firebug css and js applying and
without debugger loading in head but not applying can anyOne suggest
Xml File---
jquery Code implemented in aspx file
<script src="templates/1/jquery.xml2json.js"></script>
<script type="text/javascript">
//debugger
$.get('templates/1/SettingBasic2.xml', function (xml) {
var newTemplate = $.xml2json(xml);
$(newTemplate).each(function (key, data) {
$(window).load(function () {
switch (data.theme['name']) {
default:
$(data.theme['css']['name']).each(function (key_css, css) {
$('head').append('<link rel="stylesheet" href="' + css + '" type="text/css" media="all" />');
});
val = '';
$(data.theme['js']['name']).each(function (key_js, js) {
val += '<script type="text/javascript" src="' + js + '"></\script>';
});
$('head').append(val);
break;
}
});
});
</script>
i would like to say that you should use JS instead use, loadCSS.js for loading dynamic css, with control where to put what and also you can listen for when it gets loaded.
For scripts use $script.js which is smallest lib you can find or use require js which is the best for these stuff, but overkill for just loading scripts.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make onclick automatically through onload function
So I have the following function which is being called when I click a button.
Here is the code:
<a href="#" role="button" onClick="myFunction('parameter')">
How can I call this function as soon as page is loaded?
I tried onLoad function but doesn't seem to work.
There are multiple options for onload event.
In HTML
<body onload="myFunction('parameter')">
In Javascript
window.onload=function(){
myFunction('parameter');
};
In JQuery
$(document).ready(function(){
myFunction('parameter');
});
Put this anywhere on your page, preferably in the <head>
<script type="text/javascript">
$(function() {
myFunction('parameter');
});
</script>
See https://stackoverflow.com/a/7911809/584192 for more ways of doing it via jQuery.
Have you tried this:
window.onload = function(){
myFunction('parameter');
}
See more at: https://developer.mozilla.org/en-US/docs/DOM/window.onload
You call in myFunction document.ready or just before closing of body tag.
Within document.ready
Live Demo
<script type="text/javascript">
$(document).ready(function(){
myFunction('parameter');
});
</script>
Before closing body tag
<script type="text/javascript">
myFunction('parameter');
</script>
You can use the following code.
<script>
onload = function(){
myFunction('parameter');
}
</script>