Getting an image to appear on a popup window with Angular JS - javascript

This is my first post on StackOverflow and I am teaching myself Angular, so I am a beginner and currently confused.
I am creating a webpage with Angular and one of the pages involve a button and a popup window. I would like to put an image into the popup window, but I am having a lot of trouble with getting this to work.
The step and name properties are successfully appearing in the popup window, but the image is not working. I have tried just getting the url to appear as a string, but that also doesn't work.
I've also tried getting the id property (which is just a string) to appear, but that also doesn't work.
I put only one set of curly brackets around the ctrl.figure in the html because that at least gets me a broken picture icon in the popup window, whereas if I use two curly brackets, as is normally suggested, I get nothing.
I am hosting the website on my local computer and with Chrome Dev tools, keep getting a message that the file is not found. I've checked the file path multiple times and it seems fine. Since I can't get the figure's url to appear as just a string, I'm thinking that the problem might have something to do with the controller.
Any suggestions would be greatly appreciated. The first set of code is the html for the popup window and the second bit is from the controller.
<!--Overlay div for popup window-->
<div ng-show= "ictrl.showValue" class="instAbsolute col-xs-12 col-md-10 ng-cloak">
<span class= "glyphicon glyphicon-remove pull-right" ng-click = "ictrl.hideDetails()"></span>
<h4 class = "text-muted" >{{ictrl.step}}</h4>
<h1 class = "text-grey">{{ictrl.name}}</h1>
<h1 class = "text-grey">{{ictrl.id}}</h1>
<div ng-bind-html="ictrl.description">
</div>
<img class= "img-responsive" ng-src="{ictrl.figure}" alt="{{ictrl.alt}}">
</div>
</div> <!--end of controller -->
</div> <!--end of app -->
angular.module('instructionsApp', ['ngSanitize']).controller('instructionsCtrl',[
function() {
var self = this;
self.showValue = false;
self.showDetails = function(id) {
for (var i = 0; i < this.steps.length; i++) {
if (self.steps[i].id === id) {
self.name = self.steps[i].name;
self.step = self.steps[i].step;
self.description = self.steps[i].description;
self.showValue = true;
}
}
};
self.hideDetails = function() {
self.showValue = false;
};
self.steps = [{
{
name: "Attach Camera",
id: "S1",
step: "Setup",
description: "<p>There are many ways to attach you camera to your laptop. For digital camera output, we recommend connecting the camera with a wire to the faster firewire port – but the USB port will also work. As an example, for analog camera output you can use an external capture device (such as the Dazzle from Pinnacle) with a 3-port composite connector into the camera and a USB connection on the other end of the cable into the laptop. Also, there are many ways to interface a camera to an internal video capture card. See illustrations below:<\/p>"
}, {
name: "Launch VazztCaster",
id: "S2",
step: "Setup",
figure: "../img/instructionsImages/launchVazztCaster.jpg",
description: "<p>Launch the VazztCaster.exe program on your laptop by clicking on the Vazzt icon (red V) on your desktop. After launch, on the home page of VazztCaster click on the Login Icon (person) and enter the Credentials:<\/p><p>Next Click on the Video Settings Icon (blue camcorder) and enter your choice of <\/p><p> <\/p><p>Note that the VazztCaster will automatically set default values, if possible, in the Video Settings fields based on the camera attached, the IP networks it finds, and the audio equipment attached:<\/p><ul><li>Video Capture Devices<\/li><li>Video Resolution<\/li><li>Video Bandwidth<\/li><li>Aspect Ratio<\/li><li>Audio Capture Device<\/li><li>And other Audio parameters. <\/li><\/ul><p>However, you can manually override these. Click the OK button when you are finished.<\/p><p>Most cameras will automatically provide notification of the various resolutions that the camera can support. VazztCaster can detect this and by examining the bandwidth detected, also automatically, VazztCaster sets default resolution and bandwidth.<\/p><p> <\/p><p> <\/p>",
alt: "Launch VazztCaster",
imageCaption: "After launching VazztCaster, this is what your screen should look like."
}];
}
]);

In your instructionController.js -
self.showDetails = function(id) {
for (var i = 0; i < this.steps.length; i++) {
if (self.steps[i].id === id) {
self.name = self.steps[i].name;
self.step = self.steps[i].step;
self.description = self.steps[i].description;
## self.figure = self.steps[i].figure;
## self.alt = self.alt[i].alt;
## self.imageCaption = self.imageCaption[i].imageCaption
self.showValue = true;
}
}
};
The lines starting with ## are the ones you need to add So basically you forgot to loop the above highlighted lines.
Hope this helps.

Related

How do I prevent a modal from removing a DOM element?

I am new to JavaScript, so I apologize if I am asking a dumb question.
I am building an automatic quote generator tool, in which there is an element created by DOM where I inject an HTML line with each service the client has selected (let's call this the "services cart"). This cart can be seen constantly on the screen right below the services selector, although it appears for the first time once the client has selected the first service.
I have added a Bootstrap modal that appears whenever the client has selected a specific service that we are not providing at the moment, showing an error message. However, when this modal appears on screen, the services cart with the rest of the services that the client has selected gets hidden for some reason that I can't understand. Here is my code:
function addToCart() {
let serviceLine = "";
if (isNaN(totalAmount)) {
modal.style.display = "block";
modalBody.innerText = "Unfortunately, we are not offering this service at this moment.
Please contact us directly through our Contact Us Form to see if we can accomodate your request."
totalAmount = 0;
} else {
finalTotalAmount = totalAmount + finalTotalAmount;
selectedService.push(listOfServicesSelected);
for (i = 0; i < listOfServicesSelected.length; i++) {
serviceLine = serviceLine + `
<li>Service selected: ${selectedService}</li>`;
}
}
container.innerHTML = serviceLine;
}
I realized that, even after the cart gets hidden, the services selected are still saved in the program as the cart reappears when I select another service. I am guessing this has something to do with the "else" block of code which is not running. I tried to fix it by placing this line "container.innerHTML = serviceLine;" inside the if block, but it didn't work.
Thank you in advance for your help.

Modifying chrome extension for new Twitter UI

I have a chrome extension for Twitter where I add a button to all those tweets which have images in them. The code in the content script is something like this:
$(".tweet, .js-tweet").each(function() {
var username = $(this).attr('data-screen-name');
var tweetid = $(this).attr('data-tweet-id');
if (username != null) {
var mediaLinkContainer = $(this).find(".card2")
addButtonToMediaLinkTweets(tweetid, mediaLinkContainer)
// addOverlayToMediaLinks()
var outerContainer = $(this).find(".AdaptiveMediaOuterContainer")
var mediaContainer = $(this).find(".AdaptiveMedia-photoContainer")
if (mediaContainer.length) {
console.log("Photo found in link")
addButtonToPosts(tweetid, outerContainer)
// addOverlayToPosts(outerContainer)
}
}
});
This worked perfectly with the older UI of Twitter, but this doesn't work after the new UI was rolled out. All the class names have changed and the view hierarchy is different as well. I'm trying to navigate through all of that to make my extension work again.
The following class name appears a lot of times - css-1dbjc4n I tried the following to iterate over all the tweets:
$('.css-1dbjc4n.r-1ila09b.r-qklmqi.r-1adg3ll').each(function() {
console.log($(this).html())
})
.css-1dbjc4n r-1ila09b r-qklmqi r-1adg3ll are the classes assigned to the div that is at the second to top most level of a tweet (the topmost div does not have a class or id). However, console.log does not print anything in this case. I need to iterate over the tweets to be able to add my UI element.
Edit:
It seems that jQuery has issues with the new Twitter UI. When I wrote the following in vanilla JavaScript:
var tweetDivs = document.getElementsByClassName("css-1dbjc4n r-1ila09b r-qklmqi r-1adg3ll")
console.log(tweetDivs)
//get images inside the tweets and add button on top of these images
$(tweetDivs).each(function(tweet) {
console.log(tweet)
})
I get a HTML collection in tweetDivs. However, I'm unable to iterate over its elements as its length is 0. The elements show up in console though, but that's probably because the DOM hasn't loaded when this gets called. That's weird because I'm calling the above code from document.ready. I tried replacing document.ready with document.addEventListener("DOMContentLoaded", function(){}) and changed run_at in manifest.json file to document_start but it did not make a difference.

Unable to append local storage data across the domain

I have a massive problem, with little time to resolve it. I am creating my first mobile app for property search as a university project (its not based on real properties)
I tried using different keys it does not work, Im not getting the basics.
Basically I have a Jquery mobile app with many external pages which have details for a property, these pages have the same id but on different documents, When a user clicks the button to save, I want the title and the url of the page to be saved in local storage and to be retrieved by a third page called my favorites. The problem I am having is that when I go on each page and click save, it overrides what was already in local storage and it seems like each page has its own storage and as a result my favorites page always has only one favorite (the latest one), rather than a favorite list appending every time I click save. Here is my code:
<div data-role="header" id="samplePlacePage_hd">
<h4 id="hutRef">add#redHut456</h4>
</div>
<div data-role="main" id="samplePlacePage_cont">
<div id="image">
<img src="images/redhut.jpeg" height="200px" width="100%" alt="Hut">
</div>
<div id="place_title">
<p id="hutHeading">Stunning Red Hut in Central Red Beach</p>
</div>
<div>
<h4 style="float: left;">Rent: $2950pw</h4>
<h4 style="float: right;">Deposit: 5500</h4>
</div>
(Same code on both pages)
This was the function I had in my script file:
$(document).on("pagecreate",function (argument) {
var favoritesPlaces = [];
var heading = document.getElementById('hutHeading').innerText;
var ref = document.getElementById('hutRef').innerText;
var refLink = ref.replace("add#","");
document.getElementById('hutFav').onclick = function () {
var newFav = {
title: heading,
link: refLink
};
favoritesPlaces.push(newFav);
console.log(favoritesPlaces);
localStorage.setItem("favorites",JSON.stringify(favoritesPlaces));
}
})
Please help
Thanks
Two additional considerations for you: checking the favorite has not been added already, and allowing the user to have multiple tabs open on pages from your site - adding one page as a favorite should not interfere with adding a different page as a favorite. And not to forget, if the local storage item does not exist create a new one :)
Basically I suggest retrieving local storage, checking for duplicates, updating and saving back to local storage all occur in a single click handler, E.G. by rearranging your code and adding a few lines:
$(document).on("pagecreate",function () {
document.getElementById('hutFav').onclick = function () {
var favoritesPlaces = localStorage.getItem("favorites");
var heading = document.getElementById('hutHeading').innerText;
var ref = document.getElementById('hutRef').innerText;
var refLink = ref.replace("add#","");
var newFav = {
title: heading,
link: refLink
};
favoritesPlaces = favoritesPlaces || '[]'; // string
favoritesPlaces = JSON.parse(favoritesPlaces); // array
if( !favoritesPlaces.some( fave => fave.link === refLink)) {
favoritesPlaces.push( newFav)
console.log(favoritesPlaces);
localStorage.setItem("favorites",JSON.stringify(favoritesPlaces));
}
else {
console.log("already a favorite");
}
}
})
(tested)
Note that clearing localStorage on any page clears it for all pages across a site. Once cleared, its cleared on all pages, there are no more favorites, and any page can be added again without being a duplicate. If a "remove this page from favorites" button is needed, a new function needs to be written to do it.

Open Cam Stream In New Window

I tried extensive search without luck and I am stuck, So I am hoping someone can assist me in in a code that if a user clicks on a camera feed on a webpage cell it will open that feed in a new window in a larger view.
My friend is a manager of a small data center and the DVR’s are set to view cameras over IP webpage. Problem is over IP webpage you can only see multiple cams at 100px x100px very small and there is no option to view a single cam. He can log in as admin and use the DVR’s control panel to see the single cam but again the view is 100px x 100px. Unless he is at the actual DVR then he can see full screen but not remotely. He has 50 camera’s set up in the server cabinets viewing the lights and temps. Without having the camera feed in larger view it is hard to see the temp indicator on the servers.
As a test I created a webpage with a table 25 rows and 2 columns to make 50 cells. I copied the network feed code form the source code of the webpage and pasted it in a cell. I then added a script to the feed code and gave the “IMG” 600px x 600px. It worked and streamed. Looked good.
Now since one cam worked I copied the code for the other 49 cams, only a few cams will show up under 600px x 600px, but all the cams will show up under 100px x 100px. Scratching my head on this!
The only option that is coming to mind is to have an onclick script in each of the 50 cam feed cells , so that if he clicks on that cam feed it copies the code that in that cell and opens a new window in a larger view.
Any Suggestions?
Here is the script that I put in each cell. The only thing that changes on each cell code is the camera number. I put xxx for the camera ip address for security purposes. It is not my company so I cannot give that information out.
<center>
<img id="jpeg_3" width="600" height="600" class="auto-style5">
<span class="auto-style5">
<script type="text/javascript">
var camera_2 = {
addEvent: function(elem, event, func ){
if (typeof (window.event) != 'undefined')
{elem.attachEvent('on' + event, func);}
else
{elem.addEventListener(event, func, false);}
},
initCamera: function(jpeg, serverUrl, token, id, interval){
this.addEvent(jpeg, 'load', function(){setTimeout(function() {camera_2.showJpegFrame(jpeg, serverUrl, token, id);}, interval);});
this.showJpegFrame(jpeg, serverUrl, token, id);
},
showJpegFrame: function(jpeg, serverUrl, token, id){
jpeg.src = serverUrl+"/Jpeg/"+id+"?authToken="+token+"&"+new Date().getTime();
}
}
camera_2.initCamera(jpeg_2, "http://xxx.xxx.xxx.xxx:8100", "27e4d1dd-058e-47a8-b768-ac8cd6cbe29a", 2, 40);
</script>
Well, as far as I know, what you can do is set an onclick attribute for each of the cells to a window.open() function passing in the cams as parameters for each of the 50 cells. But, that is a "time waster", so you can use the DOM to select all 50 cells by using document.getElementsByTagName() passing in td as a parameter. Then, you can use a for loop to set that like here:
// Locate cells using the DOM:
var cells = document.getElementsByTagName("td");
for(var i = 0; i < cells.length; i++) {
cells[i].onclick = window.open(/* add link to cams */);
}
Hopefully this helps!

Multiple Facebook Custom Audience Tracking Events on the same page

I have a single page website and I am trying to invoke multiple events for the same Facebook Custom pixel from here.
I am using Facebook Pixel Helper on Chrome to test.
Here is the scenario:
This is how my javascript file looks:
(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
_fbq.push(['addPixelId', '1634281670122256']);
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', 'PixelInitialized', {}]);
function trackFbEventDownloadBrochure() {
window._fbq.push(['track', 'ViewContent', {content_name: 'brochure-pdf'}]);
}
function trackFbEventDownloadTsaWay() {
window._fbq.push(['track', 'ViewContent', {content_name: 'tsa-way-pdf'}]);
}
It is included in my html just before the closing tag:
<script type="text/javascript" src="js/fb-custom-tracking.js"></script>
</head>
I can see that the pixel is initialized correctly through the Fb Pixel helper tool.
Now I am sending a 'PageView' event with content_name="download-brochure" when the user clicks a link "Download Brochure". This I am doing using "onclick=trackFbEventDownloadBrochure();" on the link.
This pixel also loads successfully, although with a warning that the pixel took too long to load. I am assuming its because the user took some time before she clicked the link and I can safely ignore this.
Next, I have another link "Download TSA Way PDF". On this link, I have "onclick=trackFbEventDownloadTsaWay();". However, when the user clicks on this link (after having clicked on the other link), I see an error on the Fb Pixel Helper tool.
Custom Audience Pixel activated 2 times.
Event ID: ViewContent
Custom Audience Pixel pixel activated multiple times on this web page, which can cause errors in your event tracking.Learn more
View Event Log
Pixel ID: 1634281670122256
URL Called: Show
Pixel Location: Show
Load Time: 82.86 ms
Time To Request: 5501.48 ms
content_name: brochure-pdf
Same thing happens if I click the "Download TSA Way PDF" link first and then "Download Brochure".
It appears that we cannot send the same event twice from the same page, even if its sent with different parameters.
Can somebody help me with this ?
Thanks in advance !
Piyush

Categories

Resources