I am trying to validate my document as XHTML 1.0 Transitional (W3C). I have the following error:
Line 322, Column 3: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
Which corresponds to this code: <p><strong>Q: How much?</strong></p>
<h2>Top Four Questions</h2>
<p><a name="tf1" id="tf1"></a>
<p><strong>Q: How much?</strong></p>
<p>We look forward to hearing from you!</p>
</div>
How can this be solved?
Thanks!
<h2>Top Four Questions</h2>
<p><a name="tf1" id="tf1"></a>
<p><strong>Q: How much?</strong></p>
<p>We look forward to hearing from you!</p>
</div>
should be
<h2>Top Four Questions</h2>
<p><a name="tf1" id="tf1"></a></p>
<p><strong>Q: How much?</strong></p>
<p>We look forward to hearing from you!</p>
You can't use a paragraph element within a paragraph element. That's why you get a validation error. So close the p tag on the second line.
Related
I'm developing custom event tracking on my website using Custom Data Attributes (data-*) in the HTML code. The data collected should be sent to Google Analytics using Google Tag Manager (that enables the data collection using variables, triggers, and tags).
However, I'm facing several issues.
I have different sub-level data attribute categories. For example:
data-analytics-region (nesting the data attributes below)
data-analytics-section-engagement (nesting the data attributes below)
data-analytics-title (etc.)
Here is an example:
<section class="homepage-section collection-module" data-module-template="tiles" data-analytics-region="tiles">
<div data-unit-id="maintenance" data-analytics-section-engagement="maintenance">
<div class="unit-wrapper">
<a class="unit-link" href="/fr/services/maintenance/" target="_self" rel="follow" data-analytics-region="learn more"></a>
<div class="unit-copy-wrapper">
<h4 class="headline">Entretien</h4>
<h5 class="subhead" role="presentation">Moteur de performances<br class="large-hide medium-hide small-show" /> qui tiennent la route.</h5>
<div class="cta-links">
<a class="icon icon-after icon-chevronright" href="/fr/services/maintenance/" target="_self" rel="follow" data-analytics-title="Learn more - Maintenance" aria-label="En savoir plus sur l'entretien">En savoir plus</a>
<a class="icon icon-after icon-chevronright nowrap" href="/fr/contact/" target="_self" rel="follow" data-analytics-title="Free estimate - Maintenance" aria-label="Obtenez gratuitement un devis">Devis gratuit</a>
</div>
</div>
<div class="unit-image-wrapper">
<figure class="unit-image unit-image-maintenance-tile" data-progressive-image></figure>
</div>
</div>
</div>
<div data-unit-id="financing" data-analytics-section-engagement="financing">
<div class="unit-wrapper">
<a class="unit-link" href="/fr/services/financing/" target="_self" rel="follow" data-analytics-region="learn more"></a>
<div class="unit-copy-wrapper">
<h4 class="headline">Financement</h4>
<h5 class="subhead" role="presentation">Pour toutes les marques.<br class="large-hide medium-hide small-show" /> Et toutes les bourses.</h5>
<div class="cta-links">
<a class="icon icon-after icon-chevronright" href="/fr/services/financing/" target="_self" rel="follow" data-analytics-title="Learn more - Financing">En savoir plus</a>
</div>
</div>
<div class="unit-image-wrapper">
<figure class="unit-image unit-image-financing-tile" data-progressive-image></figure>
</div>
</div>
</div>
</section>
I was always able to retrieve the correct data-analytics-title value (which is the lowest data attribute category level in the above code). However, for the other data attributes, it failed.
Here is how I set up the data attributes data collection in Google Tag Manager:
For example, if I clicked on
<a class="icon icon-after icon-chevronright" href="/fr/services/maintenance/" target="_self" rel="follow" data-analytics-title="Learn more - Maintenance" aria-label="En savoir plus sur l'entretien">En savoir plus</a>
Here is what I get using the Google Tag Assistant (preview mode):
As you can see, only the data-analytics-title has a value.
I want the data-analytics-region and data-analytics-section-engagement to have a value as well (here it says undefined), so that I'm able to know where exactly the user clicked on the page. What am I doing wrong?
Finally, and it is linked to my 1st question, I want to be able to link the different data attributes so that I know from which page/section/link/etc. the user triggered an event. I'd like to have a clear view of that in my GA4 Reports. How can I do so?
Thanks for your help :-)
First thing we need to know is that user is clicking which element. And the Data you need is which element.
Let's take a simple version of the html code.
<x data-analytics-region="xxx">
<y data-analytics-section-engagement="yyy">
<z data-analytics-title="zzz">
</z>
</y>
</x>
Now the user is clicking the z element. So the GTM trigger fired and get the data-analytics-title
But we don't get the value from data-analytics-section-engagement and data-analytics-region. Why? Because they are different element
So we need to find those element first. Based on the click element.
From the example :
We need to find the y element and x element based on z element.
There are few ways we can do it.
I would try on the Element.closest()
Not test yet but similar to
var clickElement = {{Click Element}};
var findXElement = clickElement.closest('x');
var dataAnalyticsRegionValue = findXElement.getAttribute("data-analytics-region");
var findYElement = clickElement.closest('y');
var dataAnalyticsSectionEngagementValue = findYElement.getAttribute("data-analytics-section-engagement");
You might need to adjust the code based on your real html but the direction is the same.
I am trying to scrape an html page that uses this structure:
<div class="article-body">
<div id="firstBodyDiv">
<p class="ng-scope">
This is a dummy text for explanation purposes
</p>
<p> class="ng-scope">
This is a <a>dummy</a> text for explanation purposes
</p>
</div>
</div>
as you can see some of the P elements have a elements and some dont.
What i did so far is the following:
economics["article_content"] = response.css("div.article-body div#firstBodyDiv > p:nth-child(n+1)::text").extract()
but it returns only the text before and after the a element if there is an aelement inside the p element
while this query return the a(s) elements:
response.css("div.article-body div#firstBodyDiv p:nth-child(n+1) a::text").extract()
i want to find a way to check whether there is an a element or not so i can execute the other query(the one who scrape the text inside the a element)
this is what i did so far to do so:
for i in response.css("div.article-body div#firstBodyDiv p:nth-child(n+1)"):
if response.css("div.article-body div#firstBodyDiv p:nth-child(n+1) a") in i :
# ofcourse this isnt working since and i am getting this error
# 'in <string>' requires string as left operand, not SelectorList
# probably i will have a different list1, list1.append() the p
# before, a, and the p text after the a element
# assign that list to economics["article_content"]
Although i am using css selectors, you are welcome to use xpath selectors.
You can use the descendant-or-self functionality from xpath, which will get all inner texts.
for i in response.css('div.article-body div#firstBodyDiv > p:nth-child(n+1)'):
print(''.join(i.xpath('descendant-or-self::text()').extract()))
You can also use scrapy shell in order to test your code with raw HTML like so:
$ scrapy shell
from scrapy.http import HtmlResponse
response = HtmlResponse(url='test', body='''<div class="article-body">
<div id="firstBodyDiv">
<p class="ng-scope">
This is a dummy text for explanation purposes
</p>
<p class="ng-scope">
This is a <a>dummy</a> text for explanation purposes
</p>
</div>
</div>
''', encoding='utf-8')
for i in response.css('div.article-body div#firstBodyDiv > p:nth-child(n+1)'):
print(''.join(i.xpath('descendant-or-self::text()').extract()))
Is it possible to render a template, or even just a partial, from within the context passed to a top level template? It seems like this might require recursive rendering, but maybe I'm missing something.
The example below demonstrates this using Bootstrap.
Say this is my top level template:
<div class="panel">
<div class="panel-body">
{{{description}}}
</div>
</div>
And my context is:
{
description: "\
Some text before the warning.\
<div class=\"alert alert-warning\" role=\"alert\">\
<span class=\"glyphicon glyphicon-warning-sign\" aria-hidden=\"true\"> </span>\
My warning here.\
</div>\
Some text after the warning."
}
What I'd like to do is separate the alert into a partial for a number of reasons:
Arbitrary placement within surrounding text
Can make partials for types other than warning (danger, info, etc.)
Can add as many as needed interspersed in the context string
For these reasons, it seems like it's not possible to put it into the top level template.
The partial would look something like this:
<script id="partial-warning-template" type="text/x-handlebars-template">
<div class="alert alert-warning" role="alert">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"> </span>
{{{warning-message}}}
</div>
</script>
Once this is in place, I would be able to use it like so:
{
description: "\
Some text before the warning.\
{{> partial-warning-template \"My warning here.\"}}\
Some text after the warning.\
{{> partial-warning-template \"Now adding a second warning.\"}}"
}
Maybe I'm missing something fundamental - is there a more idiomatic way of doing this?
You won't be able to include the partial blocks in the description value and expect them to be evaluated as partials by the top level template method; the entire description string will be spat out as a single literal string.
What you would need to do is to have the partials evaluated before you pass the context object with description to the top level template method.
If you have pre-compiled your partial in something like the following manner:
Handlebars.registerPartial('warn', Handlebars.compile(document.getElementById('partial-warning-template').innerHTML));
Then you will be able to call this partial when you construct your description string:
{
description: 'Some text before the warning.' +
Handlebars.partials.warn({ 'warning-message': 'My warning here.' }) +
'Some text after the warning.' +
Handlebars.partials.warn({ 'warning-message': 'Now adding a second warning.' })
}
How do i add some CSS to the Scala Helpers, and is it possible to remove the "Required" and "Numeric" text under the textfield?
#inputText(advForm("weeknr"))
#inputText(advForm("jaar"))
#inputText(advForm("datum"))
--------------------EDIT 1------------------
When I add my own CSS, im not getting the error warnings that i used to get when I try to upload an empty form, the text used to turn red. This is the code I changed
MyPlainFieldConstructor.scala.html(only 2 lines of code):
#(elements: helper.FieldElements)
#elements.input
advPlaatsen2.scala.html:
Added this line of code
#implicitField = #{ FieldConstructor(myPlainFieldConstructor.f) }
and this is how i placed the CSS(Foundation 5):
<div class="row collapse">
<div class="small-2 columns">
<span class="prefix">Email</span>
</div>
<div class="small-4 left columns">
#inputText(advForm("email"),
'id -> "right-label",
'placeholder -> "")
</div>
</div>
This way the forms looks how I want it to look but it doesnt show me errors and it doesnt even upload my files
but when i remove this line of code:(which is above the #import helper._)
#implicitField = #{ FieldConstructor(myPlainFieldConstructor.f) }
the form works as it should but looks really bad:
To customize the html and styles of a field you can write your own field constructor. Take a look to play docs here.
Chief complaint:
Using CSS Selector cannot locate element
Css path:
html.ng-scope body.ng-scope div.snap-content div.content-container div.ng-scope div.content-box div div.cb-landing-module div.deposit-acct-box div.dropdown div.dd-field div.dd-arrow-box
Css selector:
.dropdown .dd-arrow-box
How I used it in Watir/Cucumber :
#browser.element(:css => 'dd-arrow-box').click
Error:
Cucumber reported error: Unable to late element
Description Of Problem:
I have a combo box of sorts that I would like to click
The result would be selecting items from the list.
I have tried xpath , in may combinations with the same error
Unable to find element
Tried:
Possible / sync issue: Fire on Even …. Failed
Xpath – Failed
When I take the method off ( e.g ) click away and add exist it is found . I can’t click it
Edit: Adding HTML from Comment:
<div class="dd-arrow">
</div>
</div>
</div>
<ul class="dd-box" style="display: none;">
<li class="dd-list-head"> Direct Deposit </li>
<li class="dd-item ng-scope ng-binding" ng-click="selectAccount(directDeposit)" ng-repeat="directDeposit in directDeposits">
<span class="acct-name ng-binding">WELLS FARGO BANK, NA</span>
Still puzzled the last threw the following exception: invalid attribute: :css (Watir::Exception::MissingWayOfFindingObjectException)
This might be because what you are looking for is the dd-arrow-box tag, not the class. Change your code to look like this:
#browser.element(:css => '.dd-arrow-box').click
exactly like you would if you were defining a css file. Notice the period in front of dd-arrow-box
Here's a good example.
Given the html:
<div class="divhere">
<p>Hello</p>
</div>
you could use the code #browser.element(css: 'p').text to grab the text from the paragraph.
Likewise, #browser.element(css: '.divhere') will locate the div element using the class selector.