How is a toolbar generate from this line? - html

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.

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

Popup windows for histogram with AngularJS

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
}

Custom CSS breaks bootstrap modal

I created my own home automation web app. To authorize actions the user needs to enter a pin. Instead of using an input/password field I want to use a dial/number pad.
I decided to go with this snippet. My big problem is: I'm not good with CSS. I understand HTML and can work with it (at least with Bootstrap). But I have not learned CSS yet.
But I want to display the number pad in a modal (which pops up when the user tries to press the "Turn of PC" button for example).
I copied the css and html from the link. But this is the outcome:
Can someone explain me which part of the css is causing this?
Thanks
Remove the <div class="container"> from the modal body, and change the class on your phone tag to col-md-8 col-md-offset-2 phone.
Updated JSFiddle
Full-screen results

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.

Dynamic Elements in JSP?

I am wondering how to create dynamic elements in a JSP webpage? For example, what I want to do is that I have a Selection Box, in which a user selects an image. Upon clicking a button (or possibly after selecting an item), the image will 'slide down' (like how PPT slides slide down when changing slides) and rest on the center of the screen.
Or at least another simpler case would be, when clicking a button, a text box will appear each time you click the button. So far, the only idea I have of this is by using visibility but that will limit me.
Can you help me on how to do these things or if it is possible to do these with only JSP? Additionally, is it possible for elements to 'pop up' (like in facebook photo viewer) without refreshing the page?
Thank you!
You want things to happen on the client, so you need to be focusing on the HTML, CSS and JavaScript. The fact you generate the HTML using JSP is irrelevant.
Build on things that work
Write JS logic for adding new content based on the form options
Write JS logic for manipulating the CSS to do the animation
Consider using a library such as YUI or jQuery to help with the JS, and using CSS 3 Transitions for the animation.