protractor by.repeater how to find sibling elements - protractor

I want to get the text for all the elements where the icon has error (don't want the one with warning) with class="dropdown-item-icon ctp-img-notification-error"
How can I get that?
In this case I only want the text "unable to load Data", since that is an error
<li ng-repeat="option in options" class="dropdown-item ng-scope">
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-error" data-ng-class="options.iconCls"></div>
<div class="ng-binding">unable to load Data</div>
</div>
</a>
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-warning" data-ng-class="options.iconCls"></div>
<div class="ng-binding">using cache Data</div>
</div>
</a>
</li>

My first thought looks like this:
var errorMessages = [];
element.all(by.css('.dropdown-item-icon.ctp-img-notification-error .ng-binding')).then(function(items) {
items.forEach(function(item) {
item.getText().then(function(message) {
errorMessages.push(message);
});
});
});

Related

Tumblr Redirects to 404 Page

We have had a Tumblr page set up for a year with no issues until this past month.
We have a page redirect in our navigation bar. The redirect goes to our main website, WordBrewery.com. The link listed in the redirect is the main URL - http://www.wordbrewery.com.
Now it is redirecting to our site's 404 page and this is added to the end of the URL:
#_=_
I have tried using this script, but it has done nothing:
<script>
if (window.location.hash == "#_=_")
{
window.location.hash = "";
}
</script>
I have also tried replacing the main URL with a shortened Google version but this has not worked either.
Any help would be greatly appreciated.
EDIT:
The hard code that I am able to edit appears like this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
{block:IfShowAvatar}
<img src="{PortraitURL-128}" class="{AvatarShape}" alt="{Title}" />
{/block:IfShowAvatar}
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{block:IfShowTitle}<li class="active">{Title}</li>{/block:IfShowTitle}
{block:IfShowArchiveLink}
<li>{lang:Archive}</li>
{/block:IfShowArchiveLink}
{block:IfShowRandomLink}
<li>{lang:Random}</li>
{/block:IfShowRandomLink}
{block:HasPages}
{block:Pages}<li>{Label}</li>{/block:Pages}
{/block:HasPages}
{block:AskEnabled}
<li>{AskLabel}</li>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<li>{SubmitLabel}</li>
{/block:SubmissionsEnabled}
{block:IfTagMenuList}
<li class="dropdown">
<a href="#" id="tag-menu" data-toggle="dropdown" aria-expanded="true">
{text:Tag Menu Title} <span class="caret"></span>
</a>
<script>
var list = '{text:Tag Menu List}';
list = list.split(',');
var html = '<ul class="dropdown-menu" role="menu" aria-labelledby="tag-menu">';
for(var i=0; i<list.length; i++) {
html += '<li role="presentation"><a role="menuitem" tabindex="-1" href="/tagged/' + list[i] + '">#' + list[i] + '</a></li>';
}
html += '</ul>';
document.write(html);
</script>
</li>
{/block:IfTagMenuList}
{block:IfShowSearch}
<li><a class="icon-search search-overlay-show"></a></li>
{/block:IfShowSearch}
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I am unsure of how to get rid of the string Tumblr adds to redirected URLs but alternatively you can hard code the link to avoid utilising Tumblr's redirect.
Beneath {block:HasPages} add <li>WordBrewery.com</li>

Fancybox is repeating pictures

i have created a gallery using fancy-box but i have a problem that when i open all items (all projects) it works properly as each item will show its own pictures (only three picture) as shown in this picture
(have only three thumbnails) but when i open a specific category (villas category) pictures for all villas will shown as this picture
(6 thumbnails included for two projects)
and if i press all project again i will have the same problem and the picture for all items will be shown (9 thumbnails for 3 items)
so i think the problem is with the java script and here below is the html code and java script code
sorry i am new to programming and i need your help, i appreciate your efforts
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
jQuery(function ($) {
// fancybox
$(".fancybox").fancybox({
modal: false, // enable regular nav and close buttons
// add buttons helper (requires buttons helper js and css files)
padding:0,
helpers: {
thumbs : {
width : 50,
height : 50,
},
}
});
// filter selector
$(".filter").on("click", function () {
var $this = $(this);
// if we click the active tab, do nothing
if ( !$this.hasClass("active") ) {
$(".filter").removeClass("active");
$this.addClass("active"); // set the active tab
// get the data-rel value from selected tab and set as filter
var $filter = $this.data("rel");
// if we select view all, return to initial settings and show all
$filter == 'all' ?
$(".fancybox")
.attr("data-fancybox-group", "gallery")
.not(":visible")
.fadeIn()
: // otherwise
$(".fancybox")
.fadeOut(0)
.filter(function () {
// set data-filter value as the data-rel value of selected tab
return $(this).data("filter") == $filter;
})
// set data-fancybox-group and show filtered elements
.attr("data-fancybox-group", $filter)
.fadeIn(1000);
} // if
}); // on
}); // ready
</script>
<div id="galleryTab">
<a data-rel="all" href="javascript:;" class="filter active">All Projects</a>
<a data-rel="vil" href="javascript:;" class="filter">Villas</a>
<a data-rel="res" href="javascript:;" class="filter">Residential and Commercial</a>
<a data-rel="mix" href="javascript:;" class="filter">Mixed Used</a>
</div>
<div class="row"> </div>
<div class="col">
<div class="galleryWrap">
<ul id="projects">
<li id="liproject" data-tags="Villas"><a title="Mr.Omran Villa (G+1+R)" class="fancybox villa" data-filter="vil" rel="villa1" href="images/Projects/1.jpg"><img src="images/Projects/1s.jpg" alt="omran" width="240" height="160" class="img-responsive" id="img1"></a></li>
<div class="hidden"> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/1h.jpg"><img src="images/Projects/1h.jpg" alt="omran"></a> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/12h.jpg"><img src="images/Projects/12h.jpg" alt="omran"></a> </div>
<div> <li data-tags="Villas"><a title="Mr.saif Villa (G+1+R)" data-tags="Villas" class="fancybox" data-filter="vil" rel="villa2" href="images/Projects/2.jpg"><img src="images/Projects/2s.jpg" alt="saif" class="img-responsive" id="img2"></a></li>
<div class="hidden"> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/21h.jpg"><img src="images/Projects/21h.jpg" alt="saif"></a> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/22h.jpg"><img src="images/Projects/22h.jpg" alt="saif"></a> </div>
<div id="res"> <li data-tags="bldg"><a title="Ajman Tower (G+8Podium+26 Typical+R)" class="fancybox" data-tags="Residential and Commercial" data-filter="res" rel="bldg1" href="images/Projects/4.jpg"><img src="images/Projects/4s.jpg" alt="ajman" width="240" height="160" class="img-responsive" id="img3" border="0"></a></li>
<div class="hidden"> <a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/41h.jpg"><img src="images/Projects/41h.jpg" alt="ajman"></a> <a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/42h.jpg"><img src="images/Projects/42h.jpg" alt="ajman"></a> </div>
</div>
</div>
</ul>
</div>
</div>
<footer>©Copyright Qyas Engineering Consultancy All Rights Reserved. </footer>
</div>
I would suggest you to use Isotope + fancybox combination, see this example:
http://codepen.io/fancyapps/pen/EZKYPN
Because then your code could be simplified to something like this:
// Custom click event - open fancyBox manually
$('.fancybox').on('click', function() {
var visibleLinks = $('.fancybox:visible');
$.fancybox.open( visibleLinks, {}, visibleLinks.index( this ) );
return false;
});

All pictures in fancybox are showing

i have followed instructions for how to filter gallery according to categories and it worked but the problem that while i am scrolling it will scroll the whole pictures at the same category as shown in this picturesChecks the thumbnails below the picture before it was working fine but when i filter the gallery that was the result and i don't know where is the error exactly.
thanks for everyone helped me from the beginning specially #JFK
thanks for people here on stack overflow
jQuery(function ($) {
// fancybox
$(".fancybox").fancybox({
modal: false, // enable regular nav and close buttons
// add buttons helper (requires buttons helper js and css files)
padding:0,
helpers: {
thumbs : {
width : 50,
height : 50,
},
}
});
// filter selector
$(".filter").on("click", function () {
var $this = $(this);
// if we click the active tab, do nothing
if ( !$this.hasClass("active") ) {
$(".filter").removeClass("active");
$this.addClass("active"); // set the active tab
// get the data-rel value from selected tab and set as filter
var $filter = $this.data("rel");
// if we select view all, return to initial settings and show all
$filter == 'all' ?
$(".fancybox")
.attr("data-fancybox-group", "gallery")
.not(":visible")
.fadeIn()
: // otherwise
$(".fancybox")
.fadeOut(0)
.filter(function () {
// set data-filter value as the data-rel value of selected tab
return $(this).data("filter") == $filter;
})
// set data-fancybox-group and show filtered elements
.attr("data-fancybox-group", $filter)
.fadeIn(1000);
} // if
}); // on
}); // ready
<div id="galleryTab">
<a data-rel="all" href="javascript:;" class="filter active">All Projects</a>
<a data-rel="vil" href="javascript:;" class="filter">Villas</a>
<a data-rel="res" href="javascript:;" class="filter">Residential and Commercial</a>
<a data-rel="mix" href="javascript:;" class="filter">Mixed Used</a>
</div>
<div class="row"> </div>
<div class="col">
<div class="galleryWrap">
<ul id="projects">
<li id="liproject" data-tags="Villas"><a title="Mr.Omran Villa (G+1+R)" class="fancybox villa" data-fancybox-group="gallery" data-filter="vil" rel="villa1" href="images/Projects/1.jpg"><img src="images/Projects/1s.jpg" alt="omran" width="240" height="160" class="img-responsive"></a></li>
<div class="hidden"> <a class="fancybox" data-tags="Villas" data-fancybox-group="gallery" data-filter="vil" rel="villa1" href="images/Projects/1h.jpg"><img src="images/Projects/1h.jpg" alt="omran"></a> <a class="fancybox" data-tags="Villas" data-fancybox-group="gallery" data-filter="vil" rel="villa1" href="images/Projects/12h.jpg"><img src="images/Projects/12h.jpg" alt="omran"></a> </div>
<div> <li data-tags="Villas"><a title="Mr.saif Villa (G+1+R)" data-tags="Villas" class="fancybox" data-fancybox-group="gallery" data-filter="vil" rel="villa2" href="images/Projects/2.jpg"><img src="images/Projects/2s.jpg" alt="saif" class="img-responsive"></a></li>
<div class="hidden"> <a class="fancybox" data-tags="Villas" data-fancybox-group="gallery" data-filter="vil" rel="villa2" href="images/Projects/21h.jpg"><img src="images/Projects/21h.jpg" alt="saif"></a> <a class="fancybox" data-tags="Villas" data-fancybox-group="gallery" data-filter="vil" rel="villa2" href="images/Projects/22h.jpg"><img src="images/Projects/22h.jpg" alt="saif"></a> </div>
<div id="res"> <li data-tags="bldg"><a title="Ajman Tower (G+8Podium+26 Typical+R)" class="fancybox" data-tags="Residential and Commercial" data-fancybox-group="gallery" data-filter="res" rel="bldg1" href="images/Projects/4.jpg"><img src="images/Projects/4s.jpg" alt="ajman" width="240" height="160" class="img-responsive" border="0"></a></li>
<div class="hidden"> <a class="fancybox" data-fancybox-group="gallery" data-filter="res" rel="bldg1" href="images/Projects/41h.jpg"><img src="images/Projects/41h.jpg" alt="ajman"></a> <a class="fancybox" data-fancybox-group="gallery" data-filter="res" rel="bldg1" href="images/Projects/42h.jpg"><img src="images/Projects/42h.jpg" alt="ajman"></a> </div>
</div>
</div>
</ul>
</div>
</div>

zurb foundation orbital bug?

dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.
here's a link to see the bug:
http://www.omegadesignla.com/virtual/
and some html:
<div class="content" id="panel6">
<div class="row">
<div class="large-4 columns">
<h3> OFLVS Contact Info:</h3>
<ul>
<li>Student Support</li>
<li>Parent Support</li>
<li>Support links and resources</li>
</ul>
</div>
<div class="large-8 columns">
<ul class="example-orbit" data-orbit>
<li>
<img src="imgs/flash3.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="imgs/flash12.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="imgs/flash9.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
Learn More
Sign Up
</div>
javascript:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('reflow');
}
},
orbit: {
pause_on_hover: false,
timer_speed: 6000
}
});
I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.
Try reflowing the javascript in a JS file with a tab callback like so:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('orbit', 'reflow');
}
}
});
EDIT: I've corrected my answer and added a working fiddle.

