So I'm using the VideoJS plug on this site that I'm building. I'm implimenting here like this:
<link rel="stylesheet" href="css/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
<style>
#import url(css/vim.css);
</style>
</head>
And vim doesn't seem to override the video-js.css calls. I've tried this with other skins and the same result happens. I attempted to change the placement in reverse, but that did not suffice. Please let me know if there is something that I could be missing.
I think #import rules usually need to come before other rules, or they'll be ignored in some browsers. Why can't you just link to the second stylesheet as you do the first? Do you need to import for certain media?
Nevermind, folks. I forgot to add the function at the top of the page to enable this.
Related
I'm trying to import jQuery, but for some reason, it's not letting me, and it's giving me the following error:
[10:16:02.965] ReferenceError: jQuery is not defined # http://127.0.0.1:8020/project/js/jquery-191.js:338
I don't have any javascript that occurs before I import jQuery, which seems to be the reason most people get the "reference error". Here's my code under the<head> tag:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home | Howard University Astronomy</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!--get javascript -->
<script src="js/jquery-191.js"></script>
Thanks for your help.
EDIT: can someone explain why I'm getting downvoted for a legitimate question that I'm providing all the documentation for, answering all the questions presented to, and that hasn't been answered by a previous question?
I see that you have said you dont want to rely on an external server which is a good idea at its core but doesn't take advantage of the fact that most people have jquery cached in their browsers through the most popular CDN.
There is an extra trick you can do which is to use a fallback copy if the CDN fails:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js">\x3C/script>')</script>
http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx
(Note: I changed the MS hosted snippet Scott provided to Google because of this post)
As to your actual problem it seems like you might have got a dodgy copy of the jquery.js file as its not a standard naming pattern i've seen before so wondering if its been messed up somehow.
Try replacing your script link with this:
<script src="js/jquery-191.js" type="text/javascript" charset="utf-8"></script>
I'm trying to build dynamic CSS stylesheet changer, as simple as possible, for Bootstrap / Bootswatch. I've seen many sources, but I found that most examples relies on additional title attribute of link tag. And thus, doesn't work in all browsers or works wrong (mainly because of this problem).
I also noticed, that using title or rel="alternate stylesheet" isn't perfect idea, as though styles listed this way are "ignored" (not rendered) upon initial page load, they are somehow parsed, making browser unbelievable slow. I've added two or three Bootswatch styles next to default Bootstrap stylesheet and I nearly killed my Chrome, though page was rendered only with default styling.
Can someone show an example of dynamic stylesheet changer or proper use-case of title and rel="alternate stylesheet" attribute, that would not consume all my computer resources?
Turned out to be as simple as declaring "default" stylesheet using title attribute:
<link href="assets/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen" title="main">
Then adding some links in form of list (can be used for building Bootstrap's dropdown):
<ul class="dropdown-menu">
<li><i class="icon-fixed-width icon-pencil"></i> bootstrap.min.css (Default)</li>
<li><i class="icon-fixed-width icon-pencil"></i> bootstrap.cyborg.min.css (Cyborg)</li>
</ul>
with rel attribute poining with full path to additional stylesheet.
And then adding a very simple jQuery function:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($)
{
$('body').on('click', '.change-style-menu-item', function()
{
$('link[title="main"]').attr('href', $(this).attr('rel'));
});
});
/*]]>*/
</script>
Works like a charm.
If you have only one stylesheet in entire page, you can omit adding title attribute to link tag and "catch" it using simple $('link') selector instead of $('link[title="main"]'). Since I had other stylesheets included (bootstrap-responsive.min.css), referencing "changeable" stylesheet with title attribute was obligatory.
I would take a look at the twitter bootstrap project, they in my humble opinion have extremely cleanly written code and also should be every browser compliant.
http://twitter.github.io/bootstrap/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
and you should take a look at this page.
http://twitter.github.io/bootstrap/scaffolding.html#responsive
I am trying to learn about LESS. After a very quick success on one site, I am now struggling on another while using pretty much the same code:
<link href="css/reset.min.css" rel="stylesheet" />
<link href="css/styles.less" rel="stylesheet/less" type="text/css" />
<script src="js/less-1.3.1.min.js" type="text/javascript"></script>
Should I change anything on the server to make it work?
I get a 404 when trying to access your LESS file: http://belleandvidere.co.uk/dev/styles.less
Please check your path.
At one point or another I ran into an issue with the order of the HTML properties (it shouldn't matter but it did).
I found that <link rel="stylesheet/less" type="text/css" href="styles.less"> would work, while <link href="styles.less" rel="stylesheet/less" type="text/css"> would not.
I'm pretty certain that less.js incorrectly checks for <link> elements. This may or may not still be an issue.
Try invoking the LESS JavaScript file before the LESS CSS Document.
I am assuming this due to the HTML DOM.
With the HTML DOM the HTML is loaded, the CSS is loaded, and then the JavaScript is loaded.
Try to place the script tag about the link tags.
Thanks,
I hope that helps.
I have an issue thats causing me some headaches. I'm trying to print a report and format it correctly with a print.css but it completely ignores my css everytime. Has anyone had this issue before? I made sure the CSS file is in the correct directory, etc but still no luck.
Here is my template:
Note: I use javascript to control the print button and inside the javascript is where I have included the CSS link. I have also tried putting it just on the HTML page but that didn't help.
...
<script type="text/javascript">
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,'+
'width=900,height=400, scrollbars=1')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<link rel="stylesheet" type="text/css" '+
'href="/media/css/print.css" media="print"/>\n')
newwin.document.write('<script>\n')
...
Now for this project I am using Ubuntu 10.10, and Firefox 7. If that helps at all.
Edit
I installed the web developer toolbar for firefox. It allows you to view the page as different medias. Now when I click print, it shows all my style changes, but when I print, it doesn't follow them.
<html>
<head>
<title>your website title</title>
<link rel="stylesheet" media="screen" href="/media/css/mainStyle.css" type="text/css">
<link rel="stylesheet" media="print" href="/media/css/print.css" type="text/css">
</head>
<body>
<input type="button" value="Print" onClick="javascript:window.print();" />
</body>
</html>
Maybe you might wanna give above HTML template a go, and see if that works for you or suits your needs.
In my opinion, your proposed function is actually better to be written on the server side rather than the client side with javascript, as you are trying to dynamically generate html page in there. You can output that page as print.html or something, and once it gets sent to the client, you then apply the print.css style and do the printing. Anyway, just a few ideas here, hopefully it helps a bit in your case. Cheers.
Not sure if this helps, but the #media print{} is supposed to encapsulate all styles during a print job.
<style type="text/css">
#media print{
/* Make the HR tag have 50 px spacing above and below */
hr{ padding: 50px 0px; }
}
</style>
This is SUPPOSED to handle this type of styling. The script could still be responsible for including the css file, but the #media print{} would tell all styles embedded in it to apply only to print jobs.
Do you know any method to optimize this HTML Code to IE6 or 7 (or 8) without adding any HTML elements, or the IE is skipping all the HTML5 elements?
If i just want to format elements with CSS, - i dont want to use other features - is the document.createElement("nav") DOM element create enough to scam IE and make a plain HTML document?
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>title</title>
<link type="text/css" rel="stylesheet" href="reset.css">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<header>code of header</header>
<nav>
code of nav
</nav>
<section>
code of gallery
</section>
<article>
code of article
</article>
<footer>code of footer</footer>
</body>
</html>
Thank you.
More info about DOM create elements in IE6, IE7 and IE8 with html5 enabling script ยป here
This code should work fine with IE6. Though, you may want to define your elements in your stylesheet to give them the properties you are looking for. Something like this:
header, footer, nav, section, article {
display:block;
}
EDIT: Oops. I am wrong about this. Shouldn't have posted so quickly. Reading this (which you probably just read as well): http://blog.whatwg.org/supporting-new-elements-in-ie
It appears that the Javascript hack you indicated above may be the only way to get these elements to render properly.
This script looks to be pretty handy and may solve your problem nicely, though I have not tested it: http://remysharp.com/2009/01/07/html5-enabling-script/
IE8 does not support html5, just some random bits and pieces of it.
IE6 or 7 even less.