<header id="top-header">
<div class="row-fluid">
<div id="school-info" class="pull-left">
<span id="school-name" class="lead">THPT Hùng Vương</span>
<small> Học kỳ I năm 2013-2014</small>
</div>
<div id="user-info" class="pull-right">
<a href="/app/truong_hoc" title="Sửa thông tin người sử dụng, đổi mật khẩu, đổi tên tài khoản.">
<i class="icon-user"></i>
<span class="hidden-phone">
<small class="hidden-phone hidden-tablet">(truong_hoc)</small>
</span>
</a>
<a id="logout" href="/logout/" title="Thoát ra, kết thúc phiên làm việc. ">
<i class="icon-signout"></i>
<small class="hidden-phone hidden-tablet">Đăng xuất</small>
</a>
</div>
</div>
</header>
Logout element has an icon and a text. When I use Click Element icon use
xpath: "Click Element xpath=//a[#id='logout']/i"
it works, but when I use Click Element text use
xpath: "Click Element xpath=//a[#id='logout']/small"
it doesn't work. Help!
(Sorry because that website doesn't support English and I don't have enough reputation to post images)
Related
Here is the html for that cross button on a filter block.
I am using webdriver and trying to click the div with class="fa fa-sm fa-remove o_facet_remove"
<div class="o_searchview">
<span class="o_searchview_more fa fa-search-plus" title="Advanced Search..."></span>
<ul class="dropdown-menu o_searchview_autocomplete" role="menu" style="display: none;"></ul>
<div class="o_searchview_facet" tabindex="0">
<span class="fa fa-filter o_searchview_facet_label"></span>
<div class="o_facet_values">
<span>Me</span>
</div>
<div class="fa fa-sm fa-remove o_facet_remove"></div>
</div>
<input class="o_searchview_input" placeholder="Search..." type="text">
</div>
i got this code from http://www.lightningdesignsystem.com/components/carousel/#About-Carousel. it was supposed to do the auto play function but it is not working, even the round buttons are also not working. am i missing something?
i also know about the LWC carousel, but i need to customize some of the things which was not possible on that, so was trying this one.
code
<template>
<div class="slds-carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#pause"></use>
</svg>
<span class="slds-assistive-text">Stop auto-play</span>
</button>
</span>
<div class="slds-carousel__panels" style="transform:translateX(-0%)">
<div id="content-id-01" class="slds-carousel__panel" role="tabpanel" aria-hidden="false" aria-labelledby="indicator-id-01">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="0">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-01.jpg" alt="Visit App Exchange" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Visit App Exchange</h2>
<p>Extend Salesforce with the #1 business marketplace.</p>
</div>
</a>
</div>
<div id="content-id-02" class="slds-carousel__panel" role="tabpanel" aria-hidden="true" aria-labelledby="indicator-id-02">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="-1">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-02.jpg" alt="Click to Customize" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Click to Customize</h2>
<p>Use the Object Manager to add fields, build layouts, and more.</p>
</div>
</a>
</div>
<div id="content-id-03" class="slds-carousel__panel" role="tabpanel" aria-hidden="true" aria-labelledby="indicator-id-03">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="-1">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-03.jpg" alt="Download SalesforceA" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Download SalesforceA</h2>
<p>Get the mobile app that's just for Salesforce admins.</p>
</div>
</a>
</div>
</div>
<ul class="slds-carousel__indicators" role="tablist">
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-01" class="slds-carousel__indicator-action slds-is-active" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="content-id-01" title="Visit App Exchange tab">
<span class="slds-assistive-text">Visit App Exchange tab</span>
</a>
</li>
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-02" class="slds-carousel__indicator-action" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="content-id-02" title="Click to Customize tab">
<span class="slds-assistive-text">Click to Customize tab</span>
</a>
</li>
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-03" class="slds-carousel__indicator-action" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="content-id-03" title="Download SalesforceA tab">
<span class="slds-assistive-text">Download SalesforceA tab</span>
</a>
</li>
</ul>
</div>
</div>
</template>
Code is only for understanding purpose. This does not include javascript. You have to wire your code to JS with following aspects:
Write onclick function on anchored tag of "round button" as you call them in question.
This JS button should call a method which does following things :
mark all tags with class "slds-carousel__indicator-action" as inactive by removing any "slds-is-active" class present.
find which element is clicked and add "slds-is-active" in class attribute.
make area selected attribute to true for only the element clicked.
make tab index of actual panel should be 0 for tab to be shown. This can be matched by indicator Id. and for all others it should -1.
assign transform style dynamically using formula : -100*index
Here is sample:
<template>
<div style="">
<div class="slds-carousel" id="carousel-example-generic" data-ride="carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/lightning-ui/dist/icons/utility-sprite/svg/symbols.svg#pause"></use>
</svg>
<span class="slds-assistive-text">Stop auto-play</span>
</button>
</span>
<div class="slds-carousel__panels" style={transformstyle}>
<template for:each={tableDataToDisplay} for:item='dataIndex'>
<div id={dataIndex.contentid}
key={dataIndex.index}
class="slds-carousel__panel"
role="tabpanel"
aria-hidden={dataIndex.areahidden}
aria-labelledby={dataIndex.indicatorid}>
<div
class="slds-carousel__panel-action slds-text-link_reset"
tabindex={dataIndex.tabindex}>
<div >
<!-- Any LWC which you want to show in screen -->
</div>
</div>
</div>
</template>
</div>
<ul class="slds-carousel__indicators" role="tablist">
<template for:each={tableDataToDisplay} for:item='dataIndex'>
<li data-target="#carousel-example-generic"
key={dataIndex.index}
data-slide-to={dataIndex.dataslideto}
class="slds-carousel__indicator"
role="presentation">
<div id={dataIndex.indicatorid}
class={dataIndex.liclass}
data-index={dataIndex.index}
data-ariacontrols={dataIndex.contentid}
role="tab"
aria-selected={dataIndex.areaselected}
aria-controls={dataIndex.contentid}
onclick={handleclick}
title="Visit App Exchange tab">
</div>
</li>
</template>
</ul>
</div>
</div>
</div>
</template>
in JS have this function :
selectelement(index){
this.template.querySelectorAll(".slds-carousel__indicator-action").forEach(ele=>{
ele.classList.add('slds-is-active');
ele.classList.remove('slds-is-active');
});
this.template.querySelector(`[data-index="${index}"]`).classList.add('slds-is-active');
this.dataDisplay.forEach(ele=>{
ele.areaselected = false;
ele.tabindex = -1;
ele.areahidden = true;
if(ele.index === index){
ele.areaselected = true;
ele.tabindex = 0;
ele.areahidden = false;
}
});
this.transformstyle = `transform:translateX(-${
index * 100
}%);`
this.dataDisplay = [...this.dataDisplay];
}
I have a ng-show inside ng repeat. Whenever i click the comment button it shows the div tag contains comment box which shows previous comments of that list.
The actual problem is when i click one comment button, it shows comment box with contents but when i click the another comment button, comment box with contents will be shown but it also changes the contents of previous comment box also (i mean showallcomments which is over-writing every time when i click on comment button).
Note: In more simple words the problem is- On clicking comment button , the previously opened comment box by clicking comment button doesnt close
Note: Comment box is not a model which doesn't popup
So my solution is whenever i click the second comment button, it should hide all previous comment box.(I need to hide the all previously opened comment box when i click comment button each time)
How can i do this? can anyone help me out
I think u may understand the question if you look my code.
My code is,
<div class="col-lg-12" ng-repeat="dat in details | orderBy : sortColumn : reverseSort | filter : { product_name : textname} as results">
<ul>
<li><b>Product:</b><span> {{dat.product_name}}</span></li>
<li><b>Product Manager:</b><span> {{dat.first_name}} {{dat.last_name}}</span></li>
<li><b>Status:</b><span> {{dat.status}}</span></li>
<li><b>Description:</b><span> {{dat.description}}</span></li>
</ul>
<!--Comment Button -->
<button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="comment=true;$parent.showcomments(dat.id)"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>
<!--Comment Box -->
<div ng-show="comment">
<div class="detailBox col-lg-12">
<div class="titleBox">
<label>Comment Box</label>
<button type="button" class="close" aria-hidden="true" ng-click="comment=false">×</button>
</div>
<div class="actionBox">
<ul class="commentList">
<li ng-repeat="sh in showallcomments">
<div class="commenterImage">
<img src="" />
</div>
<div class="commentText">
<p class="">{{sh.comment}}</p> <span class="date sub-text">{{sh.date_created}}</span>
</div>
</li>
</ul>
<div class="input-group ">
<input type="text" id="commentarea" name="commentarea" class="form-control" placeholder="Your Comments" aria-describedby="basic-addon2" ng-model="takecomment">
<span class="input-group-addon" id="basic-addon2" ng-click="takecomment=mycomment(dat.id,takecomment)"><span class="glyphicon glyphicon-send"></span></span>
</div>
</div>
</div>
</div>
</div>
Can you try:
<button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="$parent.commentId=dat.id;$parent.showcomments(dat.id)"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>
and
<div ng-show="dat.id===$parent.commentId">
I think you are showing the content through modal "showallcomments". which is over-writing every time when you click on comment button.
I mean to say you are binding same variable in all comment boxes.
<div class="col-lg-12" ng-repeat="dat in details | orderBy : sortColumn : reverseSort | filter : { product_name : textname} as results">
<ul>
<li><b>Product:</b><span> {{dat.product_name}}</span></li>
<li><b>Product Manager:</b><span> {{dat.first_name}} {{dat.last_name}}</span></li>
<li><b>Status:</b><span> {{dat.status}}</span></li>
<li><b>Description:</b><span> {{dat.description}}</span></li>
</ul>
<!--Comment Button -->
<button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="showCommentBox($index);$parent.showcomments(dat.id)">
<span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>
<!--Comment Box -->
<div ng-show="dat.showComment">
<div class="detailBox col-lg-12">
<div class="titleBox">
<label>Comment Box</label>
<button type="button" class="close" aria-hidden="true" ng-click="comment=false">×</button>
</div>
<div class="actionBox">
<ul class="commentList">
<li ng-repeat="sh in showallcomments">
<div class="commenterImage">
<img src="" />
</div>
<div class="commentText">
<p class="">{{sh.comment}}</p> <span class="date sub-text">{{sh.date_created}}</span>
</div>
</li>
</ul>
<div class="input-group ">
<input type="text" id="commentarea" name="commentarea" class="form-control" placeholder="Your Comments" aria-describedby="basic-addon2" ng-model="takecomment">
<span class="input-group-addon" id="basic-addon2" ng-click="takecomment=mycomment(dat.id,takecomment)"><span class="glyphicon glyphicon-send"></span></span>
</div>
</div>
</div>
</div>
</div>
showCommentBox = function(index){
angular.forEach('details', function(value, key){
if(key == index){
value.showComment = true;
}else{
value.showComment = false;
}
})
}
I need to set a default image from my local file if profile pic is not set by user and how to set hover to it if the user moves the mouse close to the profile pic field to set the image.
My HTML :
<div class="col-lg-2 vheight1">
<h4>Profile Picture</h4>
<div class="fileinput fileinput-new" onclick='$("#my_profile_pic").click();'>
<div class="fileinput-preview thumbnail" data-provides="fileinput" data-trigger="fileinput" id="profile_pic">
<img ng-if="source" class="thumb" ng-src="{{source}}"/>
</div>
<!-- <div class="hidden-sm hidden-md hidden-lg hidden-xs">
<span>
<span class="fileinput-new" ng-show="!hasFile()">Select image</span>
<span class="fileinput-new" ng-show="hasFile()">Change</span>
</span>
<a href="#" class="btn btn-danger fileinput-new glyphicon glyphicon-trash" data-dismiss="fileinput" ng-show="hasFile()" ng-click="removefile( json, file )" ></a>
</div> -->
</div>
</div>
<input type="file" class="hidden hidden-sm hidden-md hidden-lg hidden-xs" id='my_profile_pic' file-model="photo">
Can anyone please help me.
Replace:
<img ng-if="source" class="thumb" ng-src="{{source}}"/>
with:
<img class="thumb" ng-src="{{source ? source : 'pathtodefault.png'}}"/>
To complete Piyush's answer, you can also do:
<img class="thumb" ng-show="source" ng-src="{{source}}"/>
<img class="thumb" ng-show="!source" src="defaultSrc"/>
I'm building an accordion and came across bootstrap's "Collapse".
collapse="isCollapsed"
When I load the page, the "Shared connections" panel is open by default, I'm wanting to have all panels "Shared connections" & "Other connections" closed by default until the user interacts with them.
Through my research so far, I haven't seen this done.
Here is my code:
<div class="col-xs-12">
<div class="connections-wrap" ng-click="isCollapsed = !isCollapsed">
<span class="connection-amount">3</span>
<span class="connection-type">Shared connections</span>
<i class="vf-i"></i>
</div>
<ul class="connections-list" collapse="isCollapsed">
<li>
<span class="connection-device">Eddie Benson Tablet</span>
<span class="connection-number">021 019 17338</span>
</li>
<li>
<span class="connection-device">Eddie Work Phone</span>
<span class="connection-number">021 019 17343</span>
</li>
<li>
<span class="connection-device">Eddie Work Android</span>
<span class="connection-number">021 019 17339</span>
</li>
</ul>
<div class="connections-wrap">
<span class="connection-amount">2</span>
<span class="connection-type">Other connections</span>
<i class="vf-i"></i>
</div>
</div>
Here is the solution - required ng-init="true" as collapse isn't being initialised on load.
ng-init="isCollapsed = true"