I am trying to implement a widget which ng-repeats user media objects horizontally and I should be able to swipe left/right to reveal the next media card. widget should look something like this
As you can see the image
The next card avatar is half visible, hinting there are more cards to swipe.
this is all i have currently.. i am stuck here
div class="media people-card-media col-xs-12" ng-repeat="item in cats">
<div class="media-left ">
<div class="person-photo presence" >
<img class="media-object list__photo img-circle" ng-src="{{item.photo}}" />
</div>
</div>
<div class="media-body list__body">
<div class="people_name_title">
<h4 class="media-heading title">{{item.name}}</h4>
</div>
</div>
<div class="media-right media-middle contacts-chat-call flex-it-align-top">
<a style="margin-right: 10px;">
call
</a>
</div>
</div>
heres the plunker http://plnkr.co/edit/YESgpGIXQrK9sYl79FVI?p=preview
Here is a plunkr with a working implementation.
http://plnkr.co/edit/wmIyCFM57hniZQ82Z8Ba?p=preview
I added ngTouch and in the HTML a ng-class and the touch event handlers.
<div class="media people-card-media col-xs-12"
ng-class="item.displayClass"
ng-repeat="item in heroes"
ng-click="gonext()"
ng-swipe-left="gonext()"
ng-swipe-right="goprev()">
And in the MainController, it flips through active item by assigning a current class to it, and a next-up and previous class to the neighbors.
$scope.gonext = function () {
for (var i=0, len=$scope.heroes.length; i<len; i++) {
if ($scope.heroes[i].displayClass == 'current') {
$scope.heroes[i].displayClass = 'previous';
if (i<len-1) $scope.heroes[i+1].displayClass = 'current';
if (i<len-2) $scope.heroes[i+2].displayClass = 'next-up';
i=len;
};
};
};
Only needs a better handling of the boundaries.
Related
I have a few rows with linked elements in them. The code looks like this:
<a href="link" class="list-group-item list-group-item-action" data-lat="30.25552298" data-lon="-97.555554">
<div class="row">
<div class="col-sm-12 col-md-7 col-lg-8 col-xl-9 lead">
label
</div>
<div class="col-sm-12 col-md-5 col-lg-4 col-xl-3 d-flex justify-content-between align-items-center">
<span class="badge bg-success"><small>33</small></span>
<strong>5 mi.</strong>
</div>
</div>
</a>
Then I use event listeners to call couple functions when my mouse moves over the links:
let loc = document.querySelectorAll("a[data-lat]");
var marker;
loc.forEach(node => {
node.addEventListener("mouseover", locOver);
node.addEventListener("mouseout", locOut);
})
function locOver(event) {
var llt = event.target.dataset["lat"],
lln = event.target.dataset["lon"];
marker = L.marker([llt, lln]).addTo(map);
}
function locOut(event) {
marker.remove();
}
Since there's a little padding on the link it works great when a mouse enters it, however, as soon as the mouse hits divs within the link the marker disappears, which seems weird to me since it's still linked.
I've tried modifying selector like this:
let loc = document.querySelectorAll("a[data-lat] div");
But my code just stops working, and no marker is shown. What am I missing here?
I have this piece of code. It get's the logo of a game from steam
<div class="col-md-3">
<img src="http://cdn.edgecast.steamstatic.com/steam/apps/{{game.steamID}}/header.jpg" style="width: 100%; height: auto;"/>
</div>
this is part of a thumbnail div which is tied to a ngFor loop.
now for some context, and my question.
My app uses the steam WebAPI to get a list of all the games a user owns, and stores it in a database.
it then displays the list of these games to the user, with the game logo.
there are some "games" that aren't actually games, dedicated servers mostly.
but these non-games don't have any images attached to them. I want to remove these entries from the webpage whenever they crop up. The best way I can think of is to catch any 404 errors and tell the thumbnail to hide itself.
so my question is, is it possible to use ngIf to hide a div if the image url comes back with a 404 error?
EDIT
I'm adding the entire thumbnail's code for anyone that might want to look a the bigger picture.
<div class="thumbnail" style="color: black" *ngFor="let game of games">
<div class="row">
<div class="col-md-3">
<img src="http://cdn.edgecast.steamstatic.com/steam/apps/{{game.steamID}}/header.jpg" style="width: 100%; height: auto;"/>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2>{{game.name}}</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!--<p>{{countRequests(game.id)}} People want to play<span class="pull-right">Sinse: GET_LAST_REQUEST_DATE</span></p>-->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="centerBlock">
<div class="btn-group btn-group-lg btn-block">
<button *ngIf="page > 1" class="btn btn-primary btn-outline" (click)="previousPage()">Previous</button>
<button *ngFor="let page of pages" class="btn btn-primary btn-outline"(click)="gotoPage(page)">{{page}}</button>
<button *ngIf="page < maxPages" class="btn btn-primary btn-outline" (click)="nextPage()">Next</button>
</div>
</div>
</div>
</div>
Using Angular events you can hide the image itself:
<img #image src="..." (error)="image.hidden = true" [hidden]="image.hidden">
Or any other element:
<div [hidden]="image.hidden"></div>
Or completely remove any div:
<div *ngIf="!image.hidden"></div>
When using *ngFor
Listen to the (error) event of the image element & if the image is broken you can hide the image itself:
<div *ngFor="let some of somethings">
<div *ngIf="some.imageUrl" class="image-class-1 img-class-2">
<img src="{{some.imageUrl}}" (error)="some.imageUrl = null"/>
</div>
</div>
This is what I would do based on what you have said:
1 - I would take the full image url as a property of game.
2 - Also add a property hide to the object.
3 - Consult image using $http service in the controller.
4 - When consulting image the response is 404 then the value of property hide should be true.
5 - As you now have a property hide you can just go ng-hide="game.hide"
Here is an example:
function MyCtrl($scope,$http) {
$scope.games = [{name: 'Game 1', url: 'https://res.cloudinary.com/idemo/image/upload/ar_315:250,c_fill,e_saturation:50,g_faces,r_50,w_450/balloons.jpg'},
{name: 'Game 2', url: 'https://res.cloudinary.com/idemo/image/upload/ar_315:250,c_fill,e_saturation:50,g_faces,r_50,w_450/balloons.jpg'},
{name: 'Game 3', url: ''}]
angular.forEach($scope.games, function(value, key) {
$http.get('value.url').then(function(response){
if(response.status === 404){
value.hide = true
}
});
});
}
I have a gallery of avatars I want to show my user, which are shown in the card format of Semantic-UI. I want the user to click on one of the images which then triggers Semantic's dimmer to appear in that specific image's place.
What I currently get is that all the images get the dimmer to appear on them instead of the specific one I want. Here is the code that puts the dimmer on all images:
$(".selectavatar img").hover(function() {
$('.selectavatar img').removeClass('selectedImage');
$(this).toggleClass("selectedImage");
});
$(".selectavatar img").click(function() {
$(".ui.dimmer").dimmer("toggle");
});
<!--gallery goes here-->
<div class="ui three column grid selectavatar">
<div class="five wide column">
<div class="ui segment">
<form action="/account/<%=currentUser._id%>?_method=PUT" method="POST">
<input name="user[image]" type"submit" value = "image1.jpg" class="hidden" />
<img name="user[image]" src = "image1.jpg" width=300>
<div class="ui dimmer">
<div class="content">
<div class="center">
<button class="ui button blue" type="Submit">
<i class="user icon"></i> Select Avatar
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="five wide column">
<div class="ui segment">
<form action="/account/<%=currentUser._id%>?_method=PUT" method="POST">
<input name="user[image]" type"submit" value = "image2.png" class="hidden" />
<img name="user[image]" src = "image2.png" width=300>
<div class="ui dimmer">
<div class="content">
<div class="center">
<button class="ui button blue" type="Submit">
<i class="user icon"></i> Select Avatar
</button>
</div>
</div>
</div>
</form>
</div>
</div>
The way I envisioned it was that I'll add the class .selectedImage on the image the user wants, then I would be able to toggle the dimmer if selectedImage exists. But when I do use that as so:
$(".selectavatar img.selectedImage").click(function() {
$(".ui.dimmer").dimmer("toggle");
});
then nothing appears, no dimmer whatsoever!
What am I doing wrong?
As a side note, I need to figure out how to generate a gallery from a folder of images using EJS and NodeJS, instead of having to hard code each image. I guess the right thing to do would be a seperate question for that?
Your code will dim all .ui.dimmer divs when you click an image:
$(".selectavatar img").click(function() {
$(".ui.dimmer").dimmer("toggle");
});
This code will dim only the .ui.dimmer div which is located in the same parent container as the clicked image:
$(".selectavatar img").click(function() {
$(this).parent().find(".ui.dimmer").dimmer("toggle");
});
Part 2
Your code will set a click handler on all img.selectedImage which exist when you set the event handlers. Unfortunately no images have the selectedImage class at that point so it doesn't work.
$(".selectavatar img.selectedImage").click(function() {
//code
});
This code will do the same, but it only requires .selectavatar to exist when the event handler is set up:
$(".selectavatar").on("click", "img.selectedImage", function() {
//code
});
I have cards displayed on the website. I want to display a label on whichever card I am currently hovering on.
main.js
$('.card').on("mouseover", function () {
$('.ui.right.corner.label').show();
});
$('.card').on("mouseout", function () {
$('.ui.right.corner.label').hide();
});
This appeared to work fine until I realised that specific card's label is shown every time I hover on ANY of the cards.
Index.php
<!--first card-->
<div class="card" onclick="window.location='product.php';">
<img src="img/test1.jpg" class="image">
<a class="ui right corner label">
<i class="heart icon"></i>
</a>
</div>
<!--second card-->
<div class="card" onclick="window.location='product.php';">
<img src="img/test2.jpg" class="image">
<a class="ui right corner label">
<i class="heart icon"></i>
</a>
</div>
<!--third card-->
<div class="card" onclick="window.location='product.php';">
<img src="img/test3.jpg" class="image">
<a class="ui right corner label">
<i class="heart icon"></i>
</a>
</div>
I have currently fixed the child element problem by using Rajaprabhu's answer. However, the label is now appearing on the website by default. I am using .hide to hide them but is there a better way to not show the label when website is loaded?
That is because you are showing and hiding all the elements with that particular class. Try this method.
$('.card').on("mouseover", function () {
$(this).children("a").show();
});
$('.card').on("mouseout", function () {
$(this).children("a").hide();
});
You have to use the this reference inside of those event handlers,
$('.card').on("mouseover", function () {
$('.ui.right.corner.label', this).show();
});
$('.card').on("mouseout", function () {
$('.ui.right.corner.label', this).hide();
});
This is an awkward problem, which will be better explained by looking at the live demo. Basically I have a news box populated with ng-repeat using Angular. Then I am using a jquery plugin called news ticker which allows the news headlines to move around. The first time you land on the page the news items are in their proper spots and they call the function accordingly. After moving them up or down, they stop calling the function, set a breakpoint in the code and after moving the breakpoint is never hit.
Edit - After researching this further I have found that it is because the elements need to be compiled using $compile after they're re added. However following some examples I have not gotten this to work. I need a way of compiling after a move event with this plugin.
Live demo
Angular Script for with function that should be called.
$scope.UpdateNews = function (item,number) {
console.log(item + ' ' + number);
switch (item)
{
case 'General':
$scope.NewsCast.General.Body = $scope.News.GeneralNews[number].Text;
break;
}
};
What the HTML looks like with the news boxes
<script src="http://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading"> <span class="glyphicon glyphicon-list-alt logo-inverse pull-left"></span><b> General News</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo1" style="overflow-y: hidden; height: 280px;" ng-model="Idk">
<li style="" class="news-item text-left" ng-repeat="item in News.GeneralNews"><strong>{{item.DateValue | date: "MMM dd yyyy"}}</strong> {{item.Preview}}<a class="FakeClickable" ng-click="UpdateNews('General',item.index)" data-target="#GeneralModal" data-toggle="modal">Read more...</a></li>
</ul>
<div ng-if="Width>768">
<div ng-include="'../pages/Modals/General/GENERAL_INLINE.html'"></div>
</div>
</div>
</div>
</div>
<div class="panel-footer"> </div>
</div>
</div>