While working I come up with this problem, I made a dashboard on which user's image is loaded & if no image is provided by the user then a fallback image with his name initials is shown.
<img class="md-avatar" ng-src="{{item.image}}" ng-show="item.image"/>
<div ng-hide="item.image" class="avatar" ng-if="!item.image">{{vm.initials(item.name)}}</div>
vm.initials: function(fullName) {
var initials = [];
var k;
initials.push(fullName[0]);
for(var i=1 ; i<fullName.length ; i++){
if(fullName[i]==' '){
initials.push(fullName[i+1].toUpperCase());
}
}
if(initials.length == 1){
initials.push(fullName[1]);
}
k = initials[0].toUpperCase();
k+=initials[1];
return k;
}
This is working fine but the problem is I want to use this at multiple places so I have to add vm.initials function at every place. I've tried to make a directory in angular but failed, can anyone help in making a directory or any new approach.
Related
So I've tried several things to fix this but nothing seems to work. it was working OKAY earlier but something happened and now I cant get it to display a random image from a JS array in the target div.
renamed all the image files so they had no spaces
edited document.getElementById("profPic").innerHTML = '<img src="'+imagesArray[num]+'">'; several times to no avail
Checked SO for solutions/work around but concluded it must be something to do with the file formatting that i am unaware of.
Tried putting displayImage(); in the div container. Also tried with document.write
var imagesArray = ["img/mascotImages/CCF2_(281).jpg", "img/mascotImages/CCF2_(282).jpg"];
function displayImage() {
var num = Math.floor(Math.random() * (imagesArray.length + 1));
document.getElementById("profPic").innerHTML = '<img src="' + imagesArray[num] + '">';
}
function myFunction(e) {
if ((e.target.id === 'mySearch' && e.keyCode === 13) || e.target.id === 'searchButton') {
e.preventDefault();
var searchValue = document.getElementById("mySearch").value;
for (var i = 0; i < users.length; i++) {
if (users[i]['last_name'] === searchValue) {
document.getElementById("usernameOut").innerHTML = (users[i].username);
document.getElementById("firstNameOut").innerHTML = (users[i].first_name);
displayImage();
return;
}
}
}
}
<div id="return">
<div id="profPic"></div>
<!--profPic-->
<div id="usernameOut"></div>
<!--usernameOut-->
<div id="firstNameOut"></div>
<!--firstNameOut-->
</div>
What is supposed to happen is that when the user searches something in a search box, data from another array is displayed in <div id="usernameOut"> and <div id="firstNameOut"> etc. I wanted a random picture to display also when the user clicked search/hit enter.
Is something wrong with the naming conventions of the files? are they in one too many folders? i'm sure this is something very simple, but it's had me staring at it for several hours.
Arrays indexes start with 0, not 1. Therefore, with only 2 images in your array, the max index should be 1. But your code Math.floor(Math.random() * (imagesArray.length+1)) can at times return 2.
Just get rid of the +1:
Math.floor(Math.random() * imagesArray.length)
I have a JS code, that gets called in different web pages of my clients. I want to fetch the total number of images. I want only those images that are visible to the user and not just any other images. This is my JS code
function getImageCount(topWindow) {
try {
var images = topWindow.document.getElementsByTagName('img');
var imageCount;
for (var i=0, length = images.length; i < length; i++) {
var image = images[i];
var clientWidth = image.clientWidth;
if(clientWidth && clientWidth > 1) {
var src = image.getAttribute('src');
if(src) {
src = src.toLowerCase();
if(src.indexOf('.jpg') !== -1 ||
src.indexOf('.jpeg') !== -1 ||
src.indexOf('.gif') !== -1 ||
src.indexOf('png') !== -1) {
imageCount = imageCount ? ++imageCount : 1;
}
}
}
}
return imageCount;
} catch (e) {
processError("getImageCount", e);
}
}
var imageCount = getImageCount(top);
I have been trying a lot to stabilize this code so that it works correctly across all different types of web pages. Basically what I want is a generic code that captures image counts correctly.
Eg:
My code gives image count as 1 for http://www.msn.com/en-us/news/other/one-free-agent-every-nfl-team-should-sign-this-offseason/ss-AAmLlC0#image
What I want is a GENERIC CODE that gives me a correct image count irrespective of where it runs. Can some one give me some detailed solutions.
I would appreciate a lot.
To simplt count all the images (<img>) on the page:
document.images.length
And to count all the "visible" images (ones with width and height):
[...document.images].filter(img => img.clientWidth && img.clientHeight).length
This will give you the number of images on the page. This does not include CSS images. since your code didn't either then I take it you want <img> ones
I didn't quite understand the meaning of irrespective of where it runs.. can you elaborate?
// Extract images
websiteImages = document.getElementsByTagName('img');
for (url in websiteImages)
console.log(websiteImages.length);
//Extract inbound and outbound links
Links = document.querySelectorAll('a');
for (link in Links)
console.log(Links[link].href);
Paste this Scripts into your console of browser
Check on the Below Link/ any Link you like
(https://news.google.com/topstories?hl=en-IN&gl=IN&ceid=IN:en&gl=IN&ceid=IN:en)
The above-mentioned script will give all the Images present in the webpages.
And the second script will give all the number of Inbound and Outbound/exit links
Just apply Some filter as per your use case and you will be good to go.
Use this simple approach for links
$$('a').length
To count the number of images on a webpage use the below code:
$$('img').length
EDIT: I've asked too many questions so I will just leave the part which was
solved in comment.
The second concern is another button that will disable all the photos that are on the site to be seen by te user. When you press it again, the photos will be seen again. SOLVED
I assume it should be done in Javascript, but I'm just starting with learning it, so any help would be much appreciated.
I would like to add functionality to my page.
I have not fully understand the behavior of the first button.
The second button is pretty simple:
just make a script that fetches all the images in the page and sets them to display="none";
<script>
var toggle = true;
function imagesToggle(){
var images = document.getElementsByTagName('img');
if(toggle == true){
for(var i = 0; i < images.length; i++) {
images[i].style.display="none";
}
toggle = false;
}
else{
for(var i = 0; i < images.length; i++) {
images[i].style.display="block";
}
toggle = true;
}
}
</script>
And in the button, add the onclick property:
<button onclick="imagesToggle()">Click on me</button>
I am trying to create a basic gallery using JQuery.
The basic idea is that all image files are called x.png (where x is a number), and the program adds a number to the current number creating x+1.png and so on.
The code i have is:
function gal2(){
var amount = $(".imagelist > img").length;
var next = $("#display").attr('src').replace('.png', '');
if ($("#display").attr('src').replace('.png', '') >= amount) {
$("#display").attr('src', next+".png");
next++;
} else {
$("#display").attr('src', next+".png");
next++;
};
}
gal2 is called on a button press <input type="button" onclick="gal2()">,
.imagelist is a div containing the images,
#display is the main image being shown,
Example Website
The problem is that nothing happens except if one is selected than it will back to the original one every time.
P.S: It's for a year 9 secondary school project
You made some edits to your script and now it work fine : https://jsfiddle.net/IA7medd/qwmt7Lep/2/
function gal2(){
var amount = $(".imagelist > img").length;
var current = parseInt($("#display").attr('src').replace('.png', ''));
var next = current + 1;
if (current < amount) {
$("#display").attr('src', next+".png");
} else {
$("#display").attr('src', "1.png");
};
}
My problem is that I have loaded up to application frame in js via the funtion i created called createFrame(). The fullScreen functionality isn't working properly ass it goes fullScreen nicely but if I move the application frame around the desktop it will not work properly even when I move it back to it's original position. The code changes the size of the application frame and temporally remove taskbar and user/time info pane at the top. It also doesn't seem to want to allow the use to touch the box that the minimize/exit/fullscreen buttons are in. It just hides everything and leave me with a blank screen.
The code works as follows: var app; creates new application frame(exit/fullscreen/minimize button + content). The width and height are defined by w and h in the functions first line which is called upon in my js file called front-end.js by calling createFrame(500,300); . Content_src should explain itself quit easily although the parameter in not used yet. The fullscreen button should be able to work as stated above but for some reason int wont work properly if I drag it around on the screen. That is ok for now as I have not worked out code to re-position it to 0,0 on the screen. But if I re-position it to 0,0 myself in the desktop it will not end up at 0,0 of the screen. I think this has something to do with me upsetting the position i.e. the application was not in draggable state till I moved it. Any ideas?
var isFullScreen;
function createFrame(w,h,content_src) {
var app = $('<div class = "application-frame ui-resizable-se" style="width:'+w+'px; height:'+h+'px;">\
<div class = "buttons-box">\
<div class = "exit-button">\
</div>\
<div class = "fullscreen-button">\
</div>\
<div class = "minimise-button">\
</div>\
</div>\
<div class = "content">\
</div>\
</div>');
var apps = [];
$(".desktop-box").append(app);
apps.push(app);
$(app).draggable({containment:"parent"}).resizable({containment:"parent",maxHeight: 678,maxWidth: 1361});
$(".exit-button").click(function() {
for(var i = 0; i <apps.length;i++) {
apps[i].pop($(app).fadeOut('very slow'));
for(var f = 0; f < fullscreenArray.length;f++) {
if(fullscreenArray[f]) {
$(".infoPane").show();
$(".info-dropdown").show();
$(".taskbar").show();
fullscreenArray[f] = false;
}
}
}
});
var fullscreenArray = [];
fullscreenArray.push(isFullScreen);
$(".minimisse-button").click(function() {
for(var i = 0; i <apps.length;i++) {
for(var f = 0; f < fullscreenArray.length;f++) {
if(fullscreenArray[f]) {
$(".infoPane").show();
$(".info-dropdown").show();
$(".taskbar").show();
fullscreenArray[f] = false;
apps[i].pop($(app).slideToggle('very slow'));
}
}
}
});
var fullScreenWidth = $(".desktop-box").width();
var fullScreenHeight = $("body").height()+5;
$(".fullscreen-button").click(function() {
for(var f = 0; f < fullscreenArray.length;f++) {
if(!fullscreenArray[f]) {
$(app).css({width:fullScreenWidth});
$(app).css({height:fullScreenHeight});
fullscreenArray[f] = true;
$(".infoPane").hide();
$(".info-dropdown").hide();
$(".taskbar").hide();
}else if(fullscreenArray[f]) {
$(app).css({width:w});
$(app).css({height:h});
fullscreenArray[f] = false;
$(".application-frame").draggable();
$(".infoPane").show();
$(".info-dropdown").show();
$(".taskbar").show();
}
}
});
}
I just found a solution to the problem if anybody else is trying to attempt something similar. All add is $(app).offset({top:0,left:0); in the if statement that makes isFullScreen true. and that will work!