i'm trying to get some attributes for HTML tags in web page for example
<html>
<head>
<title>test page</title>
</head>
<body>
<div id="header" class="clearit" role="banner">
<div id="headerWrapper">
<ul id="primaryNav" role="navigation">
<li id="musicNav" class="navItem">
Music
</li>
<li id="listenNav" class="navItem">
Radio
</li>
<li id="eventsNav" class="navItem">
Events
</li>
<li id="chartsNav" class="navItem">
Charts
</li>
<li id="communityNav" class="navItem">
Community
</li>
<li id="originalsNav" class="navItem">
Originals
</li>
</ul>
</div>
</div>
</body>
</html>
for example i need the actual Height and width for #headerWrapper and compare it with #musicNav in my PHP program , since php is server side i can't get these attribute so i'm thinking to append javascript code to calculate these attribute and store it in json file like this code
<script type="text/javascript">
document.ready(function() {
var JSONObject= {
"tagname":"headerWrapper",
"height":$("#headerWrapper").height(),
"width":$("#headerWrapper").width()
},
{
"tagname":"musicNav",
"height":$("#musicNav").height(),
"width":$("#musicNav").width()
}
});
});
</script>
then read it by php file contain my algorithm witch extract visual features from webpages.
but my problem is i need to render the webpage with appended javascript using some browser or rendering engine in PHP or java ... so dose any one have some thing like that? is my method right or there is better solution?
Incase you want to render a webpage given a url and need an api to walk through the rendered dom
Phantomjs and its api and examples will help you. Check out open render
PhantomJS is a headless WebKit with JavaScript API. It has fast and
native support for various web standards: DOM handling, CSS selector,
JSON, Canvas, and SVG.
If i understand you correctly, you need a means to control the browser from your java app.
This
seems to be relevant.
Things you may also want to account for --
Letting the app know about your browser(binary or otherwise).
Choosing from multiple available browsers on the host.
Account for cross-platform support.
Related
I created an application that display dynamically a list view from Data Base
I used HTML5 JQuery Mobile and PHP and running it with Trigger.io on emulator Android
so it works good on browsers and display the list contains an image and text..
so here's so codes
the html5
<div data-role="page" id="restaurant_favoris" data-theme="c" >
<div data-role="header">
</div>
<div data-role="content" class="ui-content-list">
<ul data-role="listview">
<?php render('resto') ?>
</ul>
</div>
</div>
the php call a service that iterate a Table and display
<li>
<a href="#">
<img src="assets/img/list/album-k.jpg" />
<h3>Name <?php echo $favoritrestaurant->name?></h3>
<p>nombre de points est <?php echo $favoritrestaurant-> nombre_points?></p>
</a>
</li>
like I said it works on browsers and no things to display on emulator android 2.2
Are you doing a Forge-Run-Android?
That will not work trying to run PHP on Android.
You will need to create a service on your web server where your database resides and call that service with javascript, ideally returning the data in something like JSON. Call it with forge.request.ajax and process the results similarly to how your are with PHP, just do it with javascript.
See Docs here:
https://trigger.io/modules/request/current/docs/index.html#forgerequestajaxoptions
I am having a little difficulty passing some client side data into a third party plug-in.
I am trying to get a plug-in option to work off a variable that is created and populated via a user clicking on the <li>'s below.
Brief:
I have some HTML that acts as the handler for the interaction.
<ul class="subpage-list" id="intro-subpage-list">
<li data-slide="1">slide 1</li>
<li data-slide="2">slide 2</li>
<li data-slide="3">slide 3</li>
<li data-slide="4">slide 4</li>
<li data-slide="5">slide 5</li>
<li data-slide="6">slide 6</li>
</ul>
When the user clicks on any of the <li>'s I have the following code:
$("#intro-subpage-list li").click(function() {
var slideID = $(this).attr('data-slide');
$("body").css('overflow','hidden');
$("#intro-overlay").fadeIn(1000,function() {
$("#intro-subpage").show();
});
});
The HTML that loads after the JS interaction is as follows:
<div id="intro-overlay" class="overlay">
<div id="overlay-close">X</div>
<div id="loading"></div>
<section id="intro-subpage">
<div class="ls-layer">
<img class="ls-bg" alt="layer1-background" src="/<? echo ASSETS . IMAGES . BGS . LIGHTSLIDER; ?>intro/1.jpg">
</div>
<div class="ls-layer">
<img class="ls-bg" alt="layer2-background" src="/<? echo ASSETS . IMAGES . BGS . LIGHTSLIDER; ?>intro/2.jpg">
</div>
</section>
</div>
The code that loads and controls the plug-in is as follows:
$(".overlay section").layerSlider({
autoStart: false,
imgPreload: true,
slideDelay: '6000'
});
There is an option for this plug-in called "firstLayer" which to me makes perfect sense to be the option that would control the slider to load the correct slide dependant on the <li> that was clicked.
I have a file called functions.php that handles the HTML and a file called jquery.php that handles the plug-in and the JS.
If I have missed anything important please request and I shall edit this post with those details.
Thanks in advance.
Dan.
As no one was able to help with this question I went ahead and tried again for the solution to which I realised that creating my own plug-in; although time consuming, was the best option as I could tailor the plug-in to work exactly how I wanted.
Thank you to all who at least looked at the question and possibly thought about it.
I'm trying to get some attributes for HTML tags in a web page.
<html>
<head>
<title>test page</title>
</head>
<body>
<div id="header" class="clearit" role="banner">
<div id="headerWrapper">
<ul id="primaryNav" role="navigation">
<li id="musicNav" class="navItem">
Music
</li>
<li id="listenNav" class="navItem">
Radio
</li>
<li id="eventsNav" class="navItem">
Events
</li>
<li id="chartsNav" class="navItem">
Charts
</li>
<li id="communityNav" class="navItem">
Community
</li>
<li id="originalsNav" class="navItem">
Originals
</li>
</ul>
</div>
</div>
</body>
</html>
For example, I need the actual height and width for #headerWrapper and compare it with #musicNav in my PHP script. Since PHP is server-side, I can't get these attributes so I'm thinking to append Javascript code to calculate these attributes and store them in a JSON file like in this code:
<script type="text/javascript">
document.ready(function() {
var JSONObject= {
"tagname":"headerWrapper",
"height":$("#headerWrapper").height(),
"width":$("#headerWrapper").width()
},
{
"tagname":"musicNav",
"height":$("#musicNav").height(),
"width":$("#musicNav").width()
}
});
});
</script>
Then I'd like to read it in the php file that contains my algorithm to extract visual features from web pages. So I need to render the web page with appended Javascript using some browser. I'm using exec to send the new file to Firefox, like this:
exec('"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" "http://localhost/Autoextractor/test.html" 2> errors.txt');
And Firefox opens in taskmanager but does not dispaly, the page is not rendered, and my appended Javascript code is not executed.
safe_mode=off - disabled_functions deleted from php.ini and when executing
exec("whoami");
The result is my user (note: my user in Administrator group) and I did try wscript with no result.
Does anyone have any idea why it's not working, or has another solution to get the dimensions of HTML tags?
Simply running a browser won't allow you to read any data back from it, so forget about using system.
You can use Selenium Webdriver to control a browser with PHP, run JavaScript, then return the result.
When you write your real JavaScript, you will need to fix the syntax errors that appear in the example you included in the question.
Keep in mind that the size of elements on screen will depend on factors such as installed fonts, chosen font size, browser, window size, etc. You can get a result for a browser running on your system, but you can't depend on it to be a universal result.
"have another solution to get Get dimension of HTML tags?"
Something wrong with Firebug/Inspect, which will give you rendered offsets with a few simple operations.
Run your code in a console if you want to do it programmatically, though you'll still need firebug/Inspect to find the right selectors (which really obviates the ability to do any of this automatically). Trying to log it all... well, it sounds like you're trying to keep a database... perhaps you should set one up.
This might be a problem that you need to add more context to get a useful response.
Hi I was wondering what php code I can use that would allow my page to contain more than one image that changes. I would like the php code to output the HTML tag. Can anyone help me with this? Thanks!
you need to output all images to the browser from PHP, then use Javascpt to change the pictures. PHP is for server side scripts, the change you are talking about requires Client Side procxessing, ie Javascript. Do a search for jQuery image changer for some ideas
The kind of mechanism you are referring to is often called a slideshow or a carousel, and it is done with javascript. Google "jQuery slideshow" or "jQuery carousel" and you'll find plenty of those.
If you need something simple, I suggest you the tiny the jQuery plugin tiny carousel.
Scroll to the How To section to know how to set it up.
Then, to change the images with php, you will need to do something like this:
<div id="slider-code">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php foreach(glob('slideshow/*.jpg') as $imagePath): ?>
<li><img src="$imagePath" /></li>
<?php endforeach; ?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
Maybe the answer to this question is less complicated than I am making it...
I have a Zend Framework PHP web application. I am going to create a simple API that will output a report for the user's account. The content will be as simple as this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
I want to offer a code snippet that the user can use to embed the report on their own site.
I'm thinking this can be done with an iFrame, but I've never done this before so I don't know the best way to do this.
Update: If possible, I would also like to offer the ability for the user to style the content. Is that possible with an iFrame? I want the embedded content to look as much like the rest of the page as possible.
At its very simplest:
Create a .js file with:
document.write("<ul>");
document.write(" <li>Item 1</li>");
document.write(" <li>Item 2</li>");
document.write("</ul>");
Your users would then include this code wherever they wanted your embedded code to appear:
<script type="text/javascript" src="http://example.com/path/to/file.js"></script>
This approach allows them to style content. They wouldn't be able to style an IFRAME, but some sites providing IFRAMEable widgets solve this by allowing the user to pick colours, background images, etc. on a setup page.
Ceejayoz & Joe have already covered the 2 basic options, Javascript or IFrame.
If you want to check out some examples, take a look at the StackOverflow flair feature, that does exactly what you are trying to do and allows a user to embed the StackOverflow user info box on their own website.
If you want to see how it's implemented, check out the html which a user would link to with an IFrame, or this Javascript, which the user would call from their page. (see the notes under "how do I use it" on the SO flair page.)
[You need to insert your user number in those links to see the relevant html/js files for yourself.]
In the case of SO, the js/html is generated specifically for each user. For completeness I've included the StackOverflow js/html that achieves this.
JavaScript: You can see when executed this basically writes a script element into the users html page that injects a link to the SO css file into the head. Then it just includes some fairly simple div/span tags which get styled by the css. Obviously, the user could in this case provide their own css instead if they wanted to style it differently.
document.write('
<script>
var link = document.createElement(\"link\");
link.href = \"https://stackoverflow.com/content/flair-Default.StackOverflow.css\";
link.rel = \"stylesheet\";
link.type = \"text/css\";
var head = document.getElementsByTagName(\"head\")[0];
head.appendChild(link);
</script>
<div class=\"valuable-flair\">
<div class=\"gravatar\">
<a title=\"See my profile on Stack Overflow\" target=\"_blank\" href=\"https://stackoverflow.com/users/1/jeff-atwood\">
<img src=\"http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&d=identicon&r=PG\" height=\"50\" width=\"50\" alt=\"\">
</a>
</div>
<div class=\"userInfo\">
<span class=\"username\">
<img src=\"http://sstatic.net/so/favicon.ico\" />
Jeff Atwood
<span class=\"mod-flair\" title=\"moderator\">♦</span>
</span>
<br />
<span class=\"reputation-score\" title=\"reputation score\">16,907</span>
<br />
<span title=\"5 gold badges\"><span class=\"badge1\">●</span>
<span class=\"badgecount\">5</span></span><span title=\"55 silver badges\">
<span class=\"badge2\">●</span><span class=\"badgecount\">55</span></span>
<span title=\"72 bronze badges\"><span class=\"badge3\">●</span>
<span class=\"badgecount\">72</span></span>\r\n </div>\r\n</div>'
);
Html - for an IFrame: You can see this is a full HTML document (XHTML actually to be pedantic) that includes everything needed including the link to the css in the head and the content in the body.
<!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=utf-8" />
<link rel="stylesheet" href="http://sstatic.net/so/flair-Default.StackOverflow.css" />
</head>
<body>
<div class="valuable-flair">
<div class="gravatar">
<a title="See my profile on Stack Overflow" target="_blank" href="https://stackoverflow.com/users/1/jeff-atwood"><img src="http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&d=identicon&r=PG" height="50" width="50" alt=""></a>
</div>
<div class="userInfo">
<span class="username"><img src="http://sstatic.net/so/favicon.ico" />Jeff Atwood<span class="mod-flair" title="moderator">♦</span></span>
<br />
<span class="reputation-score" title="reputation score">16,907</span>
<br />
<span title="5 gold badges"><span class="badge1">●</span><span class="badgecount">5</span></span><span title="55 silver badges"><span class="badge2">●</span><span class="badgecount">55</span></span><span title="72 bronze badges"><span class="badge3">●</span><span class="badgecount">72</span></span>
</div>
</div>
</body>
</html>
iFrame will work best. An ajax call would work, but you'd have to do what Google does and have them include a src script from your site as well. iFrames are basically div tags that load a page into the content area. They take all the CSS arguments like any other block level element save for the internal content such as font, color, etc.