We Keep Coding

Is it possible to remove size from the end a responsive image path?

I want to remove the -500x500 part from the image so that I can show the actual image.
Here's the complete HTML if anybody wants to take a look:
<div id="speakers_list1" class="wpb_row vc_row mk-fullwidth-false attched-false vc_row-fluid js-master-row mk-in-viewport">
<div style="" class="vc_col-sm-12 wpb_column column_container _ height-full">
<div id="box-14" class="mk-employees a_margin-bottom-10 a_margin-top-10 four-column u6col u5col o0col o1col o2col o3col mk-employees-grayscale classic c_cs ">
<ul>
<li class="mk-employee-item a_colitem a_align-center a_display-inline-block a_float-left m_7">
<div class="item-holder">
<div class="team-thumbnail a_position-relative a_width-100-per a_height-100-per a_overflow-hidden rounded-true">
<a href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<img alt="Imam Abdoulaye Ndaw" title="Imam Abdoulaye Ndaw" src="http://developer.designprowebsolutions.com/sufi-intensive/wp-content/uploads/2017/02/imam-abdoulahy-ndaw-500x500.jpg">
</a>
<div class="employee-hover-overlay a_m_fly-top-left a_opacity-100 "></div>
</div>
<div class="team-info-wrapper m_7" itemscope="itemscope" itemtype="https://schema.org/Person">
<a class="team-member-name" href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<span class="team-member-name a_font-16 a_display-block a_font-weight-bold a_text-transform-up a_color-333">Imam Abdoulaye Ndaw</span>
</a>
<span class="team-member-position a_font-12 a_text-transform-up a_display-block a_color-777 a_letter-spacing-1">Imam & Ustadz</span>
<div class="team-member-desc a_margin-top-20 a_margin-bottom-10 a_display-block"></div>
</div>
</div>

A quick way(not beautiful) is to replace the src of the element
src is a attribute on the element, so you can get the value with $(obj).attr("src") or set the value with $(obj).attr("src","newValue")
Edit I created a function so you can do this multiple times with multiple objects
Either add a class to the img, you want to change or call it by an attribute.
Class: fixImage($('.removeRatio'), "-500x500") or
Attribute: fixImage($('[title="Imam Abdoulaye Ndaw"]'), "-500x500")
console.log("This was my SRC: " + $('.removeRatio').attr("src"))
function fixImage(obj, removestring)
{
obj.attr("src", obj.attr("src").replace(removestring, ""))
}
fixImage($('.removeRatio'), "-500x500")
console.log("This now IS my SRC: " + $('.removeRatio').attr("src"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="speakers_list1" class="wpb_row vc_row mk-fullwidth-false attched-false vc_row-fluid js-master-row mk-in-viewport">
<div style="" class="vc_col-sm-12 wpb_column column_container _ height-full">
<div id="box-14" class="mk-employees a_margin-bottom-10 a_margin-top-10 four-column u6col u5col o0col o1col o2col o3col mk-employees-grayscale classic c_cs ">
<ul>
<li class="mk-employee-item a_colitem a_align-center a_display-inline-block a_float-left m_7">
<div class="item-holder">
<div class="team-thumbnail a_position-relative a_width-100-per a_height-100-per a_overflow-hidden rounded-true">
<a href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<img class="removeRatio" alt="Imam Abdoulaye Ndaw" title="Imam Abdoulaye Ndaw" src="http://developer.designprowebsolutions.com/sufi-intensive/wp-content/uploads/2017/02/imam-abdoulahy-ndaw-500x500.jpg">
</a>
<div class="employee-hover-overlay a_m_fly-top-left a_opacity-100 "></div>
</div>
<div class="team-info-wrapper m_7" itemscope="itemscope" itemtype="https://schema.org/Person">
<a class="team-member-name" href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<span class="team-member-name a_font-16 a_display-block a_font-weight-bold a_text-transform-up a_color-333">Imam Abdoulaye Ndaw</span>
</a>
<span class="team-member-position a_font-12 a_text-transform-up a_display-block a_color-777 a_letter-spacing-1">Imam & Ustadz</span>
<div class="team-member-desc a_margin-top-20 a_margin-bottom-10 a_display-block"></div>
</div>
</div>

Use NG-CLICK to change class on a clicked element

I am creating dynamic tabs using ajax data loaded via the WordPress REST-API. Everything is working, but I need to add a class to the active tab in order to use CSS transforms on it.
I would appreciate any suggestions. I know how to use ng-class when clicking one element affects another, but not when it affects the clicked element. It's also worth noting I am using the 'as' syntax for the ng-controller.
JAVASCRIPT:
var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
$scope.myData = {
tab: 0
}; //set default tab
$http.get("http://bigbluecomics.dev/wp-json/posts?type=character").then(function(response) {
$scope.myData.data = response.data;
});
});
homeApp.filter('toTrusted', ['$sce',
function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}
]);
HTML:
<div class="more_comics_mobile">More Comics <img src="./images/white-arrow.png" />
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-repeat="item in myData.data">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
I am trying to add the class to the li element. I appreciate any help!

