Edit a child widget from its parent widget's modal only - widget

I have a widget that has an Area available to add several other widgets within it as children. Is it possible to make it so a user can only edit the child widgets from within the editing modal of the parent widget and not from within the webpage itself?
I'd like this to happen because no matter where I position the editing controls for the child widgets (upper-left, lower-right, etc.) the editing controls obscure the child widgets entirely and thus make them unusable when while user is logged in. I figure a good solution would be to only allow the user to edit the child widgets from the parent modal, but I cannot seem to figure out how this is done.
I know the ContextualOnly parameter allows for the direct opposite of what I am asking, in that it removes the ability to edit a widget from the modal interface, and SkipInitialModal is obviously not the answer either, am I missing something?
I suppose another solution would be to wrangle the controls via CSS, perhaps even removing the controls via display:none, but I'd like to avoid overwriting Apostrophe's CSS for as long as I can, if possible.
Any thoughts?

I figured it out. You can add { edit:false } to the widget configuration to disable the editing interface yet keep it turned on in the modal. Here is a snippet from my widget.html file as an example.
<div class="navigation-section__links">
{{
apos.area(data.widget, 'navigationLinks',{
widgets:{
"navigation-link":{
edit:false
}
}
})
}}
</div>
I found it accidentally by studying the sample code in the documentation tutorials. Hope this helps someone in the future.

Related

How to create popup windows in html

I want to know how the pop up windows integrated into websites are built. I am trying to create one for my websites but i don't really know it is created whether they are plugins or not. Any help as to how to go about it.
Below is an example of what i want to do.
You can use hotjar.com to put a feedback box in your page, there is a lot of services that provides this feature, but hotjar gets the job done
Beginner! To make a pop-up like the one you provided, you would need to write backend code (Node.JS, PHP, Python, etc.). But for just a simple info pop-up with a button that activates the pop-up refer to this jsfiddle I created:
https://jsfiddle.net/d706dyg7/1/
$("#whateverid").click(function(){
//whatever code
});
That mean when that element is clicked blah happens.
Hope that helps,
Ben A.K.A BlackSky
P.S. If you want a solution in pure javascript and not jQuery just let me know and I will edit my fiddle!
I know I'm like .. 10 years late. But for anyone still wondering I thought I could be of some help!
If you want to do this using ONLY html and css (using a framework in visual studio like ASP.NET) for example.. here's what I did:
First, I made sure I had multiple "divs" in my code. For me specifically, I had two main ones. The first one whose id="main", and another whose id="popup" with the 'visible' property initially set to 'false' for the popup div.
Then, on whichever event you're looking for (button click for example) you'll simply set main.Visible = false and popup.Visible = true, then you could have more buttons in your popup (yes, no, cancel, confirm, etc.) which do the exact same thing, but in reverse!
The most important thing to make sure of is that you have the 'runat="server"' property in your divs so that you can access them in your CS code
Hope this was helpful! :)
Your looking for something called a modal. Depending how you wrote your HTML there are different ways of approaching this issue.
If your wrote your website in Plain HTML you can use the following tutorial to create one
www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/amp/
However if you wrote your website with a library such as Bootstrap they have built in pre made modules that you can attach to your cpde. These can Ben found in the library's documentation.

Tab through a webpage manually

I am trying to navigate through a webpage using just my keyboard. Through the use of my tab key I can enter in data into several input boxes, and press several submit buttons.
However I run into a problem when trying to set focus to an image element on the page. For some reason it does not allow me to select it with the tab key. I can click on it with my mouse and then a popup appears but this really slows down efficiency.
I have considered creating a script in VBA to do this but right now I would prefer a quick-fix without having to spend hours developing a macro.
NOTE: I did quickly try to assign the reference to the <img> element and use the Click and Focus methods in VBA but that didn't work. I don't get an error, the code runs fine but nothing happens on the webpage. This leads me to think that this will be a bigger project than it appears, hence my reluctance to go down that path.
I did a bit of research and it seems that tabindex is not supported by the <img> element. Does that mean what I am trying to accomplish is impossible with the keyboard? Is code my only option?
If anyone knows anything that could help in VBA by all means I will take your advice into consideration.
Unfortunately the webpage is password protected and its a company account therefore I cannot post it.
After right-clicking inspect element in my Chrome browser this is what I see:
<img alt="View Quantities At Other Locations" src="/WebOrder/Images/CheckQtys.gif"
title="View Quantities At Other Locations" class="popup"popupdirection="upperleft"
popupwidth="380" popupcontent="#ProductQuantitiesForAccessibleBranches"
onbeforepopupcreate="onBeforePopupCreate_GetProductQuantitiesForAccessibleBranches(this)"
popupajaxformid="GetProductQuantitiesForAccessibleBranches"
onbeforepopupajaxpost="onBeforePopupAjaxPost_GetProductQuantitiesForAccessibleBranches(this)"
oncompletepopupajaxpost="onCompletePopupAjaxPost_GetProductQuantitiesForAccessibleBranches(this)"
productguid="00000000-0000-0000-0000-000000058927" displayitem="732899500"
brandguid="00000000-0000-0000-0000-000000000000" brandname="" brandsku="">
Does anyone have any ideas how I can set focus to this element (either with my keyboard or VBA)?
You can focus on a div using <div tabindex=0> Stuff Here </div>. Place the image inside the div and use the div to manipulate it.

