I want to make title of href and id of div in the same line
this is my code :
<a href="#">my link name <div id="iddiv"></div>
</a>
so I want to disply : my link name 500
500 is the id of my div
updated :
this is my code :
<li class="$nav_child.getTitle()">
<a href="$nav_child.getURL()" class="$nav_child_class" $nav_child.getTarget()>
$nav_child.getName() <div id="$nav_child.getLayout().getPlid()"></div>
</a>
</li>
for example using this code it displays :
my link name
500
You should use a span instead of the div.
this is one of the differences between span and div.. Div displays text on the next line while span does not.
Make div as "display: inline-block". Your problem will be solved.
Related
how to access img tag inside a href tag to set focus to <img> tag?
eg:
<a href ='#' ><img class="img1" src="abc.png"/> </a>
The a .img1:focus {} didn't work. Not able to access <img> inside an <a href></a> tag
If I add class to tag, I can add focus to tag but tag & tag are of diff size & causing issue. eg: , then a .test:focus{} is working, But I need focus for tag
You need a space between a and .img1 ( the way you wrote it means "a tag with img1 class" ) this way :
a .img1:focus {}
This means "element with img1 class inside a tag"
EDIT : in the link #jdv provided in the comments of your initial answer, don't focus (pun unintended) on the accepted answer, but on the second one. You can fix your problem by adding a tabindex property to your img tag.
Like this :
<a href ='#' ><img class="img1" src="abc.png" tabindex="0"/> </a>
try out this code
<a href ='#' id='link'><img class="img1" src="abc.png"/> </a>
a#link .img1:focus{}
focus is often associated with form elements like input field I advise you use hover like this instead
a img:hover{
width: 500px;
}
<a><img class="img1" src="http://via.placeholder.com/350x150"/></a>
In Fancybox 3, is it possible to have HTML inside an image gallery?
This HTML will have a link to an external site.
Whatever I do, it doesn't work.
<div id="photo-gallery" style="display: none">
<a data-fancybox="photo-gallery" href="photo-1.jpg"></a>
<a data-fancybox="photo-gallery" href="photo-2.jpg"></a>
<a data-fancybox="photo-gallery" href="photo-3.jpg"></a>
The 4th item should be just a window with a link to another site, like:
<a data-fancybox="photo-gallery" href="www.anothersite.com">Click here</a>
</div>
Please, check documentation for samples - http://fancyapps.com/fancybox/3/docs/
I guess you are looking for something like this:
<a data-fancybox="photo-gallery" data-type="iframe" href="some-page.html">4</a>
Demo - https://codepen.io/anon/pen/vdxPJg?editors=1000
Edit #1
If you want to automatically add some extra content at the end of the gallery, you can use this snippet:
$('[data-fancybox="photo-gallery"]').fancybox({
onInit: function(instance) {
instance.createGroup({
type : 'html',
content : '<div><h1>Hi</h1><a data-fancybox="photo-gallery" href="www.anothersite.com">Click here</a></div>'
});
}
})
Demo - https://codepen.io/anon/pen/KQmNGX?editors=1010
Edit #2
This is how you can mix images and inline content:
<a data-fancybox="photo-gallery" href="#info">4</a>
<div id="info">
Click here
</div>
Demo - https://codepen.io/anon/pen/KQmNrX?editors=1010
I am trying to use the following code to extract the inner html of menu items but it only picks up the text that is in the same line for some reason. Here is the code:
WebElement ReportStart=driver.findElement(By.xpath("//a[contains(text(),'Reports')]"));
List<WebElement> reports= ReportStart.findElements(By.xpath("//*[starts-with(#id, 'menu_')]"));
System.out.println(reports.size());
for (int i = 0; i < reports.size(); i++) {
System.out.println(reports.get(i).getAttribute("id"));
System.out.println(reports.get(i).getText());
}
It picks up all the id's but only the inner text of some of them and not nested one. So it picks up text Reports and id menu_1035 and menu_1036 but not the text General as it is not on the same line. Not sure why this is that findelements does not pick the whole web element
<li>
<a id="menu_1035" class="dynmenu" href="#">Reports</a>
<ul>
<li>
<a id="menu_1036" href="#">
General
<span class="dwn"/>
</a>
<ul>
</li>
Its not picking the text General as it is inner-html of li tag not a tag.
Your xpath only fetches element which has id - //*[starts-with(#id, 'menu_')]
If you want to get General text also, then you need to update your xpath' that points only tillli` element.
Hope it helps.
I'm using the small module Link Badges to display a badge with the amount of flagged nodes next to a link to the View in question. It works great and I've styled the badge to my needs. This is the current HTML code:
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-menu_badges_execute_view">0</span>
</span>
</a>
Now, I'd like to display the badge a little bit differently (other colors etc.) when the value is 0. I thought about doing this by adding a new CSS class link-badge-zero to the value.
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-zero link-badge-menu_badges_execute_view">0</span>
</span>
</a>
How can I achieve this?
If you just want to add a class if the value inside your span is "0", give this a try
JQuery:
if($(".link-badge").text() == "0"){
$(".link-badge").addClass("link-badge-zero");
}
Here is a fiddle
using xpath or css : How to get something which is selected on page using following html code.
in following code, Element1 is selected on page and I wanted to find name of element that is selected on page.
<div id="idc" class="tre">
<ul id="idCatT_srt_ul" class="abc">
<li class="treN treB treSelected" title="Element1 title">
<span class="spclass">Element1</span>
</li>
</ul>
</div>
Guessing that you're looking for the <li> that contains selected you can do that with Xpath or CSS selectors like this:
XPath: (if I remember right...)
//*[contains(#class,"selected")]
CSS Selectors:
.treSelected