How to delete and add items in jquery mobile listview - jquery-mobile-listview
I am learning you to use Jquery Mobile, and I have been combining several codes in order to make a list using listview where I can delete and item from the list or modify the position of the selected item into the list.
First of all I use the delete example from the jquery mobile help and add a extra button for testing purposes in the page footer in order to add a dummy item into the list. Up to here it works partially. If I do not click in a previous predefined list delete item, my adding function will do not work. But If I click first in the delete icon and then click my adding button this works however the new item delete button do not have enabled the delete button click event. Can any of you have an idea or suggestion how I can resolve this. Thanks in adavance and here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Swipe list - jQuery Mobile Demos</title>
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css">
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/_assets/css/jqm-demos.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/_assets/js/jquery.mobile.demos.js"></script>
<script src="http://jquerymobile.com/demos/1.3.0-beta.1/js/jquery.mobile-1.3.0-beta.1.js"></script>
<script>
$( document ).on( "pageinit", "#demo-page", function() {
// Swipe to remove list item
$( document ).on( "swipeleft swiperight", "#list li.ui-li", function( event ) {
var listitem = $( this ),
// These are the classnames used for the CSS transition
dir = event.type === "swipeleft" ? "left" : "right",
// Check if the browser supports the transform (3D) CSS transition
transition = $.support.cssTransform3d ? dir : false;
confirmAndDelete( listitem, transition );
});
// If it's not a touch device...
if ( ! $.mobile.support.touch ) {
// Remove the class that is used to hide the delete button on touch devices
$( "#list" ).removeClass( "touch" );
// Click delete split-button to remove list item
$( ".delete" ).on( "click", function() {
var listitem = $( this ).parent( "li.ui-li" );
confirmAndDelete( listitem );
});
}
function confirmAndDelete( listitem, transition ) {
// Highlight the list item that will be removed
listitem.addClass( "ui-btn-down-d" );
// Inject topic in confirmation popup after removing any previous injected topics
$( "#confirm .topic" ).remove();
listitem.find( ".topic" ).clone().insertAfter( "#question" );
// Show the confirmation popup
$( "#confirm" ).popup( "open" );
// Proceed when the user confirms
$( "#confirm #yes" ).on( "click", function() {
// Remove with a transition
if ( transition ) {
listitem
// Remove the highlight
.removeClass( "ui-btn-down-d" )
// Add the class for the transition direction
.addClass( transition )
// When the transition is done...
.on( "webkitTransitionEnd transitionend otransitionend", function() {
// ...the list item will be removed
listitem.remove();
// ...the list will be refreshed and the temporary class for border styling removed
$( "#list" ).listview( "refresh" ).find( ".ui-li.border" ).removeClass( "border" );
})
// During the transition the previous list item should get bottom border
.prev( "li.ui-li" ).addClass( "border" );
}
// If it's not a touch device or the CSS transition isn't supported just remove the list item and refresh the list
else {
listitem.remove();
$( "#list" ).listview( "refresh" );
}
});
// Remove active state and unbind when the cancel button is clicked
$( "#confirm #cancel" ).on( "click", function() {
listitem.removeClass( "ui-btn-down-d" );
$( "#confirm #yes" ).off();
});
$("#btn-agre").click(function(listitem){
$("#list").append('<li><h3>Agregado</h3><p class="topic"><strong>Re: Agregado</strong></p><p>veamos si funciona en la hora y cosa adecuada</p><p class="ui-li-aside"><strong>4:48</strong>PM</p>Delete</li>');
$( "#list" ).listview( "refresh" );
});
}
});
</script>
<style>
/* Left transition */
li.ui-li.left {
-webkit-transition: -webkit-transform 250ms ease;
-webkit-transform: translateX(-100%);
-moz-transition: -moz-transform 250ms ease;
-moz-transform: translateX(-100%);
-o-transition: -o-transform 250ms ease;
-o-transform: translateX(-100%);
transition: transform 250ms ease;
transform: translateX(-100%);
border-top-width: 0; /* We switch to border bottom on previous list item */
border-right-width: 1px;
}
/* Right transition */
li.ui-li.right {
-webkit-transition: -webkit-transform 250ms ease;
-webkit-transform: translateX(100%);
-moz-transition: -moz-transform 250ms ease;
-moz-transform: translateX(100%);
-o-transition: -o-transform 250ms ease;
-o-transform: translateX(100%);
transition: transform 250ms ease;
transform: translateX(100%);
border-top-width: 0; /* We switch to border bottom on previous list item */
border-left-width: 1px;
}
/* Border bottom for the previous list item during the transition*/
li.ui-li.border {
border-bottom-width: 1px;
}
/* Hide the delete button on touch devices */
.touch .delete {
display: none;
}
.touch .ui-link-inherit {
padding-right: 15px !important;
}
/* Custom styling for the popup */
#confirm {
border: 1px solid;
border-color: #044062; /* Fallback for older browsers */
border-color: rgba(4,64,98,.4);
background: #456f9a; /* Fallback for older browsers */
background: rgba(69,111,154,.8);
-moz-box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
-webkit-box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
max-width: 250px;
}
#confirm p {
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
margin-bottom: .75em;
}
/* Make the buttons inherit the popup border-radius (.ui-corner-all) */
#confirm div, #confirm .ui-btn-corner-all {
-webkit-border-radius: inherit;
border-radius: inherit;
}
#confirm #cancel {
background-image: none;
}
#confirm .topic.ui-li-desc {
font-size: inherit; /* The cloned topic will have class ui-li-desc so we negate the font-size settings of this class */
text-align: center;
}
</style>
</head>
<body>
<div data-role="page" id="demo-page" data-title="Inbox" data-theme="d">
<!--
NOTE: If you modify this page make sure you copy your modifications over to
#sample-page below so that your modifications will be reflected in the source
code view
-->
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Inbox</h1>
</div><!-- /header -->
<div data-role="content">
<ul id="list" class="touch" data-role="listview" data-icon="false" data-split-icon="gear" data-split-theme="d" data-inset="true">
<li>
<a href="#demo-mail">
<h3>Avery Walker</h3>
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Amazon.com</h3>
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Mike Taylor</h3>
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Redfin</h3>
<p class="topic"><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Angela Smith</h3>
<p class="topic"><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Stephen Weber</h3>
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>jQuery Team</h3>
<p class="topic"><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
Delete
</li>
</ul>
<div data-role="footer" data-position="fixed" data-theme="b">
<a id="btn-agre" data-role="button" data-shadow="false" data-theme="b" data-icon="gear" >agregar</a>
</div>
</div><!-- /content -->
<div id="confirm" class="ui-content" data-role="popup" data-theme="none">
<a id="cancel" href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">cerrar</a>
<p id="question">Are you sure you want to delete</p>
<a id="btn-arriba" data-role="button" data-shadow="false" data-theme="b" data-rel="back" data-icon="arrow-u" >subir</a>
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c">
<a id="yes" data-icon="delete" data-role="button" data-shadow="false" data-theme="d" data-iconpos="notext" data-rel="back" data-align="right">eliminar</a>
</div>
</div>
<a id="btn-bajar" data-role="button" data-shadow="false" data-theme="b" data-rel="back" data-icon="arrow-d" >bajar</a>
</div><!-- /popup -->
</div><!-- /page -->
<div data-role="page" id="sample-page" data-title="Inbox" data-theme="d">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Inbox</h1>
Back
Refresh
</div><!-- /header -->
<div data-role="content">
<ul id="list" class="touch" data-role="listview" data-icon="false" data-split-icon="delete" data-split-theme="d">
<li>
<a href="#demo-mail">
<h3>Avery Walker</h3>
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Amazon.com</h3>
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Mike Taylor</h3>
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Redfin</h3>
<p class="topic"><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Angela Smith</h3>
<p class="topic"><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Stephen Weber</h3>
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>jQuery Team</h3>
<p class="topic"><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Avery Walker</h3>
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Amazon.com</h3>
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Mike Taylor</h3>
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Redfin</h3>
<p class="topic"><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Angela Smith</h3>
<p class="topic"><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Stephen Weber</h3>
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>jQuery Team</h3>
<p class="topic"><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
Delete
</li>
</ul>
</div><!-- /content -->
<div id="confirm" class="ui-content" data-role="popup" data-theme="none">
<p id="question">Are you sure you want to delete</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a id="yes" data-role="button" data-mini="true" data-shadow="false" data-theme="b" data-rel="back">Yes</a>
</div>
<div class="ui-block-b">
<a id="cancel" data-role="button" data-mini="true" data-shadow="false" data-theme="b" data-rel="back">Cancel</a>
</div>
</div>
</div><!-- /popup -->
</div><!-- /page -->
<div data-role="page" id="demo-mail" data-title="Demo" data-theme="d">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Demo</h1>
Back
</div><!-- /header -->
<div data-role="content">
<p>This is just a landing page for demo purposes.</p>
<p>Back</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
To add to a listview it is very simple, just use the .append method on whatever DOM element where the append method would take markup as its parameter.
Eg.
$('div').append("<h1>Hello World</h1>");
Related
I want to call blazor component dynamically on button click
I have TemplateSlide.razor component like below
<div class="slide-panel">
<div class="contact-form-content">
#Content
</div>
#code
{
[Parameter] public RenderFragment Content { get; set; }
}
I have razor component Comp.razor like following
<TemplateSlide>
<div>Other comp</div>
</TemplateSlide>
I have other menu component that call Comp.razor on button click
<div class="page-header-buttons">
<ul>
<li class="page-header-buttons-items can-add">
<MainMenuLink Href="" ActiveClass="page-header-active" HrefMatch="MainMenuLinkMatch.Exact">
Dashboard
</MainMenuLink>
#*<a class="page-header-plus contact" href="#"><i class="fas fa-plus add-new-contact-icon"></i></a>*#
</li>
<li class="page-header-buttons-items can-add">
<MainMenuLink Href="contacts" ActiveClass="page-header-active">
Contacts
</MainMenuLink>
<a class="page-header-plus contact" #onclick="#(()=>Show<Comp>())"><i class="fas fa-plus add-new-contact-icon"></i></a>
</li>
<li class="page-header-buttons-items can-add">
<MainMenuLink Href="contacts" ActiveClass="page-header-active">
Others
</MainMenuLink>
<a class="page-header-plus contact" #onclick="#(()=>Show<Others>())"><i class="fas fa-plus add-new-contact-icon"></i></a>
</li>
</ul>
</div>
How can write generic and dynamic Show method for button click?
I learned this yesterday and I am only posting this in case it helps someone.
I have a list of users I display in my Blazor Chat, and the names are actually buttons:
#foreach (SubscriberCallback callback in Names)
{
<button class="listbutton" #onclick="(Action<EventArgs>) (args =>
SendPrivateMessageClicked(args, callback.Id))">#callback.Name</button><br />
}
I have this method called SendPrivateMessageClicked, and I need to pass in the Id (Guid) of who to send the message to.
private void SendPrivateMessageClicked(EventArgs args, Guid toId)
{
// Attempt to find the subscriber
SubscriberCallback subscriber = SubscriberService.FindSubscriber(toId);
// Send Private Message Code Removed, but you get the point
}
Css for the link button:
.listbutton
{
background:none;
border:none;
margin:0;
padding:0;
cursor: pointer;
border: none;
color: limegreen;
height: 2.4vh;
font-size: 2vh;
}
.listbutton:focus
{
outline: none;
}
I love Blazor!
How do i perform mousehover on multiple values which can be differentiate just by style attribute's values such as 'top' and 'left'
Here is image...[![ https://i.stack.imgur.com/651dH.png In above Image 2 widgets are there. 1. which gives MG, MP, Assigned etc(left-hand panel) 2. Right panel(16.9%, 13.1% etc).And these all values gives tooltip. Step 1: I have to click one of the option from left-hand-side, in a screenshot its showing MG, MP, Assigned etc. All these options can be differentiate only with style attributes(top and left) and that are into range such as top:235-247px, left:65-72px(for first option) The code is as below: <div class="tab-tooltip tab-widget tab-tooltipBR" style="user-select: none; -webkit-tap-highlight-color: transparent; top: 247px; left: 71px;"> <div class="tab-tooltipContainer"> <div class="tab-tooltipContent" wairole="alert" style=""><div class="tab-ubertip tab-widget" style="min-width: 142px;"> <div class="tab-ubertipCommandArea"> <div class="tab-ubertipCommands hide"></div> <div class="tab-clear"></div><div class="tab-ubertipSelected hide"></div> </div><div class="tab-ubertipContent"> <div class="tab-ubertipTooltip"><span style="white-space:pre-wrap;tab-size:10;-moz-tab-size:10"><div style="text-align:left;"><span style="font-family:'Arial';font-size:13px;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;">Health Group</span></div></span></div> <div class="tab-ubertipActions hide"></div> </div> </div></div> </div> <div class="tab-tooltipConnector"></div> </div> Step 2: Once one of the option clicked it will show only one row with its related value. Say for example , clicked on MG will display MG 16.9% 13.1% 81.6% (full row)and so on and when mousehover it on these values(16.9%, 13.1% etc.) one after another it gives tooltip and that tooltip value I have to fetch. And code for this as below: <div class = “ tab-tooltip tab-widget tab-tooltipAR” style=”user-select: none; -webkit-tap-highlight-color: transparent; top: 1px; left:119px;”>… </div> <div class=”tab-tooltipContainer”> <div class =”tab-tooltipContent” wairole=”alert” style> <div class=”tab-ubertip tab-widget” style=”min-width: 368px;”>. <div class =”tab-ubertipContent”> <div class=”tab-ubertipTooltip”> <span style =”white-space:pre-wrap;tab-size:10;-moz-tab-size:10”> <div style=”text-align:left;”> <span style=””> Castle health Group </span> </div> <table style=”vertical-align:top;padding:0px” cellspacing=”0”> <tbody> <tr> <td style =”white-space:pre”> <span style=”font-family”>**97**</span> </td> <td > <span style=”font-” >**Minimum**</span> </td> I am able to fetch the tooltip values(97, Minimum) but how do i mouse hover on each values(16.9%, 13.1% etc) which are just different which each other with 'left' and 'top' attributes. Please anyone have idea how do i mousehover on each value on the basis of style attribute. Any help will be appreciated. Thanks.
Dynamic Element handling
In our application there is a task view page. For different tasks, xpath for the same button found change every time as below WIN_1_1000000014 WIN_2_1000000014 WIN_3_1000000014 WIN_4_1000000014 WIN_5_1000000014 I am providing html codes for two of such scenarios below . I am using following xpaths to find that button but not working for me. //div[#ardbn='Assignee Organization']//a[#class = 'btn btn3d menu']//img //img[#alt='Menu for Organization'] Help me guys <div id="WIN_1_1000000014" class="df arfid1000000014 ardbnAssigneeOrganization Char" arid="1000000014" artype="Char" ardbn="Assignee Organization" arlbox="0,4,78,17" ardcf="1" style="z-index:998;top:84px; left:5px; width:263px; height:21px;" arwindowid="1"> <label id="label1000000014" class="label f6" for="x-arid_WIN_1_1000000014" style="top: 4px; left: 0px; width: 78px; height: 17px;">Organization</label> <textarea id="arid_WIN_1_1000000014" class="text sr " cols="20" maxlen="60" style="top:0px; left:83px; width:154px; height:21px;" armenu="CTM:SGP:SupportOrganization3-Q" mstyle="2" arautoc="1" arautocmb="1" arautocak="0" arautoctt="400" rows="1" title="Service_Desk_First_Tier" wrap="off"></textarea> <a class="btn btn3d menu" href="javascript:" style="top:0px; left:242px; width:21px; height:21px;"> <img class="btnimg" src="../../../../resources/images/mt_sprites.gif" alt="Menu for Organization" title="" style="background-color: transparent;"> </a> <div id="WIN_3_1000000014" class="df arfid1000000014 ardbnAssigneeOrganization Char" arid="1000000014" artype="Char" ardbn="Assignee Organization" arlbox="0,4,78,17" ardcf="1" style="z-index:998;top:84px; left:5px; width:263px; height:21px;" arwindowid="3"> <label id="label1000000014" class="label f6" for="x-arid_WIN_3_1000000014" style="top: 4px; left: 0px; width: 78px; height: 17px;">Organization</label> <textarea id="arid_WIN_3_1000000014" class="text sr " cols="20" maxlen="60" style="top:0px; left:83px; width:154px; height:21px;" armenu="CTM:SGP:SupportOrganization3-Q" mstyle="2" arautoc="1" arautocmb="1" arautocak="0" arautoctt="400" rows="1" title="Service_Desk_Resolver" wrap="off"></textarea> <a class="btn btn3d menu" href="javascript:" style="top:0px; left:242px; width:21px; height:21px;"> <img class="btnimg" src="../../../../resources/images/mt_sprites.gif" alt="Menu for Organization" title="" style="background-color: transparent;"> </a>
you can write the xpath for the latest task as below: (//div[contains(#id,'WIN_')])[last()]//img[#alt='Menu for Organization']
Use below code for click or any other operations:
List<WebElement> elements = driver.findElements(By.xpath("//img[#alt='Menu for Organization']"));
for(int i=1;i<=elements.size();++i){
elements.get(i).click();
}
xpath working for 1st 3 elements is (//div[#ardbn='Assignee Organization']//a[#class = 'btn btn3d menu']//img)[last()] xpath working for rest elements is (//div[#ardbn='Assignee Organization']//a[#class = 'btn btn3d menu']//img)[position()<3]
How to show carousel dots in AMP?
In this carousel, how do I show dots? <amp-carousel layout=fixed-height height=400 type=slides autoplay controls loop arrows dots='.'> <amp-img src="img/slaid.jpg" layout=fixed-height height=400></amp-img> <amp-img src="img/slaid.jpg" layout=fixed-height height=400></amp-img> </amp-carousel>
There is an example in this codelab:
https://codelabs.developers.google.com/codelabs/advanced-interactivity-in-amp/index.html
The final code is here:
<amp-carousel type="slides" layout="fixed-height" height=250 id="carousel" on="slideChange:AMP.setState({selected: {slide: event.index}})">
<amp-img width=200 height=250 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=300 height=375 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=400 height=500 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
</amp-carousel>
<p class="dots">
<span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
<span [class]="selected.slide == 1 ? 'current' : ''"></span>
<span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>
https://github.com/googlecodelabs/advanced-interactivity-in-amp/blob/master/static/final.html
Navigational dots can be added by indicating it in the CSS Custom Properties, <style></style>. Here's a Github sample from Styling/Theming with AMP:
<head>
<style>
amp-carousel {
--arrow-color: green;
--dots: {
opacity: 50%;
color: blue;
}
}
</style>
</head>
<body>
<amp-carousel width=500 height=500>
<div>
<amp-img width=500 height=500 src="https://placekitten.com/g/500/500">
</amp-img>
</div>
<div>
<amp-img width=500 height=500 src="https://placekitten.com/g/500/500">
</amp-img>
</div>
</amp-carousel>
</body>
You can also check this SO thread for additonal reference.
unable to change search box attribute
I tried tweaking the CSS coding and no prevail. Things i want:
search box with border radius of 5px
enlarge the search icon with out getting it dispalced
both search box and search icon evenly placed around the div
HTML CODE:
<div class="search"
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_without_text_md.png" height="20" width="20"class="button">
</form>
</div>
</div>
CSS CODE:
.search{position:fixed;
height:25px;
width:194px;
top:189px;
left:14px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;}
Notice: Your class="search" div is not closed !!
Here is the code that should work and fullfill all the three conditions of yours
<div class="search">
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button">
</form>
</div>
Css Code:
.search{position:absolute;
height:28px;
width:190px;
top:140px;
left:100px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;
}
form#input{
display:inline-block;
}
.searchbox{
}
.search_text{
margin-top:4px;
margin-left:5px;
border-radius:5px;
text-align:center;
}
.button{
margin-top:5px;
margin-left:2px;
position:absolute;
height:20px;
width:20px;
}
.button:hover{
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
opacity: 3;
}
Working JSfiddle Demo - http://jsfiddle.net/vg8Mn/
Hope this helps :)