Fancybox iframe openning only first link - html

I am a layman in html, but for my personal website, I am trying to add some lightbox (Fancybox).
The problem I am facing is that it is only opening the first link as the lightbox, not the 2nd one. If I interchange the position (i.e. the 2nd link which was not opening became 1st) then the present first link is opening, and not the previous one.
I have tried to make an minimal example:
index.html:
<!DOCTYPE html>
<head>
<title>Learning Fancybox</title>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</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" />
<script type="text/javascript">
$(document).ready(function() {
$("#iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
</head>
<body>
<div id="content">
<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td>
<h3>Trying Fancybox</h3>
<li><a id="iframe" href="jbn.html" />content1</a></li>
<li><a id="iframe" href="chabi.html" />content2</a></li>
</td>
</tr>
</table>
</div>
</body>
</html>
content1(jbn.html)
<!DOCTYPE html>
<head>
<title>content2</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="content">
Some txt for content2
</div>
</div>
</div>
</body>
</html>
and content 2(chabi.html)
<!DOCTYPE html>
<head>
<title>lb content1</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="content">
Some txt here
</div>
</div>
</div>
</body>
</html>
As it is now, the jbn.html is opening as lightbox, chabi.html is opening as an independent webpage.
Please help
UPDATE It is possibly not a fancybox problem, as I have just checked, if I add an identical id as #iframe2 and change the id of the 2nd links id to that, it is working properly.
Please help.

Problem is solved by changing the id to class(.iframe)

Related

Angularjs UI-Router Issue

So here I have my index.html and app.js. I'm trying to use prismjs to show a code block on my view .If you run the snippet below me. This is how I like my app to do. But in my real app I'd like to not include a tag that contain my secondview.html. I would like it to be in its own separate file. But when I do that the prism css file won't work inside the ui-view.
Is there any configuration I would have to do? I believe it has something to do with the ng-binding.Here is what it looks like inside the ui-view. I wish I can provide another link to show you what it looks like outside the ui-view but I don't have enough reputation to post more than 2 links...lol But it just pretty much has all of the classes that the prism js injected into the elements which the prism.css will render.
This is what it looks like when the view is in its own separate file(Not Working)
The Code below me has the secondview.html inside the index.html(Works)
myApp = angular.module("myApp", ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',
templateUrl: 'secondview.html'
});
});
<html ng-app="myApp">
<head>
<!-- <meta charset="utf-8" />-->
<title>AngularJS Prism</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
</head>
<body style="background-color: grey">
<h1>Firsts View(Not Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
<script type="text/ng-template" id="secondview.html">
<h1>Second View(Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</script>
<div ui-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Need a directive :
.directive('ngPrism', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
Prism.highlightElement(element.find('code')[0]);
}
}
})
Then wrap your code html by <div ng-prism> ... </div>:
<div ng-prism>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</div>
Then it worked.
Plunder demo here.

Angularjs not working

I am working on web project where i am working on angular js to display images and if i click an image it will zoomed. I have created one sample application its working fine but when i started to create one sample application it gives warning for its internal tags.
My Html file where it gives warnings(for ng-app,ng-controller,ng-src,ng-repeat) ..
<!DOCTYPE html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <script src="http://code.angular.org/angular-1.0.0rc4.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="${pageContext.request.contextPath}/js/underscore-min.js"></script>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
<script src="${pageContext.request.contextPath}/css/album.css"></script>
<title>Angular album</title>
</head>
<body>
jsp
<div ng-controller="AlbumCtrl">
<div id="albumImage">
<img ng-src="{{currentImage.image}}" alt="{{currentImage.description}}">
</div>
<div id = "thumbWrapper">
<ul id="thumbList">
<li ng-repeat ="image in images" ng-click="setCurrentImage(image)">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
</div>
</body>
</html>
Seems that your problem is here:
<div ng-controller="AlbumCtrl">
I don't see where this controller is defined. It's possible you got your file extension wrong, and that's why:
<script src="${pageContext.request.contextPath}/css/album.css"></script>
<!-- I would have expected to see .js, not .css, in the path above -->

innerHTML onClick issue

I am trying to change the content of the div which is a part of the parent page using the child page. In order to update the content, I use innerHTML. The contents appear just fine but the onclick event on the images does not work. Here is my code, the code works in Mozilla firefox but does not work in Chrome and Safari. Also, it does not work on iPad safari browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TEMP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="scripts/jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function() {
//this is the parent element
parent.document.getElementById('hd').innerHTML = document.getElementById('temp').innerHTML;
});
</script>
</head>
<body>
<div id="fakeshare" style="float: left;margin-top: -30px;z-index:1000000;position: absolute;vertical-align: middle">
</div>
<!-- this is the content I try to populate in the parent element -->
<div id = "temp" style="visibility: hidden">
<div style="float:left">
<img id="backbtn2" class="imgtopbutton" src="images/facebook-cancel.png" onclick="javascript:history.go(-1)" align="left" style="margin-left:12px;margin-top:10px"/>
<img class="imgtopbutton" src="images/facebook-post.png" align="right" style="margin-top:-31px;margin-left:545px" onclick="javascript:history.go(-1)">
</div>
</div>
</body>
</html>
Just try:
$("#hd").html($("#temp").html());
Try using $('#hd').parent().html($('#temp').html());

Back button not working in jquery mobile

Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...
You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

iFrame not loading on page load (jQuery Mobile)

I am having trouble getting an iFrame to display the first time that my jQuery mobile backed page loads.
I have an iFrame as follows:
<iframe id="manual" src="pdf/manual.pdf" style="width: 100%; height: 100%;"></iframe>
And for some reason, when the page loads, the iFrame fails to load with it. I can only see the PDF file if I REFRESH the page. Why is that?
Why is the PDF file not showing up in the iFrame in the first place without a page refresh?
Thanks everyone for any insight.
EDIT:
When I try to ope the page with safari, I get the following warning:
Resource interpreted as Document but transferred with MIME type application/pdf.
Could that have something to do with why the PDF doesn't load correctly?
i just tried with the rel="external" it works without refreshing.. The first link is ajax call and the second link is not. it was straight forward, not sure if im missing something else you have..
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div>
<div data-role="content">
Another Page
View User Manual
</div>
</div>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<iframe id="manual" src="FocusFree.pdf" style="width: 100%; height: 100%;"></iframe>
<div data-role="header" data-theme="none">
<h1>Another Page</h1>
</div>
<div data-role="content" data-theme="none">
<p>This is another page, dude.</p>
</div>
</div>
</body>
</html>
Since it is a ajax call, iframe has to be coded differently.
Check this site, has some solutions...
Site
slight modification to the code in the website to open a pdf.
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div><!-- /header -->
<div data-role="content">
<!-- this is a regular page call-->
Another Page
<!-- the functionality for this page is defined in "javascript.js" -->
<!-- we put it in a data attribute to avoid spiders spidering the link and hammering the device -->
Perform Function
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Another Page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is another page, dude.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
main.js
$(document).ready(function(){
$('#perform-function').bind('click', function(){
// we're storing the link in an attribute
// called 'data-link':
var url = $(this).attr('data-link');
// create iframe if not there, comment display none to see it
if ($('#temp-iframe').length === 0) {
$('<iframe />').attr({
id: 'temp-iframe',
name: 'temp-iframe',
height: '100%',
width: '100%'
}).css({
position: 'absolute',
left: '50%',
bottom: 0
}).bind('load', function(){
}).appendTo('body');
}
// call the url into the iframe
$('#temp-iframe').attr('src', url);
// jquerymobile already does this because the link is just "#"
// but if you end up
return false;
});
});