I want to make a modal dialog like prompt() method. How can i make a prompt dialog with 2 input like this one :
with plain javascript (without using any jquery/javascript framework).
Is it possible to create such prompt ?
These are native browser-specific controls that you cannot modify. Also for alert, prompt, and confirm, you may only supply values to them. Please see also this answer
for a modal prompt, my suggestion is:
create a screen filling div to get the modal result:
<div id="modalDiv" style="position: absolute; top: 0px; left: 0px; width: 100%;
height: 100%; z-index: 4; display: none"> </div>
create a div for the prompt, with a higher z-index and with the text fields, labels, buttons and everything you need. Have it centered on the screen.
make a function customPrompt (or whatever name you like) in which you set the display of both divs to "block" and to the OK button set a function that handles the input for whatever you need.
Related
Is there a way to announce a Successful message using an alert/status role without showing anything visible on the screen for the user?
I tried creating an alert div dynamically but the user could see the success text displaying on the screen. I need it to just be announced and don't give any visual feedback to the user.
var newAlert = document.createElement("div");
newAlert.setAttribute("role", "alert");
newAlert.setAttribute("id", "alert");
var msg = document.createTextNode('You have Successfully updated your phone number');
newAlert.appendChild(msg);
document.body.appendChild(newAlert);
You can hide it from the screen using CSS, with the off-screen technique.
If you are using bootstrap, there's a .sr_only class doing that. Otherwise, you can easily find the corresponding CSS code.
Basically it looks something like this:
.sr_only {
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
left: -2px;
top: -2px;
}
Don't use display:none, visibility:hidden or width/height:0, as those are also going to hide the message for screen readers, and as a consequence, the alert won't be spoken.
Note that you can't hide the message from the screen reader's display as known as virtual buffer. If you want to do so, the best you can do is removing the element from the DOM after a few seconds.
You must wait long enough for the message to be spoken entirely, as with some screen readers, speech is cut when the element is removed.
use css
.alert{
display: none;
}
or
.alert{
z-index: -100;
}
I am using oracle apex 5.0 with theme: Universal Theme - 42. I am currently clicking on a SEARCH Button in order to submit the page. I call the following function:
javascript:apex.submit({request:'SEARCH',showWait:true});
This function call above creates the spinning symbol in the middle of the page, but the user still has the ability to click another button or even the same button. I was reading this post http://rimblas.com/blog/2015/08/enhancement-to-waitpopup-on-apex5/ which says use this function call: apex.widget.waitPopup();.
I used this as well, and I am have the same issue as when I use the first submit function. I looked at an example apex application where the functionality was working, and there is a div overlay element which appears in order to block the page.
Does anyone know if I need to change the theme/add a plug in/ or do anything else in order to get the div element to appear with the wait icon after submission? Any ideas or thoughts are helpful, thanks.
This is the thread that helped me get the correct answer: https://community.oracle.com/thread/3925427?sr=inbox&ru=252540.
The solution was to add css to the inline css of the page. Now both the url and dynamic action perform the expected way.
.apex_wait_overlay {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1001;
-moz-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
}
The better answer is this:
https://community.oracle.com/thread/4167853?start=15&tstart=0
Simply add the Page Submit TRUE Action to your Dynamic Action and set the Show Processing to Yes.
Then you don't even need any Enable or Disable Actions on your button.
I've two radio buttons with Drop down and I need to put the drop down
in parallel to the second radio button,when we add to the css code
the following its working but this is not a good solution since if I've
bigger page with other control this can override them either
#__box0 {
margin-top: 20px;
margin-left: 20px;
}
there is another option to do that with CSS?
http://jsbin.com/ziziqeyopu/edit?css,js,output
The Html is renders in the renderer method
This is SAPUI5
http://openui5.org/
code but for the question its not relevant since
renderer is related to pure html/css...
i've tried with the following which doesnt works.
.mylist-content>div:first-child {
margin-right:30px
margin-top:50px
}
.mylist-radiolist>DIV:last-child {
margin-left: 30px;
margin-top:100px;
}
If you still haven't figured it out, give this a try:
.mylist-content #__box0 {
position: relative;
top: 20px;
left: 20px;
}
What you see above should do the same thing as your first attempt, but not interfere with anything else on your page, by:
Adding extra application restrictions to the CSS rule, by having the .mylist-content scope restriction (even though this should not be necessary, in theory, because #__box0 is an ID and should be unique on the page).
Shifting the position of the dropdown without affecting any other elements - this is done with position: relative and the corresponding top and left offsets.
Without knowledge of SAP UI and/or your particular situation, I doubt someone will be able to give you a more appropriate answer.
My requirement is like I need to display the tooltip only at left side, I don't want it to be get displayed at right side. What are the css changes I need to do to achieve this. Please help me on this issue.
Note : I don't want to use any kind of Plugin, to do changes only in html (title)tooltip.
Html
<input type='button' class='sam' id='btnSubmit' value ='submit' title='Click here to submit'/>
CSS
.sam{
width:200px;
margin-left:120px;
margin-top:25px;
}
.sam[title] {
position:fixed;
top:100px;
left:50px;
}
Here I have attached the link that i have tried
JsFiddle Link
This is not possible without a plugin or custom code. You will have to implement a custom tooltip using HTML/CSS and dynamically show it on hover.
By the way: Your CSS-Selector .sam[title] matches every element which has the class "sam" and any title, to select all element with the title "hello" you would have to use this selector: .sam[title=hello]
As Fabio said, it is not possible to change the position of a tooltip. However, I can recommend making your own simply implementing basic JQuery and CSS.
First, make your tooltip in CSS. For example:
#tooltipbox {
min-height: 300px;
max-height: 500px;
width: 500px;
background-color:yellow;
opacity: .6
color: red;
position: fixed;
top: 10px;
right: 100px;
}
After that, you'll need to put it in HTML using a DIV.
<div id="tooltipbox">yourcontent</div>
Next you'll need to make a small jquery script.
$(document).ready(function(){
function toolTipper(myToolTip, objectHover, fadeInTime,fadeOutTime){
$(myToolTip).hide();
$(objectHover).mouseenter(function(){$(myToolTip).show(fadeInTime)};
$(onjectHover).mouseleave(function(){$(myToolTip).hide(fadeOutTime)};
}
toolTipper('#tooltipbox','.objectyouhoverover', 1000, 500)
}
Let me break it down for you. You made a div that has your tool tip text positioned where you want, styled however you want. Then in a script, we hide it so that when they hover over your object, that particular tooltip is then shown. When you leave that object, it disappears as should a tooltip should.
The code is rather simple; however to understand what I did, you'll need to understand basic Javascript and Jquery. I made a function with the parameters you'll need to enter for every tool tip you made. Lets say you made a styled word that needs a definition and therefore requires a tooltip. You first attach a class or ID to it which doesn't need to be defined in your CSS document. You just need it there for the script to find it.
In this sentence, chicken is bold.
Chicken is the object with a unique class of ".chickentooloject".
Next you make a unique tool tip div.
<div id="tooltipbox" class="tooltipbox1"> A chicken is a bird. </div>.
Why did we do this? So we also have a unique tool tip to be found by the script. The rest is up to the script.
toolTipper('.tooltipbox1', '.chickentoolobject', 500, 1000);
The code is untested, but it is simple jquery, so I am positive it'll work. If you're confused, leave a comment and I will help you more.
I want to display an input form attached to an input field like the datepicker does.
I've tried the "show" function, but instead of displaying the input form overlaid, it shows what was hidden and moves the rest of the page down.
There are many overlay libraries out-there, but none (that I've seen) attaches the overlaid form to the input field, like the "datepicker" does.
Is there a simple way to accomplish this? (preferably no other external libraries, other than jQuery or jQuery UI).
Thanks!
The problem you're having is CSS related.
Just apply some absolute positioning on the DIV you're showing via .show().
Example :
// jQuery is :
$('#yourDiv').addClass('yourDivClass');
/* CSS is : */
.yourDivClass {
position: absolute;
top: 50px;
left: 100px;
}
Adjust left and top values to your likings.
As far as I know, there is no library or plugin for this (correct me if I'm wrong). You should use CSS absolute positioning for the form, and set the top/left properties on the form to the offset of the input field. Here is a quick example of how I'd do it: http://jsfiddle.net/85ZkV/