Ajax auto-complete, with bespoke popup location - javascript

I'm doing something that involves ajax auto-completion of phrases in a <textarea>. I've got this working well using the jquery autocomplete plugin; however, it is hard-coded into this to position the popup below the <textarea>.
For what I'm working on, the <textarea> is at the bottom of the page; I ideally want the options to appear above the <textarea>.
Is there a similar existing (and half-decent) autocomplete script that would allow this? My other options are:
try to reposition it after-the-fact using more jquery
hack the plugin code to pieces to reposition it
write something from scratch (sounds simple, but there are a few nuances in a decent autocomplete)
Suggestions?
For info, here's what I ended up with:
#known-parent .ac_results
{
position: fixed !important;
top: auto !important;
bottom: 80px !important;
}

It's not the cleanest solution in the world, but you can overwrite the style properties that the autocomplete plugin writes by using "!important" in your css.
Styles belong in CSS as much as possible anyways.
If I remember correctly, the plugin sets the "top" value in the "style" attribute of the autosuggest div.
In your css you should be able to just do:
#whatever_the_id_of_the_box_is {
position: absolute !important;
top: {{ whatever value you want here }} !important;
}

Can you change the CSS of the popup and assign negative values to margin-top? That should move the content to the top, but your results will look a little weird as the relevant values will be on the top.
Wouldn't it also be possible to edit the autocomplete plugin to edit the style of the container and move the location of the box? I don't think it would be too difficult, but I haven't seen that plugin in a while.
<div style="display: none; position: absolute; width: 151px; top: 21px; left: 91.65px;" class="ac_results"></div>
You'd need to adjust this in the plugin code.
Edit: I actually wouldn't recommend this. There should be a way to reverse the result order in the UI plugin. Do that, and change the style values, and you should have a clean looking result set. I'll add the exact code when I get a chance

Related

How to change the position of a Tooltip

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.

how to style class element?

