Trying to accomplish the above result with jquery.googleSuggest.js is giving me a lot of trouble as can be seen here. Some of the original CSS of jquery UI seems to be shining tough. Anyone any hints on the most elegant way to fix this? (And how to add the grey "gle", after "goo" behavior in the screenshot above?)
HTML
<div class="suggestions_box">
<ul>
<li>f<b>acebook</b></li>
<li>f<b>unda</b></li>
</ul>
</div>
JS
var div = $("<div>").appendTo("#inputs")
, input = $("<input>").appendTo(div);
input.googleSuggest({ service: "web" });
Your custom css in the linked fiddle is creating problems. Removing all the css and adding external jquery-ui.css makes the dropdown appear correctly (as seen in this fork of your fiddle).
Basically, you only need:
// html placeholder for the input
<div id="inputs"></div>
and
// js init code
var input = $("<input>").appendTo($("#inputs"));
input.googleSuggest({ service: "web" });
Also, your other question has already been answered in this thread: How to implement a google suggest-like input field? It's a neat trick accomplished by overlaying two input fields one above the other one, with the lower one disabled and set to the value of first suggested entry.
Related
I've implemented the following javascript code to use the autocomplete feature within the text field question in Qualtrics.
Qualtrics.SurveyEngine.addOnReady(function()
{
var textOptions = [
"Adam", "Athelney", "Baring"
];
jQuery('.QR-' + this.questionId).autocomplete({
source: textOptions,
minLength: 3
});
});
The code works; however, the autocomplete suggestions appears at the end of the page (below "Powered by Qualtrics" URL link). See the first screenshot:
I am not sure whether this is a bug within Qualtrics; however, I've tested the same code on an account provided by a different University (see the second screenshot below) where the same code works as expected (the suggestion appears right below the question, not at the end of the page) so I am left puzzled by this behavior.
Any ideas what may cause this behavior and how to resolve it? (both examples don't use any custom CSS or such but they are accounts hosted at two different Universities) Thank you.
Based on the comment above, copy the CSS html.JFEScope body#SurveyEngineBody ul#ui-id-5.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front rule from the working version to the Look&Feel>Custom CSS of the non-working version. The important part is the contents of the rule. Presumably they are different.
Although the classes are in a different order the only difference between the two selectors is the id of the ul element. Make sure you use the correct id (they may be different in the two surveys).
A bit late, but jquery autocomplete looks for .ui-front on a parent element; if it's not set you need to explicitly add a selector with the appendTo option in your custom js code for that questions.
var yourSourceList = ['foo', 'bar', 'baz'],
$elem = jQuery('.QR-'+this.questionId),
$elemParent = $elem.parent();
jQuery($elem).autocomplete({
source: yourSourceList,
minLength:3,
appendTo: $elemParent
});
I am using a third-party survey software (Qualtrics). I have a survey question, and the answer is a drop-down menu. You can see this at the bottom of the page at alsquest.org and in the image below.
I want to center the drop down menu under the question text. (Failing that, another option would be to indent the drop-down menu so that it aligns with the rest of the text; I believe the current indent is 120px.)
I have access to the HTML for the question text, but the only way I can modify the answer drop-down menu is to use JavaScript. Qualtrics allows you to add JavaScript, but I am not a coder so I have no idea what code to use. This is the code shell that they provide for the JavaScript:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
});
My question is, what JavaScript code do I put there to center (or indent) the drop-down menu? Any suggestions or questions would be appreciated.
To do this in JavaScript, you need to 'get' the HTML element from the page, and then set the CSS style. You could do it like this:
var dropDown = document.getElementById("the-dropdown");
dropDown.className = "dropdown-css-class";
Then in a CSS file included on the HTML page you would have to define the class:
.dropdown-css-class {
margin-left: 120px;
}
or like this:
var dropDown = document.getElementById("the-dropdown");
dropDown.style["margin-left"] = "120px";
Without seeing the HTML I can only guess at how you would center or otherwise align the drop down, but this should get you going. You can experiment with jsfiddle.
I guess you can change css by jquery like this:
First you need to find id or class of that dropdown menu. After that you can add jquery code to the code like this:
$("HERE GO ID OR CLASS FROM THAT ELEMENT").css("align","center");
or what ever you want for css.
But if you have more dropdown menus. You should get class and say
$("CLASS NAME").on('click', function(){
and here get id from clicked one and then use above code for changing css
});
This is best done with CSS. In your case, you can add the following code in the "Custom CSS" section of the Advanced Look and Feel Settings:
#QID2 > div.Inner.BorderColor.DL > div > fieldset > div {
text-align: center !important;
}
Note that this will only work for that specific dropdown in that specific survey (Nothing else will be affected). If you change your survey theme it may no longer work for you so watch out for that.
As an FYI I worked in Qualtrics Support for a year.
I have been using CKEditor for some time and it has worked great. I've pretty much gotten rid of any problems that ive had but this one i cant seem to figure out. When i add inline attributes to elements for instance style = "color: #ff0;" on a <p></p> tag they are stripped out when i switch from wysiwyg to source view. No saving or submission is done and ckeditor is has been added to my site which is my own script. Any ideas as to what would cause this. All of the search results i can find correspond to this happening in Drupal but Drupal seems to be the problem not the editor in all instances. Thanks again!
It feels like you're using CKEditor 4.1+ that comes with Advanced Content Filter (ACF). If so, you need to specify config.allowedContent and configure it to get your things working. You may also be interested in config.extraAllowedContent.
See this answer for more details.
For anyone looking for a simple sample on how to enabled additional markup in CKEditor without disabling ACF completely, here is a short snippet:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'style;*[id,rel](*){*}'
} );
extraAllowedContent here enables the <style> element, allows two additional attributes (in square brackets) for all (* is a wildcard) already allowed elements, allows usage of any class names (*) for them and allows usage of any inline styles {*}
hi you can stop ACF easily . by default your configaration is---
function ckeditor($name,$value='',$height=300){
return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{});});</script>';
}
just add this in the curly brackets:
allowedContent: true
now your configuration will be:
function ckeditor($name,$value='',$height=300){
return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{allowedContent: true});});</script>';
}
I faced the same issue and below answer solved my problem:
config.allowedContent = true;
config.extraAllowedContent = '*(*);*{*}';
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
I had the same problem, that ck was stripping not only some attributes, but whole elements when pasting a block element, inside a block element (div with some attributes pasted inside a p) while using this method:
editor.insertHtml(html);
what solved the problem was using this workaround instead:
editor.insertElement(CKEDITOR.dom.element.createFromHtml(html));
I am trying to enhance the menu of my website a bit by making use of the jQuery accordion plugin:
http://jqueryui.com/accordion/
This works perfectly fine and i think that it is a great plugin to make use of... However, i have noticed that it requires a specific layout in order to achieve these results:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
ETC...
</p>
</div>
NB: repeated for every result
</div>
Now this is a bit of a problem in that when javascript is disabled, the entire output of this menu is displayed (all categories and containing information).
This is simply too much information to be output all at once and this is the reason that it has been broken up with PHP in the first place. In essence it would look like this:
// No category selected
* Fruits
* Vegetables
// Category selected
o Fruits
- Apples
- Oranges
* Vegetables
// Javascript Disabled
o Fruits
- Apples
- Oranges
* Vegetables
- Potatoes
- Onions
So what i would like to do, is provide an alternate means of navigation for users that have disabled javascript (the old menu that is fully functional and works regardless).
I currently make use of a few options in modernizer:
http://modernizr.com/
To increase browser support on some CSS properties i have used. I am aware that it can be used to detect if javascript is enabled by appending a class "js" to the body tag.
So with that, i decided to try and wrap the old menu within a containing div, and the new menu within a containing div. My idea is that i can then these divs with display: none;.
Before i carry on, i am really just guessing here so if i am going about this the wrong way... I would appreciate it if someone could point me in the right direction. With that out of the way, i found an article on stackoverflow that relates to this:
PHP & <noscript> combination to detect enabled JavaScript in browser
And with my very limited knowledge of jQuery have adapted it slightly to fit what i hope to achieve:
<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
})
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
// JS Enabled
$("#oldMenu").css("display", "none");
$("#newMenu").css("display", "inline");
} else {
// JS NOT enabled
$("#newMenu").css("display", "none");
$("#oldMenu").css("display", "inline");
}
</script>
Now the problem I am facing is that i cannot seem to get this script to register or make any visible difference. When i look at the body tag in the source there is no class on the body tag. The menu is not triggering as i thought it would and i am now after quite some time... Very confused.
If anyone could offer me some assistance, advice, information or indication that would help me to solve this current issue, i would really, REALLY appreciate that!
Thank you for taking the time to read through my line story! :)
EDIT:
#RomainPaulus suggested this and it works:
<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
// JS Enabled
$("#oldMenu").css("display", "none");
$("#newMenu").css("display", "inline");
} else {
// JS NOT enabled
$("#newMenu").css("display", "none");
$("#oldMenu").css("display", "inline");
}
})
</script>
Kenneth's response explains a lot, but I have noticed something else. Your code
var useJS = $("body").hasClass("js");
is executed before
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
})
You should put everything inside the $(document).ready(function(){ ... })
So I guess that explains why your code doesn't work.
The problem you face here is that, obviously when Javascript is not enabled, you're Javascript is not executing.
What you need to is hide the DIV by default with CSS. Then, when your page loads, show it through JS.
Javascript disabled => Div stays hidden, because no code is executed
Javascript enabled => div is hidden on load, but the script shows it
Also, if Javascript is disabled, Modernizr won't help, since it's a JavaScript library.
I have an image that will form the background of an html page, and I want to superimpose speech bubbles over it. I've figured out how to make bubbles with css, and set their placement. But I cannot figure out how I will populate the bubbles (the div elements). Text messages will populate files, and I need to grab the strings and display them in the bubbles, refreshing the bubble content as messages come in. Any thoughts?
Assuming one of your bubbles contains a DIV which looks like this:
<div id="bubble1">This is the text</div>
You can use Javascript to easily change the text content. Using a JS library like jQuery is recommended. Here is a code example which changes the text:
<script>
$(document).ready(function()
{
$('#bubble1').text('This is the changed text'); // to change the text
$('#bubble1').html('This has <b>some</b> formatting'); // to change the html
});
</script>
Don't forget to include jQuery itself with a line like:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
I couldn't understand where you are getting your strings from, if you let me know, I could update the answer.
If you are unfamiliar with jQuery, take a look here.
I think this will answer your question:
http://nicolasgallagher.com/pure-css-speech-bubbles/
Keep in mind that this is css3, so older browsers can have problems with that.