I am trying to open a fancybox iframe with HTML content inside for now It is just a simple html document with text but it will eventuallly be a form however when i click to test it, it simply opens up the other HTML document. how do I make it so that it opens up the html doc in an iframe. here is my html with the includes and button link that should open up the HTML in the fancybox:
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="/js/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/source/jquery.fancybox.pack.js"></script>
<script language="javascript" type="text/javascript" src="/js/source/vpb_script.js"></script>
<body>
<div id = "signup"><div><center><a class = "fancybox fancybox.iframe" href="form.html"> <img src="images/sign-up.png" width="216" height="65" /></a></center></div></div>
</div>
</div>
<script type=”text/javascript”>
$(document).ready(function() {
$(".fancybox").fancybox({
width : '70%',
height : '70%’
});
});
</script>
</body>
</html>
Please help :)
You have an incorrect single quote at the end of the height attribute. You're using some sort of weird raised comma instead of a single quote and it's causing a javascript error.
See this fiddle where I've gotten it working. http://jsfiddle.net/manishie/DRvyq/
html:
<a class="fancybox" data-fancybox-type="iframe" href="http://disney.com">Iframe</a>
javascript:
$(document).ready(function () {
$(".fancybox").fancybox({
width: '70%',
height: '70%'
});
});
Related
I am using the Emojione Area JavaScript plugin. However, I am only getting the text area displayed, without the emoji pane.
Here is my HTML file :
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet"
});
</script>
<div class="row">
<div class="span6">
<textarea id="emojionearea1">Default :smile:</textarea>
</div>
</div>
</body>
</html>
There is two things to fix on your code:
You need to import the Javascript File from jQuery before EmojioneArea
Your Script in Javascript doesn't close the function $(document).ready()
So the should should be:
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="row">
<div class="span6">
<textarea id="emojionearea1">Default :smile:</textarea>
</div>
</div>
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet"
});
})
</script>
</body>
</html>
The Popup will appear on the Right side because Left is not a valid value for the propertie pickerPosition. According to the documentation (www.github.com/mervick/emojionearea) the only valid values are top, right and bottom. The value top is the default one
I Hope it helps you
Best regards
I had a similar issue with the emojioneArea panel not being visible no mater what the position was set to. I added the property inline: true and it showed up.
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet",
inline: true
});
})
I was able to set shadowbox to initailize upon page load to show a photo, but I need it to show a bunch of photos, and after looking at the shadowbox site, I cannot find how to do this.
html for page:
<link rel="stylesheet" type="text/css" href="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
window.onload = function() {
Shadowbox.open({
content:'images/IMG00255-20110531-1435.jpg',
player: "img",
title: "Before and After- Hyundai Tiburon",
height: 400,
width: 700
});
};
</script>
I couldn't find a way to do it with shadowboxes built in functions but this is pretty simple and should work fine.
<!DOCTYPE html>
<html>
<head>
<title>Shadowbox</title>
</head>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<style type="text/css">
/* Hide all <a> tags */
a[rel~="shadowbox"]{
display: none;
}
</style>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- on page load, fake a click to call shadowbox -->
<body onload="document.getElementById('first').click();">
<!-- put all gallery items like this. Only the first link needs the id "first". -->
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="jScrollPane.css" type="text/css" rel="stylesheet" >
<script src="jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jScrollPane.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="abc">
</div>
</body>
</html>
test.css
#abc{
width: 300px;
height: 300px;
}
test.js
$(document).ready(function(){
$('#abc').jScrollPane();
setInterval(function(){$('#abc').append('<p>UDB</p>');},1000);
}) ;
I am trying to create a box in which contents can be added and as the box is full the content can be seen by scrollling for example a message box or notification box. But whenever i try to add jScrollPane() i cant add recursively the child by using append().
That's because jScrollPane transforms the html markup of the target element by adding 2 nested elements: jspContainer and jspPane. So you should be appending elements to the jspPane element inside #abc:
var target = $('#abc').jScrollPane();
setInterval(function()
{
target.find('.jspPane').append('<p>UDB</p>');
target.data('jsp').reinitialise();
},1000);
EDIT
Also you should call reinitialise after each append to allow jScrollPane to refresh it's dimensions to accomodate the new content. Here is a working fiddle: http://jsfiddle.net/yC5k9/
http://jspears8.mydevryportfolio.com/gallery1.html
I uploaded to my school portfolio in hopes of giving a real vision of what is taking place. The the first fancybox element you open doesn't work. I'm using a prebuilt fancybox css. I've tried several others. In my actual page, it loads an empty fancybox and will load anything cycled through, but that first click when you wander to the page is blank white each time.
What am I doing wrong? This is the gallery below.
<div id="gallery">
<img src="images/thumbs/AlatheusEberwolf_t.jpg" width="94" height="94" alt="Alatheus Eberwolf">
<img src="images/thumbs/Quentin_II_t.jpg" width="94" height="94" alt="Quentin II">
<img src="images/thumbs/RolithAlinaEngaged_t.jpg" width="94" height="94" alt="Rolith and Alina Get Engaged!">
<img src="images/thumbs/RolithAlinaMarried_t.jpg" width="94" height="94" alt="Rolith and Alina Get Married">
<img src="images/thumbs/Spear-of-the-Ancients_t.jpg" width="94" height="94" alt="Spear of the Ancients">
<img src="images/thumbs/Tep_Itaki_t.jpg" width="94" height="94" alt="Tep Itaki">
</div>
Javascript
$(document).ready(function() {
$('#gallery a').fancybox({
overlayColor: '#0CF',
overlayOpacity: .3,
transitionIn: 'elastic',
transitionOut: 'elastic',
easingIn: 'easeInSine',
easingOut: 'easeOutSine',
titlePosition: 'outside' ,
cyclic: true
});
}); // end ready
In a quick review of your page I can see the following:
You call twice jQuery (_js/jquery-1.7.2.min.js and _js/jquery.js)
Your call to the jQuery must be before the fancybox call
Take a look at the <head> tag in your HTML:
<meta charset="utf-8">
<title>Course Project</title>
<link type="text/css" rel="stylesheet" href="_css/layout.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js">
<script src="_js/jquery-1.7.2.min.js">
<script src="_js/jquery.easing.1.3.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
<script src="_js/jquery.js" type="text/javascript">
<script src="_js/interface.js" type="text/javascript">
<style type="text/css">
<script type="text/javascript">
<link type="text/css" rel="stylesheet" href="dockstyle.css">
<style type="text/css">
<link type="text/css" rel="stylesheet" href="navstyle.css">
Your fancybox example works fine if you have only:
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script src="_js/jquery-1.7.2.min.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
So I believe some javascript methods are overiding.
I hope this helps
In the code below, the color box is working and the image showing. When I tried to integrate Jcrop with it, it doesn't.
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
</script>
<script src="../colorbox/colorbox/jquery.colorbox.js" type="text/javascript">
</script>
<script src="../jcrop/js/jquery.Jcrop.js" type="text/javascript">
</script>
<link href="../jcrop/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<link href="../colorbox/example1/colorbox.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function () {
$(".example1").colorbox();
$(document).bind('cbox_complete', function(){
$('#colorbox .example1').Jcrop();
});
});
</script>
</head>
<body>
<p>
<a href="../jcrop/demos/demo_files/flowers.jpg" class="example1">
crop
</a>
</p>
</body>
Remove the script files to the master / parent page, and this should now work..