its a sample HTML and I want to get links with mechanize-firefox,which is in <div class="testclass2"> not from others, how can I do it?
<div class="testclass1">
<span class="SelectItem">
<a class="SelectLink">
<span class="SelectText">link1</span>
</a>
</span>
</div>
<div class="testclass2">
<span class="SelectItem">
<a class="SelectLink">
<span class="SelectText">link 1</span>
</a>
</span>
<ul class="SelectList">
<li class="SelectItem">
<a class="SelectLink">link 2</a>
</li>
</ul>
</div>
You can use $mech->xpath to do that. All you need to do is build the right xpath expression to get all a tags under class="testclass2".
my #links = $mech->xpath('//div[#class="testclass2"]//a');
The expression is the most tricky thing about it. The // means anywhere under where you are. This is like div.testclass2 a in CSS.
Related
I have this html
<body aurelia-app="main">
<section class="section is-small">
<nav-bar class="au-target" au-target-id="5">
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item au-target" route-href="route: home" au-target-id="1" href="#/">
<span class="icon is-medium">
<i class="fas fa-lg fa-home" aria-hidden="true"></i>
</span>
</a>
<a role="button" click.delegate="burgerClicked()" aria-label="menu" aria-expanded="false" data-target="myNavBar" class="au-target navbar-burger burger" au-target-id="2">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="myNavBar" class="au-target navbar-menu" au-target-id="3">
<div class="navbar-start">
<div class="navbar-item">
<a route-href="route: games" class="au-target" au-target-id="4" href="#/games">My Games</a>
</div>
</div>
</div>
</nav>
</div>
</nav-bar>
<router-view name="main" class="container au-target" au-target-id="6">
<available-games games.bind="games" class="au-target" au-target-id="11" bindable="games">
<div class="columns">
<ul class="column level">
<li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Warhammer 40k
</button>
</game-button>
</li><li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Age of Sigmar
</button>
</game-button>
</li><!--anchor-->
</ul>
</div>
</available-games>
</router-view>
</section>
</body>
it looks fine, until I expand it all the way, and then there is no space (height wise) between the full width buttons. I presume, I'm misunderstanding something about how I should be using bulma.
good
bad
note: this is the extent of my scss
#import "~bulma";
#import "~#fortawesome/fontawesome-free/scss/fontawesome.scss";
$fa-font-path: "~#fortawesome/fontawesome-free/webfonts";
#import "~#fortawesome/fontawesome-free/scss/regular.scss";
#import "~#fortawesome/fontawesome-free/scss/solid.scss";
First off, a tip: fix formatting a bit to make it more consistent to readers - more clarity to the HTML hierarchy.
Possible steps:
1) It looks like you might need some padding between each <button> element inside some <style> tags or in your scss file that target the specific class attribute/element you need.
2) I'm confused about your <game-button> element. Is it a custom element you created? If it's not, see the MDN Web Docs for examples of how to create custom HMTL elements if you need it.
3) If <game-button> is not a custom element you created, see Bulma's documentation for buttons because Bulma only requires a <button> element to work (and spacing wouldn't be an issue).
4) Check out this GitHub post regarding spacing between buttons. Although their implementation is different, you may still need to wrap your buttons in a <div class="buttons"></div> element. If there are issues after with inconsistent vertical alignment, I'd suggest using CSS display: flex;, align-items: center, and justify-content: center for centered alignment.
I've coded http://www.meghanbustardphotography.com/home/ and have linked each image to a different page (html code below). However, only the first link in each row is functioning. How can I fix this?
<div class="row" class="aligncenter">
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/09/colin-karlee-abbotsford-backyard-wedding/">
<div id="colinkarlee"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/09/andrew-rebecca-whytecliff-park-engagement/">
<div id="andrewrebecca"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/05/justin-hilary-south-bonson-wedding-2/">
<div id="justinhilary"></div>
</a>
</div>
<div class="row" class="aligncenter">
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/07/greg-amanda-beach-grove-wedding/">
<div id="gregamanda"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/10/cory-nicole-fort-langley-little-white-house-wedding/">
<div id="corynicole"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2013/09/mike-renae-whonnock-lake-portraits/">
<div id="mikerenae"></div>
</a>
</div>
<div class="row" class="aligncenter">
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/08/david-gastown-portraits/">
<div id="david"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/09/brent-stephanie/">
<div id="brentstephanie"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/08/sean-brittany-langley-golf-centre-wedding/">
<div id="seanbrittany"></div>
</a>
</div>
By taking a look at your real page, only 1st column has < div > inside < a >< /a >
<a href="http://www.meghanbustardphotography.com/blog/2014/09/colin-karlee-abbotsford-backyard-wedding/" target="_blank">
<div id="colinkarlee"></div>
</a>
For 2nd and 3 column, I see the < div >(s) are outside of < a >< /a >. That's the reason why they are not clickable
<div id="andrewrebecca"></div>
<div id="justinhilary"></div>
Put <div id == ... >
INTO <a target .. /a>
I did it and the links worked after that.
I can provide pictures if you don't know what I mean
You have a bunch of <p> links in your view page source code that do not have closing </p> tags associated with them. Try taking those out and see if that helps.
Also, check out the order of the <a> and <div> tags in your actual code. They're not matching what you pasted in your question.
I think it might wordpress not processing/showing your HTML directly. Try these:
https://wordpress.org/plugins/insert-php/
https://wordpress.org/plugins/allow-php-in-posts-and-pages/
<div class="form-group col-sm-5">
#Html.LabelFor(m => m.foo)
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
The <a> element (i.e. the glyphicon popover) appears beneath the label element, but I'd like to have it placed to the right side of the label instead. Is there a way to accomplish this by way of nesting the <a> inside of the #Html.LabelFor? It'd be cool to have something like:
<label for="foo"> I'm the label!
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</label>
If not, will I have to use positioning instead?
EDIT: I ended up taking Ramo's advice and rolling with something simple.
<div class="form-group col-sm-5">
<label>
<span> I'm a **hard-coded** LabelFor DataAnnotation! </span>
<a data-toggle="popover" data-content="I'm a popover!" href="#">
<span class="glyphicon glyphicon-info-sign"></span>
</a>
</label>
</div>
Still interested if there's an MVC way to get Glyphicons to cohere with #Html.LabelFor, but my question is more or less academic at this point.
EDIT #2: I found an even easier solution which is kind of obvious in hindsight. This approach uses positioning (i.e. display: inline) to ensure that the accompanying <a> and <span> elements display on the same line.
<div class="col-sm-5 form-group">
#Html.LabelFor(m => m.foo, new { style = "display: inline;" })
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
You could use a table and do something like this
<table>
<tr>
<td>#Html.LabelFor(m => m.foo)</td>
<td><a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a></td>
</tr>
</table>
EDIT:
A quick google search brought me to this result which uses CSS to accomplish your goal Label and text box on the same line using css
EDIT 2:
Since you are weary of using tables you might be able to do something like this. I have not tested the code yet, but I do believe it should give you your desired behavior.
HTML:
<div>
<div class="Label">#Html.LabelFor(m => m.foo)</div>
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
CSS:
.Label{
display: inline-block;
}
I suggest you go ahead with positioning. Do not take unusual choices here use everything for what is supposed to be used because otherwise you will notice unusual behavior of your code in future.
Try this:
#{
var foo = Html.LabelFor(m => m.foo)
}
<a>#foo</a>
I want to divide into 3 sections.
<li>
<font size="1">
<div>${comment.postingDate}</div>
<div>LikeLove</div>
<div><span class="badge"><i class="icon-thumbs-up"></i><span class="like-count">1</span></span>
<span class="badge badge-important"><i class="icon-heart"></i><span class="love-count">1</span></span>
</div>
</font>
</li>
But I think this is wrong design. I am new to html so was wondering how to achieve this efficiently.
The last line of the comment must look like
Date Like Love Here should be sign with count.
As per my observation you are looking for the last line in Image.
remove font tag
<div class="col">${comment.postingDate}</div>
<div class="col">
LikeLove
</div>
<div class="col">
<span class="badge"><i class="icon-thumbs-up"></i><span class="like-count">1</span></span>
<span class="badge badge-important"><i class="icon-heart"></i><span class="love-count">1</span></span>
</div>
with style
.col{position:relative;float:left;top:0}
I think this will do
I think i got what i was looking for.
<li>
<font size="1">
<span>${comment.postingDate}</span>
<span>
Like
Love</span>
<span class="pull-right">
<span class="badge"><i class="icon-thumbs-up"></i><span class="like-count">1</span></span>
<span class="badge badge-important"><i class="icon-heart"></i><span class="love-count">1</span></span>
</span>
</font>
</li>
I'm trying to create a simple thumbnail list, the code is pretty much copied off jqm docs pages. However, when I use the code below the button element of the list isn't anchored to the left of the list item and instead appears centered...Can anyone help me? It's driving me crazy!
I haven't got any styles in other than what is in the jquerymobile default page template
<div id="listDiv" class="ui-content" data-role="main">
<div id="listInformation" data-role="content-primary">
<ul id="swipeMeChildrenList" data-role="listview" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="index.html" class="ui-link-inherit">
<img src="images/album-p.jpg" class="ui-li-thumb">
<p>Ha</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
</div>
</div>
What code do you use to generate your list from? A simple list will be specified like this:
<ul data-role="listview">
<li>
<a href="index.html">
<img src="images/album-p.jpg" />Ha
</a>
</li>
</ul>
jQuery Mobile will take care of adding all the necessary classes depending on the platform.
I suggest opening a new document and using the defaults from that page, ie
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
</ul>
Then if that works, piece by piece replace the code with yours until it breaks, that should isolate the issue.