I have got a blog and I would like youtube and vimeo videos to load after the page is loaded, because as of now these videos block the loading of the rest of the content.
This is the code I generate for each post:
public function generateVimeoVideo($class){
return "<iframe class='".$class."' src='//player.vimeo.com/video/".$this->vimeo_video_id."' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
}
How do I load this after onload ?
Basically capture the values returned by generateVimeoVideo($class)() in a javascript variable and create the iframe element on the page you are displaying it only once your dom has loaded.
It's Very simple .
Please make the function on the click event.
function change_frame(){
document.getElementById("captchaDiv").src='http://www.domain.com/captcha.php?'+(new Date()).getMilliseconds();
return true;
}
<a href='#' onClick="change_frame();return false" />
Hope it Work !!!
it should work like this HTML please check it and give me reply .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function loadFrame(){
document.getElementById('theframe').innerHTML='<iframe src="http://www.w3schools.com/" width="500" height="300" frameborder="0" scrolling="auto"></iframe>';
}
//-->
</script>
</head>
<body>
<span id="theframe"><noscript><iframe src="http://www.w3schools.com/" width="500" height="300" frameborder="0" scrolling="auto"></iframe></noscript></span><br>
The rest of your page here.
<script type="text/javascript">
<!--
onload=loadFrame;
//-->
</script>
</body>
</html>
Thanks,
<?php
?>
<html>
<body>
<script>
function generateVimeoVideo($class,$vid){
var putYouTubeHere= document.getElementById('putYouTubeHere');
putYouTubeHere.innerHTML= "<iframe class='" + $class + "' src='//player.vimeo.com/video/" + $vid + "' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
}
document.addEventListener( "DOMContentLoaded", function(){ generateVimeoVideo('classname','<?php echo $this->vimeo_video_id;?>');}, false );
</script>
<div id="putYouTubeHere"></div>
</body></html>
Try this jquery bind
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
body {background-color:#222;}
#frameContainer {
background:white url('http://hompimpa.googlecode.com/svn/trunk/images/loading.gif') no-repeat 50% 50%;
margin:30px;
}
#frameContainer iframe {
display:block;
padding:5%;
border:none !important;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).bind("load", function() {
$('#frameContainer').html('<iframe src="//player.vimeo.com/video/" + $vid + " frameborder="0" width="90%" height="220px" scrolling="auto"></iframe>');
});
//]]>
</script>
</head>
<body>
<div id="frameContainer"></div>
</body>
</html>
Related
So I have two iframes in page
<div id="ch">
<iframe name="users" width="220" height="510" align="left" src='messages/users.php' id="userch" ></iframe>
<iframe name="text" width="450" height="405" src='messages/text.php'></iframe>
</div>
So I have variables in first iframe and I need to sent them into second iframe. I tried to use method GET. But any method that will work is good.
so first iframe
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta content="10; url=users.php" HTTP-EQUIV=Refresh>
<meta content="utf-8" http-equiv="encoding">
<link href="../css/chat.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="../js/ch_users.js"></script>
</head>
<body >
<div class="ess_contact">
<div>
</body>
</HTML>
2-nd iframe
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta content="utf-8" http-equiv="encoding">
<meta content="5; url=text.php?active=<?=$active;?>" HTTP-EQUIV=Refresh>
</head>
<body onload="scroll(0,100)" link="blue" alink="blue" vlink="blue">
<font size=3 face="Georgia">
<?php
if (isset($_GET['active']))
{
$active=$_GET['active'];
echo $active;
}
?>
</body>
</html>
and js file
jQuery.noConflict();
jQuery(document).ready(function($) {
$(document).on('click','.ess_contact', function () {
var active = this.id;
$.get( "text.php", { active: active} );
});
});
Since you are already using PHP, you can start a session using session_start() and pass all your data through session variables.
Set:
$_SESSION['myvar']="the data";
Read:
if(isset($_SESSION['myvar'])){
echo $_SESSION['myvar'];
}
Using the above, you can use GET or POST to transfer data across php pages. Unless you really have the restriction to use JQuery.
I tried transferring data between iframes, and this is how I did it.
Main.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<h2>Iframe data test</h2><br/>
<h2>Iframe 1</h2>
<iframe src="f1.html" id="frame1"></iframe>
<br/>
<br/>
<h2>Iframe 2</h2>
<iframe src="f2.html" id="frame2"></iframe>
</body>
</html>
f1.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<h2>Iframe 1 here</h2><br/>
<input type="text" id="mydata"/><br/>
<input type="button" id="send" value="send data"/>
</body>
<script>
$(document).ready(function(){
$("#send").click(function(){
parent.$("#frame2").contents().find("#target").html($("#mydata").val());
});
});
</script>
</html>
f2.html
<html>
<body>
<h2>Iframe 2 here</h2><br/>
<div id="target"></div>
</body>
</html>
You see the two iframes on the Main page. Type anything in the textbox and click Send data, the contents of the textbox will be set in a div found in the second iframe.
Here i used AJAX. It's nearer to your code.
Here i created a jQuery.
This is the index.php file.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h1>Below is iframe</h1>
<iframe name="users" width="220" height="510" align="left" src='2.php' id="userch" ></iframe>
<iframe name="text" width="450" height="405" src='3.php' class="f3"></iframe>
</body>
</html>
Here is frame 1. Name 2.php;
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h2>Hello Milan from frame 2</h2>
<h2>hello</h2>
<h2>world!</h2>
</body>
</html>
Here is frame 2. Name:3.php
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h2>Hello Milan from frame 3</h2>
<div class="msg"></div>
<?php
if(isset($_REQUEST['active']))
{
echo $_REQUEST['active'];
}
?>
</body>
</html>
And here is a jQuery named t.js.
function ifrm(){
$(document).ready(function (){
$("h2").click(function (){
var r=$(this).text();
$.ajax({url:"3.php",data:{active:r},success: function (data) {
parent.$('.f3').contents().find('.msg').html(data);
}});
});
});
}
ifrm();
Click on any text in 2.php file and you can see what's going on in 3.php.
I have trawled the net and Stack Overflow and have not found an adequate answer to this question. Before I start the trial and error process of finding my own solution, I thought I would turn to the Stack Overflow braintrust and see if there was already a successful implementation.
I have an AJAX powered page that degrades properly for non-javascript browsers and SEO. Each click in the AJAX version can be represented by a unique URL.
What I want to do is to dynamically change the HREF of the button. I do understand that this tag is converted to standard HTML at runtime (namely into a nasty table / iframe layout).
I was just wondering if anyone had any insight as to how to implement this FB like button onto AJAX powered pages?
Cheers in advance :)
EDIT:
What do you think of this method I just hacked together? See any huge problems with it?
<!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 runat="server">
<title></title>
<script src="JS/jquery/jquery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script language="javascript" type="text/javascript">
$("document").ready
(
function ()
{
CreateNewLikeButton("http://www.yahoo.com")
$("a#ChangeToGoogle").click
(
function (e)
{
e.preventDefault();
CreateNewLikeButton("http://www.google.ca")
}
);
}
);
function CreateNewLikeButton(url)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", url);
$("div#Container").empty().append(elem);
FB.XFBML.parse($("div#Container").get(0));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
</div>
</form>
</body>
</html>
SIMPLE SOLUTION
Just parse trigger the parse function when load complete.
If you’re using jQuery, there’s a real easy and slick solution to this problem:
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){}
});
http://developers.facebook.com/docs/reference/plugins/like/
This is the solution I ended up going with:
<!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 runat="server">
<title></title>
<script src="JS/jquery/jquery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script language="javascript" type="text/javascript">
$("document").ready
(
function ()
{
CreateNewLikeButton("http://www.yahoo.com")
$("#ChangeToGoogle").click
(
function (e)
{
e.preventDefault();
CreateNewLikeButton("http://www.google.ca")
}
);
}
);
function CreateNewLikeButton(url)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", url);
$("#Container").empty().append(elem);
FB.XFBML.parse($("#Container").get(0));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
</div>
</form>
</body>
</html>
You're making this hard on yourself - just render a new iframe-based one.
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function()
{
$( '#ChangeToGoogle' ).click( function( event )
{
event.preventDefault();
$( '#Container' ).empty().append( $('<iframe />')
.attr( 'src', 'http://www.facebook.com/plugins/like.php?href=www.google.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80' )
.attr( 'scrolling', 'no' )
.attr( 'frameborder', 'no' )
.attr( 'style', 'border:none; overflow:hidden; width:450px; height:80px;' )
.attr( 'allowTransparency', 'true' )
);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<iframe src="http://www.facebook.com/plugins/like.php?href=www.yahoo.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:450px; height:80px;"
allowTransparency="true">
</iframe>
</div>
</form>
</body>
This is how I handled this situation when I ran into it - seems to work well.
// Set Facebook Like Button with jQuery
setFBLikeButtons = function (container,url,send,layout,width,show_faces,font) {
// Set Default Args
if(!send) { send = "false"; }
if(!layout) { layout = "button_count"; }
if(!width) { width = "100"; }
if(!show_faces) { show_faces = "false"; }
if(!font) { font = "arial"; }
$(container).empty(); // Remove current like button
$(container).html('<fb:like href="'+url+'" send="'+send+'"
layout="'+layout+'" width="'+width+'" show_faces="'+show_faces+'"
font="'+font+'"></fb:like>');
FB.XFBML.parse(); // This is the magical syrup
}
create like button
<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
window.onload = function(){
var divs = document.getElementsByTagName("span");
for(var i=0; i<divs.length i++){
if(divs[i].className == "likes"){
if(divs[i].title){ var Href = divs[i].title; }else{ var Href = window.location; }
var fb_like = document.createElement("fb:like");
fb_like.setAttribute("href", Href);
fb_like.setAttribute("layout", "box_count");
fb_like.setAttribute("show_faces", "false");
fb_like.setAttribute("width", "55");
document.getElementById("likes2").appendChild(fb_like);
}
}
}
</script>
</head>
<body>
<span class="likes" title="www.bzzs.me"></span>
</body>
Load it after the window loads, this is what works for me:
$(window).load(function(){
$.getScript('http://connect.facebook.net/en_US/all.js', function() {
try{
FB.XFBML.parse();
} catch(ex) {}
});
});
If you're using the jQuery Mobile framework you can run the same code as the accepted answer in the pagecontainershow event which jQuery Mobile uses when it displays a new page.
// initialize new pages
$(document).on("pagecontainershow", (e, ui) =>
{
try
{
FB.XFBML.parse();
} catch (ex) { }
});
I have tried alot to remove this error but could not get success.When i am running this script on localhost its working fine but not working on Joomla frame work.
The code is below:
<!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=iso-8859-1" />
<?php $viewFields=array('c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby'); ?>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var example=jQuery.noConflict();
var arrayFromPHP = <?php echo json_encode($viewFields) ?>;
example(document).ready(function() {
example("input#autocomplete").autocomplete({
source: arrayFromPHP
});
});
</script>
</head>
<body>
<center>
<p><img src="<?php echo JURI::base(); ?>images/search_1.png" border="0" alt="" />
<img src="<?php echo JURI::base(); ?>images/business_2.png" border="0" alt="" />
<img src="<?php echo JURI::base(); ?>images/review_3.png" border="0" alt="" />
</p>
</center>
<input id="autocomplete" />
</body>
</html>
Its giving me this error:-
--
[08:30:24.870] Use of getAttributeNode() is deprecated. Use getAttribute() instead. # http://50.116.97.120/~amarhost/storage/media/system/js/mootools-core.js:343
[08:30:27.853] TypeError: example("input#autocomplete").autocomplete is not a function # http://50.116.97.120/~amarhost/storage/index.php/component/storage/?action=war&Itemid=105:210
Maybe noconflict clear everything that is added to jQuery. try to put noconflict just after the you load jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>var example=jQuery.noConflict();</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var arrayFromPHP = <?php echo json_encode($viewFields) ?>;
example(document).ready(function() {
example("input#autocomplete").autocomplete({
source: arrayFromPHP
});
});
</script>
I would like to add that there could be multiple jquery file included. Maybe from other included php files. Remove this inclusion and keep only at one place. Best way is to include this js file in some php file and then
include in the required file using include_once('jquery_include.php');.
This will probably solve your problem. I had this same problem. This solved my problem.
Some thing like this.
jquery_include.php
<script src="scripts/jquery.js" type="text/javascript"></script>
then include this php file in required php files.
include_once('jquery_include.php');
Hope this help.
Can anyone tell me why this canvas won't show up? I just don't get it, it doesn't even display the tag. I'm on crunchbang 10 using chromium. All other canvases work, but this one doesn't.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="An HTML5 Test">
<meta name="author" content="William Starkovich">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="800px" height="100px">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>
The problem is a syntax error in your JavaScript code. You're missing a ); on the closing } of the main function
$(document).ready(function(){
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
});
There's an error in your JavaScript syntax:
}) // you are missing this parenthesis
</script>
Other than that the canvas absolutely shows up. Add:
<canvas id="canvas" width="800px" height="100px" style="border: 1px solid black">
To see a border around it.
Example:
http://jsfiddle.net/RmVs4/8/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOMETITLE</title>
</head>
<body>
click
</body>
</html>
I want to use php/jQuery to get the content under <title></title> and place it to XXX at <a href="http://www.facebook.com/sharer.php?u=<?php echo $url ?>&t=XXX">, how to do it?
Updated 2
<?php
$url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
?>
<div id="language">
<ul>
<li class="last">
<span><a id="block-header-facebook" href="http://www.facebook.com/sharer.php?u=<?php echo $url ?>&t=link"><img src="/home/images/icon/facebook.jpg" /></a></span><span><img src="/home/images/icon/twitter.jpg" /></span></li>
</ul>
</div>
<script>
$('#block-header-facebook').attr('href').replace("link", "hi");
</script>
Thanks you
Use jQuery (just change the selector $("a") to be more specific, using an id or a class):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOMETITLE</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("a").each(function() {
$(this).attr("href",
$(this).attr("href").replace("XXX", $("html head title").text())
);
});
});
</script>
</head>
<body>
click
</body>
</html>
For the Update 2, change the script element:
<script type="text/javascript">
$('#block-header-facebook').each(function() {
$(this).attr('href', $(this).attr('href').replace("link", document.title));
});
</script>
By the way I do too recommend using the Ralph's server approach (use this only if you need to do it on the client).
Added Recommendation (See Ralph comment)
Change the a-tag and script to:
<a id="block-header-facebook" href="http://www.facebook.com/sharer.php?u=<?php echo $url ?>">
<script type="text/javascript">
$('#block-header-facebook').each(function() {
$(this).attr('href', $(this).attr('href') + "&t=" + escape(document.title));
});
</script>
Less error-prone code, and I will work the same.
there is a simple function that you can use at this page
http://www.phpro.org/examples/Get-Text-Between-Tags.html
Or with JavaScript:
var link = document.getElementsByTagName("a")[0].href;
link = link.replace(/&t=.+$/, "&t=" + document.title);
document.getElementsByTagName("a")[0].href = link;
<?php
$title = 'SOMETITLE';
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title ?></title>
</head>
<body>
click
</body>
</html>
I think it's always preferable to do it server-side if you can. Less computation for the client, less JS dependency/cross-browser issues, and no "lag time".
Urlencoding isn't necessary in this example, but it will be if your title has spaces and other weird characters in it.