I cannot find info anywhere on exactly how to setup respond.js.
I unzipped into htdocs - is this correct? Or do I just need respond.min.js in htdocs?
Then simply reference the file like this...
<script src="respond.min.js"></script>
Currently, I have this in my head section, have tried before and after my media queries, yet NO stylesheet is used.
Is there a tutorial anyhwere on exactly how to set up resonse.js, as I have no idea if I am doing something wrong or whether there is another problem.
Any help would be much appreciated, my site is FINALLY finished yet I don;t want it to go live without media queries and currently if I use media queries, no stylseheet is loaded at all in IE8.
Thanks
This is my current code;
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://localhost/respond.min.js"></script>
<![endif]-->
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:600px) and (max-device-width:1024px)" href="http://localhost/oldScreen.css">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:1025px)" href="http://localhost/home.css">
<title>Eastbourne Netball League[Home] </title>
</head>
Alright, since the file is loaded, the problem has to come from one of these 2 points:
From the documentation:
Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop
#media screen and (min-width: 480px){
...styles for 480px and up go here
}
Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media'd content)
My guess is the second point :)
I hope it helps.
[edit]
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" media="screen and (min-width:600px) and (max-width:1024px)" href="http://localhost/oldScreen.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width:1025px)" href="http://localhost/home.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://localhost/respond.min.js"></script>
<![endif]-->
<title>Eastbourne Netball League[Home] </title>
</head>
If this doesn't work, put it this way inside your CSS file:
#media {min-width:600px) and (max-width:1024px) {
/* your css here */
}
#media {min-width:1025px) {
/* your css here */
}
Therefore, you can even put all your CSS in the same file
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
});
I have tried to install lightbox, fancy box, and bootstrap. None of them work for me, and I have linked and re-linked everything. At this point, I do not know what to do. It opens up as a jpeg in a separate window, or if I add in the js before any other js, it loads way at the bottom of the page with no lightbox effects/appearance.
<head>
<title>Home: Central Pacific</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Central Pacific is a 300,000 square foot Class “A” Industrial Development in the Heart of the San Francisco Bay Area" />
<meta name="keywords" content="Real Estate, Industrial, Development, San Francisco, Bay Area, Union City" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
And.. (without the spaces)
<div id="gallery">See Location Map</div>
Here is my dropbox folder for the website
https://www.dropbox.com/sh/n21lwdnr0mathgi/AACXVNAHBwEcJ9Skl24yjk0Aa
You are not suppose to load the jquery, lightbox and so on in the <head>. You are suppose to load it in the bottom of your code, before the closing of your </body> tag.
You can see Bootstrap Example here:
http://getbootstrap.com/getting-started/
See "Basic Example".
I fixed the problem by taking out the dropotron script, as they were competing somehow. Then, I moved the scripts to the bottom of the body tag. I should mention that the lightbox I used above STILL didn't work, but fancy box did.
Your mileage may vary but if have a ton of other JS files and believe there's a conflict (here's a last-ditch measure) remove the HTML and add it back again with jquery. As for why this works it removes all the other event listeners and stops them from interfering. As for why it's doesn't remove the lightbox listeners I'm not sure.
let original = $('#gallery').html();
$(item).html(original);
I'm trying to get bootstrap and less.js working but I can't succeed...
I have not worked much with less in the past, so I'm wondering if I'm missing something...
It is runing on a synology server. On runtime it seems to generate the boostrap css as it should "less:sandbox-css-bootstrap" is append to the html but it does'nt get the value from variables.less
Here's my head
<meta charset="utf-8">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet/less" type="text/css" href="css/bootstrap.less">
<script type="text/javascript" src="js/less-1.3.3.min.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
Does anyone know what am I doing wrong?
Thanx in advance
Change the order of your initialization. Place dependencies above the others. like place bootstrap.less above all other CSS's
When checking my site on a mobile device (iPhone) it is clear that it is still loading the non mobile stylesheet. Here is the code in the header, can someone tell me whats wrong?
<link rel="stylesheet" href="styles.css" type="text/css" /> <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="styles_mobile.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/onclick.js" type="text/javascript"></script>
<script>
if (screen && screen.width > 480)
document.write('<script type="text/javascript" src="js/jqFancyTransitions.js"><\/script>');
</script>
Any reason why this is not using the "styles_mobile.css" as is intended?
In any response please be aware that I have limited knowledge of javascript
I think it needs a meta viewport tag:
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
This means use the device width, not the width that the browser in the device reports, which is bigger.
Technically, to do media queries by the book you need to add a "media" attribute to the element, or add #media entries to your CSS.
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