I have a js library on my website which is creating popups for me.
Im trying to style the popups but nothing is working.
the html output is
<div class="lpopup zoom" style="opacity: 1; transform: translate(435px, 200px); bottom: -6px; left: -54px;">
All that I have been trying to is change the bottom and left position.
When I inspect with fire bug the css is
element.style {
bottom: -6px;
left: -54px;
opacity: 1;
transform: translate(435px, 200px);
}
I have tried manipulating the css by doing
.lpopup, .lpopup zoom, .lpopup.style, lpopup element.style {
bottom: 30px;
}
But none of them are working, I've tried as many variations as I can think of.
I have also tried with js
$(".lpopup zoom").css("bottom", "30px");
and other variations
nothing happening though
Im really struggling just trying to change the element style of a popup.
Thanks for any help
The content in the style attribute is more specific then any rule-set, so it will always come last in the cascade and be applied.
The clean solution is: Move the initial CSS out of the style attribute and into the stylesheet. Then write your rules while paying attention to specificity.
The hacky solution is: Use the !important flag
The really nasty solution is: Use JavaScript to change the style attribute (which is what you are trying, but you have the selector wrong).
.lpopup zoom will match: <anything class="lpopup"><zoom> This element </zoom></anything>
You want .lpopup.zoom which will match an element that is members of both classes.
You need .lolup.zoom { css here }.
Sorry, I didn't fully comprehend the question like Mr. Alien did. Yes, inline styles will always override external styles, so you either need to use !important (which I'd avoid), or remove the inline style if possible.
writing style in your own page wont works....
You just open your popup js library and change the style which are added throught the script...
It is very easy way to customize your popup design in js file....
.lpopup{//css here}
.zoom{//css here} should exist in your css file.

Custom alert boxes NOT jquery where?

I have tried to find some custom alert boxes , which don't use some libs like: jQuery, Prototype etc.. I want to get plain sample, which has rich UI as jQuery but doesn't use it.
I have tried to google, but have found an army of jQuery samples... I don't need it. Maybe you have links on websites with the plain js samples, which don't use some libs?
Because I want to get plain samples with rich UI, which are not based on libs like: jQuery, Prototype.js, Enyo etc
Thank you!
I think these links wil help you:
http://www.codeproject.com/Articles/28812/Custom-Alert-Boxes-using-JavaScript-and-the-DOM
http://www.gayadesign.com/diy/customize-the-default-alert-function-of-javascript/
3.http://www.scriptiny.com/2008/04/custom-javascript-dialog-boxes/
It's not very difficult. Basically all you've got to do is append both something to cover the whole screen and something to show the content to the body and position them correctly and attach event listeners to the right elements to remove it at the right time. All (well, most) of the positioning and styling can be done with CSS. For example, to position the thing to cover the whole screen, you could use this CSS:
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
You might even want to make it a little translucent so it's easier to tell that the dialog is modal:
background: rgba(0, 0, 0, 0.2);
Try out a little example.

How to remove/change JQuery UI Autocomplete Helper text?

It seems that this is a new feature in JQuery UI 1.9.0, because I used JQuery UI plenty of times before and this text never poped up.
Couldn't find anything related on the API documentation.
So using an basic autocomplete example with local source
$( "#find-subj" ).autocomplete({
source: availableTags
});
When the search matches it shows this related helper text:
'1 result is available, use up and down arrow keys to navigate.'
How can I disable it in a nice way, not by removing it with JQuery selectors.
I know this has been asnwered but just wanted to give an implementation example:
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++"
];
$("#find-subj").autocomplete({
source: availableTags,
messages: {
noResults: 'no results',
results: function(amount) {
return amount + 'results.'
}
}
});
This is used for accessibility, an easy way to hide it is with CSS:
.ui-helper-hidden-accessible { display:none; }
Or (see Daniel's comment bellow)
.ui-helper-hidden-accessible { position: absolute; left:-999em; }
The top answer here achieves the desired visual effect, but defeats the object of jQuery having ARIA support, and is a bit dickish to users who rely upon it! Those who've mentioned that jQuery CSS hides this for you are correct, and this is the style which does that:
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Copy that into your stylesheet instead of removing the message, please :).
According to this blog:
We now use ARIA live regions to announce when results become available
and how to navigate through the list of suggestions. The announcements
can be configured via the messages option, which has two properties:
noResults for when no items are returned and results for when at least
one item is returned. In general, you would only need to change these
options if you want the string to be written in a different language.
The messages option is subject to change in future versions while we
work on a full solution for string manipulation and
internationalization across all plugins. If you’re interested in the
messages option, we encourage you to just read the source; the
relevant code is at the very bottom of the autocomplete plugin and is
only a few lines.
...
So how does this apply to the autocomplete widget? Well, now when you
search for an item, if you have a screen reader installed it will read
you something like “1 result is available, use up and down arrow keys
to navigate.”. Pretty cool, huh?
So if you go to github and look at the autocomplete source code, around line 571 you'll see where this is actually implemented.
Adding the jquery css also worked to remove the instructional text.
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
Since this is in there for accessibility reasons it's probably best to hide it with CSS.
However, I would suggest:
.ui-helper-hidden-accessible { position: absolute; left: -9999px; }
Rather than:
.ui-helper-hidden-accessible { display:none; }
As the former will hide the item off-screen, but still allow screen-readers to read it, whereas display:none does not.
Well, this question is a bit older, but the text does not show up at all when you include the according css file:
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />
Of course you have to insert an actual theme instead of YOUR_THEME_HERE e.g. "smoothness"
Style it how the jQuery theme itself styles it. A lot of the other answers suggest including a whole stylesheet, but if you just want the relevant CSS, this is how it's done in http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css:
.ui-helper-hidden-accessible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
The jQuery CSS .ui-helper-hidden-accessible is in the themes/base/core.css file. You should include this file (at a minimum) in your stylesheets for forward compatibility.
Adding this code right after the autocomplete in your script will push the annoying helper off the page, but the people using screen readers will still benefit from it:
$(document).ready(function() { //pushing the autocomplete helper out of the visible page
$(".ui-helper-hidden-accessible").css({"position": "absolute", "left":"-999em"}) //{"display","none"} will remove the element from the page
});
I'm not a fan of manipulating CSS with JS but in this case I think it makes sense. The JS code created the problem in the first place, and the problem will be solved a few lines below in the same file. IMO this is better than solving the problem in a separate CSS file which might be edited by other people who don't know why the .ui-helper-hidden-accessible class was modified that way.

CSS for dynamic inserted elements

Currently I'm working on a website where I'd like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.
So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:
<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>
However the design is done by our very own css-monster (you should this this guy!) and he's using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.
Now the question:
The following code in our .css File is not having any effect:
.tooltip{
z-index: 9001;
}
In fact the attribute is not even showing up when debugging the website. But the following will work:
$(".toolTipMe").tooltip({
onShow: function(){
$(this).css("z-index","9001");
}
});
I'm not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C
I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute
In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:
$(".toolTipMe").tooltip({ z-index: '9001'});
I'm not sure if it is z-index or zindex.. check it out

Categories