I have images in this order : [image][image]
When i give each of them an url, - char suprisingly appears between them.I don't understand why - appears.
Here is the code :
<div style='float:left; width:320px;'>
<span>
<a href='http://www.boun.edu.tr'/>
<img style='width:75px; height:75px' src='$img_root/logo_bogaz.jpg' alt='logo bogazici university'>
</span>
<span>
<a href='http://www.gyte.edu.tr'/>
<img style='width:70px; height:70px' src='$img_root/gyte.gif' alt='logo gyte'>
</span>
</div>
And OUTPUT :
It is part of the underline from your anchor tag. You can remove the underline as per below. (Note this will remove it for all links)
Add this to fix:
<style>
a {
text-decoration:none;
}
</style>
Ideally this should go in a separate CSS file. But add it to the top of your HTML for an easy test.
Related
I am using jsoup HTML parser and trying to travel into span class and get the text from it but Its returning nothing and its size always zero. I have pasted small part of HTML source . pls help me to extract the text.
<div class="list_carousel">
<div class="rightfloat arrow-position">
<a class="prev disabled" id="ucHome_prev" href="#"><span>prev</span></a>
<a class="next" id="ucHome_next" href="#"><span>next</span></a>
</div>
<div id="uc-container" class="carousel_wrapper">
<ul id="ucHome">
<li modelID="587">
<h3 class="margin-bottom10"> Ford Figo Aspire</h3>
<div class="border-dotted margin-bottom10"></div>
<div>Estimated Price: <span class="cw-sprite rupee-medium"></span> 5.50 - 7.50 lakhs</div>
<div class="border-dotted margin-top10"></div>
</li>
<li modelID="899">
<h3 class="margin-bottom10"> Chevrolet Trailblazer</h3>
<div class="border-dotted margin-bottom10"></div>
<div>Estimated Price: <span class="cw-sprite rupee-medium"></span> 32 - 40 lakhs</div>
<div class="border-dotted margin-top10"></div>
</li>
I have tried below code:
Elements var_1=doc.getElementsByClass("list_carousel");//four classes with name of list_carousel
Elements var_2=var_1.eq(1);//selecting first div class
Elements var_3 = var_2.select("> div > span[class=cw-sprite rupee-medium]");
System.out.println(var_3 .eq(0).text());//printing first result of span text
please ask me , if my content was not very clear to you. thanks in advance.
There are several things to note about your code:
A) you can't get the text of the span, since it has no text in the first place:
<div>Estimated Price:
<span class="cw-sprite rupee-medium"></span>
5.50 - 7.50 lakhs
</div>
See? The text is in the div, not the span!
B) Your selector "> div > span[class=cw-sprite rupee-medium]" is not really robust. Classes in HTML can occur in any order, so both
<span class="cw-sprite rupee-medium"></span>
<span class="rupee-medium cw-sprite"></span>
are the same. Your selector only picks up the first. This is why there is a class syntax in css, which you should use instead:
"> div > span.cw-sprite.rupee-medium"
Further you can leave out he first > if you like.
Proposed solution
Elements lcEl = doc.getElementsByClass("list_carousel").first();
Elements spans = lcEl.select("span.cw-sprite.rupee-medium");
for (Element span:spans){
Element priceDiv = span.parent();
System.out.println(priceDiv.getText());
}
Try
System.out.println(doc.select("#ucHome div:nth-child(3)").text());
The divs of the HTML page I am targeting look like this:
<div class="white-row1">
<div class="results">
<div class="profile">
<a href="hrefThatIWant.com" class>
<img src = "http://imgsource.jpg" border="0" width="150" height="150 alt>
</a>
</div>
</div>
</div>
<div class="white-row2">
// same content as the div above
</div>
I want to scrap collect the href in each div in a list.
This is my current code:
List<HtmlAnchor> profileDivLinks = (List)htmlPage.getByXPath("//div[#class='profile']//#href");
for(HtmlAnchor link:profileDivLinks)
{
System.out.println(link.getHrefAttribute());
}
This is the error I am receiving (which goes on first line of the for statement):
Exception in thread "main" java.lang.ClassCastException: com.gargoylesoftware.htmlunit.html.DomAttr cannot be cast to com.gargoylesoftware.htmlunit.html.HtmlAnchor
What do you think the issue is?
The issue is you're getting an attribute and then you're casting that attribute to an anchor. I guess the solution with the minimal change to your code would be just modifying the XPath to return an anchor:
htmlPage.getByXPath("//div[#class='profile']//a");
try
//div[#class='profile']//data(#href)
I have the following code:
<a id="outer-anchor" href="/test">
text in anchor
<a id="inner-anchor" href="/test2" style="display:none"></a>
</a>
I tried this in different browsers and the inner-anchor drops out of the outer-anchor in every browser. So it gets rendered as this:
<a id="outer-anchor" href="/test">
text in anchor
</a>
<a id="inner-anchor" href="/test2" style="display:none"></a>
Does someone know why and how to fix this?
Thanks in advance
You can't house anchor tags inside anchor tags.
This would move the childNode out of the outer-anchor to be it's sibling after it, and then hide it nicely;
JSfiddle
HTML
<div id="parent-placeholder">
<a id="outer-anchor" href="/test">
text in anchor
<a id="inner-anchor" href="/test2" style="display:none"></a>
</a>
</div>
JavaScript
var outer = document.getElementById('outer-anchor');
var inner = outer.nextSibling;
inner.style.display = 'none';
inner.parentNode.removeChild(inner);
outer.parentNode.appendChild(inner);
Output
<div id="parent-placeholder">
<a id="outer-anchor" href="/test">text in anchor</a>
<a id="inner-anchor" href="/test2" style="display: none;"></a>
</div>
parent-placeholder div purely exists to show how to relate to the parent DOM-element where the anchors are in.
Is there any function or command that I can use to take the "pop-up" picture from this function:
<a class="thumbnail" href="#thumb">
<img src="productURL" width="100px" height="142px" border="0" />
<span>
<img src="productURL" />
<br />
<font face="arial">productname</font>
</span>
</a>
Be displayed in a table located to the right of the page?
Notes:
I'm using Dreamweaver CS6
Maybe there's a way to put, inside a class, that the pop up has to be shown inside a table, defined earlier?
EDITED
you can do that by this
in your html table cell tag add an id
HTML
<img src = "xyz.png" onmouseover="showimage();" onmouseout="hideimage();" />
and for table
<table><tr><td id="showimage"></td></tr></table>
Javascript
function showimage()
{
document.getElemtnById('showimage').append('<img src="xyz">');
}
function hideimage()
{
var elem = document.getElemtnById('showimage');
elem.removeChild(elem.childNodes[0]);
}
Regards.
a module in my Joomla CMS produces the following code:
<li id="myid" clas="">
<span>
<strong>1.</strong>
</span>
<dl>
<dt>
<span>Some text</span>
</dt>
</dl>
</li>
This must not be edited in html, since it is created via multiple plugins.
Is there a way to make "Some text" appear on the right of "1." via CSS. I tried something like:
li {
display: inline;
}
which didnt work. Do you have any suggestions? Thank you very much!
You need to set the dl and dt to display as inline, because their default is block:
#myid dl, #myid dt {
display: inline;
}
Why don't you use ordered list instead unordered list? It can be simplified..
But if yout want go with your code you must delete "" tag from list number, cause it would be deprecated. Solution is add class='strong' in your tag for your number and add more css, here's the code for 'strong' class :
#myid .strong{
font-weight:bold;
}
Your html code :
<li id="myid" clas="">
<span class="strong">1.</span><dl>
<dt>
<span>Some text</span>
</dt>
</dl>
</li>