Ive got this <head>:
<head>
<link rel='stylesheet' href='/animated/animate.css' type='text/css' media='all' />
<script type='text/javascript' src='/animated/animated.js'></script>
</head>
and I need to have these two files disabled in IE8 and lower.
Is there any way how to do that?
Use conditional comments. In this case you can use -
<head>
<!--[if gt IE 8]> <!-->
<link rel='stylesheet' href='/animated/animate.css' type='text/css' media='all' />
<script type='text/javascript' src='/animated/animated.js'></script>
<!-- <![endif]-->
</head>
Note that: gt means 'greater than' while gte means 'greater than or equal'.
Learn more about conditional comments from here
Related
I am new to jQuery, and even newer to Dreamweaver CC. I am trying to use the animated version of toggleClass that is available to jQuery-ui, but I cannot load jQuery ui for some reason. Dreamweaver already has some jQuery elements which might be interfering, but I cannot be sure.
index.html
<!DOCTYPE html>
<html lang="en">
<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>Stargazer</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.min.css" type="text/css">
<!-- <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/caesar-dressing:n4:default;lobster-two:n4:default;chicle:n4:default;henny-penny:n4:default;immi-five-o-five:n4:default.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui.min.js" type="text/javascript"></script>
<script src="jQueryAssets/testing.js" type="text/javascript"></script>
</head>
The last 2 lines are where I attempt to load jQuery-ui as well as my custom sheet where I write all my jQuery. When I attempt to test if jQuery is loading using if (jQuery-ui) {alert('loaded')} I receive no alert.
I have tried several similar loading methods but nothing seems to work. Any help is greatly appreciated.
Try wrapping your test in a doc ready function"
$(document).ready(function(){
if (jQuery-ui) {
alert('loaded')
}
});
Or try
$(document).ready(function(){
$.ui.version
});
This question already has answers here:
How can I set CSS only for specific IE browsers?
(7 answers)
Closed 8 years ago.
I need to add reference to a external css file in my HEAD of page.
But it should be added only for IE browser.
Is this possible ?
<head>
<link type="text/css" rel="stylesheet" href="/themes/jfile.css" />
</head>
Simple
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="/themes/jfile.css" />
<![endif]-->
Or
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href='/Common/Css/ie6.css' type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href='/Common/Css/ie7.css' type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href='/Common/Css/ie8.css' type="text/css" />
<![endif]-->
I'm stuck here for 2 days now, and I really hope you can help me.
I'm trying to use this theme I bougth on wrapbootstrap ( https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR ) with backboneJS and requireJS
So, basically, I have this file structure for the exemple :
index.html
app/
|___ js/
|____ main.js
assets/
|___ js
|___ ace.min.js
|___ ace-extra.min.js
|___ ace-elements.min.js
|___ bootstrap.min.js
|___ jquery.min.js
libs
|___ require
|___ require.js
So, when I use this basic template :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css" />
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script src="assets/js/ace-extra.min.js"></script>
</head>
<body>
<!--basic scripts-->
<script src='assets/js/jquery-2.0.3.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--page specific plugin scripts-->
<!--ace scripts-->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
</body>
</html>
No errors, all work perfectly. Then, I want, to load all the script
ace-extra.min.js
jquery.min.js
bootstrap.min.js
ace-elements.min.js
ace.min.js
In this order, juste like the template.
So, I add this line in the head
<script async data-main="app/main" src="libs/require/require.js"></script>
and created the main.js like this :
require.config({
// The shim config allows us to configure dependencies for
// scripts that do not call define() to register a module
shim: {
bootstrap: {
deps: ['jquery']
},
ace: {
deps: ['aceElement']
},
aceElement: {
deps: ['aceExtra', 'bootstrap', 'jquery']
}
},
paths: {
jquery: '../assets/js/uncompressed/jquery-2.0.3',
bootstrap: '../assets/js/uncompressed/bootstrap',
ace: '../assets/js/uncompressed/ace',
aceExtra: '../assets/js/uncompressed/ace-extra',
aceElement: '../assets/js/uncompressed/ace-elements'
}
});
require([
'jquery',
'bootstrap',
'ace'
], function() {
});
and I remove all the scripts, so I have this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css" />
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script async data-main="app/main" src="libs/require/require.js"></script>
</head>
<body>
...
</body>
</html>
but here, I have an error
Uncaught TypeError: Object #<Object> has no method 'handle_side_menu'
comes from here :
jQuery(function($) {
//ace.click_event defined in ace-elements.js
ace.handle_side_menu(jQuery);
ace.enable_search_ahead(jQuery);
ace.general_things(jQuery);//and settings
ace.widget_boxes(jQuery);
/**
//make sidebar scrollbar when it is fixed and some parts of it is out of view
//>> you should include jquery-ui and slimscroll javascript files in your file
//>> you can call this function when sidebar is clicked to be fixed
$('.nav-list').slimScroll({
height: '400px',
distance:0,
size : '6px'
});
*/
});
despite of this generated code, (Chrome dev tool) :
<html lang="en"><head>
<meta charset="utf-8">
<title>Blank Page - Ace Admin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css">
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css">
<link rel="stylesheet" href="assets/css/ace-responsive.min.css">
<link rel="stylesheet" href="assets/css/ace-skins.min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script async="" data-main="app/main" src="libs/require/require.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="app/main.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="app/../assets/js/uncompressed/jquery-2.0.3.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="app/../assets/js/uncompressed/bootstrap.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceExtra" src="app/../assets/js/uncompressed/ace-extra.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceElement" src="app/../assets/js/uncompressed/ace-elements.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="ace" src="app/../assets/js/uncompressed/ace.js">
</script></head>
<body style=""></body></html>
So, I really don't understand, I would be really happy if anyone have an answer.
Thansk !
Kai23
So, it turns out it's the order in which you are doing things in the ace.min.js file. To fix it, just move your second jQuery function which contains the ace.handle_side_menu to the bottom of your ace.min.js file. It is a bit of a coincidence, but here's why.
When require loads your main.js file, it starts asynchronously loading your js files. This gives the rest of the page and DOM a chance to load (which is precisely why we like require.js). By the time your ace.min.js file gets loaded, the window has already signalled the onReady event. So, in your ace file where you have
jQuery(function($) {
ace.handle_side_menu(jQuery);
jQuery immediately realizes the DOM is ready and immediately calls the function you're passing in (the function($) part). This function then starts to run before handle_side_menu gets attached to the ace object. If you use the Chrome debugger tools and place breakpoints on both places where you have handle_side_menu, you'll see that the one inside the jQuery callback gets hit first.
dude, it's a coincidence.
I used the same theme for my project, you can look into my html template:
https://github.com/pjyong/chenxi/blob/master/src/ChenXi/MainBundle/Resources/views/Default/index.html.twig
and my main JS file:
https://github.com/pjyong/chenxi/blob/master/web/app/js/main.js
If you have more questions, I will answer them.
I would like to use this example of a sort of modal window as seen here: http://www.insight51.com/surf/ (just click in any image to see it in action), I checked the source of the page and I can see I will need a lot of css and scripts... this is not a normal popup...:
<meta name="location" content="HemiEU" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/insight/css/framework.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/insight/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/insight/css/jquery.modal.css" />
<!--[if lt IE 9]><link href="themes/insight/css/ie8.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->
<!--[if IE 6]><link href="themes/insight/css/ie6.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="themes/insight/js/jquery.min.js"></script>
<script type="text/javascript" src="themes/insight/js/combined.js"></script>
<script type="text/javascript" src="themes/insight/js/common.js"></script>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
can you help me out?
the website I am working on is www.thedayistoday.co.uk.
The site is using jQuery for general JavaScript sexiness, and the jqModal plugin for the modal dialog boxes. I did also notice some other jQuery plugins on the page (such as jQuery Masonry) but those don't really have anything to do with the modal dialogs.
Here's a very minimal demo to get you started: http://jsbin.com/aqase5
Just an FYI, there are a ton of other jQuery modal window/lightbox plugins if you want something different. A small sampling:
https://stackoverflow.com/questions/756342/whats-your-favorite-jquery-modal-plugin
Fancybox
jQueryUI Dialog
DOM Window
Shadowbox.js
Colorbox
In the case the html is opened in IE I want to use a different style sheet ONLY. However, it seems that it is pulling some elements properties from style.css as well. How can this be? Doesn't the [if gte IE 5] ensure only IEstyle.css is used? What is the best way to fix this?
Thanks.
<head>
<title>!</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="rows.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![endif]-->
<script type="text/javascript">callonload();</script>
</head>
Not totally getting the thinking behind what you are doing, but you need this:
<!--[if !IE]><!-->
<link rel="stylesheet" href="style.css" type="text/css">
<!-- <![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![endif]-->
Basically, "IF NOT IE" for the other styles, and "IF IE" for the styles you want.
styles.css still applies for styles that are not explicitly overridden in your IE stylesheet. The way you put it, styles.css gets always loaded.
To prevent loading styles.css in IE use
<![if !IE]>
source: MSDN
Basics on conditional comments: http://www.quirksmode.org/css/condcom.html