How to implement gmail compose window concept in Single Page Applications? - javascript

I am working on a project where it would be easier for users to quickly add transactions.
I am very much interested to do something similar to what gmail compose pop up does on the single page
I have no idea how to implement such a thing. Please give me directions about how to do such things
I am interested in building it using AngularJS
P.S Sorry for a broad question, but I really don't know what this is called and don't know what to Google for either

You can construct a popup like that very easily using a regular div element and some CSS. In particular, the position: fixed CSS property will let you put something at a position on the window, no matter how it scrolls.
Here is a simple JSFiddle that demonstrates the technique: http://jsfiddle.net/BinaryMuse/ndr2Q/
You can click the titles of the books to expand their description, which will hopefully make the preview window tall enough to scroll. (If not, just resize the window.) No matter where in the document you scroll, the "popup" window (which is just a regular element with an ng-show and some CSS) stays at the bottom-right of the screen.
You can find libraries, like Bootstrap, that present jQuery plugins to allow you to do popups on the page, but in general they're designed to prevent the user from interacting with the page behind the modal in any useful way. A technique like this allows you to scroll around and use the page in the background similar to Gmail's interface.

Dockmodal is a Gmail like dockable modal plugin that has the option to minimize and restore opened modal dialogs.

Check out these angular JS alerts based on bootstrap:
http://mgcrea.github.io/angular-strap/#/alerts
You can use the provided $modal service that takes a template URL as well :
var modal = $modal({template: '/js/app/views/elements/modal-welcome.html', show: true, backdrop: 'static'});
And shows it up as a popup.

Related

How to load another html/url in electron browser window( index. hml using html5 template)?

Sorry for the naivety in the question. explaining it here.
so i used this sample electron app from this repo:
https://github.com/crilleengvall/electron-tutorial-app
here he used html5 template to navigate within the browser window,
explained here: https://www.christianengvall.se/electron-app-navigation/
on the welcome page/section, i want to create a button, which loads another html file but in the section, not like filling up the whole browser window because i will still need the side bar panel for navigation.
somewhat like this:
also, is it possible to add a option in the menu where we can show/hide any new browser window created?
i would be obliged to give more details if i didnt make myself clear.

How do I move an html dialog window? (Google spreadsheet apps script dialog)

