I need to show the image, if the condition is true on ionic2 page (.html)
With reference to angular documentation I am trying the following:
Here is the reference angular doc
Inside the for loop, leg is accessible if I try to print it within div tag. But, it is not accessible in condition.
<div *ngIf="{{leg.legIndex}} == 0" >
<!-- show image middleLeg_1.png if legIndex = 0 -->
<img width="20" height="80" src="img/middleLeg_1.png" />
</div>
Solved it.
The condition should not have the curly brackets. Before, in the condition, I was accessing variable with curly brackets as we do in ionic2 tags. But, in ngif, it's not needed. We can access our variables within for loop, without it.
Here is the correct answer:
<div *ngIf="leg.legIndex == 0" >
<!-- show image middleLeg_1.png if legIndex = 0 -->
<img width="20" height="80" src="img/middleLeg_1.png" />
</div>
Related
I'm trying to make 3 columns in a row equal height. I used row-equal-height, but nothing happens.
Here is my code:
<div class="row row-eq-height">
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Assisted-Living.jpeg" />
<div>
<h2>Assisted Living</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/assisted-living.png" />
Bridging the gap between seniors needing some help and being unable to care for themselves is the purpose of assisted living facilities...
...
</div>
</div>
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Memory-Care.jpeg" />
<div>
<h2>Memory Care</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/memory-care.png" />
Enhancing the life of seniors with memory impairment (due to Alzheimer’s, dementia, or aging) is to specifically enhance the dignity and well-being of each resident...
</div>
</div>
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Independent-Living.jpeg" />
<div>
<h2>Independent Living</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/independent-living.png" />
Engaging in a fulfilling lifestyle is so much more than where you live...
</div>
</div>
Here's the website in progress: https://ciminocarestg.wpengine.com/
It's the column of 3 under the hero (Assisted Living, Memory Care, and Independent Living) that I want to make equal height.
Thank you!
Thanks for sharing the visuals.
Your row-eq-height is working, but is just so happens that your content, within each column, is inside a nested child div element that is not impacted by row-eq-height.
For a quick and easy way to solve the issue, especially if your content is finalized, then add this CSS rule to your site...
.home .content-block div {
min-height:425px;
}
In the future, do either of the following:
If the content in any of your 3 columns expands, just simply adjust that min-height value.
If you don't want to depend on this technique, then pull out the nested divs that are in each column, so that the content is only 1 level deep, not 2.
In either case, UnderStrap is still an excellent choice for a theme and utilizing BootStrap.
So I'm in a situation that requires parsing raw HTML data as a string, this is unavoidable unfortunately otherwise I wouldn't post this. I only need regex to match the class of a div that has an img tag as a child.
So this is the code example that I'm dealing with:
<div class="summary">
<h3>Example</h3>
<div class="explanation">
<span>This serves as an example for the site.</span>
</div>
<div class="user-details">
mheathershaw<br>
<img src="res/badge522.png"/> <span class="score">522</span>
</div>
<div class="help">
Help
</div>
</div>
And the div that I'd like to retrieve the class from is the div that contains the image. The exact capture from this example that I'd like (optimally) is user-details. The criteria for capturing it is simply if it has <img ... /> as a child.
Anyone able to help? Thanks!
You may try this,
/<div\b[^>]*\bclass="([^"]*)"[^>]*>(?:(?!<\/div>)[\s\S])*?<img\b[^>]*>(?:(?!<\/div>)[\s\S])*?<\/div>/
DEMO
I am trying to create a custom tag using .tag file to check weather a value passed in attribute is equal to an html paragraph tag
<p> </p>
Here is my code
checkEmptyBody.tag
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# attribute name="pb_val" required="true" rtexprvalue="true" %>
<c:if test="${pb_val eq '<p> </p>'}">
<%-- Do some action here--%>
</c:if>
Code for usage of above defined Tag
bodyAndHeadingsAndTags.jsp
<c:set var="processedBody">
<article:renderField var="inlineElement" field="body">
<c:choose>
<c:when test="${inlineElement.content.articleTypeName == 'picture'}">
<div class="inline-image">
<%-- Unfortunately it is not possible to get the width/height of the inline image as it is in Content Studio
(by dragging the corners of the image), so therefore a hardcoded version is used instead. --%>
<img src="${inlineElement.content.fields.alternates.value.w300.href}"
width="${inlineElement.content.fields.alternates.value.w300.width}"
height="${inlineElement.content.fields.alternates.value.w300.height}"
alt="${fn:trim(inlineElement.content.fields.caption)}"
${not empty fn:trim(inlineElement.content.fields.caption) ? 'class="captify"' : ''}
title="${inlineElement.content.fields.caption}"/>
</div>
</c:when>
<c:otherwise>
<%-- do nothing!! --%>
</c:otherwise>
</c:choose>
</article:renderField>
</c:set>
<c:out value="${processedBody}"></c:out>111111111111111
<%-- <tgam:substring input="GOODMORNING" start="2" end="6"/>--%>
<tools:checkEmptyBody pb_val="${processedBody}" />
In bdyandheading <c:out value="${processedBody}"></c:out>
The problem is even if the value of pb_val is
<p> </p>
, the if condition comes out to false and hence the action is not performed.
I think since the value is not a string, it's an html tag, the if condition fails.
How to test for such equality?? Do I have to use regular expression or is there some other way to do this??
Thanks
I have three anchor tags, one with text inside and two with images with valid alt text. The anchor tag with text inside works fine with JAWS and is read properly. However, for some reason, with the anchors with the image inside, a tabIndex of -1 is being applied, which means they are being skipped over.
This is being tested in IE 9. Is there any reason why this should be occurring? Is there a way to prevent it?
I had a similar issue with JAWS setting the tabindex of links to -1. This was with IE9 with JAWS 14.0
The problem ended up being caused by a setting in JAWS under "Web / HTML / PDFs" -> "Links" called "Filter Consecutive Duplicate Links". JAWS describes the feature as follows:
This option controls whether consecutive links that point to the same location, one graphical and one text, are filtered. When selected, only the text link is announced. This check box is selected by default.
For example, let's say you have a icon / text link pair that both do the same thing:
<a href="javascript:void(0)" onclick="test();">
<img src="untitled.png" title="Test" alt="Test">
</a>
TEST
With the setting checked JAWS will remove the image from the tab order leaving only the text link like this:
<a tabindex="-1" href="javascript:void(0)" onclick="test();">
<img src="untitled.png" title="Test" alt="Test">
</a>
TEST
From my experience and some basic tests I believe this only applies when an image link is followed by a duplicate text link and not vice versa. Also it applies to any duplicate image link following the image / text pair.
The problem I ran into was that JAWS only seemed to compare the href attribute and did not take into account other attributes such as onclick or onkeydown. Pair this up with the duplicate removal applying to any image links following the initial image / text link pair and you can end up with a case where the an image link following a image/ text link pair gets when it should not. Example:
<a href="javascript:void(0)" onclick="test();">
<img src="untitled.png" title="Test" alt="Test">
</a>
TEST
<a href='javascript:void(0)' onclick="dontTest();">
<img src="untitled2.png" title="Test" alt="Test">
</a>
Result:
<a tabindex="-1" href="javascript:void(0)" onclick="test();">
<img src="untitled.png" title="Test" alt="Test">
</a>
TEST
<a tabindex="-1" href='javascript:void(0)' onclick="dontTest();">
<img src="untitled2.png" title="Test" alt="Test">
</a>
Note: the fact that the href is set to javascript:void(0) is purely coincidental. This behavior should be reproducible using any value for the href as long as the value is the same for all the links.
Hope this helps someone.
JAWS automatically add tabindex="-1" to anchor tags which have href="javascript:void(0)". I used href="#" to solve the same problem as yours.
I have html that looks like so:
<ul style="list-style-type: square;">
<br />
<li margin-left="80px">
<br />first line
<br />
<br />second line
</li>
<br />
<li margin-left="80px">
<br />text line 1
</li>
<br />
<li margin-left="80px">
<br />text line 2
</li>
<br />
</ul>
I want to match contents of the ul, but I don't want to match contents of the li elements
The end goal is to get rid of the <br /> tags that are directly under the <ul></ul> and not under the <li></li>
Note:For clarity of the example I did formate the above html, but in my real world scenario it comes as a single giant string without any /r/n's
here:
<p margin-left="40px"><br /> <b>[What is the nature of the Services?]</b></p><br /><p><br /> [What are the overarching goals, objectives and outcomes you want to achieve?]</p><br /><p margin-left="80px"><br /> <b><i><u>[How should the Services be delivered?]</u></i></b></p><br /><ul style="list-style-type: square;"><br /> <li margin-left="80px"><br /> gfhsdfsdf<br /><br /> some line here</li><br /> <li margin-left="80px"><br /> sfdsfsdfsdf</li><br /> <li margin-left="80px"><br /> sdfsdfsdf</li><br /></ul><br /><p><br /> [Is the appointment of this Supplier exclusive?]</p><br /><p><br /> [Refer to any proposal prepared by the Supplier if this helps describes any aspects of the Service]</p><br />
Anyway the first thing in my mind was to
use this to extract the contents of the <ul>
<ul[^>]*>(.*)</ul>
and then maybe do a subsequent one to select all the li
<li[^>]*>.*</li>
and then somehow get rid of anything else that's left over
but that's kind of lame and then again
<li[^>]*>.*</li>
matches whole bunch of li's
this entrie string gets captured:
<li margin-left="80px"><br />\t\tgfhsdfsdf<br /><br />\t\tsome line here</li><br />\t<li margin-left="80px"><br />\t\tsfdsfsdfsdf</li><br />\t<li margin-left="80px"><br />\t\tsdfsdfsdf</li>
i know it's because dot is greedy, but not sure how to avoid it
something like [^</li>]* wouldn't work cuz it treats it like list of characters not a string
any help much appreciated
So I have 2 problems
1) i don't like the way I'm approaching this - better ideas needed (I'm considering using set operations of linq to xml to achieve this) - still hope to do this with regex, but if anyone knows exactly how to do this then please share
2) how do I capture separate groups of lis instead of capturing entire first opening <li> and last closing </li>?
I think you should go look at this...
RegEx match open tags except XHTML self-contained tags
Then recognize that parsing html with a regex is not quite that easy. personally I would load the html in to an html dom object then crawl the document... you might look at this project for some help.
http://htmlagilitypack.codeplex.com/
Since you don't say which regex flavor you're using, here's a JavaScript-compatible regex to match a <br /> that's inside a <ul> element but not inside a <li> element:
<br\s*/>(?=[^<]*(?:<(?!/?ul\b)[^<]*)*</ul>)(?![^<]*(?:<(?!/?li\b)[^<]*)*</li>)
Breaking that down,
<br\s*/> matches the BR tag, of course.
(?=[^<]*(?:<(?!/?ul\b)[^<]*)*</ul>) looks ahead for the next occurrence of </ul>, but only if it doesn't encounter a <ul> tag first.
(?![^<]*(?:<(?!/?li\b)[^<]*)*</li>) does the same thing with </li> and <li> tags, but this time negating the result.
Being JS compatible, this should work in Dreamweaver as well as in editors with solid regex support, like EditPad and TextMate. It's also compatible with most Perl-derived flavors (Python, .NET, Java, etc.), though some syntactic tweaking will probably be needed.