You can use ng-class like
<li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}"></li>
For more options you can visit
https://docs.angularjs.org/api/ng/directive/ngClass

<div class="more_comics_mobile">More Comics <img src="./images/white-arrow.png" />
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-click="activate($index)" ng-repeat="item in myData.data">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
in your js
$scope.activate = function(index){
document.getElementsByClassName.setAttribute("class","tab");
document.getElementsByClassName[index].setAttribute("class","tab active");
}

Angular Directive Bug With View

I was doing a very quick exercise with angular directives. My code is very simple.
app.js:
var app = angular.module('readingList', []);
app.controller('BooksController', function($scope){
$scope.books = books;
$scope.genres = genres;
})
app.directive('bookGenres', function(){
return {
restrict: 'E',
templateURL: 'partials/book-genres.html'
};
});
var books = [{
title: 'ABCD',
author: 'E. Fgh',
isbn: '123414312341234',
review: 'Hello world',
rating: 4,
genres: {
'non-fiction': true, fantasy: false
}
}];
var genres = ["foo1","bar2","foo2","bar3"];
}
app.html:
<div class="row" ng-controller="BooksController">
<button class="btn btn-default">Create Review</button>
<hr />
<hr />
<ul class="list-unstyled col-sm-8" >
<li class="book row" ng-repeat="book in books">
<aside class="col-sm-3">
<a href="http://www.amazon.com/gp/product/{{book.isbn}}">
<img ng-src="http://images.amazon.com/images/P/{{book.isbn}}.01.ZTZZZZZZ.jpg" alt="" class="full"/>
</a>
<p class="goodRating rating">{{book.rating}}/5</p>
</aside>
<div class="col-sm-9 col-md-8">
<h3>
<a href="https://rads.stackoverflow.com/amzn/click/com/0553593714" rel="nofollow noreferrer">
{{book.title}}
</a>
</h3>
<cite class="text-muted">{{book.author}}</cite>
<p>{{book.review}}</p>
<!-- Put Genre Here -->
<book-genres></book-genres>
<ul class="list-unstyled">
<li ng-repeat="(genre, state) in book.genres">
<span class="label label-primary" ng-show="state === true">
{{genre}}
</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
book-genres.html:
<ul class="list-unstyled">
<li ng-repeat="(genre, state) in book.genres">
<span class="label label-primary" ng-show="state === true">
{{genre}}
</span>
</li>
</ul>
Everything renders with the view except my book-genres directive. For reason, it doesn't work. I have checked the documentation. I checked other similar examples and nothing. If I can't get this directive to work, rendering out the other components such as the image is going to be a problem. I also checked the path of the partials views as well.

There's a couple possibilities here. You need to be sure to inject $scope into your controller:
app.controller('BooksController', ['$scope', function($scope) {
// do stuff
}]);
book.genres is not defined anywhere, so your ng-repeat has no items to display.
templateURL is also incorrect, it should be templateUrl.

Simple previous\next slider using angular

