Im trying to dynamically update the CSS-Stylesheet of my page using jQuery and everything seems to be working fine in Chrome, but sadly in IE11 doesnt seems to do the trick.
The following code shows the HTML and JS Files:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="default-style" content="style-02">
<title>Stylesheet Switcher</title>
<!-- CSS -->
<link rel="stylesheet" href="style-01.css" title="style-01">
<link rel="stylesheet" href="style-02.css" title="style-02">
<link rel="stylesheet" href="style-03.css" title="style-03">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Hello World</h1>
Change style
<select id="styleChanger">
<option value="style-01">style-01</option>
<option value="style-02">style-02</option>
<option value="style-03">style-03</option>
</select>
<br/>
<img src="icons.gif" alt="Smiley face">
</body>
</html>
And the JS File:
$(document).ready(function()
{
var theme = localStorage.getItem('style');
if (!theme) {
localStorage.setItem('style', 'style-01');
};
updateTheme();
$("#styleChanger").val(theme);
$("#styleChanger").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
localStorage.setItem('style', selectedValue);
updateTheme();
});
});
function updateTheme()
{
currentTheme = localStorage.getItem('style');
$('meta[http-equiv=default-style]')[0].content = currentTheme;
};
Does anybody knows, why after updating the "content" in the META tag IE doesnt loads the new CSS File?
Thanks for your help
Related
If I remove src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs/dist/tf.min.js" then it shows my alert. What's wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Brain Tumor </title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs/dist/tf.min.js">
alert("alert"); // doesn't work if there's src
/*async function LoadModels(){
model = undefined;
model = await tf.loadLayersModel("D:/user/diploma/models/models/model.json");
const image = tf.fromPixels("D:/user/diploma/IM-0115-0001.jpeg");
const prediction = model.predict(image);
alert(prediction);
}
LoadModels();*/
</script>
</head>
...
</html>
EDIT:
You have to add alert in another script tag.
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs/dist/tf.min.js"></script>
<script>
alert("alert");
</script>
So I have the following index.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="public/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="public/js/main.js"></script>
</body>
main.js
(function($){
// Object declarations goes here
var FormLoanView = Backbone.View.extend({
tagName: 'div',
template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
initialize: function(){
var data = this.$el.html(this.template())
$('body').html(data)
}
})
$(document).ready(function () {
var LoanView = new FormLoanView({
});
});
})(jQuery);
I am trying to create <p class="text-uppercase">Uppercased text.</p> and append it to the body in my index.html. It does return the p element, but the bootstrap styles don't kick in because "Uppercased text." does not return with uppercase letters. Anyone know why this is happening? Can bootstrap classes not be using in _.template?
It looks like your bootstrap.css isn't included properly. Try using the CDN or fixing the relative path of the css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="public/js/main.js"></script>
</body>
Here's an example using only the CSS: https://jsfiddle.net/9nm5f0x9/
You don't need to include the bootstrap JS file as another commenter stated.
I can't seem to understand what is wrong with the code.
I've added jquery and jquery UI still have the :
[objec object] has no method effect error.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<script type="text/javascript" src = 'script.js'></script>
</head>
<body>
<div id = 'container'>
<div id ='one' class = 'inside'>1</div>
<div id ='two' class = 'inside'>2</div>
<div id ='three' class = 'inside'>3</div>
<div id ='four'class = 'inside'>4</div>
<div id ='five' class = 'inside'>5</div>
</div>
</body>
</html>
And the javascript code :
$(document).ready( function () {
alert('JQ on');
$('.inside').mouseover(function () {
$(this).fadeTo(1000,1);
});
$('.inside').mouseleave(function () {
$(this).fadeTo(500,0.2);
})
$('.inside').click(function () {
$(this).effect('explode');
})
})
Any ideas?
You've included the jQuery UI stylesheet, but not the JavaScript for it.
You need to add:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
(Or another URI that supplies it) after you include the jQuery JS.
I suppose you need to include jQuery UI
I want to make a javascript file uploader. The location of css for this uploader is "~/Scripts/fileuploader/fileuploader.css" and the js location is "~/Scripts/fileuploader/fileuploader.js" . I want to do the following:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="~/Scripts/fileuploader/fileuploader.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="demo"></div>
<ul id="separate-list"></ul>
<script src="~/Scripts/fileuploader/fileuploader.js" type="text/javascript"></script>
<script>
function createUploader() {
var uploader = new qq.FileUploader({
element: document.getElementById('demo'),
listElement: document.getElementById('separate-list'),
action: '~/Scripts/fileuploader/do-nothing.htm'
});
}
window.onload = createUploader;
</script>
</body>
</html>
However, <link href="~/Scripts/fileuploader/fileuploader.css" and <script src="~/Scripts/fileuploader/fileuploader.js" become http://localhost:1304/Administration/blue/en-gb/Entity/Index/~/Scripts/fileuploader/fileuploader.js?_=1325540158292
and http://localhost:1304/Administration/blue/en-gb/Entity/Index/~/Scripts/fileuploader/fileuploader.js?
How can I change this so that it does ~/Scripts/fileuploader/fileuploader.js instead of http://localhost:1304/Administration/blue/en-gb/Entity/Index/~/Scripts/fileuploader/fileuploader.js
Why do you need to put that ~ symbol to there? If your html file (or php I don't know) are at the place where that you mean with that ~ symbol, deleting ~/ symbols will solve the problem.
<link href="Scripts/fileuploader/fileuploader.css" rel="stylesheet" type="text/css">
<script src="Scripts/fileuploader/fileuploader.js" type="text/javascript"></script>
I cannot understand why my Cufon is not working, All .js files load fine:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Company Name</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="includes/css/style.css?v=2" media="all">
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="includes/js/jquery-1.6.min.js"%3E%3C/script%3E'))</script>
<script src="includes/js/cufon.js"></script>
<script src="includes/js/Springsteel_Lig_300.font.js"></script>
<script>
window.addEvent('domready',function() {
Cufon.replace('header h1');
});
</script>
<body>
<div id="container">
<header>
<h1>Company</h1>
<div id="logo">Home</div>
Try with changing:
<script>
window.addEvent('domready',function() {
Cufon.replace('header h1');
});
</script>
to just:
<script type="text/javascript">
Cufon.replace('header h1');
</script>
It works for me after such change (using Vegur.font.js font, tested on Opera 11 and Google Chrome 11).
Edit:
Works as well with Springsteel_Lig_300.font.js font. I just donloaded Springsteel Light font (springsteel-lig.otf) and used that site to generate in js format.