So basically, what im trying to achieve is output data via php within html comments and so it is not rendered.
Then use javascript to remove the comments so it is rendered on screen but in view page source, comments must be still there.
I tried a few solutions mentioned on other stackoverflow posts but nothing did the trick.
Any ideas anyone?
For example: if you view the source code of facebook, their content is in comments but yet its rendered.
<script>big_pipe.onPageletArrive({"phase":1,"id":"pagelet_composer","css":["sbVQp"],"bootloadable":{"legacy:Composer":{"resources":["Q6HMA","sbVQp"]},"legacy:DataSource":{"resources":["Q6HMA"]},"legacy:dom":{"resources":["Q6HMA"]},"legacy:control-textarea":{"resources":["Q6HMA","IRaZg","sbVQp"]}},"resource_map":{"IRaZg":{"type":"js","src":"http:\/\/static.ak.fbcdn.net\/rsrc.php\/v1\/yM\/r\/pc-N6ldw6Ia.js"}},"js":["Q6HMA"],"jscc_map":"({\"j98xJNAPg55OWGAly21\":function(){return new DataSource({\"maxResults\":5,\"queryData\":{\"viewer\":100003192277539,\"filter\":[\"page\",\"app\"],\"context\":\"topics\",\"rsp\":\"mentions\"},\"queryEndpoint\":\"\\\/ajax\\\/typeahead\\\/search.php\",\"bootstrapData\":{\"viewer\":100003192277539,\"filter\":[\"user\",\"friendlist\",\"page\",\"app\",\"group\",\"event\"],\"options\":[\"friends_only\",\"nm\",\"include_subscribed_lists\"],\"token\":\"v7\",\"context\":\"mentions\",\"rsp\":\"mentions\"},\"bootstrapEndpoint\":\"\\\/ajax\\\/typeahead\\\/first_degree.php\",\"token\":\"1332238929-7\"});},\"j98xJNAPg55OWGAly22\":function(){return new Composer($(\"uwgh9l_7\"), {\"xhpc\":\"composerTourStart\",\"endpoint\":\"\\\/ajax\\\/updatestatus.php\",\"formType\":1,\"placeholder\":\"What's on your mind?\",\"buttonLabel\":\"Post\",\"autoscrape\":true,\"barContent\":\"\\u003Cspan class=\\\"uiComposerTagControls friendTaggerIcon\\\">\\u003C\\\/span>\\u003Cspan class=\\\"uiComposerTagControls placeTaggerIcon\\\">\\u003C\\\/span>\",\"disableCache\":true,\"lazyEndpoint\":\"\\\/ajax\\\/metacomposer\\\/attachment\\\/status\\\/status.php\"}, true, JSCC.get('j98xJNAPg55OWGAly21'));},\"j98xJNAPg55OWGAly23\":function(){return new MentionsInput($(\"uwgh9l_8\"));},\"j98xJNAPg55OWGAly24\":function(){return new MetaComposerMessageBox();},\"j98xJNAPg55OWGAly25\":function(){return new TypeaheadMetrics({\"extraData\":{\"event_name\":\"mentions\"}});},\"j98xJNAPg55OWGAly26\":function(){return new Typeahead(JSCC.get('j98xJNAPg55OWGAly21'), {node_id: \"\", ctor: \"ContextualTypeaheadView\", options: {\"autoSelect\":true,\"renderer\":\"compact\"}}, {ctor: \"TypeaheadAreaCore\", options: {}}, $(\"uwgh9l_12\"))}})","onload":["JSCC.get('j98xJNAPg55OWGAly22').init(JSCC.get('j98xJNAPg55OWGAly23'));","JSCC.get('j98xJNAPg55OWGAly24').init($(\"uwgh9l_11\"), JSCC.get('j98xJNAPg55OWGAly23'));"],"content":{"pagelet_composer":{"container_id":"uwgh9l_14"}}});</script>
<code class="hidden_elem" id="uwgh9l_15"><!-- <ul id="boulder_fixed_header" class="uiStream"><li class="mts uiStreamHeader"><span class="plm uiStreamHeaderText fss fwb"></span><div class="uiStreamHeaderChronologicalForm"><div class="uiSelector inlineBlock uiSelectorRight uiSelectorNormal uiSelectorDynamicLabel"><div class="wrap"><a class="uiSelectorButton uiButton" role="button" href="#" aria-haspopup="1" data-length="30" rel="toggle"><span class="uiButtonText">SORT</span></a><div class="uiSelectorMenuWrapper uiToggleFlyout"><div role="menu" class="uiMenu uiSelectorMenu"><ul class="uiMenuInner"><li class="uiMenuItem uiMenuItemRadio uiSelectorOption checked" data-label="SORT"><a class="itemAnchor" role="menuitemradio" tabindex="0" aria-checked="true" href="/?sk=h_nor"><span class="itemLabel fsm">Top Stories</span></a></li><li class="uiMenuItem uiMenuItemRadio uiSelectorOption" data-label="SORT: MOST RECENT"><a class="itemAnchor" role="menuitemradio" tabindex="-1" aria-checked="false" href="/?sk=h_chr"><span class="itemLabel fsm">Most Recent</span></a></li></ul></div></div></div><select><option value=""></option><option value="h_nor" selected="1">SORT</option><option value="h_chr">SORT: MOST RECENT</option></select></div></div></li></ul><div id="pagelet_stream_masher" data-referrer="pagelet_stream_masher"></div><div class="UIIntentionalStream UIStream" id="c4f68733a3e65c9c49002913"><ul class="uiList uiStream uiStreamHomepage translateParent UIIntentionalStream_Content" id="home_stream"></ul><div ><div class="UIIntentionalStream_Error"><div class="pam uiBoxRed"><div class="fsl fwb fcb">This stream is unavailable at this time. Please try again soon.</div></div></div></div><div ><div id="pagelet_stream_pager"></div></div></div> --></code>
They use a system called bigpipe for realtime and faster interface but i dont want to use a realtime system(not for now).
So im trying to do the same thing!
Locate element that holds comments ( E.g. by using document.getElementBydId), and do this for extracting content within comments:
element.innerHTML = element.innerHTML.replace(/<!--((.|\n|\r)*?)-->/g, '$1');
simple use css and set it to display:none; or visibility : hidden;
if it's for seo purposes there's an article that can be read here
http://3n9.org/articles/css-hiding.html
and tbh i really dont understand what your asking for ... since comment already doesnt get rendered onscreen so i assumme you want to hide html onload
Wrap the "commented" code in a div... and toggle visibility (as posted below) :
function toggleVisibility(var v)
{
var vis="hidden";
if (v) vis="visible";
document.getElementById('yourDiv').style.visibility = vis;
}
You will have to get all nodes from the page and then cycle through them looking for nodeType. Check for comments and then use the removeChild property on the nodes parent.
Related
I'm trying to start from the <span> element that has text Value when transacted
Then get its parent <div> and get following sibling which is a <div> and from that <div> get the text of the child <span>.
From what I can tell, the code is correct and should echo $1,034.29.
It echos $0.00 instead.
What am I missing here?
php code:
$a = new DOMXPath($doc);
$dep_val_txt = $a->query("//span[contains(text(), 'Value when transacted')]");
$dep_val_nxt_elem = $a->query("parent::div", $dep_val_txt[0]);
$dep_val_elem = $a->query("following-sibling::*[1]", $dep_val_nxt_elem[0]);
$dep_val = $dep_val_elem->item(0)->childNodes->item(0)->nodeValue;
echo $dep_val;
html code:
<div class="sc-8sty72-0 cyLejs">
<span class="sc-1ryi78w-0 bFGdFC sc-16b9dsl-1 iIOvXh sc-1n72lkw-0 bKaZjn" opacity="1">Value when transacted</span>
</div>
<div class="sc-8sty72-0 cyLejs">
<span class="sc-1ryi78w-0 bFGdFC sc-16b9dsl-1 iIOvXh u3ufsr-0 gXDEBk" opacity="1">$1,034.29</span>
</div>
In case someone else stumbles upon this question in the future, I will summarize the solution which was concluded by conversation with OP in the comments:
The issue here is not with the DOM selectors, as observed by the fact that his output is $0.00 even though he is not formatting the value to appear as a currency. This led me to believe that the website being scraped is in fact using placeholder values which are updated on the client side using Javascript. The reason this cannot be resolved with selectors is because the DOM received by PHP will be the initial render, which does not contain the values we wish to scrape.
So the solution is to examine the website being scraped to determine where and how the values are being fetched before being added to the DOM on the client side. For example, if the website is using an API call to fetch the values, one can simply use the same API to fetch the intended data without having to scrape the HTML DOM at all.
If you follow OPs question literally
start from the <span> element that has text "Value when transacted"
get its parent <div>
get following sibling which is a <div>
get the text of the child <span>
then the xpath expression should be
//span[text()='Value when transacted']/parent::div/following-sibling::div/span
You might find it easier and faster to process using a regex to match the price, here's a quick example in PHP:
<?php
// Your input HTML (as per your example)
$inputHtml = <<<HTML
<div class="sc-8sty72-0 cyLejs">
<span class="sc-1ryi78w-0 bFGdFC sc-16b9dsl-1 iIOvXh sc-1n72lkw-0 bKaZjn" opacity="1">Value when transacted</span>
</div>
<div class="sc-8sty72-0 cyLejs">
<span class="sc-1ryi78w-0 bFGdFC sc-16b9dsl-1 iIOvXh u3ufsr-0 gXDEBk" opacity="1">$1,034.29</span>
</div>
HTML;
$matches = [];
// Look for any div > span element which contains a string starting with $ and then match a number (allowing for a , or . within the price matched).
if (preg_match_all('#<div.*>\s*<span.*?>\$([0-9.,]+)</span>\s*</div>#mis', $inputHtml, $matches)) {
echo 'Price found: ' . $matches[1][0] . PHP_EOL;
}
Console output from this:
Price found: 1,034.29
I create this div in PHP and I want to call a function when I double=click on it. However, it tells me that my value isn't defined. Can someone please tell me why?
(Here's the important part of my code in php:
"..//Some mor HTML...value='".$DatabaseID.";' ondblclick='delete_selected(value, 'all', 'child'); ..//Some more HTML.."
I can call a function that doesn't have a value. What am I doing wrong?
Here's the rest if you're interested:
$Object = "<div id='".$DatabaseID."' onclick='sendid(id); highlight(id);' title='".$title."' data-parent='".$ParentID."'data-itemCategory='".$ItemCategory."' value='".$DatabaseID.";' ondblclick='delete_selected(value);' onmouseup='position(id);' style='border:".$border_size."px solid ".$border_color."; top:".$pos_y."px; left:".$pos_x."px; position:".$positionType."; background:".$color.";' class='".$class."'>
<!-- <img src='$img' class='img_status_rwp' style='width:".$img_size."px; height:".$img_size."px; margin-left:-".$img_size."px; margin-top:-".$img_size."px; '></img> --> <div class='item_header'><div class='header_text_cont'><div class='header_span'>".$ItemName."</div><div style='clear:both';></div></div></div>";
Update
I changed the quotation and removed te img-part (since it isn't active):
$Object = '<div id="'.$DatabaseID.'" onclick="sendid('.$DatabaseID.'); highlight('.$DatabaseID.')"; title="'.$title.'" data-parent="'.$ParentID.'" data-itemCategory="'.$ItemCategory.'" value="'.$DatabaseID.'" onclick="show_children(value, "all", "child");" style="border:'.$border_size.'px solid '.$border_color.'; top:'.$pos_y.'px; left:'.$pos_x.'px; position:'.$positionType.'; background:'.$color.';" class="'.$class.'">
<div class="item_header"><div class="header_text_cont"><div class="header_span">'.$ItemName.'</div><div style="clear:both";></div></div></div>';
I belive that the quotationmarks around all and child might be the ones creating some trouble but I don't know what to use instead.
show_children is defined in a JavaScript file that is included to the index.php and I can call other functions in it from index. I don't get any errors when double clicking, however the function is not called. When I successfully call the function using a button I have the following HTML:
<div class="sidebar_button" id="childAll" value="" onclick="show_children(value, 'all', 'child'); " style="font-size:10px">Show All Child Nodes (To RWP)</div>
I think your problem lies here onclick='sendid(id); highlight(id);' your passing id which isn't defigned anywhere. You need to change the code to onclick='sendid(".$DatabaseID."); highlight(".$DatabaseID.");' and then it should work.
I think this is a simple question but I can't sort it, I am trying to get all heading tags with the simple php DOM parser, my code works only one way, example
$heading['h2']=$html->find('h2 a');//works fine
I have found some sites wrap the h2 within the a tag like this
<a href='#'><h2> my heading</h2></a>
The problem is trying to get both tags so I can display the link with it. So when I do this
$heading['h2']=$html->find('a h2');
I get the h2 fine but it will not wrap the link tag around it, which of course makes sense, find all h2 tags that are children of a but how do I get the entire parent tag, I hope that makes sense, what I want it to return is
<h2>My Headings</h2>
then I can just print the output with
echo $headings['h2']; //and the link with be there
If the <a href="[..]"> ist just the outer element, you can do it like this:
$heading['h2']=$html->find('a h2');
foreach ($heading['h2'] as $h2) {
echo $h2->parent(), "\n";
}
You could also go up the DOM tree until you reach an <a> tag:
$heading['h2']=$html->find('a h2');
foreach ($heading['h2'] as $h2) {
$a = $h2;
while ($a && $a->tag != "h2") $a = $a->parent();
if (!$a) continue; // no <a> above <h2>
echo $a, "\n";
}
Well my first thought we be to use
$html->find('a');
But I'm guessing you have multiple links on your page. So the correct practice would then be to use an ID (or a class) to identify your link
<h2> my heading</h2>
And then search for that specific ID:
$html->find('a#titleLink');
I don't know what library you're using and what syntax it supports, but I hope you get the idea anyway.
According to docs: $heading['h2']=$html->find('a > h2')->parent(); would return the anchor tag wrapping the h2, but if you have multiple 'a > h2' in the page, the find function will return an array, so try it and/or use foreach.
$info = $html->find('a,h2');
echo '<a href='.$info[0]->href.'>'.$info[1]->innertext.'</a>';
I have a web site. Here in my home page there is a content "My dummy text ". which is placed in ul li a tag. ie
<ul><li><a>My dummy text</a></li></ul>
i want to make this text should highlighted in blue when someone first lands on the home page. other wise it's must be in white. Does any one know how to do this ?
mine is a php web site
Thanks in advance
Just to add a little onto the cookie method I suggest adding a class to the <body> tag so that if in the future you want to do more you could do it without having to modify the PHP.
For example:
<?php
function dejavu() {
$class = '';
if($_COOKIE['beenHereBefore']) {
$class .= 'beenHereBefore';
}
else {
$class .= 'firstTimeHere';
setcookie("beenHereBefore", true);
}
return $class;
}
?>
<body class="<?php echo dejavu(); ?>">
One thing that you want to take into account though is that if a user clears their cookies then it will act as though they are visiting the site for the first time; so I suggest, if possible store it in their user profile if one exists.
So then in your CSS you can do the following:
ul li a {color: white;}
.firstTimeHere ul li a {color: blue;}
I dont see any code so..here is my theoritical explaination as well...
1 Use Cookies.
2 HTML5 Cache..You can use localstorage to do that as well
you can use cookie
set default 0
if someone loaded the page than change cookie to 1 otherwise 0
.
<ul>
<li>
<a <?php if($_COOKIE["status"] == 0){style="color:blue;"} ?>>My dummy text</a>
</li>
</ul>
Use:
$(window).ready(function(){
// do your CSS stuff here ...
});
Or use :
$(document).ready(function(){
// do your CSS stuff here ...
});
Check this link : http://api.jquery.com/ready/
I advise you to do it using jquery to check if you are in the home page
Assume your home page is called : index.php
Like this :
if(window.location.href.indexOf("index.php") > -1)
{
$('#ulid li').css('color', 'red');
}
else $('#ulid li').css('color', 'black');
Give your ul an ID and assume you want to highlight using red and your original text color was black
No need to use Cookies you can do this trick using jquery very easily .
If you guys check out this webpage:
http://www2.scandvision.se/oresund10/
How have they done this background fade in fade out?
When i check the source this
<img id="wrapper-background" src="images/body-background-0.jpg" alt="Background" />
and i think theres some kind of script maybe php or js, or both, that every 5 sec changes the background:
images/body-background-1.jpg
images/body-background-2.jpg
images/body-background-3.jpg
and so on..
So how did they do this? an example would be great, as i want to learn how to do that. If i was going to do something like this i think i would only manage to do a script in php that randomize everytime you refresh.
Thank you, this will expand my knowledge
I did that one time on a website, I use "Prototype JS" and "Script Aculo US" but you can easily do the same thing without these library. You can see an example here: www.envolulm.fr
I extract below and translate some comment of my code:
/* In my HTML PAGE*/
<div id="slideshow">
<p id="text1"><img src="/url/of/your/image1"/></p>
<p id="text2"><img src="/url/of/your/image1"/></p>
<p id="text3"><img src="/url/of/your/image1"/></p>
<p id="text4"><img src="/url/of/your/image1"/></p>
</div>
CSS:
#text1, #text2, #text3, #text4 {
position:absolute;
height:402px; // you can put other value...here
width:850px; // you can put other value...here
}
Javascript function
function changeimg(){
var sec = 6000; // Change each 6 secondes
var paras = $$('#slideshow p'); // Grab element "<p>" of the div with slideshow for ID
// For each element "<p>"
paras.each(function(para){
if(para.visible()){
paraFade = para; // We stock the item which will disappear
paraAppear = para.next(); // We got the next element (The one who wants to appear)
//If it's the last "p" element we come back to the first one
if(paraAppear == undefined){
paraAppear = paras[0];
}
}
});
Effect.Appear(paraAppear); // Script Aculo US animation
Effect.Fade(paraFade); // Script Aculo US animation
timer = setTimeout("changeimg()",sec); // Timer
}
Event.observe(window, 'load', function() { changeimg(); }
Hope that can help you.
They are using mootools framework. Check this out:
http://mootools.net/forge/p/slideshow
The jquery cycle plugin is a simple script to do this effect.
I think you can have the same effect if you use a jquery plugin called "jquery innerfade"
Here is a website when you can get the .js file of it, of course you need jquery to use it
Inner Fade