routing with redirect and automatic child route transition with unexpected behavior

I have a routing related question.
App.Router.map(function(){
this.resource('whiteBoards',function(){
this.resource('whiteBoard',{path:'/:whiteBoard_id'},function(){
this.resource('image');
this.resource('video');
});
});
this.resource('dummy');
});
App.WhiteBoardsRoute = Ember.Route.extend({
model: function(){
return this.store.find('whiteBoard');
}
});
App.ImageRoute = Ember.Route.extend({
model: function(){
return this.store.find('image');
}
});
If I click all navigational links manually all things works as expected.
my templates:
<script type="text/x-handlebars" data-template-name="application">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="navbar-brand" href="/index.html">Routing Test</a>
</div>
<ul class="nav navbar-nav">
<li>{{#link-to 'whiteBoards'}}WhiteBoard{{/link-to}}</li>
<li>{{#link-to 'dummy'}}Dummy{{/link-to}}</li>
</ul>
</div>
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="whiteBoards">
<ul class="nav nav-tabs whiteBoards">
{{#each whiteBoard in controller.content}}
<li>
{{#link-to 'whiteBoard' whiteBoard}}{{whiteBoard.title}} {{/link-to}}
</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="whiteBoard">
<div class="whiteBoard">
<H3>WhiteBoard {{controller.content.name}}</H3>
</div>
<ul class="nav nav-tabs">
<li>
{{#link-to 'image'}}Images{{/link-to}}
</li>
<li>
{{#link-to 'video'}}Videos{{/link-to}}
</li>
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="image">
<div class="imagelist">
<H3>Images</H3>
<ul>
{{#each img in controller.content}}
<li>{{img.name}}</li>
{{/each}}
</ul>
</div>
</script>
The problem occurs if I try to activate the image route (as default child route) in combination with a whiteBoard navigation click.
This mean If I select a whiteBoard a list of images should also be shown (here only a simplified image list).
To achieve this I insert:
App.WhiteBoardIndexRoute = Ember.Route.extend({
redirect: function(){
this.transitionTo('image');
}
});
The first time it works as expected (the selected whiteBoard is shown and the image list).
If I try to navigate to another whiteBoard the problems begins.
After inserting WhiteBoardIndexRoute I can't navigate to another whiteBoard.
What is the problem ?
I'm working with ember.js verion 1.0
I known that I can implement the display of the image list using the renderTemplate method in the WhiteBoardRoute but I think that it should be possible to use the "default child route concept".