I'm having trouble trying to get to some data using the dom crawler.
I want to get the name 'Avocado' and '£1.50' I though I'd be able to do something like
$message = $crawler->filterXPath('h3')->text();
<div class="product">
<div class="productInner">
<div class="productInfoWrapper">
<div class="productInfo">
<h3>
<a href="http://website.com" >
Avocado
<img src="pic.jpg" alt="" />
</a>
</h3>
</div>
</div>
<div class="pricingAndTrolleyOptions">
<div class="pricing">
<p class="pricePerUnit">
£1.50<abbr title="per">/</abbr><abbr title="unit"><span class="pricePerUnitUnit">unit</span></abbr>
</p>
<p class="pricePerMeasure">£1.50<abbr
title="per">/</abbr><abbr
title="each"><span class="pricePerMeasureMeasure">ea</span></abbr>
</p>
</div>
</div>
</div>
To get h3 text:
$message = $crawler->filterXPath('//div[#class="productInfo"]/h3')->text();
To get price (i.e. for class pricePerMeasure):
$price= $crawler->filterXPath('//p[#class="pricePerMeasure"]')->text();
Related
I am getting CLS ON this piece of HTML can anyone tell the reason for why iam getting a layout shift. iam trying hard to get the CLS below 0.1 but failed to do so .. i guess bootstrap classes may causing the issue but how can i fix it
<section class="page-banner Games" style="height:400px;">
<div class="new-banner-collection-page" style="padding-bottom:1rem;">
<div class="row" style="height:100%">
<div class="col-md-7" style="height:100%; float:left">
<div id="tags-new-banner" class="" style="padding-left: 32px;padding-top:17px;">
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/" data-action="{"to Page":"/"}" data-category="clicked bread crumb" style="display: inline;">Home</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/games" data-action="{"to Page":"/search_contents/preview/games"}" data-category="clicked bread crumb" style="display: inline;">Games</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/math-games" data-action="{"to Page":"/search_contents/preview/math-games"}" data-category="clicked bread crumb" style="display: inline;">Math Games</a> >
</span>
<span class="playabe-breadcrum">Counting Games</span>
</div>
<div class="title-new-collection-page" style="">
<h1 style="font-weight:700;">
Counting Games for Kids
</h1>
</div>
<p class="less-banner-content">
<span>The first step to embracing math is learning to count. Children learn to identify, group and classify objects by counting. SplashLearn’s cool online counting games provide respite from the monotony of practice worksheets through colorful virtual manipulatives. Children develop a bond </span>
<span id="js-read-more-banner-btn" onclick="readMoreFunc()" style="color:blue;">... Read more</span>
<span id="js-read-more-banner-content" style="display:none">with numbers that will see them through advanced math in the upcoming years.</span>
</p>
<div class="signup-ctas-new-banner">
<a class="new-banner-signup-link-parent" href="/parents/register#!/parent/creation">
<button class="new-banner-signup-btn-parent">Parents, Sign Up for Free</button>
</a>
<a class="new-banner-signup-link-teacher" href="/teachers/register">
<button class="new-banner-signup-btn-teacher">Teachers, Use for Free</button>
</a>
</div>
</div>
<div class="new-banner-images col-md-5" style="float:right">
<img alt="Imge" class="" style="max-width: 100%; width: 100%;height: 100%;object-fit: contain;" src="http://localhost:8300/cms_assets/images/Common-page.jpg">
</div>
</div>
</div>
</section>
The website I'm developing uses the bootstrap framework. The problem that follows is that I have a container div that should have a background image outside the div both to the left and to the right with the chosen image background. Below are examples of what I intend. Someone can help me? Thank you.
HTML/PHP
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container fundo" id="fadein1">
<br>
<br>
Nova Publicação
<br>
<br>
<p class="titulo_grande">Bairro Mineiro</p>
<div class="row">
<?php
$select_stmt=$db->prepare("SELECT * FROM bairro ORDER BY id DESC;"); //sql select query
$select_stmt->execute();
while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="col-sm-12">
<a class="linha_paginas"></a>
<br>
<br>
<div id="titulo_titulo">
<?php echo $row['titulo'];?>
</div>
<br>
</div>
<div class="col-sm-4">
<a class="fancybox" href="upload/bairro/<?php echo $row['image']; ?>" data-fancybox-group="media-gallery"><img src="upload/bairro/<?php echo $row['image']; ?>" id="imagem" class="imagem img-fluid"></a>
</div>
<div class="col-sm-8">
<div id="texto_texto">
<?php echo $row['texto'];?>
</div>
</div>
<div class="col-sm-6" align="right">Editar</div>
<div class="col-sm-6">Eliminar</div>
<?php
}
?>
<br>
<br>
</div>
</div>
Well, you can do this by wrapping another DIV around container and applying background to that doc, instead.
<div class=“body-bg”>
<div class=“container”>
....
</div>
</div>
Now, in your CSS, you write this:
.body-bg {
background: url(‘path-to-your-image.jpg’);
width: 100vw; /* you shouldn’t need this as DIVs usually take width or parent container, anyway */
}
in this case you have to put your fundo container inside another container-fluid, so:
<div class="container-fluid back-img">
<div class="container fundo" id="fadein1">
<br>
<br>
Nova Publicação
<br>
<br>
<p class="titulo_grande">Bairro Mineiro</p>
<div class="row">
<?php
$select_stmt=$db->prepare("SELECT * FROM bairro ORDER BY id DESC;"); //sql select query
$select_stmt->execute();
while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="col-sm-12">
<a class="linha_paginas"></a>
<br>
<br>
<div id="titulo_titulo"><?php echo $row['titulo'];?></div>
<br>
</div>
<div class="col-sm-4">
<a class="fancybox" href="upload/bairro/<?php echo $row['image']; ?>" data-fancybox-group="media-gallery"><img src="upload/bairro/<?php echo $row['image']; ?>" id="imagem" class="imagem img-fluid"></a>
</div>
<div class="col-sm-8">
<div id="texto_texto"><?php echo $row['texto'];?></div>
</div>
<div class="col-sm-6" align="right"><a href="admin_bairro_editar.php?update_id=<?php echo $row['id']; ?>" class="btn btn-warning" >Editar</a></div>
<div class="col-sm-6"><a href="?delete_id=<?php echo $row['id']; ?>" class="btn btn-danger" >Eliminar</a></div>
<?php
}
?>
<br>
<br>
</div>
</div>
</div>
now on css, you add a background img to the container-fluid div that i gave the class name back-img,and use the following code:
.back-img{
background-img: url("your url");
}
you can also use body instead,but it's better to use a div if you don't want the background image on the whole page.
i hope this will help you
update: if you want background image in each side alone, you should change your container to container-fluid, and add 3 cols like that:
<div class="col-sm-2 background-left"> </div>
<div class="col-sm-8 center"> // your mane block should be here(buttons and all your elements </div>
<div class="col-sm-2 background-right"> </div>
and now you add the css code
.background-left{
background-img: url("your url");
}
.background-right{
background-img: url("your url");
}
Good luck.
At the first picture everything is ok.
But if i make the width of my browser a little bigger, the result is the following:
Each md-card overlaps the next one and adds overflow-y. This issue is only on xs resolutions. Here is my html:
<div ng-view="" flex="" class="ng-scope flex">
<md-content layout-xs="column" layout="row" class="md-padding ng-scope layout-xs-column layout-row">
<div layout="column" layout-gt-xs="row" layout-wrap="" infinite-scroll="ctrl.nextArticles()" infinite-scroll-disabled="ctrl.isBusy || ctrl.isEnd" infinite-scroll-distance="1" class="layout-wrap ng-isolate-scope layout-gt-xs-row layout-column">
<!-- ngRepeat: article in ctrl.articles -->
<div ng-repeat="article in ctrl.articles" class="post ng-scope flex-xs-100 flex-xl-20 flex-sm-50 flex-md-33 flex-lg-25" flex-xs="100" flex-sm="50" flex-md="33" flex-lg="25" flex-xl="20">
<md-card>
<md-card-header>
<md-card-avatar>
<img src="/images/sidenav-icons/Bomb.svg">
</md-card-avatar>
<md-card-header-text>
<span class="md-title ng-binding">FakeTitle147</span>
<span class="md-subhead ng-binding">FakeRubric3</span>
</md-card-header-text>
</md-card-header>
<img ng-src="/images/test-img.jpg" alt="*ALT*" class="md-card-image" src="/images/test-img.jpg">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card header</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
The titles
</p>
</md-card-content>
<button class="md-button md-ink-ripple" type="button" ng-transclude="" ng-click="ctrl.showArticle(article._id)" aria-label="Button">
<span class="ng-scope">Button</span>
</button>
</md-card>
I have no custom css (only background-color). Thanks for your ideas.
The problem was in layout="column". I just replaced this:
<div layout="column" layout-gt-xs="row" layout-wrap="" ...
to this:
<div layout="row" layout-wrap="" ...
This solution is OK for me.
I am trying to use watir to download files from a web page. Trying to figure out how to click the 'download icon' and then save the file.
The files are in a table, and I want to download each file with the word 'done' in the column and then same it as the report name.
The HTML is below:
<div class="portlet" id="homeStatus">
<div class="portletHeader statusHeader">
Reports and Request Status
</div>
<div class="portletContent" id="statusContent">
<div class="status">
<div class="row-fluid boldText statusHeaderRow">
<div class="span3">Name</div>
<div class="span2">ID</div>
<div class="span3">Date</div>
<div class="span1">Status</div>
<div class="span3">Actions</div>
</div>
<div class="row-fluid statusResultsText">
<div class="span3 bold">
<span class="reportName">report2</span>
</div>
<div class="span2">429696109</div>
<div class="span3">2015-06-14 20:06:55</div>
<div class="span1">Done</div>
<div class="span3 statusResultsActions iconSize16 statusActionPad" id="374189255">
<i class="icon-download-alt mediumBlueIcon downloadIcon" id = "/decision_support/Status_retrieve_request.aspx?questionid=Q10201&applicationid=300&JobId=429696109&status=D&Extension=xls&filename=/Outbound06/q3bk06m_429696109_A14A90C6XB906X4F05X8539XDE448240CE97&reqname=report2,429696109" title="Download"></i>
</i>
<i class="icon-cog mediumBlueIcon modifydrequestIcon" id = "d_/decision_support/Report_Builder.aspx?country_cd=CA&qid=Q10201&exe_id=291&AppId=300&divid=1&JobId=429696109&reopen=true" title="Modify"></i>
</div>
</div>
<div class="row-fluid statusResultsText alternateBackground">
<div class="span3 bold">
<span class="reportName">Report Sun Jun 14 20:56:46 2015</span>
</div>
<div class="span2">429695641</div>
<div class="span3">2015-06-14 20:01:34</div>
<div class="span1">User Error</div>
<div class="span3 statusResultsActions iconSize16 statusActionPad" id="374188794">
</div>
</div>
</div>
</div>
</div>
# iterate through rows
Browser.divs.each do |row|
if row.div(:class => "span1").text == "Done"
report_name = row.span(:class => "reportName").text
row.divs.last.is.each do |i|
# move the mouse to <i> tag and click the <a> link, if <i> is an icon and <a> link is not present
Browser.driver.action.move_to(i.wd).click.perform
end
end
end
I have this:
{{#config.buildings:building}}
<div class="building" id="building-item-{{building}}">
<div class="image-container">
<div class="thumbnail" style="background: transparent url({{staticUrl}}/game_images/town/buildings/{{building}}/{{building}}-1-thumbnail.png) no-repeat center center;"></div>
<div class="cover"></div>
<div class="undercover"></div>
<div class="level">{{village.buildings[building].level + alreadyInQueue(building)}}</div>
</div>
<div class="big_title">{{lang('buildings',building)}}</div>
<p class="{{buildingMaxed(building) ? 'maxed' : ''}}">{{lang('buildings',building+'_description')}}</p>
<div on-tap="upgradeBuilding:{{building}}" class="upgrade-button" tooltip="{{lang('general','upgrade_building')}}"></div>
<div on-tap="downgradeBuilding:{{building}}" class="downgrade-button disabled" tooltip="{{lang('general','downgrade_building')}}"></div>
<div class="resources">
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/woodB.png">
<label class="res-count-wood">{{config.buildings[building][village.buildings[building].level].wood}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/ironB.png">
<label class="res-count-iron">{{config.buildings[building][village.buildings[building].level].clay}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/clayB.png">
<label class="res-count-stone">{{config.buildings[building][village.buildings[building].level].iron}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/workersB.png">
<label class="res-count-builders">{{config.buildings[building][village.buildings[building].level].people}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/timeB.png">
<label class="res-count-time">{{secsToString(config.buildings[building][village.buildings[building].level].time)}}</label>
</div>
</div>
<div class="hr"></div>
</div>
{{/config.buildings:building}}
When I'm using
contentTPL.set('village.buildings[1].level',4)
The only things that update are
<div class="level">{{village.buildings[building].level + alreadyInQueue(building)}}</div>
// and
<label class="res-count-time">{{secsToString(config.buildings[building][village.buildings[building].level].time)}}</label>
I don't seem to understand why the other values don't update on update() as they should. There's no error in the code and I'm using the edge version (same result with the lastest version from 8th of April, 0.4.0).
UPDATE
I have stripped all the unnecessary data, and added a console.log in the alreadyQueued function. It gets called on init, but, when i call contentTPL.update() it doesn't get called anymore. Nothing updates in the file, when pressing the startQueue button. There's another contentTPL.update() when the queue expires, which updates only the level and the time needed as stated above. I'm asking Rich or Marty to advise on this problem as I'm stuck here for about 4 hours and can't seem to understand wether it is my misuse of the library or it's a bug.
It turns out this was a bug, which is now fixed in dev.