I have a web page which displays a list of items, the number of items can get quite big so I would like to display only 3 at a time and have next\previous buttons which let the user navigate between items.
I'm very new to Angular but I managed to retrieve all the items and display them on the UI but have no idea where to start to only display three and wire up the next and previous buttons to enable navigation.
Here's my code:
JS:
var app = angular.module('myApp', []);
app.controller('servicesController', function ($scope, $http) {
$http.get(url + "api/MapServiceAPI/GetServers")
.success(function (response) {
$scope.servers = response.Result;
});
});
HTML:
<div class="row top-space" ng-app="myApp" ng-controller="servicesController">
<div class="pull-left">
<img src="~/Content/Images/Service/PREVIOUS.png" />
<h4>PREVIOUS</h4>
</div>
<div class="pull-right">
<img src="~/Content/Images/Service/NEXT.png" />
<h4>NEXT</h4>
</div>
<ul class="col-md-3 text-center" ng-repeat="s in servers" ng-click="serviceClick(s.ServiceId)">
<li>
<div class="container">
<h4>{{ s.ServerName }}</h4>
</div>
<div class="container">
<img src="~/Content/Images/Server/SERVER.png" />
</div>
<div class="container">
<h5>{{ s.ServerDescription }}</h5>
</div>
</li>
</ul>
</div>

you can achieve using filters limitTo property
> <li ng-repeat="datalist in datalists | pagination: curPage * pageSize
> | limitTo: pageSize">
refere this jsfiddle which help you to understand better.
http://jsfiddle.net/dulcedilip/x7tg15v9/

Give a value to an ng-model="searchText" input based on list item clicked in Angular JS

I created a list that is searchable with an input using angular.js (ng-model="searchText"). On click of the list elements you can pull the content of the selected item using {{selected | json}}. I want to apply this selected element as the value of the input when a list item is clicked.
I essentially want to create my own autocomplete that always displays a list of options, filters options while typing, and fills in the input on click of an option.
HTML
<html ng-app>
<section>
<div id="content-body" class="container search-page"><!-- begin content-body -->
<div id="content-frame" class="container"></div><!-- end content-frame -->
<section>
<div class="search-container">
<div class="search-wrapper">
<input type="search" class="input-from" autocomplete="off" placeholder="Search" ng-model="searchText" value="{{searchText}}">
</div>
</div>
</section>
<section>
<div ng-controller="ContentCtrl">
<ul class="list-group search">
<!--<li class="list-group-item group-title">
<span class="icon itinerary-icon"></span>
Popular Destinations
</li>-->
<a ng-click="setMaster(cities)" ng-repeat="city in cities | filter:searchText | limitTo:limit" href="#" class="list-group-item">{{city}}</a>
</ul>
</div>
</section>
</div><!-- end content-body -->
</html>
JS
function ContentCtrl($scope, $http) {
"use strict";
$scope.url = '../mobile-site/cities.json';
$scope.cities = [];
$scope.limit = 10; // max 10 cities loaded
$scope.fetchContent = function() {
$http.get($scope.url).then(function(response){
$scope.cities = response.data.cities;
});
}
$scope.fetchContent(); // build cities list
$scope.setMaster = function(city) {
$scope.searchText = city; // pull selected city using {{selected | json}}
}
}
JSON
{
"version": "082B6AF45261B81358E8F99F0FAEC4A4",
"cities": [
"A Friela Maside, Spain",
"A Gudina, Spain",
"AHA, Germany",
"AL, Norway"
]
}

I think you have a few mistakes in the code:
<div ng-model="chosen">
<a ng-click="setMaster(cities)" ng-repeat="cities in cities | filter:searchText | limitTo:limit" href="#" class="list-group-item">{{cities}}</a>
</div>
shoud be
<div ng-repeat="city in cities | filter:searchText | limitTo:limit">
<a ng-click="setMaster(city)" class="list-group-item">{{city}}</a>
</div>
then I think what you want is
$scope.setMaster = function(city) {
$scope.searchText = city;
}
Also, I'm not sure what the ng-model on the div is for, as far as I know it is used only for inputs, textareas and selects. See http://docs.angularjs.org/api/ng.directive:ngModel.
You probably want something like this fiddle -> http://jsfiddle.net/weSpW/3/.