Popup windows for histogram with AngularJS - html

I would like to have some kind of popup window that will display a chart on the same page as where I clicked the button.
Something like this:
How would I achieve this in AngularJS? I have already set-up all the multi view files, like modules, controllers etc. I assume I only need to change HTML template for the main controller?
UPDATE
I have histograms loading on separate component with route #!/histogram/:elemId.
So in fact everything is ready in terms of creating a graph and data collection.
What I want to do is to have such popup window that displays on the same page, where the link was clicked. Something like alert(), but so it's not displayed by browser, but by the page, if this makes sense
You can see the code at GitHub

Well you have to create a popup modal that it's gonna be the base, I don't have full time to explain it right here but I left you a simple tutorial on YouTube youtube.com/watch?v=aqCMlI6Wq64
Make a ng-controller like:
<div class="chart" ng-controller="histogramController">
<p>Stuff here</p>
</div>
Then the controller can you make:
function histogramController($scope) {
// Chart.js functions on scope
}

Related

Generate Amazon link for open side popup with pre-applied filters

Edit: Stackoverflow modify automatically the Amazon links when you click, so for see the popup, select, copy and paste the URLs in the browser.
On Amazon there is a link to open directly a side popup, like this:
https://www.amazon.com/dp/B07FKTZC4M/#aod (#aod open the popup)
where We can enter some filters. I tried different ways with no success to generate a link that open directly the site popup with new filter pre-applied.
So i need a link that open this page with "new filter" pre-applied:
I tried different solutions, but don't work, for example:
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new#aod
https://www.amazon.com/dp/B07FKTZC4M/ref=new#aod
https://www.amazon.com/dp/B07FKTZC4M/#aod_f_new=true
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new=true#aod
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new?ie=UTF8&f_new=true#aod
I see some informations on source page, maybe that help:
Question: Is there a way to create a link that open directly the side popup with new filter pre-applied? Maybe adding some parameters to the URL.
You can call a function in JavaScript with which you can change the z-index of the popup.
Something like this:
<button onclick="popup()" value="open popup">
Also make the popup. I am just making a rough one:
<div id="popup" style="z-index:1000; position: absolute;">Some code</div>
Remember to set the z-index at behind and the position. Then for JS i will make it simple in case you can't code JS
function popup(){
document.getElementById("popup").style.zIndex=-1;//basically changing the popup's z-index
}
This will just change the z-index of the popup which you must create yourself

How is a toolbar generate from this line?

I have this line <div id="preview_map"></div> in a code I'm working on. It generates a toolbar with many button on it and display a map. My goal is to add a new button to this toolbar but how am I suppose to do it knowing that they are generated by this line ? I used grep to try to find a JS function who could use this id to generate buttons but nothing at the moment.
<div id="embedded_map" class="mrg-btm">
<div id="preview_map"></div>
</div>
Your application is dynamically generating elements with JavaScript.
Your code only shows a <div> element, this provides nothing to identify how the buttons are being generated.
Open your website on Chrome and click Inspect Element. Then go to sources and you should be able to view the JavaScript that is creating the page.
Alternatively you can search through your source code for the id embedded_map, and you should be able to see the JavaScript written to generate the buttons.

Preloading page like youtube

I am surprised by the display system of Youtube. When we are on the main page https://www.youtube.com/ and we click on one link of the menu at the left side to go to this page for example https://www.youtube.com/feed/trending, there is no flashing when going from one page to another.
It looks like the new page is preloaded and then display only the difference with the page before.
Furthermore there is the progress bar system (like this one http://ricostacruz.com/nprogress/) which ends all the time at 60% on the current page, then starts at 60% on the new page and go straight to 100%.
Any clue how they do that? Javascript, specific server configuration?
Thanks
This is a feature of frameworks like Angular or React, as a single page app (SPA), which use data APIs to load data and two-way binding to dynamically update only the things that have changed.

How to implement pop up window with no status bar and address bar in HTML?

I am trying to implement popup window in web application, i found following resource very useful
http://www.scriptfx.com/windows/plain/simple.htm#7
but all the examples shown here having following
menubar/toolbar and address location.
In my html, i am calling high-chart to plot data points.
Structure of html
<html>
<body>
adding high chart plot by using div id.
<script>
script for plotting plot using high chart
</script>
</body>
I really don't don't need html only. I can simply do the same in popup window.
How can i generate a pop up window without such bars i.e. a plain html with option for closing window on clicking a button or cross on it.
You can't change the design of the Browser popup window, from your comment you just want to popup a simple html code so there is a lot of easy to use custom modals (popups) built using javascript.
try one of these (just a simple search for jquery modal window and you will find a lot)
Simple Modal
jQuery UI dialog
Thick Box
Bootstrap Modal
Edit
you can show your dialog this way ( jQuery UI )
<div id="popup" title="Basic dialog" style="display:none;">
<p>This is the default dialog which is useful for displaying information.</p>
</div>
<!-- button to show -->
Click to Show
javascript
$(document).ready(function(){
// show dialog on click
$('.showModal').click(function(){
$('#popup').dialog({width: 600,height: 600});
});
});
You cannot set window properties in HTML at all. All you can do in HTML to create popup windows is to use the target="_blank" attribute, but it only suggests that a link be opened in a new browsing context, which might be a new window, but these days it is more often a new tab.
What you are referring to is JavaScript code, not HTML. There are many resources, including SO questions and answers, on opening windows that way, as well on reasons for not doing so and using more advanced methods like modal dialogues.

How do I make a div visible on another page?

Right now, I have 2 separate pages and I want to be able to click something on one page that makes an image in a div tag visible on the other page.
This is how i made my div tag invisible.
On the other page, I have an image that is clickable, and i want it to make the div visible. Help please?
You'd need to set up some kind of web socket. When the image is clicked you'd fire off an ajax request which stores a flag in a database. The other page would be listening for that flag and when it changed the image would become visible/invisible.
Check this out
The simplest way to do so would be to set a cookie (or store the state in browser local storage, but that is not available everywhere) when you click your button, and have the other page poll for it.
Server-side solutions like sockets or session variables look like A-bombs swatting flies here, but that would surely improve your cool factor by a few thousand points.
This seems like a pretty weird design in the first place, but surely you have your reasons...
If the first page triggers the second page to open you could use javascripts window.open() and pass in what to display
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open a new window called "MsgWindow" with some text.</p>
<button onclick="myFunction()">Open window</button>
<script>
function myFunction() {
var myWindow = window.open("", "MsgWindow", "width=600, height=300");
myWindow.document.write("<p>This is 'MsgWindow'. I am 600px wide and 300px tall!</p><div> <img src='http://www.jyte.com/wp-content/uploads/2013/11/google-hummingbird.jpg' alt='nothing' /> </div>");
}
</script>
</body>
</html>
the best option would be using a web app using controllers, views, modules and services like angular where the first page controller can update the service and the second page controller would have the service injected so when the service changes it updates the scope which in turn updates the view.
other options would be using backend databases and ajax to store the click and having the second page check very second for update in the database and then update the page, but this method is really not practical (running an ajax request every second).
another option is using the browsers local storage, (not supported in all browsers) here is a link
local storage.