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
});
Related
I've seen this type of question in Stack Overflow before and none of them help really. I've also Googled it but no dice.
I'm wondering if it's possible to hide the ID from the URL if the user clicks on the tabs itself?
This is the webpage:
www.planet.nu/dev/new-experian/index.html
Then when I clicked on a tab, this is what will happen:
www.planet.nu/dev/new-experian/index.html#dataTab1
I heard that using Javascript can actually hide that but I'm not sure how. My clients are really keen to hide such ID from appearing on the URL even though it does no harm.
This is where I got the plugin:
http://webthemez.com/demo/easy-responsive-tabs/Index.html
If there are no other solutions, then I might have to change the jQuery code for this. :(
What I've done is in 'easyResponsiveTabs.js' search for
var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString();
replace the line with
var newHash = "";
and then seach for
newHash = '#'+newHash;
replace the line with
newHash = ''+newHash;
Enjoy!
try jquery $("body").scrollTop() function. it will not show the id in the url bar and try not to use many plugins.
$('html, body').animate({scrollTop:$('#dividhere').position().top}, 'fast');
You could use:
window.history.pushState('object or string', 'Title', '/index.html');
Or:
window.history.replaceState('object or string', 'Title', '/index.html');
I often use it - you can find a more detailed explanation here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
What you are calling an "id" is a "hash", the hash is used to scroll to an anchor (by default) or can be used by JavaScript to signal things like tab switches, or internal page switches, or really anything you want. You don't always want to remove them (because it might break some JS functionality) but if you do want to you can use:
location.hash = "";
Don't use plugins you don't understand. This was made on purpose. Of course you can modify this plugin - set historyApi to false in line 24, but I advise to write some code from scratch and learn jQuery. Simple tabs are basics. Level 0... It's not hard.
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.
I have a JSON feed and I extract the values to populate a select menu with product sizes, colours/thumbnails, and get the values in an object, on submit.
What I need is to select an image by default, if its title is matching a value of a variable declared and initialised at the top (e.g. var initialColour = "Wheat";). So if initialColour is "Brown", the image with the title "Brown" should be selected by default and the sizes in the dropdown menu should reflect the selection.
This is what I am trying:
if(mainImg.attr('title') == initialColour) {
$(this).addClass("active");
}
This is on line 27 on jsfiddle link below.
JSFIDDLE COMPLETE DEMO
p.s. I would also appreciate any hints with regards the structure, I know its a mess.
Is this fiddle does what you want?
I changed some code in two places, I left the original lines there as a reference.
Basically, I assigned the image directly to mainImg. Then use that when adding the class too. Also, you missed a couple of 's in the image html here:
$("<img src="+constructImageURL(mainImgID)+" id="+mainImgID+" class='colourThumb' title="+colour+" data-value='"+colour+"'> ")
Part of the issue is that you're trying to set the active thumbnail within the for loop, when instead, a JQuery attribute selector can be used:
$("#colourId .colourThumb[title='"+initialColour+"']").each(function() {
$(this).addClass("active");
});
I've updated the original Fiddle showing that once all dynamic elements have been created, the statement above will do the trick. (Line 87)
In terms of style, it may be worth looking at one of the data binding/templating frameworks (e.g. KnockoutJS) which will make things a lot clearer in the code. There's a learning curve, but it is worth it for what you're doing.
I essentially have the same goal as in this question:
Calling a jQuery plugin without specifying any elements
However I am looking for the minimal edit to add a method to the "conclusion" built up in the jQuery plugin guide...which culminates in a jQuery "data" based tooltip plugin:
http://docs.jquery.com/Plugins/Authoring
I'm looking for the turnkey "right" way to add a method (the sort that finds its place in the list with reposition, show, hide, and update) for something that could be called with no elements. My case is I want to add a debug mode method you can call like:
$.tooltip('debug', true);
Like the author of the question I cite, I can get this working just fine with a parallel to:
$().tooltip('debug', true);
But the supplied answer wasn't cast in terms of the full-on .data-based tooltip plugin structure. So I can't quite figure out where to inject the offered advice of using .extend. Can anyone suggest the minimal edit to get the desired effect?
After looking at this a bit, I think the simplest modification to do is just to inject the extend call right after the $.fn.tooltip = function(method) { ... } and make it a synonym, like this:
$.extend({
tooltip: $.fn.tooltip
});
That seems to do the trick...and in the plugin's methods you just test to see if this is equal to jQuery (or $) to see if it's actually being called on "nothing".
I am interested in the floating effect of SO when pressing the newest link:
Which library would you use in jQuery to make the floating effect?
If you look at that page and view the source you can see exactly what they're doing. It's really only about 10 lines of javascript that scrolls to the section you want to sort when a link is clicked:
$.scrollTo("#answers-table", 400);
Then it calls the API using jQuery with the href supplied on the sort link:
var url = $(this).attr('href');
$.post(url, function(result) {/*function code is below*/})
Then the function that is specified for the callback replaces out the entire div you just scrolled to with the result:
var domelement = $(result);
$("#answers-table").html(domelement);
The actual tab styling is just specifying a different class for the link to change the color. This is also not exactly the order in which things are done but it's pretty close.
Someone please let me know if discussing the way StackOverflow's site works is against any sort of TOS.
This looks like tabs but with some CSS to make it look different.
http://jqueryui.com/demos/tabs/