I'm not sure how to create separate galleries while using the data-trigger attribute. On the same page I want to be able to hit different buttons to different video and image galleries.
Here's the code...
<div id="porfolio-animation">
<div class="row">
<h1 class="portfolio-headers">animation</h1>
<img class="displayed">
<a data-trigger="preview01" href="javascript:;">
<img src="images/animation-btn.svg" width="100" height="100" alt="Animation portfolio">
</a>
<a href="https://vimeo.com/148636779" data-fancybox="preview01">
</a>
<a href="https://vimeo.com/227570106" data-fancybox="preview01">
</a>
<a href="https://vimeo.com/277458775" data-fancybox="preview01">
</a>
<div class="portfolio-illo">
<a data-trigger="preview02" href="javascript:;">
<img src="images/illo-btn.svg" width="100" height="100" alt="Illustration portfolio">
</a>
<a href="images/fastfood_coffee_illo_web.jpg" data-fancybox="preview02">
</a>
<h1 class="portfolio-headers">illustration</h1>
</div>
Related
Hi Guys I am trying to understand where my problem be (I assume that it has to do with the external API).
I am not sure how if the code so far seems ok, I will share what I have so far:
<!--Carousel-->
<!-- <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://pokeapi.co/api/v2/pokemon/2/" class="d-block w-100" alt="active_pokemon">
</div>
<div class="carousel-item">
<img src="https://pokeapi.co/api/v2/pokemon/3/" class="d-block w-100" alt="pokemon">
</div>
<div class="carousel-item">
<img src="https://pokeapi.co/api/v2/pokemon/1/" class="d-block w-100" alt="pokemon">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</button>
</div> -->
I am not sure if it is required to use the following code in JavaScript, although I thought it would trigger the response:
Carousel
var myCarousel = document.querySelector("#myCarousel");
var carousel = new bootstrap.Carousel(myCarousel);
Am I missing the data slide to = # within the images?
Additionally- the app I am creating should be like a data index which retrieves 150 items (with property and such).
I have two objects on the page with same html. Only one of the element's parent tag doesn't have same class name. When I try using not(contains()) it still shows both elements
below is the xpath I tried and still it is detecting both buttons and always clicking on the second button.
//div[contains(#class,"jss") and
not(contains(#class,"canvas-image-export"))]//button[contains(.,'Connected')]
below is the code for first button named Connected where I am interested to get
<div class="jss203">
<div class="MuiTabs-root jss244">
<div class="MuiTabs-scroller MuiTabs-fixed" style="overflow: hidden;">
<div class="MuiTabs-flexContainer" role="tablist">
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected" tabindex="0" type="button" role="tab" aria-selected="true"><span class="MuiTab-wrapper">Overview</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Data Sources</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Connected</span><span class="MuiTouchRipple-root"></span></button>
</div>
</div>
</div>
</div>
below is the code for second button named Connected which I should not click on
<div class="jss197 canvas-image-export">
<span class="" data-testid="componentContainer">
<div class="MuiTabs-root jss244">
<div class="MuiTabs-scroller MuiTabs-fixed" style="overflow: hidden;">
<div class="MuiTabs-flexContainer" role="tablist">
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected" tabindex="0" type="button" role="tab" aria-selected="true"><span class="MuiTab-wrapper">Overview</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Data Sources</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Connected</span><span class="MuiTouchRipple-root"></span></button>
</div>
</div>
</div>
</span>
</div>
TIA
Your problem here is that you are looking on the upper parent node <div class="jss197 canvas-image-export"> vs <div class="jss203"> while there is another element there <div class="MuiTabs-root jss244"> or <div class="MuiTabs-root jss244"> and it is also matching your XPath //div[contains(#class,"jss") and not(contains(#class,"canvas-image-export"))]//button[contains(.,'Connected')].
So, to make your XPath work you need to add one more detail: not contains MuiTabs-root class, as following:
//div[contains(#class,"jss") and not(contains(#class,"canvas-image-export")) and not(contains(#class,"MuiTabs-root"))]//button[contains(.,'Connected')]
To get only first div buttons, you can exclude the span tag for the second element. Using following xpath you can get that.
//div[starts-with(#class,'jss')][not(span[#data-testid='componentContainer'])]//button[contains(.,'Connected')]
Or
//div[starts-with(#class,'jss')][not(span)]//button[contains(.,'Connected')]
i'm trying to automate Salesforce Service Console, but i'm having some troubles because the multiples iframes.
One thing i really need is to click on the option "Close all primary tabs", but everything i have tried is not working.
The weird thing is that although the click is done nothing happens, if i try to do a click on chrome inspector console using javascript the tabs are closed, also if i click manually the tabs are closed, but if is made this trought selenium/katalon although the click is done nothing happens.
I have discovered that the popup html source is not under an iframe but the render of the popup overlays a iframe which comes from the external page tab.
If i trick the webpage modifying the css with the inspector moving the popup more up, were there is not iframe, then the click is closing the tabs.
Also if i delete the iframe from the html, the click is closing the tabs.
So i understand that this could be the problem, but although i have tried switch to iframe still not working.
i'am using katalon to automate but also happens with selenium .
Can you help me?
code of the popup list
<div id="ext-comp-1031"
class="x-menu x-menu-floating x-layer"
style="position: absolute; z-index: 15000; visibility: visible; left: 1086px; top: 124px;">
<a class="x-menu-focus"
href="#"
onclick="return false;"
tabindex="-1"
id="ext-gen173"/>
<ul class="x-menu-list"
id="ext-gen174"
style="height: 158px;">
<li id="x-menu-el-ext-comp-1106"
class="x-menu-list-item">
<a id="ext-comp-1106"
class="x-menu-item tab-scroller-menu-item "
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon hidden"
id="ext-gen526">
<span class="x-menu-item-text"
id="ext-gen527">
<div class="tabTitle">
<span class="tabText">External Page</span>
</div>
<img alt=""
src="/s.gif"
class="refresh-icon"
id="ext-gen538">
<div class="x-menu-item-icon burl-link third-position"
id="ext-gen539"/>
<img alt=""
src="/s.gif"
class="bookmark-icon bookmarkNoPin"
id="ext-gen540"></span>
</a>
</li>
<li id="x-menu-el-ext-comp-1107"
class="x-menu-list-item">
<a id="ext-comp-1107"
class="x-menu-item tab-scroller-menu-item x-tab-tabmenu-selected "
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon hidden"
id="ext-gen528">
<span class="x-menu-item-text"
id="ext-gen529">
<div class="tabTitle">
<span class="tabText">External Page</span>
</div>
<img alt=""
src="/s.gif"
class="refresh-icon"
id="ext-gen541">
<div class="x-menu-item-icon burl-link third-position"
id="ext-gen542"/>
<img alt=""
src="/s.gif"
class="bookmark-icon bookmarkNoPin"
id="ext-gen543"></span>
</a>
</li>
<li id="x-menu-el-ext-comp-1108"
class="x-menu-list-item">
<a id="ext-comp-1108"
class="x-menu-item x-tab-tabmenu-menuItem"
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon "
id="ext-gen530">
<span class="x-menu-item-text"
id="ext-gen531">Close all primary tabs</span>
</a>
</li>
<li id="x-menu-el-ext-comp-1109"
class="x-menu-list-item">
<a id="ext-comp-1109"
class="x-menu-item x-tab-tabmenu-menuItem"
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon "
id="ext-gen532">
<span class="x-menu-item-text"
id="ext-gen533">Refresh all primary tabs</span>
</a>
</li>
<li id="x-menu-el-ext-comp-1110"
class="x-menu-list-item">
<a id="ext-comp-1110"
class="x-menu-item x-tab-tabmenu-menuItem"
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon "
id="ext-gen534">
<span class="x-menu-item-text"
id="ext-gen535">Reopen last-closed tab</span>
</a>
</li>
<li id="x-menu-el-ext-comp-1111"
class="x-menu-list-item">
<a id="ext-comp-1111"
class="x-menu-item x-tab-tabmenu-menuItem"
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon "
id="ext-gen536">
<span class="x-menu-item-text"
id="ext-gen537">Show keyboard shortcuts (SHIFT+K)</span>
</a>
</li>
</ul>
</div>
xpath i'am selecting
//*/text()[normalize-space(.)='Close all primary tabs']/parent::*
I'm trying to get a Bootstrap 3 navbar collapse properly but still have two open issues:
the margins not equal:
when the navbar breaks, the icons are not left aligned with the text:
I know how I could add style fixes until I get this right, but I how do I solve this properly?
https://jsfiddle.net/edwardtanguay/v83aj4cn/3
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-collapse">
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-minus"></span>
</a>
<p class="navbar-text">Company Name</p>
<p class="navbar-text">CUSTOMER PORTAL</p>
<p class="navbar-text navbar-right">Contact Name</p>
<p class="navbar-text navbar-right">2016-04-14</p>
</div>
</div>
</div>
</nav>
</div>
There you go friend!
SOLUTION JDSFILE
Regards!
I am asking that i have added carousel-indicators by using Bootstrap3.and my carousel-indicator looking like rectangle shape.
I have wrote the code as i given below.
<div class="item active">
<img src="image/1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/2.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/3.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/4.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/5.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/6.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/7.jpg" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--closing carousel-->
And I Wanted my Carousel-indicator look like smaller dot.
you can draw SVG figures to use for your carousel controls, you can add an event listener to literally anything to control your carousel.
<circle cx="25" cy="75" r="20"/> Play around with the size of it, you can assign it color or other attributes as you would any other HTML element.