I wrote a custom Polymer element that lets the user pick a month. You can look view the code at https://github.com/HoverBaum/month-picker
No I want to use this to select a range of dates. So the user should select a start and and end.
I added two of my elements to a page, to try this out. However for some reason I can only change the selection of the second element. This looks like the two are somehow interfering with each other. Usually I would say "of cause they use the same ids etc." but I was thinking Polymer would take care of these things.
Here is my little demo page:
<div id="timespan">
<span>Start <month-picker></month-picker></span>
<span>End <month-picker></month-picker></span>
</div>
The way the works is that it shows the selected date and when you click it a dialog is opened that lets you change the selected month. But for some reason both element only open the dialog for the second .
Was able to solve this problem by sticking more closely to the Polymer syntax. I was trying to not define everything in the options object handed the Polymer function. As it turns out that prevented me from accessing the right dialog.
Related
I've googled and found nothing, so here I am. If this is in the CKEditor documentation, I haven't found it there either.
The powers that be want a user to be able to double-click on a piece of text (say, a word) in CKEditor, and have that be able to open up a new HTML element outside of CKEditor (such as a Bootstrap Modal). Is this even possible, and if so, how do I go about it?
For example, I've written a separate "Agenda Builder" which is really just where you pick some stuff from drop downs like the name of a meeting room, how many seats you'll need, etc, and enter some dates and times. That all gets saved to the database. But in the text in CKEditor, they want to be able to double-click on [[agenda]] and have it then open up that feature for the user to create their agenda and save it (an entirely separate thing from CKEditor), and then later I will "insert" the agenda into the document in place of the [[agenda]] tag. Make sense?
Thanks!
I think I manage to find the answers to these after posting the question... here's what I came up with:
editor.on('doubleclick', function(e) {
var element = e.data.element.$.innerText;
if (element =='[[agenda]]' ) {
alert("clicked on agenda");
}
});
We solved this exact scenario by creating a CKEditor Plugin(for our own use). When you highlight a word and select a drop down from the plugin, it edits the element highlighted.
In our scenario we used an Angular directive for the navigation.
I have a form which have a select drop down. i have disabled it by default and will re enable it based on some conditions. i don't want anybody to access the select option values when it is disabled(now it can be viewed by inspecting the element from browser). how do i make it secure?
I don't think you can. You might be better off populating it when it's needed instead of enabling it. You could do that with an Ajax call.
You need to use ngIf directive.
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
Usage
<select ng-if="someCondition"></select>
If you use a simple binding library like knockout.js you can use container-less binding which will only render the select DOM when you want.
Knockout is is a great little library which plays nicely with most other libraries so shouldn't cause any trouble, all you ned to do is import the js file.
Container-less binding will only render the DOM when it needs to, so inspecting the page element will not display the select box.
<!--ko if: IsShown -->
<select>Render Me</select>
<!--/ko-->
Here is a simple fiddle to show you how to make it work.
Knockout Containerless Binding
You could avoid rendering it, which would hide it from the DOM inspector, but the data would still be in the browser and available to a user who cared to look in the right place.
If you don't want the user to see the data, then don't send it to the client in the first place.
When you want to display the select element, make an Ajax request to the server. Then perform authentication and authorisation to make sure the user is allowed to see the data. Then return it in the response and have Angular generate the select using that data.
There is no way to hide part of code from viewing by user in browser, because browsers have to see the code to run it, so it can be viewed by user. But, using php can help you to generate content for page only when it's needed. I think you can generate content for your drop-down, or the whole dropdown using that way.
I have 2 Select Box in my HTML page.
For some reason, I wish to want both the text boxes open at the same time.
This may be for several purposes, like taking screenshots of the both open at the same time.
The problem I face is, when I click on one selectbox, another goes away, when I click on the other, previous goes away.
Is it possible to keep both the selectboxes open at the same time?
I am fine if it requires javascript to do so.
Here are the two boxes, which I wish to keep open, is it possible to block some events or anything?
Thanks
#xiankai: Yes I have considered using a list view already, and then later instructing that this would/could be a combo-box. Here's my work with this modification.
If your select box doesn't have many elements, have you considering using a listbox view instead? Simply add multiple to the your <select> element. Additionally, you can specify the height of the select box with the size attribute.
A little web design dilemma: I have a form with a lot of options, mainly radio buttons but not only.
I want the form to open up gradually, meaning at the beginning only two radio buttons are visible, and after the user picks one, more options appear under the chosen radio button. If the user then switches the pick, the page updates and shows the options under the new pick.
This happens on several levels, say 4 or 5 levels, and at the end there is a submit button that submits only certain inputs according to the branches the user chose. Also some of the branches have identical components even though the initial choice was different.
These are the options I could think of:
Build the complete form in the html body and use jquery to hide and show them according to the choices of the user. This means I have to write sections that repeat themselves twice.
Write nothing in the body, and append new elements when the user makes certain choices. This means the JavaScript is more complicated, because I have to make sure nothing appends twice.
Write an HTML skeleton of the form, and use append to fill it. Then use jquery to show and hide elements. This has none of the disadvantages but seems a bit unaesthetic.
Which one should I pick? Any better ideas?
It really comes down to your knowledge of javascript. The cleanest way would be to append to form using javascript. This way you can avoid having duplicates in your form.
If you are not that familiar with javascript and don't know how to append the form, then I would use javascript to show/hide the different parts of the form.
I think using javascript to append would be the correct way, but I don't see anything really wrong with using javascript to just hide parts of the form.
Probably going to use http://wiki.jqueryui.com/w/page/12137997/Menu
or JStree (http://www.jstree.com/) which I found out about from here http://wiki.jqueryui.com/w/page/12138128/Tree
I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png
I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.
For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.