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
Related
Error I recieve:
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'
The minute I apply the links for the fullcalendar, modals break.
Any reason for this?
I also did verify modals only broke when the javascript/stylesheets were added [I tested the calendar without and modal ran]
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
If I define my calendar links before all my bootstrap it breaks the calendar saying it isn't supported as well.
So something with bootstrap and the fullcalendar either fights or overwrites each other.
My other local files
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<script src="CSS/font-awesome-free-5.0.6/on-server/js/fontawesome-all.js"></script>
<link href="CSS/bootstrap-theme.css" rel="stylesheet" />
<link href="CSS/bootstrap-theme.min.css" rel="stylesheet" />
<link href="CSS/bootstrap.css" rel="stylesheet" />
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/maxcdn.bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/ajax.jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/JavaScript.js"></script>
<link href="CSS/Main.css" rel="stylesheet" />
<script src="Scripts/Splitter.js"></script>
<link href="CSS/Oxygen.css" rel="stylesheet" />
<link href="CSS/passionOne.css" rel="stylesheet" />
<link href="CSS/netdna_3.2.0_bootstrap.min.css" rel="stylesheet" />
<link href="CSS/4.2.0_font-awesome.min.css" rel="stylesheet" />
I think i remember having this issue a long time ago. I actually went into my conflicting file and looked for similar words. I think I would try naming everything in full calendar that is named modal, to modaltwo. Just a find and replace on the entire file. See if that works for you.
So a warning to people like me who like to call modal.show() from vb.net code... the required lib jquery file can't be referenced with fullcalendar.
The bootstrap jquery files are all you need.
At this very moment I can't determine why the lib jquery file caused this bootstrap modal javascript break.
so I did the following links for fullcalendar [plus all my bootstrap files]:
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script> <!-- need to calendar title -->
<%--<script src='lib/jquery.min.js'></script>--%>
<script src='fullcalendar.min.js'></script>
so that I could use a javascript function call to show a modal like so
<script type="text/javascript">
function openmodal() {
$('#myModal').modal('show');
}
</script>
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
});
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
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);
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