I am looking for a web service that displays the html structure of a webpage like a graph.
I have seen an app years ago that looked beautiful. The input was a URL and the output was a flash tree with branches acting like springs and nodes had different colors for different tagnames.
I am not sure if this is an SO question. If not, can you please point me to the right stackexchange page?
Thanks!
Not sure if I understood correctly, but here is what I found
Not sure what you ment with "graph",
but as I'm tring to lern to DOMNodes,
I started playing around with a foldable presentation of html.
this is what i got so far:
source: http://htmlviewer.puggan.se/htmlviewer/htmlviewer.201308131630.phps
live: http://htmlviewer.puggan.se/htmlviewer/htmlviewer.201308131630.php
<?php
require_once('/mnt/data/www/libs/remote.php');
if(isset($_GET['debug']))
{
$debug_page = file_get_contents("exemple.html");
}
$form_page = <<<HTML_BLOCK
<html>
<head>
<title>HTML Viewer</title>
<style>
#url_input
{
width: 800px;
}
</style>
</head>
<body>
<!-- placeholder error -->
<form action='?' method='post'>
<label>
<span>Enter a URL</span>
<input type='text' name='url' id='url_input' />
</label>
<br />
<input type='submit' value='view HTML' />
</form>
</body>
</html>
HTML_BLOCK;
if(isset($_REQUEST['url']) AND $_REQUEST['url'] OR isset($debug_page) AND $debug_page)
{
if(isset($debug_page) AND $debug_page)
{
$url = 'file:///debugpage.html';
$page = &$debug_page;
}
else
{
$url = $_REQUEST['url'];
$url_parts = parse_url($url);
if($url_parts['scheme'] != 'http' AND $url_parts['scheme'] != 'https')
{
echo str_replace("<!-- placeholder error -->", "<p class='warning'>Bad url-scheme</p>");
die();
}
$hash = isset($url_parts['fragment']) ? $url_parts['fragment'] : FALSE;
$page = $remote_site->get_page($url);
}
if(!$page)
{
echo str_replace("<!-- placeholder error -->", "<p class='warning'>Page Empty</p>");
die();
}
$doc = new DOMDocument();
#$doc->loadHTML($page);
if(!$doc)
{
echo str_replace("<!-- placeholder error -->", "<p class='warning'>Failed to read html</p>");
die();
}
echo <<<HTML_BLOCK
<html>
<head>
<title>HTML Viewer</title>
<style>
.node
{
background-color: rgba(255, 255, 0, 0.01);
padding-left: 15px;
border: solid rgba(255, 0, 0, 0.2) 1px;
}
.text_node
{
max-height: 100px;
overflow: auto;
}
.close DIV.long, .close SPAN.long, .close IMG.long, DIV.short, SPAN.short, IMG.short
{
display: none;
}
.close SPAN.short, SPAN.long
{
display: inline;
}
.close DIV.short, .close IMG.short, DIV.long, IMG.long
{
display: block;
}
.expander
{
float: left;
}
</style>
<script>
DOMTokenList.prototype.replace = function replace(from, to)
{
this.remove(from);
this.add(to);
};
DOMTokenList.prototype.togglePair = function togglePair(from, to)
{
if(this.contains(from))
{
this.replace(from, to);
}
else
{
this.replace(to, from);
}
};
</script>
</head>
<body>
<h1>{$url}</h1>
<div id='root_node'>
HTML_BLOCK;
if($hash)
{
$node = $doc->getElementById($hash);
if($node)
{
print_node($node);
}
else
{
print_node($doc);
}
}
else
{
print_node($doc);
}
echo <<<HTML_BLOCK
</div>
</body>
</html>
HTML_BLOCK;
}
else
{
echo $form_page;
}
function print_node($node)
{
if(!$node instanceof DOMNode)
{
trigger_error("Bad node: " . (get_class($node) ?: gettype($node)));
return FALSE;
}
$classes = array('node');
if($node instanceof DOMDocument)
{
echo "<div class='node root_node'>";
if($node->hasChildNodes())
{
echo "<!-- child nodes: " . $node->childNodes->length . " -->\n";
foreach($node->childNodes as $child_node)
{
print_node($child_node);
}
}
}
else if($node instanceof DOMComment)
{
return FALSE;
}
else if($node instanceof DOMDocumentType)
{
echo "<div class='node dockument_type_node'>";
echo htmlentities($node->internalSubset);
}
else if($node instanceof DOMText)
{
if(trim($node->wholeText))
{
echo "<span class='short'>...</span>";
echo "<div class='node text_node data_node long'>";
//echo nl2br(htmlentities(trim($node->wholeText)));
echo "<pre>";
echo htmlentities($node->wholeText);
//echo get_class($node);
//var_dump($node);
echo "</pre>";
echo "</div>\n";
}
else
{
return FALSE;
}
}
else if($node instanceof DOMCharacterData)
{
echo "<div class='node'>";
echo "<pre>";
echo get_class($node);
//var_dump($node);
echo "</pre>";
echo "</div>\n";
}
else if($node instanceof DOMElement)
{
//content
if($node->hasChildNodes())
{
echo "<div class='node element_node element_node_normal node_element_{$node->tagName} close'>";
echo "<span class='expander' onclick=\"this.parentNode.classList.togglePair('close', 'open'); \">";
echo "<img class='short' src='https://www.interfaceways.se/img/icons/bullet_add.png' />";
echo "<img class='long' src='https://www.interfaceways.se/img/icons/bullet_delete.png' />";
echo "</span>";
echo "<span class='tag_open'>";
echo "<span><</span>";
echo "<span class='tag_name'>" . $node->tagName . "</span>";
print_attributes($node);
echo "<span>></span>";
echo "</span>\n";
echo "<!-- child nodes: " . $node->childNodes->length . " -->\n";
echo "<span class='short'>...</span>";
echo "<div class='long'>";
foreach($node->childNodes as $child_node)
{
print_node($child_node);
}
echo "</div>\n";
echo "<span class='tag_close'>";
echo "<span></</span>";
echo "<span class='tag_name'>" . $node->tagName . "</span>";
echo "<span>></span>";
echo "</span>\n";
echo "</div>\n";
}
else
{
echo "<div class='node element_node element_node_solo'>";
echo "<span class='solo_close'>";
echo "<span><</span>";
echo "<span class='tag_name'>" . $node->tagName . "</span>";
print_attributes($node);
echo "<span>/></span>";
echo "</span>\n";
echo "</div>\n";
}
}
else
{
echo "<div class='node'>";
echo "<pre>";
echo get_class($node);
//var_dump($node);
echo "</pre>";
echo "</div>\n";
}
}
function print_attributes($node)
{
if(!$node instanceof DOMElement)
{
return FALSE;
}
if($node->hasAttributes())
{
echo " <span class='attributes'>";
foreach($node->attributes as $node_attribute)
{
echo "<span class='attributes'>";
echo "<span class='attribute_name'>";
echo htmlentities($node_attribute->name);
echo "</span>";
echo "<span>=\"</span>";
echo "<span class='attribute_value'>";
echo htmlentities($node_attribute->value);
echo "</span>";
echo "<span>\"</span>";
echo "</span> ";
}
echo "</span>";
}
else
{
echo ' ';
}
}
?>
Related
I have a problem that I cannot manage to wrap my section properly.
I have a div "container" that with a php part is populated by few divs and I don't know how to properly wrap it with the border:solid of my created div.
html/php part
<div class = "listaCarrello" id ="listaCarrello "style="display: <?php echo !isset($_GET['riepilogo'])&&isset($_SESSION['username'])? "block":"none"?>">
<?php
$isEmpty = true;
foreach ($_COOKIE as $key => $val) {
$query = $connection->query("SELECT * FROM prodotto WHERE IDProdotto = $key");
if ($query != null) {
$isEmpty = false;
$row = $query->fetch_assoc();
echo "<div class = \"elemCarrello\">";
echo "<p class=\"nomeCarrello\">" . $row['nomeProdotto'] . "</p>";
echo "<div class = \"imgCarrello\">";
echo "<img src = \"img/" . $row['immagine'] . "\" alt=\"" . $row['nomeProdotto'] . "\"height=\"150px\" width=\"150px\">";
echo "</div>";
echo "<div class=\"prezzoCarrello\">";
echo "<p>Prezzo unitario " . $row['prezzo'] . "</p>";
echo "<p> Quantità: " . $val;
echo " - Prezzo totale: ";
echo "€" . $row['prezzo'] * $val . "</p>";
$totale = $totale + ($row['prezzo'] * $val);
echo "<p> Modifica la Quantità: ";
echo "<input type='number' id = 'quantita' name='quantita' value='" . $val . "'>";
echo "<button onclick='refreshCookie($key, document.getElementById(\"quantita\").value)'>AGGIORNA</button>";
echo "</div>";
echo "<button class='eliminaCarrello' onclick='eliminaCookie($key)' style='background: white'> <img src='img/elimina.png' height='50' width='50'> </button>";
echo "</div>";
}
}
?>
</div>
<?php
if (!$isEmpty) {
echo "<div class='checkOut'>";
echo "<p>Totale: €" . $totale . "</p>";
echo '<button id="2ndphase" onclick="goToAddress()">AVANTI</button>';
echo "</div>";
}
?>
css part
.listaCarrello{
border:solid;
border-color: lightgray;
border-radius: 10px;
text-align: center;
margin-top: 5px;
width: 99%;
margin-bottom: 5px;
padding-bottom: 50px;
}
.elemCarrello{
margin-top: 5px;
width: 99%;
text-align: left;
float:left;
display: block;
margin-bottom: 5px;
border: solid;
margin-left: 5px;
border-radius: 10px;
}
.nomeCarrello{
padding-left: 10px;
font-weight: bold;
}
.imgCarrello{
float: left;
padding-left: 10px;
}
.eliminaCarrello{
margin-top: -13px;
margin-bottom: 10px;
}
Sorry for my English and I hope that you understood what I am saying.
I have attached a image as an example
Set the "container" divs overflow styling to auto.
container{
overflow:auto;
}
Below is some of the code for my website. The table works perfectly on Firefox but when I open it in either Chrome or Edge it squishes the picture up, I'm not too sure what it is that's making it do this.
This is how it looks on Firefox:
This is how it looks on Chrome/Edge:
<div class="row">
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "music";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM music_tbl";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
echo "<table class='table-hover mainTable' border='1'>";
while($row = mysqli_fetch_assoc($result)) {
echo "<tr><td><img width='80%' height='80%'src=/Music_Player/songimages/". $row['album_cover_url'].">" .
"</td><td>" . $row["track_name"] .
"</td><td>" . $row["singers"] .
"</td><td>" . $row["album_name"] .
"</td><td>" . $row["trackID"] .
"</td><td><img src=playButton.png class='playB'>
</td></tr>";
}
echo "</table>";
} else {
echo "0 results";
}
Below is my CSS:
.mainTable {
position: relative;
right: 20%;
margin:0 auto;
font-size: 99%;
text-align: center;
border: 1px solid #b3b3b3;
border-collapse: collapse;
max-width: 45%;
max-height: 100%;
font-family: verdana;
margin-bottom: -1px;
top: 200px;
}
tr, td {
border-collapse: collapse;
padding: 5px;
max-width: 650px;
}
.albums {
padding: 0px;
}
I keep on searching about this but i didn't find an answer..
I want to print my website page, so i used the margin-top and margin-bottom but it only affected the first sheet.. In the second page, there is no margin on top.. is there a way to do this..
Here is the sample image i am talking about.
Here is the code that I am using. Please help.
<style type="text/css">
.printOnly {
margin-top: 75px;
display: none;
page-break-inside: avoid;
}
.textSummaryTable { page-break-inside:avoid;}
.textSummaryTable tr { page-break-inside:avoid; page-break-after:auto }
#media print {
.summaryTable { page-break-inside: avoid; }
.summaryTable tr:nth-child(odd){ background-color:#E1E4E5; }
.summaryTable tr:nth-child(even) { background-color:#ffffff; }
.printOnly {
display: block;
}
.panel {
border: 1px solid transparent;
padding: 2px;
margin: 0;
}
.textSummaryTable{
border:1px solid gray;
page-break-inside: avoid;
}
.textSummaryTable td{
border:1px solid gray;
page-break-inside: avoid;
}
#main {
overflow: hidden;
position: absolute;
padding: 0px;
height: auto;
width: 100%;
}
#title {
display: none;
}
#line-break {
display: block;
}
.textSummaryTable {
width: 100%;
}
}
#media screen {
#line-break {
display: none;
}
}
</style>
<?php
$this->pageTitle = Yii::app()->name . ' - View Evaluation';
$user = LoginForm::getUser();
?>
<?php
$participants = $modelE->evaluationDetails;
?>
<style type="text/css">
#media print {
body {
overflow: hidden;
}
}
</style>
<div class=" non-printable">
<div class='pull-right non-printable'>
<button id="btnPrint" type="button" class="btn btn-default pull-right" onclick="window.print();">
<span class="glyphicon glyphicon-print"></span> Print
</button>
</div>
<?php
$startDate = date("M j, Y", strtotime($modelE->start_date));
$endDate = date("M j, Y", strtotime($modelE->end_date));
?>
</div>
<div id='line-break'>
<br>
<br>
<br>
</div>
<div class="container-fluid">
<div class="printable">
<h4><?php echo htmlentities($modelE->evaluationForm->name); ?></h4>
<h5><?php echo $startDate; ?> - <?php echo $endDate; ?></h5>
<h5>Candidate: <?php echo htmlentities($modelE->evaluatee); ?></h5>
<h5>Overall Evaluation: <?php echo htmlentities($modelE->getResult()); ?></h5>
<h5>Participants: <?php echo htmlentities(count($participants)); ?></h5>
<div class="panel panel-default">
<div class="panel-body">
<h5><strong>Instructions: </strong> <?php echo htmlentities($modelE->evaluationForm->description); ?></h5>
<!-- <h4>Results Summary</h4> -->
<?php
$radioFlag = false;
foreach ($modelE->evaluationForm->evaluationFormDetails as $question) {
$criteria = new CDbCriteria;
$criteria->with = 'evalResult';
$criteria->addInCondition('eval_form_question_id', array($question->id));
$criteria->addInCondition('evalResult.eval_id', array($modelE->id));
$resultSet = EvaluationResultsDetails::model()->findAll($criteria);
if ( strtolower($question->field_type) != "radioheader" && $question->field_type != "slider" ) {
if($radioFlag){
echo "</table>";
$radioFlag = false;
}
if( $question->field_type == "text" ) {
echo "<h4>" . $question->field_name . "</h4>";
}
else {
echo "<table class='textSummaryTable'><tr><td style='width: 100%'><label>" . $question->field_name . "</label></td></tr>";
foreach ($resultSet as $answer) {
echo "<tr><td>" . $answer->eval_answer . "</td></tr>";
}
echo "</table>";
}
} else {
if(!$radioFlag){
echo '<table border-size = 0px width=100% class="summaryTable">';
$radioFlag = true;
}
echo "<tr><td style='width: 90%'>" . $question->field_name . "";
echo "</td><td style='width: 10%'>";
$sum = 0;
$count = 0;
foreach ($resultSet as $answer) {
$count++;
$sum += $answer->eval_answer;
}
echo $count == 0 ? "-" : number_format($sum / $count, 2);
echo "</td></tr>";
/*** end here ***/
}
}
if($radioFlag){
echo "</table>";
}
?>
<table class="printOnly">
<tr>
<td colspan="2">
<p> I hereby certify that all information declared in this document are accurate and true. Each item have been discussed with my Immediate Superior and mutually agreed upon.</p>
</td>
</tr>
<tr>
<td>
<p>Prepared by
<?= $modelE->project->manager->family_name . ", " . $modelE->project->manager->first_name ?>
</p>
Date <?= date("Y-m-d"); ?>
</td>
<td>
<p>Conformed by <?= $modelE->evaluatee ?></p>
Date
</td>
</tr>
<tr>
<td colspan="2">
<p>Noted by HR Division</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
I have a Wordpress widget and inside the widget I am displaying profile information. Some times the text for the 2nd row is too long and it overflows past the widget container.
What would be a good way to deal with this, and how could I implement it in css or html or whatever?
My css
#profileContainer {
float: left;
position: relative;
width: 400px;
display:block;
padding: 5px;
}
#avatarContainer {
width: 55px;
float: left;
padding: 5 5 5 5;
}
#dataContainer {
float: left;
vertical-align: text-top;
word-wrap: break-word;
}
#dataList {
display: inline-block;
}
My html for the output
?>
<div id="profileContainer">
<?php
$img = bp_core_fetch_avatar( 'html=false&item_id=' . $author->getId() );
$img_html = '<img src="' . $img . '"></img>';
?>
<div id="avatarContainer">
<?php
if ($author->getUrl() != null) {
echo "<a href='" . $author->getUrl() . "'>" . $img_html . "</a>";
} else {
echo $img_html;
}
?>
</div> <!--closing avatar container div -->
<div class="overflow-hidden">
<?php
if ($author->getName() != null) {
echo "<b>" . $author->getName() . "</b>";
}
if ($author->getJobTitle() != null) {
echo "<br/>" . $author->getJobTitle();
}
if ($author->getUserName() != null) {
if ($author->getUrl() != null) {
echo "<br/><a href='" . $author->getUrl() . "'>#" . $author->getUserName() . "</a>";
} else {
echo "<br/>#" . $author->getUserName();
}
}
if ($author->getEmail() != null) {
echo '<br/>' . $author->getEmail() . "";
}
if ($author->getPhone() != null) {
echo "<br/> " . $author->getPhone();
}
echo "<br/>";
?>
</div> <!--closing data container div -->
</div> <!--closing container div-->
<?php
in css do this to wrap text in elipsis mode (three dots)
.overflow-hidden{
max-width:400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I've run into the problem that when I echo information Into a table using PHP and HTML from the database the information moves depending on how it loads.
By this I mean if I constantly refresh everything will be different to how it previously was. I mean how it is displayed not what is displayed.
.tracklist {
}
.tracklist img {
max-width:15%;
max-height:15%;
}
.tracklist td{
width:36%;
display:block;
padding:1%;
text-align:center;
}
#content {
width:98%;
height:73%;
padding-left:1%;
padding-right:1%;
background-color:#d8d8d8;
text-align:center;
}
#contentbox {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-align:center;
background-color:#999999;
}
<div id="content">
<div id="contentbox">
<br />
<table class="tracklist">
<?php
$i = 0; $trEnd = 0;
while ($row = mysql_fetch_array($result)){
if($i == 0){
echo '<tr>';
}
echo '<td>';
echo $row["genre"]." | ".$row["artist"]." | ".$row["name"];
echo '<br />';
echo "<img src=".$row["image"].' />';
echo '</td>';
if($i == 2){
$i = 0; $trEnd = 1;
}else{
$trEnd = 0; $i++;
}
if($trEnd == 1) {
echo '</tr>';
}
}
if($trEnd == 0) echo '</tr>';
?>
</table>
</div>
</div>
The data from the database is called in the header just so people know that it is called.
Fixed this by putting width:100%; in the class which it inherited the height from.
Seems to of fixed it for now.