Slider and Angular routing issue - angularjs

I'm using slider in my web, it works when i used it in a simple page without Angular, but when i using Angular routing it does not work!! it makes me confuse, what is the problem?
this is the slider:
<div id="leo-slideshow" class="clearfix">
<div class="banner" style="padding-right: 20px !important;height:375px;padding: 0px; margin: 0px; overflow: visible;">
<div class="columns-container">
<div id="columns" class="container">
<div id="slider_row" class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12 col-md-12">
<!-- Module HomeSlider -->
<div id="homepage-slider" class="col-xs-8 col-sm-8 col-md-8">
<div class="bx-wrapper" style="max-width: 779px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 448px;">
<ul id="homeslider" style="max-height: 448px; width: 515%; position: relative; left: -2336.98px;">
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-2">
<img src="~/Content/Images/Slider/sample-2.jpg" width="779" height="448" alt="sample-2">
</a>
</li>
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-3">
<img src="~/Content/Images/Slider/sample-3.jpg" width="779" height="448" alt="sample-3">
</a>
</li>
<li class="homeslider-container bx-clone" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-1">
<img src="~/Content/Images/Slider/sample-1.jpg" width="779" height="448" alt="sample-1">
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /Module HomeSlider -->
<div id="htmlcontent_top " class="animation_group_165 animated fadeInUp ">
<ul class="htmlcontent-home clearfix row">
<li class="htmlcontent-item-1 col-xs-4 col-sm-4 col-md-4 pull-left ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img6.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
<li class="htmlcontent-item-2 col-xs-4 col-sm-4 col-md-4 ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img7.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
and the script:
$(document).ready(function(){
if (typeof(homeslider_speed) == 'undefined')
homeslider_speed = 500;
if (typeof(homeslider_pause) == 'undefined')
homeslider_pause = 3000;
if (typeof(homeslider_loop) == 'undefined')
homeslider_loop = true;
if (typeof(homeslider_width) == 'undefined')
homeslider_width = 779;
$('.homeslider-description').click(function () {
window.location.href = $(this).prev('a').prop('href');
});
if ($('#htmlcontent_top').length > 0)
$('#homepage-slider').addClass('col-xs-8');
else
$('#homepage-slider').addClass('col-xs-12');
if (!!$.prototype.bxSlider)
$('#homeslider').bxSlider({
useCSS: false,
maxSlides: 1,
slideWidth: homeslider_width,
infiniteLoop: homeslider_loop,
hideControlOnEnd: true,
pager: false,
autoHover: true,
auto: homeslider_loop,
speed: parseInt(homeslider_speed),
pause: homeslider_pause,
controls: true
});
});
Note: i am using bxslider.

Related

Resize map marker in NG-Map (AngularJS)?

I am trying to resize my map icon with scaledSize however the icon does not change, here is my code:
This works:
<marker icon="{resource.marker_circle}" class="marker-icon" id="{resource.id}" position="{resource.address}" title="{resource.name}" id="resource_clicked" value="{resource.id}"
on-mouseover="showInfoWindow(event, '{resource.id}')">
But when I try to resize the icons, it does not work with scaledSize:
<div class="map-container">
<div style="margin: 0 auto; overflow:hidden; background: white;">
<div style=" width: 100%; margin:center; height: 257px; border: none; border-radius: 25px;" map-lazy-load="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
<ng-map ng-map-custom style="width: 100%;height: 100%;border: none; border-radius: 25px;" center="Santa Ana, CA" zoom="11">
{!resources.filter('category_ref', _equals(my.category)).each(per_page: 30, page:response._page_44_resources_repeatingsection1) do |resource|}
<marker icon="{url: resource.marker_circle, scaledSize:[32,40], origin: [0,0], anchor: [16,40]}" class="marker-icon" id="{resource.id}" position="{resource.address}" id="resource_clicked" value="{resource.id}"
on-mouseover="showInfoWindow(event, '{resource.id}')"></marker>
<info-window id="{resource.id}" max-width="300" style="display: none;">
<div ng-non-bindable="">
<div id="siteNotice"></div>
<a href="" response-click="go">
<h3 id="firstHeading" class="firstHeading">Location - # of Searches</h3>
</a>
<div id="bodyContent">
<p>
{resource.city}
</p>
</div>
</div>
</info-window>
{!end}
</ng-map>
</div>
</div>
</div>

