url.php
<?php
include "../googlelogin/src/Google_Client.php";
include "../googlelogin/src/contrib/Google_Oauth2Service.php";
include "../fblogin/src/facebook.php";
//FOR FACEBOOK LOGIN//
$fbconfig['appid' ] = "329433909112888";
$fbconfig['secret'] = "ca2bdc9990b0b2ad0763abcka79dce60c91f";
$fbconfig['baseurl'] = "http://localhost/sbs/fblogin/index.php?rd=hm";
$facebook = new Facebook(array(
'appId' => $fbconfig['appid'],
'secret' => $fbconfig['secret'],
'baseurl'=>$fbconfig['baseurl'],
'cookie' => true,
));
$loginUrl = $facebook->getLoginUrl(
array('redirect_uri'=>$fbconfig['baseurl'],
'scope' => 'email,offline_access,publish_stream,user_birthday,user_location,user_work_history,user_about_me, user_hometown,user_photos ,user_work_history',
)
);
//FOR GOOGLE LOGIN//
$client = new Google_Client();
$client->setApplicationName("Google UserInfo PHP Starter Application");
$client->setApprovalPrompt('auto');
$client->setClientId('777637661406-cp7kekelp1l5i0se9f576sqf36a0q4lc.apps.googleusercontent.com');
$client->setClientSecret('uztEmqG1CFt06752lqtRZjZ-');
$client->setState('hm');
$client->setRedirectUri('http://localhost/sbs/googlelogin/index.php');
$client->setDeveloperKey('AIzaSyD3HiHElDciE6Pb5UfZtDdNWe_kiKNk6rg');
$oauth2 = new Google_Oauth2Service($client);
$authUrl = $client->createAuthUrl();
?>
I want to pass the FACEBOOK , TWITTER AND GOOGLE url in via java script in the pop up . I know the PHP part but I don't know the JS part
pop.js
function sin(){
var lbox = new LadduBox();
lbox.init({"width":495, "height":242, "HTML":'<div style="width:495px; height:242px; background-color:#ffffff; border:2px solid orange;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="485" height="152" style="font-family:arial; font-size:20px; font-weight:bold;"><tr><td align="right" colspan="3"><img src="images/untitled-1.png" style="margin:10px; cursor:pointer;" id="btnClose"/></td></tr><tr><td height="30" colspan="3"> <div style="font-family:arial; font-size:20px; color:#ff6c00; padding-left:200px;">SIGN IN</div></td></tr><tr><td><div style="margin:10px; font-size:14px;">EMAIL<br><input type="text"/></div><br><div style="margin-left:10px; margin-top:-10px; font-size:14px;">PASSWORD<br><input type="text"/></div></td><td><img src="images/orbar.png" /></td><td align="center"><img src="images/redfb.png" style="margin-bottom:7px;"/><br><img src="images/redgoogle.png" style="margin-bottom:7px;"/><br><img src="images/redtwitter.png" /></td></tr></div>', 'btnCloseId':'#btnClose'});
lbox.fire();
}
When the user click on the sign-in button , this pop-up will show . I want FACEBOOK , TWITTER AND GOOGLE URL in the pop-up but i don't know how to pass it in javascript .
"When the user click on the sign-in button, this pop-up will show":
Now, the popup code will be inside a PHP file. Include url.php in this file at top, then you can access those $authUrl or $loginUrl anywhere in this file.
Now, in your sin(), you have HTML inside your lbox.init. There you can put these urls as below. BUT, REMOVE sin() FROM INSIDE YOUR JS FILE, AND PUT IT IN THE PHP FILE IN HEAD SECTION. Because, JS file cannot have PHP code.
<div style="width:495px; height:242px; background-color:#ffffff; border:2px solid orange;">Facebook LoginGoogle Login</div>
Just an example, you can put this anywhere you want within the html. If you want to put PHP inside .js file, you have to do something like below:
AddType application/x-httpd-php .js
AddHandler x-httpd-php5 .js
<FilesMatch "\.(js|php)$">
SetHandler application/x-httpd-php
</FilesMatch>
Add the above code in .htaccess file and run php inside js files
Related
I had successfully converted html to image using the below code but however font was changing and image is not displaying on image.
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
<div id="div_card" style="border-color:grey;border-style:solid;border-width:1px;width:600px; height:450px; padding:15px;margin-left:40px">
<div style="display:inline-block;height:20px;"> <div id="sp_name"> Author:John Michael Smith Junior</div></div><br>
<div style="display:inline-block;height:120px; width: 120px; float:right">
<img src="htmlimage.jpg" style="height:120px; width: 120px"> </div>
<div style="display:inline-block;height:20px;"><div> Published on March 1982 </div></div><br>
<div style="display:inline-block;height:20px;"> <div> Published by: Mark Vin book house</div></div><br>
<div style="display:inline-block;height:20px;"> <div>Last Edition Dec 1999</div></div><br>
<div style="display:inline-block;height:20px;"> <div>Sold Copies: 150000</div></div><br>
</div>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br />
<div id="previewImage" style="display: none;">
</div>
<script>
$(document).ready(function () {
var element = $("#div_card"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});
</script>
</body>
</html>
I need to get image without change in font.How can I do that??????
No need canvas is image like
There are many ways to convert a canvas to an image. However why bother as the canvas is image like in its behavior. Just display the canvas as if it were an image.
Contemporary html2canvas usage example, adding captured canvas to page
html2canvas(document.body).then(canvas => document.body.appendChild(canvas));
Using your example
Note security prevents it from working in the SO snippet.
addEventListener("load",() => {
html2canvas(divCard)
.then(can => {
// show result of html2canvas
previewImage.classList.remove("hide");
previewImage.appendChild(can);
// show download link and add data url for download.
downloadLink.classList.remove("hide");
downloadLink.download = "canvasCap.png"; // name the download file
downloadLink.href = can.toDataURL("image/png").replace("data:image/png", "data:application/octet-stream");
})
.catch(error => {
previewImage.textContent = "html2canvas error: " + error.message;
previewImage.classList.remove("hide");
previewImage.classList.add("error");
});
});
* { font-family: arial }
.hide { display: none }
.error {color: red }
.titile {font-size: x-large}
#divCard {
border: 2px solid black;
padding: 4px;
}
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
<div id="divCard">
<div class="titile">Author:John Michael Smith Junior</div>
<div>Published on March 1982 </div>
<div>Published by: Mark Vin book house</div>
<div>Last Edition Dec 1999</div>
<div>Sold Copies: 150000</div>
</div>
<h4>HTML2CANVAS result...</h4>
<a id="downloadLink" class="hide">download</a>
<div class="hide" id="previewImage"></div>
BTW Its 2020.. jQuery is slow bloated baggage. Windows ended support for IE <11 on Jan31 this year removing the last argument for jQuery relevance.
This is the solution I came up with. It allows remote and custom fonts to be included properly in the output image. It requires the latest version of Chrome:
Open the HTML page (that you wish to convert to an image) in Chrome.
Right click anywhere in the background of the displayed page, and select "Save As".
In the Save As dialog, select the "Save as type" option for "Webpage, Single file (*.mhtml)", then select the folder and file name you want to save as. This will convert the HTML into MHTML and save it locally. The file size will be huge because it includes all the custom fonts, and potentially static images, in the file.
Go to the command line shell of your local machine and use headless Chrome to take a screenshot of the locally saved .mhtml file as a PNG file.
E.g, if your machine is Windows 10, the locally saved file is "C:\tmp\page.mhtml", and it is a 16x16 image, use:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --screenshot=C:\tmp\page.png --window-size="16,16" --default-background-color=0 file:///C/tmp/page.mhtml
This will save the top left 16x16 window of your rendered HTML page as a PNG file at: C:\tmp\image.png.
I'm new here! I do not have much knowledge yet in php, I have a question in which I have tried to put a break.tv api in my configuration so that users can download mp4 from a youtube video.
I have the script in which it is only downloaded in mp3 but I wanted to make it so that it can download in mp4 as well.
In my vdl.php folder I have this:
<div class = "lr">
<? php include '../admin/config.php'; ?>
<? php echo $ down_ad_728; ?>
<? php
$ vid = $ _REQUEST ['v'];
echo
<p>
<iframe style = "width: 100%; height: 60px; border: 0; overflow: hidden;" scrolling = "no" src = "//www.youtubeinmp3.com/widget/button/?video=https://www.youtube.com/watch?v= '. $ vid.' '& color = 555555>';
exit ();
?>
</ div>
Api break.tv (here I want to put)
<iframe src = "//break.tv/widget/mp4/?link=https://www.youtube.com/watch?v=i62Zjga8JOM" width = "400" height = "170" scrolling = "no" style = "border: none;"> </ iframe>
Can you help me how can I do this? Thank you very much in advance!
In the API docs there is a section for MP4, it looks like this:
break.tv/widget/mp4/?link=https://www.youtube.com/watch?
v=i62Zjga8JOM" width="400" height="170" scrolling="no" style="border:none;">
html (quotazioni.php)
<?php
$azioni = $db_handle->runQuery("SELECT idAzione,nome,prezzo FROM azioni");
foreach($azioni as $azione){
?>
<tr>
<td style="text-align:center;border-bottom:#F0F0F0 1px solid;"><?php echo $azione["nome"]; ?></td>
<td style="text-align:center;border-bottom:#F0F0F0 1px solid;"><?php echo $azione["prezzo"]; ?></td>
<td style="text-align:center;border-bottom:#F0F0F0 1px solid;">
<a href="compraVendi.php?action=segui&idAzione=<?=$azione["idAzione"]?>" id="<?=$azione["nome"]?>" style="text-decoration:none;" class="preferiti" >
<span style="color:yellow;font-size:200%;" id="<?=$azione["idAzione"]?>" >☆</span>
</a>
</td>
</tr>
<?php
}
?>
php (compraVendi.php)
case "segui":
$db_handle->query("INSERT INTO preferiti (visibile,idAzione) VALUES (1,'".$_GET["idAzione"]."')");
header("location: quotazioni.php");
break;
javascript
$(document).ready(function(){
<?php
$preferiti = $db_handle->runQuery("SELECT * FROM preferiti");
foreach($preferiti as $preferito){
if ($preferito["visibile"]==1){
?>
var element = document.getElementById(<?=$preferito["idAzione"]?>);
element.hide();
<?php
}
}
?>
});
I must hide the span inside the link after I click on it. How do I keep the span disabled considering the page contains an automatic refresh? I provide an example of code which not work, please help me to solve the problem. In the sql database, the table preferiti contains idPreferito,visibile and idAzione. The row preferito contains 1 if i clicked on the respective prefer.
When user clicks on the the star - you need to save this data to a persistent storage, e,g your backend. This is the only way you will be able to regain this state after page refresh.
So when serving the page to the client, you will consider another field, for example 'disabled' which contains string 'disabled'
It could be something like this:
<a href="#" id="<?=$azione["nome"]?>" class="preferiti" >
<span class="favourites-star <?=$azione["disabled"]?>" id="<?=$azione["idAzione"]?>" >☆</span>
</a>
Consider not using insline styles and instead using classes for styling - this is a general good practice.
.favourites-star {
color:yellow;
font-size:200%;
}
Classes are also better when dealing with events.
$(document).ready(function(){
$('.prefereti').on('click', function(evt){
// Save the state first and then disable the star - try it yourself!
$.post()
.done(function () {
$(evt.currentTarget).addClass('disable');
})
.fail(function () {
// Don't disable - instead show error
});
});
});
One more thing that you need to keep in mind while the state is being saved, your page might reload - so you might like to prohibit it from reloading for that time.
Assume I have 20 navbar items, each one linking to a different page on my website. And on each page those 20 items remain the same. To avoid copy-pasting across all .html files, other solutions have suggested doing this with php. But how would I make the active menu item lit white for example? I want to refrain from copy-pasting the header across to all the .html files, because if I want to add one more navbar item, I will have to manually add it to all .html files.
There must be a simple solution with an active item for the active page.
========EDIT========
Naomik, your javascript solution looks most promising, although I currently can't get it to work (see second edit below).
My navbar is defined in nav.html:
<nav id="nav" class="navbar navbar-inverse">
<div>
<ul id="navigation" class="nav navbar-nav navbar-left">
<li class="active"><a href="about.html" >About</a></li>
<li><a href="services.html" >Services</a></li>
<li><a href="pricing.html" >Pricing</a></li>
</ul>
</div>
</nav>
And this is one of the three html pages (about.html). I use JS to load in the nav.html file. The JS snippet before the closing body tag is the one provided by naomik.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$.get("nav.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
</head>
<body>
<!-- *** NAVBAR *** -->
<div id="nav-placeholder"></div>
<!-- *** MAIN TEXT *** -->
<h1>ABOUT</h1>
<script>
function removeQueryString(url) {
return url.split('?')[0]
}
[].forEach.call(document.querySelectorAll('a'), function(elem) {
if (removeQueryString(elem.href) === removeQueryString(window.location.href))
elem.classList.add('is-active')
else
elem.classList.remove('is-active')
})
</script>
</body>
</html>
============EDIT==========
Although Naomik's solution leads to a flashing website on every load of a page. I have therefore applied Relisora's solution.
Thanks
You first want to give each of your 20 pages a name ( or a number ).
On each page, write the page name
<?php $page_name = "index" ?>
Then you import your navbar
<?php include 'navbar.php'; ?>
Now in your navbar.php you want to check on what $page_name you are
<?php if ($page_name == 'index') {echo ' id="active"';} ?>
And you do that for each page you have.
Now you'll just want to have #active {} in your CSS to determine the style, and your current page will show with active style.
Edit :
Now that we can write id="active", we want it to be in liso we can use the class :
<li<?php if ($page_name == 'index') {echo ' id="active"';} ?>>Home page</li>
Don't forget to add the link :
<li<?php if ($page_name == 'index') {echo ' id="active"';} ?>><a href="#" >Home page</a></li>
Don't do this this with PHP. You can add a little JavaScript to the end of your HTML before the closing </body> tag
Notice: Clicking the links in the snippet preview will not work for obvious reason. They are only there to show you that the correct link will highlight.
StackOverflow Code Snippets run from the URL http:stacksnippets.net/js. Knowing this, we can verify that our code works by making sure any href="/js" links get the is-active class.
After reading that notice above, click the Run code snippet button below
code {
font-family: monospace;
background-color: #ccc;
padding: 0.25rem;
}
.is-active {
background-color: blue;
color: white;
}
a {
display: inline-block;
padding: 0.25rem 0.5rem;
}
<h4>
This window is currently at url:<br>
<code>http://stacksnippets.net/js</code>
</h4>
js
html
php
<p>The <b>js</b> link above gets the is-active CSS class because it matches the window's current pathname</p>
<script>
[].forEach.call(document.querySelectorAll('a'), function(elem) {
if (elem.pathname === window.location.pathname)
elem.classList.add('is-active')
else
elem.classList.remove('is-active')
})
</script>
Notice that each a element in the original HTML does not have any class attribute. After the JS runs, notice that only the js link will automatically be given the is-active CSS class.
Here's a jQuery solution for you.
code {
font-family: monospace;
background-color: #ccc;
padding: 0.25rem;
}
.is-active {
background-color: blue;
color: white;
}
a {
display: inline-block;
padding: 0.25rem 0.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>
This window is currently at url:<br>
<code>http://stacksnippets.net/js</code>
</h4>
js
html
php
<p>The <b>js</b> link above gets the is-active CSS class because it matches the window's current pathname</p>
<script>
function highlightActiveLinks() {
$('a').filter(function(idx, elem) {
return elem.pathname === window.location.pathname
}).addClass('is-active')
}
highlightActiveLinks()
</script>
In yours, you will need this tho. This can't be demo'd in the SO snippet, sorry.
$.get('nav.html', function(data) {
// ...
highlightActiveLinks()
})
make a .html file with just the navbar and include it in an iframe
<iframe src="navbar.html"/>
Here is some sample php code that iterates through an array of paths and constructs a menu.
If the function is given an active path (current path) as an input it compares to each path and if they match it adds a class to the link.
I've hard coded an active path to demonstrate the output.
You can bundle all this up into a file called something like nav.php and include it on each page.
<?php
include 'includes/nav.php';
?>
nav.php:
<?php
$paths = array(
'/foo/',
'/foo/bar/',
'/foo/baz/',
);
function nav($paths, $active_path = null) {
$o = '';
foreach($paths as $path) {
$a_class = $active_path == $path ? 'active' : '';
$o .= "<a class='$a_class' href='$path'>$path</a><br />\n";
}
return $o;
}
$active_path = strtok($_SERVER["REQUEST_URI"], '?');
$active_path = '/foo/bar/';
?>
<?php echo nav($paths, $active_path); ?>
Output:
<a class='' href='/foo/'>/foo/</a><br />
<a class='active' href='/foo/bar/'>/foo/bar/</a><br />
<a class='' href='/foo/baz/'>/foo/baz/</a><br />
Personally however I prefer adding the active class with javascript. In which case you can just construct a html snippet and take advantage of the php include, server side include, or js include to add the html to each page.
for bootstrap
<a class="nav-link <?php if ($page_name == 'index') {echo "active";} ?> href="index.php">Home</a>
or in shorthand
<a class="nav-link <?php echo ($page_name == 'index') ? "active" : "";?> href="index.php">Home</a>
First of all rename the file name sample.html with sample.php
just use include syntax for php:
<?php include("sample.php"); ?>
or
<?php require("sample.php");?>
Add this in all 20 pages after remove the code.
Hope this will helps!
It can do by php.
First you create all pages as php files.
Create one file as nav_menu.php. In this page code all menu items.
In all pages instead menu codes include nav_menu.php
To give active class use$_SERVER["SCRIPT_NAME"] to check current url equals to particular url. If it is equal add class active.
Please help, this really made me stuck. I have HTML file "newsfeed.html" that loads onto another page using JQuery .load() and I have PHP file "ajax_fetch_posts.php". My HTML file uses XMLHTTPREQUEST Object to fetch data from my PHP file, my problem begun when I noticed that everytime I update my HTML file code and HIT refresh on my browsers reload, that page doesn't change at all, whatever I do it keeps on displaying the same all over and over again. I also tried to clear my browser cache or cookies but it's useless. Is this some sort of <meta> tag? or header() in php? It seemed my page being kept as cached copy or is this some sort of virus?
Here is my html code so far:
<div id="newsfeed_container" class="newsfeed-container">
<div id="post">
<ul>
<li>
<table border="0">
<tr>
<tr><!-- RESERVED! --></tr>
<tr>
<td style="font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;width:360px;">
<div style='width:207px;word-wrap: break-word;white-space: pre-wrap;border:0px solid; font-size: 11px;position:relative;z-index:10;margin:4px 0px 0px 7px;width:280px;display:inline-block;width:300px;background-color:#f7f2f1;box-shadow:-1px 1px 0px #eec7c7;-moz-box-shadow:-1px 1px 0px #eec7c7;-webkit-box-shadow:-1px 1px 0px #eec7c7;padding: 3px;left:50px;' id='div_shout_handle'>this is an example</div>
</td>
</tr>
<tr>
<td>
<img src='images/default.jpg' height='50' style='border:1px solid #CDB3AB'/>
<img src="images/asset/shout-body-tail.png" style="position:relative;top:-20px;"/>
</td>
</tr>
<tr><!-- RESERVED! --></tr>
</tr>
</table>
</li>
</ul>
</div>
</div>
Here's JavaScript:
$(document).ready(function() {
var xhr = new XMLHttpRequest();
var form = new FormData();
form.append('EmailAd', EmailAd);
form.append('UserID', UserID);
form.append('Studentnumber', Studentnumber);
xhr.open('POST', 'ajax/ajax_fetch_post.php', true);
xhr.onload = function() {
var div_shout_handle = document.getElementById('div_shout_handle');
div_shout_handle.innerHTML = this.response;
}
xhr.send(form);
});
PHP File:
<?php
include '../include/class.inc.php';
$array_post = array();
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$pdo = new dbConnection;
$pdo->dbInstance($db);
$stmt = $db->prepare("SELECT * FROM posts");
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$stmt->execute();
while($row = $stmt->fetch()) {
array_push($array_post, $row['Content']);
}
echo json_encode(array('Posts' => $array_post));
}
?>
Please help, this probably sound so easy.