Html popup window, the parent should have no access

I'm trying to create a popup() where user clicks on button, then it triggers window where he does some edit.
While the user is editing in the child window, parent window should not be accessed, it should be blocked.
How exactly should i do this?
This is what i'm doing now.
function Popupwindow()
{
name = "Select Requestor";
url = "selectLocation.html";
options = "height=330, width=210, location=no, scrollbars=yes,menubars=yes,toolbars=yes,resizable=yes,left=0";
window.open(url,name,options);
}
So now i'm able to close parent window and even edit parent elements without closing child window.
What you want is called a modal dialog. There's no standard way to do this across multiple browsers, some don't even have anything like it. Your best bet is creating a modal dialog inside the page. Most JS frameworks/toolkits will provide dialogs.
don't use "real" popups, use javascript to "emulate" them in teh same window. take a look at jquerys dialog, where you can also set the modal-mode (example and example) - i think this is what you want.
there are a lot of standalone-js examples out thre if you're not using jquery and a lot of js-frameworks include things like this - just search for "modal dialog".

PyGTK: Packing widgets before tabs in a gtk.Notebook

Basically, what I want to do is put some buttons before the tabs in a gtk.Notebook. I tried making my own notebook type widget and it worked well, but it would have required lots more work to make it as flexible as I would like, also it wasn't as efficient.
Here is a mock-up of what I'm trying to achieve: http://imagebin.ca/view/84SC0d.html
Any ideas would be much appreciated, thanks.
Ben.
You might be interested to know that this functionality has been added in GTK 2.20, see "Changes in GtkNotebook" in the following announcement: http://mail.gnome.org/archives/gtk-devel-list/2010-March/msg00132.html
It's a hack, but you can put your widgets on a separate tab, and then prevent the tab from being clicked by registering the following switch-page event for the notebook:
def onTabsSwitchPage(self, notebook, page_notUsableInPython, pageNumber):
# Don't allow to switch to the dummy tab containing widgets
if pageNumber == <put correct tab number here>:
notebook.stop_emission("switch-page")
Note that this doesn't look good with all GTK themes, but it works...
I don't think there's any way to do it without making your own notebook widget. There are a couple of hacks. One was posted by AndiDog. Another is to hide the tabs altogether (notebook.set_show_tabs(False)) and make a toolbar with buttons above the widget, with your buttons on the left, plus one button for each tab in the notebook that switches to that page.
Instead of making your own notebook-type widget from scratch, you could inherit from gtk.Notebook, overriding some of the methods like expose_event, size_request, and size_allocate, in order to deal with two types of container children: pages and buttons. I don't know how to do this in PyGTK though, only in C.
You might also consider whether the buttons in the tab space are really what you want. What if the user resizes your notebook small enough that some of the tabs disappear? Where do the previous tab/next tab arrows go? What happens to the buttons?

page break in HTML

i want to use page break in html that means the reader cannot scroll down further until he select a link for it.
<SPAN id=title><A name=BdToc_1 external=yes><h1 id="BookTitle" align="center"><font color="#B90000"><b>Choose Subject</b></font></h1>
</A>
</SPAN>
<p>
Contents....
</p>
I want a page break before and after this. Please help me
Forgive me for pointing out the obvious, but page breaks are used to separate distinct pages. Each HTML document is a distinct "page". "select[ing] a link" traditionally loads a new page. So.... why don't you just load the next page when they click on this link?
You can specify where page breaks occur using CSS properties page-break-after, page-break-before. Of course, this works only when printing the web page. As far as I know, these properties are correctly implemented in all major browsers including IE6+. Additionally, you can also state that page break should not occur inside an element using page-break-inside.
If you want paging per se, you need to have HTML for each page and interlink these pages. Or you can fetch contents of each page using AJAX dynamically, which of course involves scripting.
It's not quite possible in HTML. You could try makeing something in Javascript, but anyone can dissable javascript.
Why would you want something like this?
You can use onscroll in javascript to control the scrolling. The onscroll event can determine the current position and there is a function to scroll up if the user is too far down.
Then, when the user clicks the link, you set a flag (scrollok=1). The onscroll checks the flag and now permits scrolling.
If you want to defeat people who have deactivated javascript, just make the content invisible until they click using stylesheets: visibility=none.
Then, when they click the link, you enable scrolling via the flag, and make the content visible.
If you don't know how to do these things, just leave a comment and I can be more precise.