In apps scripts, the html dialog pops up square in the middle of the window. I want to move that out of the way because the user's interaction with the dialog will show up in the spreadsheet behind the dialog. Seems like a good thing to allow the user to see what is happening there.
I can change the height and size of the dialog window, but there is no method to move the window. Spreadsheets can't have app script generated sidebars and I tried to do it in javascript: window.moveTo(0,0) : no dice.
Another way would be to reduce it to something small and then popup a jquery window over it, which could be moved:
Browser Pop up in Google Apps Script
Any best practices for this problem? Otherwise, I jquery seems to offer the best solution.
Thanks!
After some thought, I find that a webApp is the best way to go. It gives complete control of the window and it can be launched through the menu of the calling spreadsheet. (I'm still working on the application, but a webapp seems to be the best way to go, especially since there is jquery for fancy interaction.)

Accessing CSS Properties inside a Popup Window

I don't think this is possible but I thought I'd ask anyway.
I'm building a Wordpress plugin for sharing buttons and Buffer doesn't have a mechanism to return to the site if you locate in the same window, so I built out a nice popup that will fetch the add link. This works great except that the buffer add page creates a modal dialog that is positioned 100px from the top.
This creates a nasty 100px space above the dialog. See here:
I was wondering if it's possible to change the css inside that popup window, or perhaps find a way to have the window directly access just the div with a specific id?
The modal is draggable as well, so maybe create a drag action to drag it up to the top?
Any ideas would be helpful.
--EDIT--
Adding Fiddle as requested.
Not sure what the size of the window will be when you're not logged into Buffer, but you'll get the general idea of how the spacing is messed up at the top ... maybe.
SO won't let me add a fiddle link without code the post is: jsfiddle.net/y6RQ7/6/

Creating iframe embeds and using modals

The company I work for is trying to come up with their own version of embed buttons. The logic is similar to what Twitter and Facebook offer. Unlike Twitter, we are using modals in-place of opening a new window. As the moment, we have developer a modal library which suits our needs.
Now, I will explain the process we are following:
Our embed script will be loaded in the user's website.
It looks for a link which we will provide to the user, and an iframe will be loaded in place of it.
The iframe uses two scripts — jQuery and our modal library.
On clicking the button present inside the iframe, the modal should open but it is present on our domain and it should open in the parent window.
From my analysis of the situation, I have come up with the following questions:
I have looked around the net but I have a feeling that opening a modal inside a parent window is not possible. Is there a workaround for this?
To prevent clickjacking we have set X-Frame-Options to SAMEORIGIN. How can we load content in an iframe from our website?
If we skip loading the button inside the iframe and modify the parent DOM, we can use our modal script, but applying our own styles to the buttons becomes a pain as we will be using important! for all styles. What other options are we left with?
To answer your first question, it isn't impossible as I've done something similar, thus I think it should solve your third question as well.
So on the parent page you would have a script such as
function showModal(display) {
var colorbox = $('#colorbox');
var overlay = $('#cboxOverlay');
if (display) {
colorbox.fadeIn("medium");
} else {
colorbox.fadeOut("medium");
overlay.fadeOut("medium");
}
}
I've used colorbox but you could use your custom modal, I've also used a parameter so you can show and hide it as you please.
Then from your iframe you could use this script to call your modal
javascript: window.parent.showModal(true);
Hope this helps.
1) Why dont you just open the modal from the iframe? It will make no difference if you call it from parent window or the child window.
2) Use JSON-P

HTML website design, links opening smaller windows on the page

So i tried searching for what I looked for but I couldn't really find exactly what I was looking for, if it even is possible that is.
What I'm looking for is a way to make the links people click on my website appear almost as ads, not a seperate window or tab in the browser but its own small window on the current tab itself. I made a image as a sort of example of what I mean. I don't know if it'll do any good but its worth a shot, I'd love to have it be able to work with Coolmenu as well. And if people wanted to open them in a new window or new tab, they could just right click, like below:
Update: 10:32 7.11
I realized that both of these links, as well as when i searched for some on my own all date form like 2006-2009, whereas all of them use
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>
I think I can just write () (correct me if im wrong) as well as the paragraph stuff, but what should I do about all the ? should I just straight out remove it or replace it?
Update 10:50 7.11
I don't got more time to work on it today but next time I got some time, should I post all the other javascript and css I have on my page (only coolmenu that is) to give you some sort of idea of what exactly I want to accomplish?
And again, thank you all for the great help.
Update 12.11 08:05: I'm having trouble getting it to work together with Coolmenu.
I can provide with my css and javascript code for both coolmenu and the window thing if required, should i upload a .txt or just put it here?
Modal Windows
I guess you wanna make Modal Windows. You can easily do that using this tutorial here: Simple jQuery Modal Window Tutorial.
Screenshot:
Demo here: Demo
jQuery Dialog
Or you can even use jQuery Dialogs, which uses same principle, but easy to implement.
Although you don't want to open a new window, this is the quickest way you will get it to work how you want and involves the least amount of javascript.
Code:
Hi
Parameter 1 is the URL, parameter 2 is the name of the window.
In the 3rd parameter you can pass the following options:
status: The status bar at the bottom of the window.
toolbar: The standard browser toolbar, with buttons such as Back and Forward.
location: The Location entry field where you enter the URL.
menubar: The menu bar of the window
directories: The standard browser directory buttons, such as What’s New and What’s Cool
resizable: Allow/Disallow the user to resize the window.
scrollbars: Enable the scrollbars if the document is bigger than the window
height: Specifies the height of the window in pixels. (example:
height=’350′)
width: Specifies the width of the window in pixels.
For more info click here

Categories

Resources