Why is this not responsive?

I coded this layout but it's not responsive. The image doesn't seem to respond as it needs to. Can someone help me with this.
I wanted the code to respond to image where it is able to re-size itself as the browser size is adjusted. However i can only see that the images sort of align as I re-size the browser but it fails to change the sizes. I am not sure what is going on in here. Seems like i have all the code placed in but still doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
.responsive {
width: 100%;
height: auto;
}
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 2px;
margin-bottom: -0.5px;
color: #ffffff;
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 menu">
<img src="https://via.placeholder.com/300X150" />
</div>
<div class="col-8">
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
</div>
</div>
<div class="col-3">
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
</ul>
</div>
</body>
</html>
Here you go:
https://codepen.io/panchroma/pen/EeaoyP
There were two simple syntax errors in your CSS, I added a closing curly bracket at line 20 and commented out line 28 in your HTML.
What was happening without these corrections is that there was no max-width for your images and they weren't scaling at narrow viewports.
Good luck!
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
} /* added closing bracket */
.responsive {
width: 100%;
height: auto;
}
/* } commented out this bracket */
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 2px;
margin-bottom: -0.5px;
color: #ffffff;
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 menu">
<img src="https://via.placeholder.com/300X150" />
</div>
<div class="col-8">
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
</div>
</div>
<div class="col-3">
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
</ul>
</div>
</body>
</html>

Cypress with the ContextMenu not work - React Contextify

i'm using a library called React Contexty, and it has a menu that is inside of the Contextify and is called of ContextMenu, when i do request for it to click in the Item of the ContextMenu, it click but the action not happens.
Cypress:
cy.get("img[data-test=img--menu-candidate]")
.click({
force: true
})
cy.get(".testinhoImg").click({
force: true
})
My MenuContext:
<ContextMenu id={`menu-${this.props.candidate.id}`} animation={animation.fade} theme={theme.light}>
<Item>
<div style={{ width: '50px', marginLeft: '0.5em', marginRight: '0.5em' }}>
<img src={ViewSrc} alt="View" />
</div>
<span className="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span>
</Item>
Somebody know why? And help-me please?
HTML:
<div class="react-contexify react-contexify__theme--light react-contexify__will-enter--fade" style="left: 447px; top: 308px; opacity: 1;">
<div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/view.2844f64a.svg" alt="View"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span></div>
</div>
<div class="react-contexify__separator"></div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/move.f7f8dc44.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Move to folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; padding-right: 1em;"><img src="/static/media/email.330dcb30.svg" alt="Send Email" style="padding-right: 1em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Send Email</span></div>
</div>
<div class="react-contexify__item react-contexify__item--disabled" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/remove-folder.d620c9fb.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Remove from folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/delete.e899d653.svg" alt="Delete" style="padding-right: 1.2em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Delete</span></div>
</div>
</div>
</div>

Angular UI Bootstrap multiple carousel one by one

I am using AngularJS with ui bootstrap module.
1) What I need is my carousel to change its items one by one. I found a code (by other person) but it's only in jQuery.
Codepen code in jQuery
html:
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
less CSS:
.multi-item-carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-3%;
}
&.right{
left:3%;
}
}
.next{
left: 3%;
}
.prev{
left: -3%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
jQuery
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
2) So I want multiple items change one bye one. How to do this in angularJS? Any ideas or directions?

locators in Selenium Webdriver

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 1002; outline: 0px none; position: absolute; height: auto; width: 500px; top: 156px; left: 706px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-comment-dialog">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div id="comment-dialog" class="ui-dialog-content ui-widget-content" style="background-color: white; width: auto; min-height: 0px; height: 208.267px;">
<div class="ui-resizable-handle ui-resizable-n"></div>
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002;"></div>
<div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003;"></div>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004;"></div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Edit Approved Data</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Cancel</span>
i want to locate the "Edit Approved Data" button but gets an error always saying element not found.
//div[#class='ui-dialog-buttonset']/button
//div[#class='ui-dialog-buttonset']/button[1]
//div[#class='ui-dialog-buttonset']/button/span
//span[text()='Edit Approved Data']
//\*[text()='Edit Approved Data']
The way to use:
driver.findElement(By.xpath(xpath)).click();
Every presented xpath should work

Resources