i am trying to implement a style switcher according to https://www.inetsolution.com/blog/march-2010/css-style-switcher-a-quick-and-dirty-how-to .
but as soon as i add a title="" to the css link, the css file won't get loaded on the page an the styles fall back to default bootstrap.
my external css files are added at the bottom of the body. the order is:
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/my-styles.css">
<link rel="stylesheet" href="css/my-alternate-styles.css">
<link rel="stylesheet" href="fontello-xxxxxxxx/css/fontello.css">
is there something i miss?
You probably did everything right (except one thing, see below*), the code that's in the article is using curly quotes ‘’ “” when it should be using straight quotes '' "".
<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a>
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>
So if you copied and pasted this part, it won't be parse correctly. This is the correct way with straight quotes:
Change style to default
Change style to alternate
Review this PLUNKER instead of the Snippet. The Snippet won't work because of the multiple stylesheets involved.
SNIPPET (Not Functional, review PLUNKER instead.)
<!doctype html>
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='default.css' title='default' rel='stylesheet'>
<link href='alt.css' title='alt' rel='alternate stylesheet'>
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<section>
<p>TEST</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='styleSwitcher.js'></script>
</body>
</html>
* I noticed you said:
...my external css files are added at the bottom of the body...
You should always place <link>s inside the <head>. Most often, JavaScript/jQuery needs the actual DOM to be loaded before it can do anything. So it's important in most situations to make sure your styling (<link> and <style>) go first and inside the <head>.
For <script>, it's best to place them at the bottom of <body> just before the closing tag </body>. See the Snippet and PLUNKER for example of <link>, <style>, and <script> layout.
Related
I've a piece of code that's been working fine until I include some css.
Here is the link to the code (the code editor here didn't like the mix of script and html and was testing my patience sorry).
Gist code snippet can be viewed here
It's using Bootstrap. The issue is this works fine (it displays a text input with a x to clear it and when you press the x it clears the text input box). When I include the...
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
though, clicking the x in the input box does nothing. Can anyone see any obvious reasons?
Without CSS included it's fine. With CSS included it fails.
The css file is basically a massive compiles .less file and probably not appropriate to place in a code box here so here it is in another gist link.
UPDATE: Here are the console logs if that helps: enter link description here
The locations of your javascript file links and event handler code are incorrect. You are calling $("#searchclear").click(..... before you load jQuery and all of the linked js files should be just before the closing body tag, not after it. Changing your html to the below will fix this issue:
Working Demo
(note that I changed some of the links to link to the CDN versions of the files to avoid errors in my demo):
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>create appt</title>
<!-- Vendor CSS -->
<link href="vendors/animate-css/animate.min.css" rel="stylesheet">
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
<!-- Following CSS codes are used only for specifics in this test-->
<style type="text/css">
.margin-bottom > * {
margin-bottom: 20px;
}
#searchclear {
position: absolute;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
</style>
</head>
<body>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control" value="LUNCH">
<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span> </div>
<!-- Javascript Libraries -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="vendors/nicescroll/jquery.nicescroll.min.js"></script>
<script src="vendors/waves/waves.min.js"></script>
<script src="vendors/bootstrap-growl/bootstrap-growl.min.js"></script>
<script src="vendors/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<script src="vendors/sweet-alert/sweet-alert.min.js"></script>
<script src="js/functions.js"></script>
<script>
$("#searchclear").click(function(){
$("#searchinput").val('');
});
</script>
</body>
</html>
<!-- css -->
<link href="css/app.css" rel="stylesheet" type="text/css">
EDIT
I had my index.css overriding my original header layout. Watch your ID's and classes!
EDIT
I'm using jQuery to load my website header and footer sections. Then display them on my index & other pages. However, it seems to resize my header whenever I try to load it. Anyone have any clue as to why that may be? I did some research on this problem but didn't found anything that helps.
Here's the websites it's affecting.
INDEX
HEADER
and here's the JSFiddle that has my code in it for the header
JSFiddle for Header
and my index code how I'm calling header
<html>
<head>
<title>HobbsBear Studios</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="_css/index.css" type="text/css" />
<link rel="stylesheet" href="_css/photobanner.css" type="text/css" />
<script type ="text/javascript" src="_javascript/photobanner.js"></script>
<link rel="icon" href="../favicon.ico" type="image/x-icon">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- A buncha stuff in the middle --!>
<div id="footer"></div>
</body>
</html>
So it is displaying all of the elements just not in the correct layout. Any ideas?
The root cause of this is because the 'Slidy container' that you are using overrides the class names that you are using in your header. You may have to change these class names. Within 2 minutes i found that the following 2 classes were breaking it for you and they are coming from the index.css page.
#menu {
position: absolute;
top: 80%;
left: 25%;
width: 50%;
font-family: 'Exo', sans-serif;
font-weight: bold;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 550px;
}
Thing is you will HAVE to change the ID's either in the content or the header because having more then one of the same ID on a page is not good practice and on some browsers will throw out an error cause it's not 'valid' html structure. ID's are meant to be used to target exact specific elements on a page where as classes are used for targeting multiple elements at once.
Fix this and you should be good to go.
I am writing a simple HTML page and using live.js for page and css reloading whenever the page was changed. But when I include -prefix-free to the page the styles are no longer reloaded automatically.
Is there any way to fix this?
Example:
HTML:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="prefixfree.min.js" type="text/javascript"></script>
<script src="live.js" type="text/javascript"></script>
<div id="colored">
some text
</div>
CSS:
#colored {
background: blue;
}
What I do is changing the color. It works until prefixfree is included.
I made a CSSrefresh fork supporting prefix-free:
https://github.com/yukulele/CSSrefresh
I have made a LiveJS fork supporting prefixfree, based on yukulélé code :P
https://github.com/newhope/live.js
I want to external CSS files side by side of html code in the body.
Why?
I am developing some templates that get included inside a page, but from those templates I cannot modify the head or add JS/CSS references to the html head section.
What I currently have is:
<html>
<head>
<!-- this i cannot edit -->
</head>
<body>
<!-- some html code -->
<!-- now comes what i can edit -->
<style>
#mywidget {
color: red;
}
</style>
<div id="mywidget">
hello
</div>
<!-- end of section i can edit -->
<!-- other html code -->
</body>
</html>
I would like turn that into something like:
<html>
<head>
<!-- this i cannot edit -->
</head>
<body>
<!-- some html code -->
<!-- now comes what i can edit -->
<!-- LINK TO AN EXTERNAL CSS FILE -->
<div id="mywidget">
hello
</div>
<!-- end of section i can edit -->
<!-- other html code -->
</body>
</html>
But I dont want the overhead of loading all the css every time the page loads, so i want to put it into an external file.
I thought of loading the external css (it will be hosted within the same domain) using javascript, then create a element and insert the content somehow...
I think this should work, however if not I think I can hack some style parser together using jquery which applies the styles at least for basic definitions.
But I am sure there must be a better way!
Any hint is appriciated!
You can use CSS's #import rule
<style type="text/css">
#import url("external.css");
</style>
putting style tags inside the body is indeed invalid according to html standrds (though it might work in some browsers)
you can put script in the body though, and you can make the script insert the style link in your head. jquery pseudocode would look like this
<body>
...
<script type="text/javascript">
$(document).ready(function() {
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
});
</script>
...
</body>
<link rel="stylesheet" type="text/css" href="style.css">-- you can put this in the <body> tag, too; it works just fine in chrome.
Is there a way to specify text to appear on the bottom and header of every page when printed?
or
Is there a CSS solution which would allow a header and footer to repeat on each printed page?
thank you
Although your question is a bit too general, I'm assuming you want that specific text to appear only on your print page and not in your website. Just do a
<p class="print-this">TEXT TO BE SHOWN IN PRINT</p>
then in your print.css
.print-this {
display: block;
}
and in your main.css
.print-this {
display: none;
}
Oh and you need to include your stylesheet with the media option as Giu said:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
Using position:fixed, should render on every page when used in a print context
http://css-discuss.incutio.com/wiki/Printing_Headers