I have dropdown with list of people results.
Each result contain some details.
The demand is that click in each <div class="list-item clearfix">will redirect the user to specific change ' unless the user click on some inner span ( <span class="locationJob">) which redirect him to another page.
<div class="list">
<g:each in="${peopleList?.getResults()}" var="doc">
<div class="list-item clearfix">
<g:link controller="connection" action="details" id="${ApplicationUtils.encodeString(doc.ref?.toString())}">
<div class="avatar">
<span class=""><img src="${doc.avatarUrl}" width="41" alt="Avatar" class="img-circle"/></span>
</div>
<div class="info">some text</div>
<div class="row no-margin body highlight-search-term">
<span class="locationJob">
<g:link controller="profile" action="show" id="${ApplicationUtils.encodeString(profExperienceCompanyIds[index]?.trim())}" class="professional-exp-highlight">
{currentCompany}</g:link>
</div>
</g:link>
</span>
</div>
</g:each>
</div>
I understood that it's not correct to write inside .... So what should I do?
You can replace inside g:link, use input type with onclick method to run remoteFunction:
http://grails.github.io/grails-doc/2.2.1/ref/Tags/remoteFunction.html
Related
Greeting all,
I'm a newbie here and I just started my carrier as junior web developer. Can some help me with below situation,
I have a WordPress theme, there's some contents doesn't want to be appear so I'm trying to hide those contents by adding some coding to Additional CSS and the div element that I'm trying to hide don't have any class or id given.
Please consider the example code below (I'm not showing entire code here, its just example code exact the same with html elements)
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
This solution only consider the posted code so not sure if it will also work in the actual wordpress theme, as there might be existing styles that overrides it.
The element to be hidden seems to be an error or helper text that follows a form, so perhaps this can be selected as: a div directly after a form inside summary-bottom.
Example:
.summary-bottom > form + div {
display: none;
}
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
You can select the element with by using the general div tag.
We can specify this further by assuming that the div should always be a child of the .summary-bottom element, and then can either always select the third child or target the general div based on its inline style attribute.
This would leave you either with: .summary-bottom div:nth-child(2) (starting from 0) or .summary-bottom div[style="color: red;"].
Of course, how you can select such an element heavily varies on the real usage, and they are way more possibilities to do so, but both snippets mentioned should work on the above HTML code.
You can use the selector property
.summary-bottom div:nth-child(2) {
display: none;
}
I've to filter the div elements obtained from a database based on user input. This is a list of users of a chat and I want to show only the div of the user written in the input.
I've tried several solutions on the site but they don't work in React. I'm getting mad. Ideas?
Thanks so much in advance.
<div class="sidebar__chat--container">
<a class="link" href="/room/A">
<div class="sidebar__chat">
<div class="avatar__container">
<img src="1" class="MuiAvatar-img">
</div>
</div><div class="sidebar__chat--info">
<h2>Mario</h2>
</div>
</div>
</a>
<a class="link" href="/room/B">
<div class="sidebar__chat">
<div class="avatar__container">
<img "2" class="MuiAvatar-img"></div>
</div>
<div class="sidebar__chat--info">
<h2>John</h2>
</div>
</div>
</a>
</div>
<div className="sidebar__search">
<form className="sidebar__search--container">
<input
placeholder="Search for users"
type="text"
id="search"
/>
</form>
</div>
I provided an example in this SandBox
Note: I created a custom usersList that will be replaced by the data fetched from database
I want to hide a div element on hover of kendo-menu-item in angular 8.
I want to hide a div whose class is "nav-flyout" on hover of kendo-menu-item "what we do"
Here is the html code
<div class="toolbar navbar" role="banner">
<span><h3>My Project</h3></span>
<div class="spacer"></div>
<kendo-menu class="navbar">
<kendo-menu-item
[cssClass]="'what-we-do'"
text="What We Do"
url="/whatwedo"
></kendo-menu-item>
<kendo-menu-item text="Our Team" url="/ourteam"></kendo-menu-item>
<kendo-menu-item text="Our Work" url="/ourwork"></kendo-menu-item>
<kendo-menu-item text="Resources" url="/resources"></kendo-menu-item>
<kendo-menu-item text="Who Are We" url="/whoarewe"></kendo-menu-item>
</kendo-menu>
<button kendoButton [primary]="true">Let's Talk</button>
<div id="rightSpace"></div>
</div>
<div class="content" role="main"></div>
<div class="mega-nav-contain project-container">
<div id="what-we-do-flyout" class="nav-flyout">
<div class="row-fluid center">
<div class="span4">
<h3 class="loop-title">
<a href="">
<span class="green">Website</span> Design</a>
</h3>
</div>
</div>
</div>
</div>
Any help would be appreciated.
you need to add mouse-eventin kendo-menu-item like:
<kendo-menu-item (mouseover)="yourFun()" text="Our Team" url="/ourteam"></kendo-menu-item>
and in this function yourFun() change display-style , Triggers when cursor is over the mouseover applied element (like hover).
I need extract value of attribute src from this HTML.
For example from this HTML:
<div class="css_telo js_telo">
<div class="css_teloV">
<div class="css_vlavo">
<div class="css_info css_zena">
<a class="css_foto big_foto" href="" title="Fotka: endoskopia"><span><img id="PPAsrc" src="http://m3.aimg.sk/profil/v_08c261dabb82e3eaded3e54c28c49e35.jpg?13922246241392224624" width="176" height="220" alt="Fotka: endoskopia" /></span></a>Zmeniť fotku
</div>
<div class="por_0">
<div class="css_album css_menubox edit c_prazdne" id="m_fotoalbumy">
<h3>Fotoalbumy<small> (0)</small></h3>
</div>
</div>
<div class="por_1">
<div class="css_album c_video xcss_akt css_menubox edit" id="m_videoalbumy">
<h3>Videoalbumy<small> (0)</small></h3>
</div>
</div>
<div class="por_2">
<div class="css_priatelia css_menubox edit" id="m_userFriends">
<h3>Priatelia<small> (0)</small></h3>
</div>
</div>
</div>
I need get this:
http://m3.aimg.sk/profil/v_08c261dabb82e3eaded3e54c28c49e35.jpg?13922246241392224624
I tried this XPATH expression:
//div[#class="css_telo js_telo"]/div[#class="css_teloV"]/div[#class="css_vlavo"]/div[#class="css_info css_zena"]/a/span/img/#src
But it not work. Where is problem?
it seem like its the only src on the page, you can simply do:
//img/#src
or more specific:
//img[#id="PPAsrc"]/#src
I've a problem with anchor tags :/
I've got the following code:
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>
My goal is that when i click on B (divHrefB) the application go to "divB" but since this element hidden it doesn't work.
Please note, that i don't want to show divB (i want a link to the place where div are... is that possible?
At this point, i'm thinking on generate dynamically the href value (in this case, i would generate the following div)
<div name="divHrefB">
B
</div>
Thanks a lot.
just don't apply display: none, just add this css for the hidden div.
<div name="divHrefB" style="height: 0px;width: 0px;overflow:hidden;">
B
</div>
You're missing the ending closing " comment.
try this guy:
style="display: none;"
you are missing " in style end
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>