So I have found this code here
This basically lets me pull some data from a php file and place it into a div using jQuery. So everything from the tutorial works fine, but because I am thinking of putting together about 9-10 different links via that code, I thought I put all the function code in a js file and just call the function in html. Just to clarify, I have very minimal understanding of javascript, though I've experience with php.
In a new js file called links.js, I have put 2 different functions which I would like to call from my html
function getshow1() {
$('#sidebar').load('show1.php');
}
function getshow2() {
$('#sidebar').load('show2.php');
}
then in my html, I src the links.js and for 2 images, I've put this,
<img src="image1.jpg" />
<img src="image2.jpg" />
and of course #sidebar doesn't display anything. How could I format the js file so I can just use the above html code to link different php files?
also, if there is a better way of pulling html code from a external file into a div, do let me know!
Thanks!
html:
<img src="image1.jpg" />
<img src="image2.jpg" />
jQuery:
$(document).ready(function(){
$('#show1').click(function(){
$('#sidebar').load('show1.php');
});
$('#show2').click(function(){
$('#sidebar').load('show2.php');
});
});
edit: added document ready function
Related
I am building a blogging website and I am facing troubles when I try to upload a photo. I need the photo to be pasted in the webpage. I know that javascript can do that, but it only affects the current session of the webpage. I need to permanently embed that image into the webpage as a child of this div element, for example:
<div id="img-wrapper"></div>
Everything is OK with PHP file uploads. How can I do that with PHP?
I assume its not an advisable solution as it increases the page size, but you can do this in the following manner:-
Some examples:
HTML:
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
Here is a sample code
https://jsfiddle.net/casiano/xadvz/
For an online image to base 64 encode Click here
I need to read a text file on a server and display its content in a blog post on Blogger. The text file is a result of a simple download counter and contains a number. The problem is the Blogger does not support PHP codes in a post. My current solution is to use OBJECT tag to call PHP script that displays the text file content with ECHO. It works. But the result is displayed inside a small frame and I can't apply CSS style to it or align it properly with the existing text. Is there another way? I understand it can be done with AJAX call but my scripting knowledge is basic and I wouldn't know where to begin. Help would be appreciated.
To display the result in the blog I used this code:
<p>File test.zip downloaded
<object type="text/plain"
data="http://example.com/statistics.php?dname=test"
width="30" height="30"></object> times</p>
EDIT: I have tried to follow #Toni suggestion but it only leads to more questions. Looks like Ajax call is way beyond my current level of knowledge. Sorry and thank you again.
Here is what I'm currently trying. I have moved the text that goes with the counter inside PHP file so the script now returns a string like "file has been downloaded 8 times" instead of just number "8". Also instead of OBJECT tag I'm using IFRAME.
<iframe src="http://example.com/mystats.php?dname=test"
frameborder="0" border="0" cells pacing="0" height="30"></iframe>
The iframe seems to be easier to style. If I can't figure out how to find which CSS is applied to a blog post and how to apply it to iframe, I can at the minimum mimic the style by using similar font.
You can use javascript with your blogger web-site.
Using javascript on your web-page, you can invoke a GET request to your PHP code and get the data you want, to display it on your web-page.
Below, there are links, to help you with this task:
How to invoke GET request in vanilla JavaScript
Invoking GET with jQuery
Use JavaScript to alter text dynamically
I made it work with JavaScript! Here is how. Server side PHP script reads and echoes a text file inside document.write().
<?php
$varcontent = #file_get_contents('yourtextfile.txt');
echo 'document.write("'.$varcontent.'")';
?>
The resulting string looks like this:
document.write("your text file content here")
Inside the Blogger post add the JavaScript code with the PHP script file as a source:
<script type="text/javascript"
src="http://example.com/yourfile.php">
</script>
Done! The content of your text file is displayed and styled with your current CSS.
I have an application that returns data to a PHP/HTML file but the issue is it can call my application many times per page load:
An example HTML file with my calls only asking for images:
<img border="0" alt="" src="http://mydomain.com/test/index.php?element=1"></img>
</br>
<img border="0" alt="" src="http://mydomain.com/test/index.php?element=2"></img>
</br>
<img border="0" alt="" src="http://mydomain.com/test/index.php?element=3"></img>
</br>
This works fine every time and all of the images are returned, however my trouble starts when I want to return text/html.
The server side code works fine:
header('Content-type: text/html');
ob_start();
echo $filepath;
ob_flush();
ob_end_clean();
$filepath contains some text or HTML such as, "Check out our <strong>NEW</strong> offers!"
All I want is to return the HTML text and allow it to be embedded within the page so that if they want:
<h1>Check out our <strong>NEW</strong> offers!</h1>
or
<p>Check out our <strong>NEW</strong> offers!</p>
It will work fine.
The problem is, which HTML Tag should I use to call for the data in the same way I use <img> for images?
I have tried <object>, `
` etc... but these are no good as all I want is the raw HTML data returned.
Using the Javascript load() is not good as it relies on the web page builder creating a function call for every time they want to get data.
You can't do it with HTML, you could use jQuery + AJAX.
You have to use Ajax. you cannot do it in html.
You can output it with PHP and then if you update the file it will update site wide without making changes everywhere. Is there a reason you want to do it this way and not just insert the code manually? This could cause problems with the caching of your pages depending on how dynamic they are.
newOffers.php
<?php
echo '<h1>Check out our <strong>NEW</strong> offers!</h1>';
?>
Then in your site source:
<p>Blah blah blah...</p>
<?php include 'newOffers.php'; ?>
<p>Click our new offers link above</p>
You can use an <iframe> for this, but this is not really ideal as the resizing is not done automatically.
Alternatively you can indeed use Ajax to change the code.
Either way: think about your reason for wanting to include the HTML like this instead of just returning this html code with the original return?
i've got the following problem. I've been moving a large amount of content by hand and while inserting images, i put the lightbox class on the tag - unfortunately for the images to properly work, they would need an anchor around them specifying the url to the full image size - for example
<img src="images/myimage.jpg">
All I've got now is :
<img src="images/myimage.jpg" class="lightbox">
Is it possible to automatically set an anchar around every image found inside a specific <div> element and also properly close it? I would need something like
foreach image in <div> prepend and append
Any solution in PHP or jQuery would greatly be appreciated!
You can use jQuery's .wrap() method:
$('div img').each(function(){
$(this).wrap('');
});
DEMO: http://jsfiddle.net/bztvw/
With jQuery use .wrap():
$.each($('img'), function(){
$(this).wrap('')
});
It would be better if you specify the container div of these images then only those images will be wrapped. Something like this:
$.each($('#lighboximgwrapper img'), function(){
$(this).wrap('')
});
Use RegExp
Pattern:
<img(.*)src="([\w\/\.]+)"(.*)>
Replace with:
<img src="$2" alt="" />
preg_replace PHP Function
Personally, I would fix the code generating the source. Just use the regex find/replace in your IDE and fix the source. Don't rely on some javascript or PHP hack to "fix" this mistake.
I'm trying to construct a table on the right of the page where I pull out all the videos from the server. I want the users to click a row in the table and it starts to play a video in flowplayer on the left of the page. The video url is something I pull out of the DB.
<?php
for($i=0;$i<$num_videos;$i++)
{
?>
<tr onclick="DoNav('<?php echo $result_videos[$i]["video_url"]; ?>');">
<td>
...
Here's the javascript:
function DoNav(theUrl)
{
flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", document.location.href = theUrl);
}
For whatever reason I can't seem to get flowplayer to work with this div:
<div id="player"><img src="recordings/landscape.jpg" width="320" height="240" /></div>
It will only prompt you to open or save the video instead of playing in the current window. If anyone knows this issue here that would be appreciated. At any rate, I know I can get flowplayer working with a href like so:
<a
href="url"
style="display:block;width:320px;height:240px;"
id="player"><img src="recordings/landscape.jpg" width="320" height="240" />
</a>
But I don't want to put the href in the table as I want that splash image included as well. Any ideas?
Edited to improve clarity.
When the function flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", document.location.href = theUrl); Was called the document.location.href was being evluated and caused the browser to go to the theUrl which prompted for file to be downloaded.
Furthermore we found there is some sort of issue updating a with the as a child DOM object. This was solved by moving the image to the background of the using the inline CSS.
JS Code:
function DoNav(theUrl)
{
flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", theUrl);
}
HTML table:
<div id="player" style="display:block;width:320px;height:240px;background-image:url(recordings/landscape.jpg)"></div>
PHP stayed the same.