I have a master(parent) page index.html. I put an iframe in my master page, iframe width=535 height=1330. I put menu in master page & all page show in iframe. I have a video gallery page create by video lightBox. If i click on video, it's played fine but in side the iframe. If I make it full screen also it stay in side iframe.
So i want the video in iframe, that show in master page.
My Master page code
My video gallery page:
<link rel="stylesheet" href="index_videolb/videolightbox.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="index_videolb/overlay-minimal.css"/>
<script src="index_videolb/jquery.js" type="text/javascript"></script>
<script src="index_videolb/swfobject.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->
<div class="videogallery">
Stream Video to Website by VideoLightBox.com v2.4
</div>
<script src="index_videolb/jquery.tools.min.js" type="text/javascript"></script>
<script src="index_videolb/videolightbox.js" type="text/javascript"></script>
<!-- End VideoLightBox.com BODY section --></td>
</tr>
So please help me to give me any script or, any code to change, that can solved my problem.
Thank you
MAHS
Try to use this following iframe code:
<iframe src="page.html" width="535" height="1130">
<p>Your browser does not support iframes.</p>
</iframe>
For exp: You can embed it in page.html in your index.html
Related
I'm trying to apply Fancybox 2.1.5 to a website and am only able to get it to partly work. The navigation buttons and close button will not show up at all. This is the coding for the html page that contains the website's images:
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<div class="imgHolder"><a class="fancybox" rel="group" href="img/gallery/set1/look1_lg.jpg"><img id="look 1: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look1_thumbnail.jpg" data-href="img/gallery/set1/look1.jpg" src="img/galleryPrototype3/semiPixel.png" alt="look 1" width="1060" height="800"></a></div>
<div class="imgHolder"><a class="fancybox" rel="group" href="img/gallery/set1/look2_lg.jpg"><img id="look 2: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look2_thumbnail.jpg" data-href="img/gallery/set1/look2.jpg" src="img/galleryPrototype3/semiPixel.png" alt="" width="578" height="800"></a></div>
</body>
And this is the basic Fancybox jQuery script that I want to use:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
When the Fancybox jQuery script is inserted into the HTML document and I click on look1.jpg, a grey translucent overlay appears, but no image.
When the Fancybox jQuery script is completely removed from the HTML document and I click on look1.jpg, the browser window turns an opaque dark grey with look1_lg.jpg displayed in the center, but no navigation arrows or close button.
There are some other posts on the same issue that I have used to try and problem solve my issue. From those posts I've double checked the following and everything seems to be set up correctly: The Fancybox sprite and overlay png files are located in the same folder as the Fancybox CSS document, the Fancybox jQuery source code and stylesheet are linked up correctly, and the anchor tags for the 2 images both have "rel=group" applied to them.
I am wondering if the way the site is coded overall has something to do with it? The site is also built with AJAX and bootstrap. The HTML page referenced above that contains the website's images is loaded into the website index page via AJAX. As a test I put the coding for that page in a standalone HTML file and fancybox worked perfectly, which makes me think that my guess is correct. If this is the case though, I have no idea how to fix the problem. For reference, this is the code for the website index page:
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/galleryPrototype3.css">
<link rel="stylesheet" href="css/photoswipe.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/device.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="webSiteLoader"></div>
<div id="glob-wrap">
<!--menu: This is the main navigation. It's been simplified here to include only the piece of navigation that refers to the html page referenced above-->
<nav id="mainNav" data-follow="location" data-type="navigation">
<ul>
<li>people</li>
</ul>
</nav>
<div class="_cover"></div>
<!-- gallery holder: this holds the website's image gallery -->
<section id="galleryPrototype3"></section>
<!-- content holder -->
<div id="content_pages" data-follow="location" data-type="switcher" data-flags="ajax"></div>
<!-- category pages: This has been simplified to include only the line that refers to the html page referenced above -->
<div id="category_pages" data-follow="location" data-type="switcher">
<div data-id="people" data-source="peopleCategory.html"></div>
</div>
</div>
</body>
</html>
I also tried placing the Fancybox jQuery script in the website index page rather than in the html page that contains the website's images. In that case as well when I click on an image the browser window turns an opaque dark grey with look1_lg.jpg displayed in the center, but no navigation arrows or close button.
I'm at a loss, so any help will be appreciated!
I'm using the prettyPhoto plugin to create a lightbox effect, but it simply doesn't work. I followed the steps from the site (im not that experienced with javascript etc), but I cant get it to work. When clicking the link, it simply opens up the file in a new tab, wether it's an image or a youtube video.
Can anyone please help me out with this? Ive been on it for a day now and I still cant get it to work.
Here the links to Jquery, the prettyphotolibary:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel='prettyPhoto']").prettyPhoto({
});
</script>
The link to the stylesheet:
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" />
This is the link where I want the lightbox to open in:
<a href="http://www.youtube.com/watch?v=j7_LMMB3w5M" rel="prettyPhoto"
title="test">CLICKME FOR LIGHTBOX</a>
Am I missing something here? I think its maybe in conflict with some other plugins I have installed, is that possible? Here to view the full website: www.romyvanalebeek.com
I had the same problem, I just removed the $(document).ready(function(){
So now I have
<script type="text/javascript" charset="utf-8">
$("a[rel^='prettyPhoto']").prettyPhoto({
});
</script>
My problem is with Jquery mobile's changePage(), let me start out by saying i know there's a bunch of other post about this issue, but i have tried all the solutions without any luck so that's why i'm now asking for help.
I've build a Phonegap project, where each screen is = a .html file. i got my index.html that loads all the scripts needed for the entire app. Then my index.html loads a new page with $.mobile.changePage(). but when this happens the next page do'sent have any script's or css's attached to it why?
This if my index.html
<!--index page used to find out if the user should see the login or welcome page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-2.0-original.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-fa.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--Used to make sure theres as little delay on old devises as possible-->
<script src="buttonTapDelayJS.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="loginJS.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<script src="javaIndex.js" type="text/javascript"></script>
<script src="myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<!--Loads the css for the menu-->
<link href="menuStyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
var checkUser="admin";
function onDeviceReady() {
/*if the stored username is = the correctusername, it loads the welcome page if not it loads the login*/
if(window.localStorage.getItem("user") === checkUser){
$.mobile.changePage("welcome.html",{transition:"slide"});
//window.open("welcome.html", "_self");
} else {
//window.open("login.html", "_self");
$.mobile.changePage("login.html",{transition:"slide"});
}
}
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>
This is my login page
<!--Login page-->
<!DOCTYPE html>
<html>
<body onload="loadLogin();">
<!--Creates all content you see on the screen-->
<div data-role="page" id="login">
<div data-role="content">
<ul data-role="listview">
<div align="center" data-role="content">
<img src="icon.png" alt="">
</div>
<div data-role="content">
<label for="textinput">Indtast brugernavn</label>
<input type="text" name="textinput" id="textinput" value=""/>
</div>
<div data-role="content">
<label for="passwordinput">Indtast adgangskode</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</span> </div>
<div data-role="content">
<div>Login</div>
</div>
<div data-role="content">
<div></div>
</div>
</ul>
</div>
</div>
</body>
</html>
As stated in the start, my problem is that non of my functions on my login page works to give an example of that i got my infoButton that runs onClick="infoPopup(); and this function makes a popup navigator.notification.alert("Message", null, "Info", "OK"); But it do'sent show anything when i press it.
Am i loading my scripts wrong or whats wrong, any help would be really much appreciated?
EDIT 1:
If i copy all my index.html to all other pages what happens is this. my index.html links to my login.html correct. On the login page my onClick="infoPopup(); dosent work, but my onClick="saveLogin();myFunction();" works sort of. my login info does get saved but in my saveLogin(); i got a navigator.notification.alert(); but the alert aint popping up. i know that all of my functions work because they did when i used window.open(); instead of changePage. And the reason why i changed was because with window.open(); i cant get the jquery page transitions Any ideas?
EDIT 2:
Don't really know what i did but works now:) thanks for the reply's.
Even though i tired this alrdy what worked for me was to move all javascripts and css's to the index.html.
jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page" element and its descendants and pulls that into the current dom.
So any scripts in the of the document will not be included.
I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.
Also, you can place JavaScript code inside the data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.
Repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will recreate head section.
simple change like -
$.mobile.changePage("welcome.html",
{transition:"slide"}
);
Im trying to build a basic page with the Addthis code inside.
The code I am using is :
<html>
<HEAD>
<TITLE>test </TITLE>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'> </script>
<script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"> </script>
</HEAD>
<body>
<div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"> </a>
<a class="addthis_button_tweet"> </a>
<a class="addthis_button_pinterest_pinit"> </a>
<a class="addthis_counter addthis_pill_style"> </a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true}; </script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=felix001"> </script>
<!-- AddThis Button END -->
</div>
</body>
</html>
However when I run the page in a browser I get a blank screen. Am I missing anything obvious ?
Thanks,
It won't work locally because the src tag is using "//s7..." and trying to determine the protocol based on the parent page. In your case, while running locally, the parent page probably looks like:
file://c:\blahblah\index.html
and therefore the protocol is file:// which doesn't work (it needs to be http or https). This is done to make it easy for users to copy the code into a site that is either http or https without having to make changes to the code.
To fix this locally, just prepend http so it looks like:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=felix001"></script>
I have an HTML page. I want to show a video on a javascript block UI anytime when a user lands on that page. Any help on it? Thanks.
Grab the fancybox code and then..
Example:
<html>
<head>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<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>
<script type="text/javascript">
$(function() {
// show modal window that has content of #popcontent div in its body
$.fancybox(
$('#popcontent").html(),
{
'autoDimensions': true,
'modal': true
}
);
})
</script>
</head>
<body>
<h1>Some example page content</h1>
<div id="popcontent" style="display:none;">
<video src="yourlinktovideo.ogg" width="640" height="480"></video>
</div>
</body>
</html>
Popoup with a video player will be opened as soon as the DOM is ready (and the documentready event of jQuery if fired). In my example it is a modal window so user won't be able to close it to return to content of the page which is underneath.