Swapping two style-sheets CSS file using Javascript - javascript

I am writing a web-app for a mobile device, what I am doing is to change dynamically the css and store that option for the user, I have been looking all night long, googling methods and way to achieve my objective but nothing worked for me.
This is the type of button that I am using, and here comes up another problem, because I wasn't able to Check and Uncheck the checkbox.
HTML
<input id="#checkbox" type="checkbox" checked onclick="swapStyleSheet()">
The only thing that worked fine for me is this:
<head>
<link id="pagestyle" rel="stylesheet" type ="text/css" href="default.css">
<script type="text/javascript">
function swapStyleSheet(sheet) {
document.getElementById('pagestyle').setAttribute('href',sheet);
}
</script>
</head>
and in the body
<input id="#checkbox" type="checkbox" checked onclick="swapStyleSheet("Second.css")">
But this is not dynamically because once the user taps the button is not able to go back and I am not sure that works on a mobile device
Any suggestion how to proceed?

You forgot the quotes around Second.css
onclick="swapStyleSheet('Second.css')"
Without quotes, it's a syntax error (but your console is already telling you this).

Here there is an exemptional link that shows step by step how to how to switch two CSS sheet-file
But for the type of input, I am not sure how you can do

I would not recommend to change your stylesheets like this.
Here are my reasons why:
Loading another file will probably cause a "hard" transition between your two styles. You writing a mobile web-app, so imagine someone with unstable internet connection loads your application. Your web-app will be unstyled for a couple of seconds.
Browser needs to load another file (if you want to switch back, it will probably load the original file again, depending on cache settings)
Can be solved much easier with .scss for example (but also with plain .css). I have got an example for you down below. You can even add transitions, so your changes are much more pleasant.
function rotateStyle () {
document.body.id = document.body.id == 'alternate' ? '' : 'alternate';
}
body {
background-color: #FFFFFF;
color: #000000;
/* you could also add transitions */
transition: background-color 2s;
}
body#alternate {
background-color: #000000;
color: #FFFFFF;
}
<body>
<!-- your content -->
<button onclick="rotateStyle()">Change your style</button>
</body>

Related

How to handle conflicting libraries? - mathquill vs bootstrap

I'm having a sort of conflict between two libraries I'm using, Bootstrap and Mathquill. I'm using bootstrap for the layout, structure, and overall UI of the website, and Mathquill for interactive LaTeX rendering- basically, letting the user type in math in a nice, "textbook style" format.
My problem is that bootstrap seems to conflict with Mathquill, in the rendering of the math. Here is the structure of my page:
HTML
<div id="container">
<span id="input" class="mathquill-editable"></span>
</div>
CSS
#container {
padding: 5px;
width: 80%;
}
#input {
width: 100%;
padding: 15px;
margin: 5px;
}
Without Bootstrap running, the math renders perfectly. Here is a fiddle, and below is a screenshot:
With Bootstrap, I have the same code, except that I add the classes panel and panel-default to div#container. User inputted math, doesn't render well, because the spacing seems to be wrong, and it doesn't respect the boundaries of span#input. Here is a fiddle, and below is a screenshot:
I think the problem here is the bootstrap causes MathQuill's math spans (inside of span#input) to have more padding, thus the problems with MathQuill. Is there a way to let bootstrap ignore the area inside span#input?
Obviously, I could just copy the styling I need from bootstrap and just apply it to the areas I need the styling for, but this would be a hassle considering that I'm using it quite extensively.
Any thoughts?
This can be corrected by modifying the mathquill-rendered-math class in mathquill.css file.
just add the following.
.mathquill-rendered-math * {
box-sizing: content-box;
top: auto;}
You could use a iframe for applying the mathematical stylesheet only. I don't think it will cost too much speed to load if you're using MathQuill extensively.
I would do something like this:
<html>
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<iframe src="math.php#f=2*2"></iframe>
<iframe src="math.php#f=3*5"></iframe>
</body>
</html>
And then let math.php output something like this:
<html>
<head>
<link href="mathquill.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
// Generate content dynamically with JavaScript from parameter `f` so the this page can be cached.
</script>
</body>
</html>
Another approach would be creating your own custom bootstrap stylesheet. You can download the LESS sourcecode on its website.
Thanks #Tim for the great answer, but I found a better solution here. I will wrap the rules in my own class bootstrap-enabled, so that bootstrap's styles only apply where I want them to.
What I've done to solve this is find the areas where they conflict and use my custom CSS to override Bootstrap for those elements.
For instance, the powers look bad/go beyond the border because of
sup {
top: -0.5em;
}
in Bootstrap. I've reset this to 0 for mathquill elements in my CSS.
You correctly point out that Bootstrap is fiddling with padding, which makes the denominator wrap around. Specifically Bootstrap uses "border-box" rather than the default "content-box" for box-sizing. Setting:
.denominator {
box-sizing: content-box;
}
fixes this.
This fixes the two problems in your example. I'll update this post as I find more conflicts (and their sources).
I just solved mathquill + bootstrap conflict by adding css-resetter from this answer into beginning of mathquill.css (change .reset-this to .mathquill-rendered-math *)

