I want to store html that isn't to be rendered until needed either within a tag that can hold raw html code without rendering it on page load or store it within a php or jquery variable for later use. I then want to be able to insert the html into the DOM on button click and have it render.
I've tried storing it within an xmp tag as that can store html code with the < and > characters without using character codes for them, but when trying to insert it into the DOM, the updated source shows it had been copied but it wouldn't render on screen. Also tried storing it within a code tag, which worked on a desktop browser but not in mobile safari. Since this is a webapp mobile browser compatibility is important.
Anyone know of a good method of doing this?
Try <script> tags with a type of text/plain or text/html:
<script type="text/plain" id="example">
<div class="example">
<h2>Hello</h2>
<p>World</p>
</div>
</script>
$(".button").click(function () {
var html = $("#example").text();
$("#destination").html(html);
});
It depends on where do you want to generate the content in question. If it's easier for you setup to generate it on the server side, you can use css to hide those parts (like display:none) and just remove the css property or grab the nodes with javascript and put them elsewhere with something like this:
$('.target').html($('.hidden_node').html());
If you want to generate the content on the js side, you can build it as a long string and just shove it into the target, or you can use jquery's node generation syntax like:
$('<div />').attr({
class: 'test'
}).appendTo("body");
Or you can use one of the various javascript templating solutions like mustache or handlebars.
Related
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 a problem and hope someone can help me.
I use iframe with src="http://my.own.domain/some/path/file-1";
This url send me a content from "http://some-site.com/path1/path2/path3/qwerty.html";
But before sending the content I am pre-proccessing links and resources.
For example if css <link rel="/css/style1">, I add protocol and host to it and makes something like <link rel="http://some-site.com/css/style1">
After what I'm clicking on some page element and read current node information by js ( name and attributes of current node, name and attributes of parent node and goes up till I see html tag).
This data I send to php script using ajax.
Using php I convert it to XPath selector and see that my selector is incorrect.
//html
/body[0]
/div[#id='wrap']
/div[#id='main']
/table[contains(#class, 'content-wrapper')][1]
/tbody[1]
/tr[1]
/td[contains(#class, 'content-wrap')][1]
/div[contains(#class, 'content')][1]
/div[contains(#class, 'node')][1]
/div[contains(#class, 'techs')][1]
/table[1]
/tbody[1]
/tr[4]
/td[contains(#class, 'techs-right')][1]
But native markup of that page is:
//html
/body[0]
/div[#id='wrap']
/div[#id='main']
/table[contains(#class, 'content-wrapper')][1]
/*/tbody[1] - without this*/
/tr[1]
/td[contains(#class, 'content-wrap')][1]
/div[contains(#class, 'content')][1]
/div[contains(#class, 'node')][1]
/div[contains(#class, 'techs')][1]
/table[1]
/*/tbody[1] - without this*/
/tr[4]
/td[contains(#class, 'techs-right')][1]
It seems like browser is modifying incorrect markup and makes it correct.. But this is a hitch for me. How to turn this off?
I have an html file with this line:
<div >%%GLOBAL_ProductThumb%%</div>
and live it generates this:
<img width="200px" height="200px" alt="" src="[I removed the URL]">
In a PHP file, I see the variable being assigned on this line
$GLOBALS['ProductThumb'] = ImageThumb200x200($rowimg['imagefile']);
I don't know much about PHP, but how can I add fill the "alt" property with text? In what step/where would this occur? If this were Java I wouldn't have a problem figuring out how to set the property of an object, but I'm not quite sure what's going on here. If the context helps, it's custom shopping cart software designed for our business.
PHP has no standard means to add some HTML attribute to a HTML tag. All you can do is build the HTML code as a string, then printing out the string. Which is something your software does by grabbing some other variables, giving you little direct influence on the generated code.
That said, the only thing you can do is inspecting what exactly all those custom functions are returning. If you are lucky, you find the exact HTML code that will land on the page in the end somewhere. From there, it's just a matter of programmatically searching and replacing before handing the final string further down the line.
A jquery hack can do that for you. If you can penetrate that third party app. You can embed a Jquery code that can take care of it on DOM Ready event.
Example:
<script type="text/javascript">
$(document).ready(function(){
$("img[width='200px'][height='200px']").prop("alt", "Your ALT value");
})
</script>
So my school has this very annoying way to view my rooster.
you have to bypass 5 links to get to my rooster.
this is the link for my class (it updates weekly without changing the link)
https://webuntis.a12.nl/WebUntis/?school=roc%20a12#Timetable?type=1&departmentId=0&id=2147
i want to display the content from that page on my website but with my
own stylesheet.
i don't mean this:
<?php
$homepage = file_get_contents('http://www.example.com/');
echo $homepage;
?>
or an iframe....
I think this can be better done using jquery and ajax. You can get jquery to load the target page, use selectors to strip out what you need, then attach it to your document tree. You should then be able to style it anyway you like.
I would recommend you to use the cURL library: http://www.php.net/manual/en/curl.examples.php
But you have to extract part of the page you want to display, because you will get the whole HTML document.
You'd probably read the whole page into a string variable (using file_get_contents like you mentioned for example) and parse the content, here you have some possibilities:
Regular expressions
Walking the DOM tree (eg. using PHPs DOMDocument classes)
After that, you'd most likely replace all the style="..." or class="..." information with your own.
Hello i am trying to animate a div background color this way with php and javascript html.
<div background="<?=for($step = 0; $step < 256; $step++)
echo "rgb($step, $step, $step);"; ?>" /> contents </div>
So the code will make change the div from black to white as my example clearly shows.
But it is not working, any ideas?
i want to implement it in my personal website http://www.nickersonweb.com/ buttons
Once your page is generated by PHP and sent to the client, your PHP code can no longer change the content on the client side.
That's where client-side code (Javascript) comes in.
To quickly achieve what you're trying to do, have a look at this question: jQuery animate backgroundColor , which recommends using jQuery with the jquery-color plugin. Here's a quick demo: http://jsfiddle.net/MCwxG/
p.s. I'm sure it's possible to do it with pure javascript, but my js-fu is not accomplished enough to show you how.
You can't do it with php, it's server side.
But you can do it with the color plugin with jQuery.
Well, you're using <?= with a for loop statement, when it should only be used with an expression. You need to change that to <?php (or <? if your server supports it).
<div>s don't have a background attribute. You'd need to modify their style.
You're writing all of the style changes to the page before you're writing the content.
The browser can't even try to render the <div> before it's closed with >, and all of your styles will be interpreted at once, and only the last one will be visible.