Given an HTML template with the following structure:
<div id="user-a">
<span class="entry-1"></span>
<span class="entry-2"></span>
<span class="entry-3"></span>
<span class="entry-4"></span>
<span class="entry-5"></span>
<span class="entry-6"></span>
</div>
<div id="user-b">
<span class="entry-1"></span>
<span class="entry-2"></span>
<span class="entry-3"></span>
<span class="entry-4"></span>
<span class="entry-5"></span>
<span class="entry-6"></span>
</div>
<div id="user-c">
<span class="entry-1"></span>
<span class="entry-2"></span>
<span class="entry-3"></span>
<span class="entry-4"></span>
<span class="entry-5"></span>
<span class="entry-6"></span>
</div>
etc, is there any way to generate the child < span > elements in HTML without manually adding them for each user? I will not have access to Javascript or PHP in this environment, only a basic HTML form and an inline style sheet.
Related
For a website I have to display a div with multiple spans inside. Each one contains one character (with a specific colour class). When I use wraps of any kind, they don't recognize the text as whole and wrap on whitespace but rather on single characters (since it is for the computer only one input, that just fits this place)
See image:
It should wrap at "Dieses Maß wird in [WRAP] Zoll angegeben.
.colouredAnswer {
display: flex;
flex-wrap: wrap;
}
.green {
color: #008000;
white-space: pre-wrap;
font-size: 1.5em;
line-height: 1em;
}
<div class="colouredAnswer">
<span class="yellow-green">D</span>
<span class="green">i</span>
<span class="green">e</span>
<span class="yellow">s</span>
<span class="yellow-green">e</span>
<span class="yellow-green">s</span>
<span class="green"> </span>
<span class="green">M</span>
<span class="green">a</span>
<span class="green">ß</span>
<span class="green"> </span>
<span class="green">w</span>
<span class="green">i</span>
<span class="green">r</span>
<span class="yellow-green">d</span>
<span class="green"> </span>
<span class="green">i</span>
<span class="yellow-green">n</span>
<span class="green"> </span>
<span class="green">Z</span>
<span class="yellow-green">o</span>
<span class="green">l</span>
<span class="green">l</span>
<span class="green"> </span>
<span class="green">a</span>
<span class="green">n</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">b</span>
<span class="green">e</span>
<span class="green">n</span>
<span class="green">.</span>
</div>
Try wrapping each word in a div:
.colouredAnswer {
display: flex;
flex-wrap: wrap;
}
.green {
color: #008000;
white-space: pre-wrap;
font-size: 1.5em;
line-height: 1em;
}
<div class="colouredAnswer">
<div>
<span class="yellow-green">D</span>
<span class="green">i</span>
<span class="green">e</span>
<span class="yellow">s</span>
<span class="yellow-green">e</span>
<span class="yellow-green">s</span>
</div>
<span class="green"> </span>
<div>
<span class="green">M</span>
<span class="green">a</span>
<span class="green">ß</span>
</div>
<span class="green"> </span>
<div>
<span class="green">w</span>
<span class="green">i</span>
<span class="green">r</span>
<span class="yellow-green">d</span></div>
<span class="green"> </span>
<div>
<span class="green">i</span>
<span class="yellow-green">n</span>
</div>
<span class="green"> </span>
<div>
<span class="green">Z</span>
<span class="yellow-green">o</span>
<span class="green">l</span>
<span class="green">l</span></div>
<span class="green"> </span>
<div>
<span class="green">a</span>
<span class="green">n</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">b</span>
<span class="green">e</span>
<span class="green">n</span>
</div>
<span class="green">.</span>
</div>
I am using angular ng-repeat to get several divs. The code in original template html is :
<div class="span5 noMarginLeft">
<div class="dark">
<h1>Timeline</h1>
<div class="timeline">
<div class="timeslot">
<div class="task">
<span>
<span class="type">appointment</span>
<span class="details">
Dennis Ji at Bootstrap Metro Dashboard HQ
</span>
<span>
remaining time
<span class="remaining">
3h 38m 15s
</span>
</span>
</span>
<div class="arrow"></div>
</div>
<div class="icon">
<i class="icon-map-marker"></i>
</div>
<div class="time">
3:43 PM
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
and the style of each div (class: 'timeslot' or 'timeslot alt') is auto-calculated for its height:
and the result of the code is:
when I use ng-repeat to get these divs, (code here)
<div class="timeslot" ng-repeat="comment in allComments">
<div class="task">
<span>
<span class="type">{{comment.userId}}}</span>
<span class="details">
{{comment.content}}
</span>
<span>
<span class="remaining">
{{comment.dislike}}
</span>
</span>
</span>
<div class="arrow"></div>
</div>
<div class="icon">
<i class="icon-map-marker"></i>
</div>
<div class="time">
3:43 PM
</div>
</div>
the style of the div is gone, and the height of each div is not auto-calculated. How can I solve this? Thanks in advance.
You should create a directive to make the calculation. if you are doing this with jquery then you are going to face same issue.
/**
* Lets create directive
*/
angular
.module('demoApplication')
.directive('autoHeight', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
//Do your calculations here
console.log(element.css('height'));
}
};
}]);
HTML
<div class="timeslot" ng-repeat="comment in allComments" auto-height>
<div class="task">
<span>
<span class="type">{{comment.userId}}}</span>
<span class="details">
{{comment.content}}
</span>
<span>
<span class="remaining">
{{comment.dislike}}
</span>
</span>
</span>
<div class="arrow"></div>
</div>
<div class="icon">
<i class="icon-map-marker"></i>
</div>
<div class="time">
3:43 PM
</div>
</div>
Woring plunker for directive
So here is the HTML markup that I have on my site and it displays star rating with the help of some css.
Now I have read this entire google document but I am still not able to understand how to change my markup. I am not willing to make changes in css and I don't have that much data available with me so that can create markup as per microdata/RDF as mentioned in google docs.
What is the minimum change that I can make so that google understands aggregate rating for the item?
<div class="store__rating">
<meta content="5" itemprop="rating">
<div class="rateStars"><span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="reviewCount">
2Reviews
</span>
</div>
</div>
I ended up doing like this, here is the testing tool, just paste the HTML and validate
<div class="store__rating" typeof="v:Review-aggregate" xmlns:v="http://rdf.data-vocabulary.org/#">
<span rel="v:rating">
<span typeof="v:Rating">
<span content="5" property="v:average"></span>
<span content="5" property="v:best"></span>
</span>
</span>
<span content="2" property="v:count"></span>
<div class="rateStars"><span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="reviewCount">
2 Reviews
</span>
</div>
</div>
I’m implementing schema.org markup on a contact page on a website to structure the bussiness name, address, phone number and email.
To format it I’ve wrapped parts of it in <p> tags. Will this invalidate the schema.org markup?
Here is what it looked like before the p tags:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="name">Acne co</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">123 street</span>
<span itemprop="addressLocality">London</span>,
<span itemprop="addressRegion"></span>
<span itemprop="postalCode">N64TF</span>
</div>
<span itemprop="telephone">02083548800</span>
<span itemprop="email">studio#acne.co.uk</span>
</div>
and here is what it looks like after:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<p class="title">
<span itemprop="name">Acne co</span>
</p>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<p>
<span itemprop="streetAddress">123 street</span><br />
<span itemprop="addressLocality">London</span>, <span itemprop="postalCode">N64TF</span>
</p>
</div>
<p>
<span itemprop="telephone">02083548800</span><br />
<span itemprop="email">studio#acne.co.uk</span>
</p>
</div>
Yes, the Microdata specification gives examples which have the same structure of <span> tags nested inside <p> tags.
See: http://www.w3.org/TR/2011/WD-microdata-20110405/#the-basic-syntax
Is there any method in WWW::Selenium which will allow me to iterate through this structure (HTML code) and access the hrefs?
<div class="myGengo_wrap full_width">
<h1>Dashboard</h1>
<div class="blue list">
<span class="title">Sections </span>
<span class="dashboard_master_language">
<span class="dashboard_language wide">
Englisch (Master)
</span>
</span>
<span class="dashboard_languages">
<span class="dashboard_language wide">
Chinese
</span>
<span class="dashboard_language wide">
German
</span>
</span>
...
...
</div>
There is a get_all_links method - see the documentation.