Javascript to rotate between pages within ONE HTML page

I would like some help displaying contents (to different pages) within one HTML page using JavaScript.
This is a sample of what I have found so far: http://www.swan10.nl/stuff/test.htm however instead of displaying "FAQ question #blabla" in the box every time a link is clicked, I would like to display words and images like a normal content. Is there a way to do this?
I tried removing the CreateDiv function and replacing it with HTML codes but it doesn't work.
Thank you in advance :)
Umm, well you would need to use AJAX to pull the data into the page and display it in whatever method you choose. If you want to use a framework look into JQuery. It has nice AJAX functions. Otherwise read HERE
After re-reading your post I think you might just want to choose which div is displayed on a form at one time. This you can achieve by placing all of your divs in the same container. Then toggle their display css property.
Using jQuery it's as simple as
$('#divname').load('/path/to/file.html');
Note that the result should probably not include <html> and <head> tags (although you don't seem like you care about well formed HTML code).
I should probably also mention that you shouldn't make the client load content for you, that's what server side code is for.
Personally I would use the innerHTML property on one of your elements. It will allow you to add markup to that element. Check it out here: http://www.w3schools.com/jsref/prop_html_innerhtml.asp
<html>
<head>
<title>Multiple DIV</title>
<style type="text/css">
DIV#db {
border : 1px solid blue;
width : 400px;
height : 400px;
}
</style>
<script type="text/javascript">
var Content = new Array();
Content[0] = '<i>test1</i>';
Content[1] = '<b>test2</b><br><img src =http://www.w3schools.com/images/w3schoolslogo.gif>';
Content[2] = '<u>test3</u>';
Content[3] = '<s>test4</s>';
function Toggle(IDS) {
document.getElementById('db').innerHTML = Content[IDS];
}
</script>
</head>
<body onLoad="Toggle(0,10)">
FAQ #1
FAQ #2
FAQ #3
FAQ #4
<p />
<div id="db"></div>
</body>
</html>
I updated it to work all javascripty with the innerHTML

Wikipedia-like references without JavaScript?

