Semi-novice web developer getting increasingly frustrated with my Joomla editor changing my code. I've research online and found Q&As that hint at a similar problem but I can't seem to figure this out.
Essentially it's code to create a linked image with a text caption added on hover. Desired code shown below:
<ul class="photo-grid">
<li>
<figure><a href="index.php?option=com_hikashop&view=category&layout=listing&Itemid=179"><img src="images/purple-biothane-waterproof-dog-collars.jpg" alt="purple biothane waterproof dog collars" width="280" height="187" /><figcaption>
<p>Waterproof collars</p>
</figcaption></figure></a>
<p class="photocaption">FEATURED PRODUCT</p>
</li>
BUT each time I open the editor the </a> tag has been moved upwards, directly after the <img> tag. Can anyone offer a resolution, I'd really appreciate it. Thanks.
You are closing the <a> tag after </figure> but you have opened it within <figure> so therefore it needs closing inside <figure>. So use:
<ul class="photo-grid">
<li>
<figure>
<a href="index.php?option=com_hikashop&view=category&layout=listing&Itemid=179">
<img src="images/purple-biothane-waterproof-dog-collars.jpg" alt="purple biothane waterproof dog collars" width="280" height="187" />
<figcaption>
<p>Waterproof collars</p>
</figcaption>
</a>
</figure>
<p class="photocaption">FEATURED PRODUCT</p>
</li>
Related
Can someone help me to identify to how to correct the Xpath statement from the below code. At the moment when I run the code, its doing nothing i.e no error and no click action
DOM:
<li class="product-personal-login-new">
<a href="/safe-online-banking/safe-online-banking.page?" target="_self">
<span class="pl-login-ornage-box">
<img alt="" src="/assets/img/lock-icon.png">
LOGIN
</span>
</a>
Code snippet:
web.findElement(By.xpath("//img[contains(#src,'/assets/img/lock-icon.png')]")).click();
I am trying to dynamically populate a Bootstrap 4 carousel via an ngFor iterating over an array of strings that contain the image urls. The carousel is not displaying the images, though looking at the markup generated everything looks fine. I'm guessing that the component is rendering before Angular is adding in the divs for each slide, as the "carousel slide" div has a height of 0px, which I think is what is hiding the slides themselves.
Behind-the-scenes I have an exposed property named "primarySlideshowImages" containing an array of urls:
ngOnInit() {
this.primarySlideshowImages = this.photoService.getImageLists(ImageListKeys.BrochureProductsPrimary);
}
The HTML markup looks like this:
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div *ngFor="let image of primarySlideshowImages; let i = index" class="carousel-item {{ (i == 0) ? 'active' : ''}}">
<img class="d-block img-fluid w-100" [src]="image" >
</div>
</div>
<a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
FYI, I have tested this by hardcoding rather than dynamically adding the images, and everything renders just fine. I think it's a timing thing, but given my relative unfamiliarity with this technology I just don't know how to even search for a solution at this point.
Thank you in advance for your assistance. I do recognize that there are other components and approaches I could use - the ng-bootstrap components, open-source components, purchasable ones, etc. I'd like to try to figure this out using the bootstrap components because I'm pretty new at this technology and hate to jump to an easy solution if there is something I just don't understand that I should be doing. Thanks again for any help you may offer.
It may be that the div containing the image has a width and/or height of the div containing the image is/are 0.
Try setting a style on them. e.g .carousel-item {width:200px; height:200px;}
Also, try checking if the images are being retrieved by the browser using the Network tab on the dev tools.
I am having some issues adding a hyperlink to a 'hcard' in ionic. I am using the following plugin (https://github.com/drewrygh/ionic-ion-horizontal-scroll-cards) and the codepen is here: http://codepen.io/drewrygh/pen/jEJGLx
When I try to add hyperlink to hcard nothing happens. What is the best way to do this, does anyone know?
<div ng-controller="barsCtrl">
<h4>Top Rated Bars</h4>
<hscroller>
<hcard ng-repeat="bar in bars" index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}">
</hcard>
</hscroller>
</div>
Do you mean you want the cards to link to something as an anchor tag? You can wrap the cards in an anchor tag: http://codepen.io/anon/pen/Nqvjpv
<a ng-repeat="item in items" href="http://www.google.com?q={{item.desc}}" target="_blank">
<hcard index="{{$index}}" desc="{{item.desc}}" image="{{item.image}}"></hcard>
</a>
How to click on one link among several to which all of them having same id.
And it has only one means through which we can get it,that is id.
And through xpath ,we can't do because every time I open the tab,location of that link changes,so xpath changes too.
There are lots of links having same id,it differs through text written above it.so to refer that link,I also mention it through that text,but still not able to do.
In other words,there are links(with images) placed one by one,on execution,I want 3 link to execute but it executes the first one due to having same id's.so what should I do to click the third link not the first one.
<span class="online-signal"></span>
<figure>
<img id="UserImagePreview" src='/Content/PatientPhotos/default.jpg' alt="" />
</figure>
<figcaption class="doc-des-cap" title="Y">Z </figcaption>
<figcaption>Rating: 4</figcaption>
<span class="select-btn">
<a id="linkAppointment" docid="727" docname="x" href="javascript:void(0)">Select</a>
</span>
<span class="offline-signal"></span>
<figure>
<img id="UserImagePreview" src='/Content/PatientPhotos/default.jpg' alt="" />
</figure>
<figcaption class="doc-des-cap" title="C">B</figcaption>
<figcaption>Rating: 0</figcaption>
<span class="select-btn">
<a id="linkAppointment" docid="49" docname="A" href="javascript:void(0)">Select</a>
</span>
Try using the below xpath
//figcaption[contains(#title, 'Y')]/preceding-sibling::figure/img[#id='UserImagePreview']
Replace the title with the <figcaption> title attribute of the respective img you want to locate
Hope this helps you...if it is still not working kindly get back
I'm trying to open a modal using SimpleModal OSX, and the values for some of the attributes are assigned using AngularJS. However, when I click an item to open a new modal it doesn't work and the page reloads. Here's the code to make this clear
<li ng-repeat="news in newsItems" class="some class">
<a class="osx" href="#" data-page={{news.dataPageUrl}}>
<article>
<header>
<span class="itemtype">{{news.dateHeader}}</span>
<h1>{{news.header}}</h1>
</header>
<img height="145" src={{news.imageUrl}} alt={{news.imageHeader}} />
</article>
</a>
</li>
The dynamic items appear in my page, so the ng-repeat directive works. I added a static item and it opens a new modal without issues. The osx.js script is loaded at the end of the body tag. What am I doing wrong?