I'm working on a website using Dreamweaver CS5 and I'm trying to load Fancybox 2.0.4 on dreamweaver cs5 while working on the website on my localhost using Live view to no avail. In addition Fancybox will not load in the same localhost environment using any browser (Safari, Firefox, Chrome, Opera). However, when I load the page to the remote website ti works perfectly. I'm using MAMP as my localhost server on MAC OS X Lion. I have been banging my head for weeks and have not found a solution. Any help will be appreciated. Below a copy of the code I'm using (copied from the fancybox website for testing purposes) that tested my theory that fancybox is not working on localhost while it works on remote server, the website with the same code working is http://www.gabrielelopez.com/Untitled-1.html
Thank you in advance for any help,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<!-- Add jQuery library -->
<script type="text/javascript" language="JavaScript" src="fancybox/lib/jquery-1.7.1.min.js"> </script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" language="JavaScript" src="fancybox/lib/jquery.mousewheel- 3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" language="JavaScript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css" media="screen" />
<!-- Add fancyBox - button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" language="JavaScript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<!-- Add fancyBox - thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css" />
<script type="text/javascript" language="JavaScript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
type : 'iframe',
});
});
</script>
</head>
<body>
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
Try to access http://localhost/fancybox/lib/jquery-1.7.1.min.js and see if you can get the file.
If not try to change the source of files you want to load.
Make sure you have read&write permissions for the folder your scripts are in.
or upload the scripts to a webserver and change all paths to the sources like:
src="fancybox/lib/jquery-1.7.1.min.js"
to
src="http://www.yourdomain.com/fancybox/lib/jquery-1.7.1.min.js"
Related
I was following the Browser section of official documentation https://bootstrap-vue.org/docs, however the BootstrapVue components just didn't render as expected.
html file as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webapp</title>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.6.0/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
<div>
<h2>Example heading <b-badge>New</b-badge></h2>
</div>
</body>
</html>
What I see is 1
Instead of 2
What should be fixed to get the components rendered properly?
The issue is resolved, I have to add below code somewhere(e.g. main.js):
new Vue(...).$mount("#div_where_vue_should_render")
I am attempting to use a document ready function I found on your site to force a fancybox lightbox to appear when a page loads. Here is the code I am using, (I found it here on your site). It does force the fancybox to appear on page load, but it forces it to open in a new page and it loses it's modal properties when I add in the $document ready function.
I'm not terribly technical, but after hours of researching and trying several methods, I'm giving and seeking help. Any support would be greatly appreciated.
<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
<link media="all" rel="stylesheet" type="text/css" href="css/fancybox.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.sameheight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
</head>
<body>
<div id="wrapper">
<a name="hidden_link" id="hidden_link" a class="lightbox" href="#popup01"></a>
</div>
<div class="popup-holder">
<div id="popup01" class="lb">
Your code is correct but you may missed to include css or js files for fancybox.
I'm hoping to be able to load an ExtJS chart inside Ext.Net(coolite) pages.
I've copied the pie chart from the ExtJS samples and have put it in an test aspx document to see it work:
heres is my pie.aspx
<html>
<head>
<title>Pie Chart</title>
<script type="text/javascript" src="ExtJs4/ext-all.js" />
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths: { 'Ext': "/app/" }
});
</script>
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/CSS/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ExtJs4/examples/shared/example.css" />
<script type="text/javascript" src="ExtJs4/examples/example-data.js"></script>
<script type="text/javascript" src="app/pie.js"></script>
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
</head>
<body id="docbody">
</body>
when I try and load it from an Ext.Window I dont see anything just an empty popup. if I go to the url directly i dotn see anything either
Here's the code I'm using to attempt to load the chart (i put it inside my existing coolite code):
<ext:Window
Title='!'
runat="server"
AutoDataBind="true"
Modal="true"
ID="ChartWindow"
Width="900"
Height="670"
Hidden="false">
<AutoLoad Url="pie.aspx" Mode="IFrame" />
</ext:Window>
Am I going about this the wrong way in trying to using the Ext.Net dll with the new ExtJS libraries? Is there another way I could go about accomplishing the same thing (ie: have a server-side window to load the ExtJS 4 charts)?
Thanks for any input.
solved!!
not sure what was the problem,my code is correct,maybe only the cache
Doubt this is possible as I don't have a 1 page app, but pretty much every view I make contains 80% of the same css/javascript, so is there any way I could tell knockoutJS a master view which everything else would just populate?
I doubt it as this is pretty much what a 1 page app is for... best I can hope for is to use something like Combres to combine all my non-changing stuff together into one resource file per type...
== EDIT ==
Adding example of what I mean, I am pretty sure I wouldn't be able to inject into multiple areas like shown below, but here is an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Master Page</title>
<link type="text/css" rel="stylesheet" href="../Assets/Styles/main.css">
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Themes/simple.css">
<link type="text/css" rel="stylesheet" href="../Assets/Styles/jquery.qtip.min.css">
{Per Page Css Here}
</head>
<body>
{Per Page Content Here}
<script type="text/javascript" src="../Scripts/Libs/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.validate.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.tmpl.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.qtip.pack.js"></script>
<script type="text/javascript" src="../Scripts/Libs/knockout-1.2.1.js"></script>
<script type="text/javascript" src="../Scripts/Libs/knockout-external-templates.js"></script>
<script type="text/javascript" src="../Scripts/Libs/cufon-yui.js"></script>
{Per Page Scripts Here}
</body>
</html>
<!-- View 1 -->
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Views/view1.css">
<h1>Some Content</h1>
<script type="text/javascript" src="../Scripts/view1.js"></script>
<!-- View 2 -->
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Views/view2.css">
<h1>Some Other Content</h1>
<script type="text/javascript" src="../Scripts/view2.js"></script>
Again, if I cannot do this its not a game breaker, just dont want to have to update every view if I update the jquery version etc...
You could declare your Javascript code relevant to each view in your views and the common code in your master page. Then call that bit of code from your master page and bind them using ko.applybindings.
I have this link to a chess game but instead of it just displaying on the page id like it to be in a pop up. iv got videos, images, websites ext to pop up but having trouble with this. iv tried using a hidden div but couldnt get it to work.
I would much appreciate it if anyone could help.
thanks in advance
stephen
site with game i want to embed.
http://www.freegaming.de/onlinegames/Casino-|-Card-|-Board-Games/Classic-Chess-Game.html
I Read about Fancybox Usage in its home page...
Make sure You Have latest fancybox, folder layout like this...
It's a quick solution :) but it works!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<a id="various4" href="http://www.freegaming.de/components/flash//classic chess.swf">Swf</a>
</body>
</html>
I think now it's the asked solution....