With the following markup, I always get the same look as when for an image that isn't found: its alt and title still there but no pic.
<div class="def-orange">
<h3>Sign Up</h3>
<p>
Which kind of profile would you like?
</p>
</div>
<a href="#Url.Action("RegisterSenior", "Account", new RouteValueDictionary {{"userSide", "contractor" }})">
<img src="images/signup-contractor.png" alt="mans's head sillouheted with safety helmet" title="As a Senior">
</a>
<a href="#Url.Action("RegisterEmployer", "Account", new RouteValueDictionary {{"userSide", "employer" }})">
<img src="/Images/signup-employer.png" alt="mans's head sillouheted with collar and tie" title="As an Employer">
</a>
<div class="def-orange">
Already have an account? #Html.ActionLink("Sign In", "Login", "Account")
</div>
I know both images are present because I can swap them around, and both images display when they are on the right hand one of the two a tags, and neither displays when they are in the left hand a tag.
Change images/signup-contractor.png to /Images/signup-contractor.png
Related
I am fetching lines of text from the list one by one and I need to add a hyper link in the end of each line. Trying the code below, but link is not displayed.
<p th:each="releases : ${release}"
class="releases" th:text="${releases}" th:href="www.abc.com"> New Releases </p>
<p th:each="releases : ${release}"> <span class="releases" th:text="${releases.split('Spotify')[0]}">
New Releases </span> <a class="spoturl" th:href="${releases.split('URL:\s')[1]}"> Spotify URL </a> </p>
My solution
If you want to add a link to the end of each "release" string, you can use this:
<p th:each="releases : ${release}"
class="releases">
<span th:text="${releases}"></span>
<a th:href="#{www.abc.com/${rel}(rel=${releases})}"
th:text=" '[link]'"></a>
</p>
So, for example, if the items in the release list are Some_Release and Another_Release, you will get this:
Some_Release [link]
Another_Release [link]
Each link text will have a customized href.
Try this
<p th:each="releases : ${release}" th:href="www.abc.com"> <span class="releases" th:text="${releases}"> New Releases </span> </p>
the main idea is showing picture according to selected id:
<div *ngIf="t">
<h2>{{t.name}} details!</h2>
<h3>{{t.description}}</h3>
<img src="images/inside/1.jpg" class = "grid grid-pad">
</div>
instead of 1.jpg i would like to use t.filename? How can i do this?
I am trying to use Nokogiri's CSS method to get some names from my HTML.
This is an example of the HTML:
<section class="container partner-customer padding-bottom--60">
<div>
<div>
<a id="technologies"></a>
<h4 class="center-align">The Team</h4>
</div>
</div>
<div class="consultant list-across wrap">
<div class="engineering">
<img class="" src="https://v0001.jpg" alt="Person 1"/>
<p>Person 1<br>Founder, Chairman & CTO</p>
</div>
<div class="engineering">
<img class="" src="https://v0002.png" alt="Person 2"/></a>
<p>Person 2<br>Founder, VP of Engineering</p>
</div>
<div class="product">
<img class="" src="https://v0003.jpg" alt="Person 3"/></a>
<p>Person 3<br>Product</p>
</div>
<div class="Human Resources & Admin">
<img class="" src="https://v0004.jpg" alt="Person 4"/></a>
<p>Person 4<br>People & Places</p>
</div>
<div class="alliances">
<img class="" src="https://v0005.jpg" alt="Person 5"/></a>
<p>Person 5<br>VP of Alliances</p>
</div>
What I have so far in my people.rake file is the following:
staff_site = Nokogiri::HTML(open("https://www.website.com/company/team-all"))
all_hands = staff_site.css("div.consultant").map(&:text).map(&:squish)
I am having a little trouble getting all elements within the alt="" tag (the name of the person), as it is nested under a few divs.
Currently, using div.consultant, it gets all the names + the roles, i.e. Person 1Founder, Chairman; CTO, instead of just the person's name in alt=.
How could I simply get the element within alt?
Your desired output isn't clear and the HTML is broken.
Start with this:
require 'nokogiri'
doc = Nokogiri::HTML('<html><body><div class="consultant"><img alt="foo"/><img alt="bar" /></div></body></html>')
doc.search('div.consultant img').map{ |img| img['alt'] } # => ["foo", "bar"]
Using text on the output of css isn't a good idea. css returns a NodeSet. text against a NodeSet results in all text being concatenated, which often results in mangled text content forcing you to figure out how to pull it apart again, which, in the end, is horrible code:
doc = Nokogiri::HTML('<html><body><p>foo</p><p>bar</p></body></html>')
doc.search('p').text # => "foobar"
This behavior is documented in NodeSet#text:
Get the inner text of all contained Node objects
Instead, use text (AKA inner_text or content) against the individual nodes, resulting in the exact text for that node, that you can then join as you want:
Returns the content for this Node
doc.search('p').map(&:text) # => ["foo", "bar"]
See "How to avoid joining all text from Nodes when scraping" also.
I'm working off of the default Web Forms template in VS 2013, and one of the rows has 3 divs:
<div class="col-md-4">
<h2>Get Paid</h2>
<img src="Images/adp_logo.gif" class="img-responsive" alt="ADP" />
<p>
Everybody wants to get paid! Just click on the "ADP" link to monitor or change your timesheet, benefits
information, 401K contributions, etc...
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Go! »</a>
</p>
</div>
<div class="col-md-4">
<h2>Get Help</h2>
<asp:ImageButton ID="imgBtn2" runat="server" ImageUrl="~/Images/user_help.png" Height="100" />
<p>
Don't know how to do something? We can help! Click the image above to find answers about how to get a badge,
share your Outlook calendar, or make a great cup of coffee (okay, maybe not the last one, but you get the idea...)
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Go! »</a>
</p>
</div>
<div class="col-md-4">
<h2>Find the People You Need</h2>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/find_icon.png" Height="100" />
<p>
You can easily find information about anybody that works at ERC. Just click and go!
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Go! »</a>
</p>
</div>
I'd like to be able to populate these divs with information from a database row. For example, in my database I'd have a table that had Title, Image, Description, Link and Category columns. If a row had a Category of "Featured", it would populate the first element with it's Title value, the tag with the image, etc.
Do I need to build a custom control to accomplish this, or am I just overlooking an obvious way of achieving this?
By the way, the Google Play store is what I'm modeling this after, if that helps...
Thanks...
Like David said, a .NET Repeater control would be ideal for what you want to achieve. You would add your html template once and it would, well, repeat it according to your database query and the number of entries that it would extract.
Html. Note that single quotes ARE REQUIRED when binding data to an attribute like 'src', 'href', etc:
<asp:Repeater ID="myRepeater" runat="server">
<ItemTemplate>
<div class="col-md-4">
<h2><%# Eval("Title") %></h2>
<img src='<%# Eval("Image") %>' class="img-responsive" alt="ADP" />
<p>
<%# Eval("Description") %>
</p>
<p>
<a class="btn btn-default" href='<%# Eval("Link") %>'>Go! »</a>
</p>
</div>
</ItemTemplate>
</asp:Repeater>
Code-behind C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack) {
bindRepeater();
}
}
protected void bindRepeater() {
DatabaseEntities db = new DatabaseEntities();
var query = (from q in db.myTableName
where q.Category == "Featured"
select q);
if (query.Count() > 0)
{
myRepeater.DataSource = query.ToArray();
myRepeater.DataBind();
}
}
I have this weird problem.
When i wrap a anchor tag around a div, the html markup completely changes.. cleared cache and everything.
Its about the anchor with the class outgoing link
Html in the code editor (correct code):
<a class="outgoing-link" href="#">
<div id="content-element">
<div class="top-info">
<span class="title-provider">Vodafone</span>
<img src="phone-placeholder.png"
alt="placeholder"
width="58px"
height="50px"/>
<div class="bg-circle"></div>
<span class="dur-discount">1e 3 maand</span>
<span class="price-discount">€ 16,50</span>
<span class="dur-normal">Daarna</span>
<span class="price-normal">€ 20,00</span>
</div>
<h3>iPhone 4GS abonnement</h3>
<p><span>100</span> min & sms <span>500</span> mb</p>
<p><span>2 jr</span>telefoon abonnement</p>
<p>Prijs telefoon: <span>Gratis</span></p>
<div class="hover-extra-info">
<p>Aansluitkosten: <span>€ 24,95</span></p>
<p>Vodafone abonnement</p>
<p>aanbieder: Student Mobiel</p>
<p>Totale kosten over 2 jaar</p>
<p>€ 547,22</p>
</div>
</div><!-- end content-element-->
</a>
Code in the browser:
<a class="outgoing-link" href="#"></a>
<div id="content-element">
<a class="outgoing-link" href="#">
<div class="top-info">
<span class="title-provider">Vodafone</span>
<img src="phone-placeholder.png"
alt="placeholder"
width="58px"
height="50px"/>
<div class="bg-circle"></div>
<span class="dur-discount">1e 3 maand</span>
<span class="price-discount">€ 16,50</span>
<span class="dur-normal">Daarna</span>
<span class="price-normal">€ 20,00</span>
</div>
</a>
<h3>iPhone 4GS abonnement</h3>
<p><span>100</span> min & sms <span>500</span> mb</p>
<p><span>2 jr</span>telefoon abonnement</p>
<p>Prijs telefoon: <span>Gratis</span></p>
<div class="hover-extra-info">
<p>Aansluitkosten: <span>€ 24,95</span></p>
<p>Vodafone abonnement</p>
<p>aanbieder: Student Mobiel</p>
<p>Totale kosten over 2 jaar</p>
<p>€ 547,22</p>
</div>
</div><!-- end content-element-->
It adds another link and puts them at the wrong places.
Any ideas as to what's going on? Or am i just missing something.
Any help would be appreciated :)
i think its because nested anchor tags are illegal
see: http://www.w3.org/TR/html401/struct/links.html#h-12.2.2
it should be easy to do without the nested anchor tag while keeping the functionality the same.
Could be a try to automatically fix invalid HTML ( => Quirksmode ?), as an achor-tag should not contain -Tags.
Try to add a DOCTYPE statement at the beginning of the file, does that change the behavoir?
The Doctype-Statement (must be on the first line HTML file / output) could be like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">