I have a blog with annotated references like [1] that.
[1]Jake Smith. http://example.com ..............
[2].............
I want it so the [1] in the text is an anchor that links to the [1] in the References. I know I could do this by doing something in the text like [1]and then making every list item in the references have an id, , that is, that is,
<ol>
<li id="ref1"></li>
...
</ol>
But that's a lot of work for me to go through all the blog posts. I'm sure I could make a JavaScript or jQuery function to add this functionality, but then it would not work with JavaScript disabled. So is there some other function I don't know? Like some fancy CSS trick, or should I just use JavaScript to do this?
What are your recommendations?
You could have the links inline so it displays normally when the user has JavaScript disabled. With JavaScript on, just style it as a Wikipedia reference.
Demo: http://jsfiddle.net/6A8nX/
Your options are:
A blog plugin that detects this in the content and forms the link and adds the related id to the appropriate element for you when the HTML is being output
A script that runs and does the same thing after the HTML has loaded.
Manually adding the links by hand.
A blog plugin is your best bet, since surely this is a solved problem (though it would depend on your blogging platform, of course).
CSS is for styling, it can't add links/ids.
In addition, remember that if you are ever going to display multiple blog posts on each page, you will want to add the blog id to the anchor as well. Instead of ref1, you'll want:
ref_[blogid]_[refid]
JavaScript and CSS are the way to go, if you cannot do this on the server side. The following will do what you want:
<html>
<head>
<style type="text/css">
ref {
display:none;
vertical-align:super;
font-size:small;
}
references {
display:block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
window.onload = function(){
$("references").append("<ol>");
$("ref").each(function(index) {
$("references").append("<li><a name=\"ref_"+(index+1)+"\">"+$(this).text()+"</a></li>");
$(this).html("["+(index+1)+"]");
$(this).css("display", "inline"); // hides references unless the script runs
});
$("references").append("</ol>");
}
</script>
</head>
<body>
<p>This is a reference.<ref>http://www.google.com</ref></p>
<p>This is a another reference.<ref>http://www.yahoo.com</ref></p>
<references>
</references>
</body>
</html>
CSS is for presentation, and does not provide logic. Javascript is the best answer in this case, because it provides the tools and logic you need to accomplish the task.

Why does adding this javascript for FlashGallery cause my background image to shift up?

I've added a flash gallery to my site and the required script is causing the background image to shift.
You can see the page here: http://www.arbitersoflight.net/media/screens.html
The script in question is the "swfobject.js". I've determined this by adding/removing the
<script type="text/javascript" src="/scripts/flashgallery/swfobject.js"></script>
line to my site (which is required to run the gallery). Obviously, due to the layout of my site, I cannot having the background being moved...so this is very annoying. Unfortunately I know next to nothing about coding so I lack the skills to find the problem myself. I would really appreciate any help you guys can give me here.
I'm not sure why this is happening, but if you add the following CSS to the following tags it will fix it:
#header { position:relative; top:15px; }
.scroll-pane { position:relative; top:-15px; }
EDIT:
Another reason this might be happening is from white-space in this script tag:
<script type="text/javascript" id="sourcecode">
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
A possible way to fix this would be to save that code to a file and include it as:
<script type="text/javascript" src="/scripts/jscrollpane/jquery.jscrollpane.init.js"></script>

Valid way to add noscript in head for wrapping redirect

So I was thinking a simple way to deal with javascript being disabled by the browser would be the following:
<head>
<title>JavaScript Test</title>
<noscript>
<meta http-equiv="Refresh"
content="1;url=nojs.html" />
</noscript>
</head>
And having the nojs.html have something like:
<p>Return to test after enabling javascrpt.</p>
At the crash page.
This isn't my preferred method, but it's nice and simple until something more graceful can be worked out for users without javascript.
However, it is not valid to put a <noscript> element in the head section. The preliminary tests worked anyway, of course, but I'm superstitious when it comes to my code being valid, plus I'd hate for this to actually fail a field test.
So is there a valid way to do this? Perhaps wrapping the noscript in another element, like an object tag? Or some even simpler way I'm not thinking of?
I am not sure why you need to redirect to another page instead of just showing a message. I use JS and a little CSS to handle these situations for me. Something like this:
<head>
....
<script type="text/javascript"> document.documentElement.className += " js"</script>
<link rel="stylesheet" type='text/css' href="css/layout.css" media="all" />
</head>
<body>
<div id="noscript">Please enable JavaScript, then refresh this page. JavaScript is required on this site</div>
<div id="wrapper">
...
</div>
</body>
Then in layout.css:
#wrapper { display: none } /* Hide if JS disabled */
.js #wrapper { display: block } /* Show if JS enabled */
.js #noscript { display: none } /* Hide if JS enabled */
By doing it this way, the class is applied to the html element before the page is rendered so you won't get a flicker as the non-JS content is swapped out for the JS content.
Doug's solution is pretty good, but it has a few drawbacks:
It is not valid to have a class attribute on the html element. Instead, use the body.
It requires that you know what display type to set the element to (i.e. ".js #wrapper { display: block }").
A simpler, more valid and flexible solution using the same approach could be:
<html>
<head>
<!-- put this in a separate stylesheet -->
<style type="text/css">
.jsOff .jsOnly{
display:none;
}
</style>
</head>
<body class="jsOff">
<script type="text/javascript">
document.body.className = document.body.className.replace('jsOff ','');
</script>
<noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>
<p class="jsOnly">I am only shown if JS is enabled</p>
</body>
</html>
With this, it's valid html (no class attribute on the html element). It is simpler (less CSS). It's flexible. Just add the "jsOnly" class to any element that you want to only display when JS is enabled.
The <noscript> tag cannot be in the <head>, it must be in the <body>
The common practice is to show a message instead of redirecting, as there is no way to redirect only if javascript is disabled.
You could do it the other way around, have the first page be nojs.html, and on that page use javascript to redirect to the main content.
If you truly want a valid way to do it, make your main page the nojs.htm page and use JS to hide all content before it's shown to the user and immediately redirect to the real main page using javascript.
I like Doug's solution. However, if you need to redirect, I would remember that while there is a spec and a standard, the world of web browsers is a dirty, imperfect world. Whether or not something is allowed by the spec is not as important as whether or not it works in the set of browsers you care about.
Just look at the source code of any major site... Most of them won't validate I'd bet :)
What about:
noscript{
z-index:100;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
min-height:1024px; background:#FFF;
}
And:
<noscript>
<p>Please enable Javascript on your browser.</p></noscript>

Categories