Develop Reference

Columns on bootstrap not in the same row

I have a weird problem. I have the following html codeHTML, but, the idea is that panelPrincipal starts hidden with the following code at js:
var panelPrincipal = document.getElementById('panelPrincipal');
panelPrincipal.style.display="none";
Once I have chose the main character with the panelSelecProta, a funtion change the style.display="none" to style.display="block". The thing is, I tested the panelPrincipal and it worked fine Correct position, but, when I set the display to block, the columns appears under the other.
bad position
I try to find where it fails, but I only find that the setting of display at function is what make it to fail, but I don't know why

#DanielLykos because you are using block that's why it is breaking the column and show in rows instead use
display:inline-block
This will solve your problem

Performing a Simple Math Operation in Real Time with Runtime Data in Qualtrics

I have a single slider on a survey in Qualtrics, and need to present the value on the slider from both "ends" (so if the respondent has placed the handle at the value 55, I need to have a box with "55" and "45" shown below the slider, since the maximum value is 100, i.e. 100-55=45).
I've managed to show the value of the slider with the user's input (in the above example, the "55") with this following snippet of HTML in the text question, which places a box somewhere on the page with the slider's value:
<input class="SumInput InputText QID29 QWatchTimer" data-runtime-value="runtime.Choices.1.Value" id="QID29" name="QID29" type="text" value="" />
However, I can't get the other box that displays essentially 100 minus whichever the runtime.Choices.1.Value is to work (the "45"). I've tried simply "100-runtime.Choices.1.Value", "100"-"runtime.Choices.1.Value", the same without any quotations, and just about every possible math function for CSS/HTML. I know that technically HTML only displays and doesn't really do this kind of runtime calculation (I'm a novice so this is as far as I've gleamed), so if there was any Javascript snippet or some other piece of code that would show in real time 100 minus wherever the user has moved the handle on the slider to, that'd be fantastic. I'm assuming some sort of addOnClick function but have no clue how to refer to anything on the slider to do this.
It's such a simple task but for some reason has taken so far quite a bit. Any help is appreciated; thanks!

I've managed to figure this out for the particular example of the slider, though I think the following Javascript should work for presumably many question types, given using the correct getChoiceValue (i.e. changing the "1" to the number corresponding to the element on the page whose answer value you want to obtain):
Qualtrics.SurveyEngine.addOnload(function() {
/*Place your JavaScript here to run when the page loads*/
var result=0;
var otherend= 0;
this.questionclick = function(event,element){
result = this.getChoiceValue(1);
endupdate();
document.getElementById("otherend").innerHTML=otherend;
document.getElementById("result").innerHTML=result;
}
function endupdate() {
otherend=100-result;
}
});
I then added the following in the HTML of the question text, wherever I wanted it to show up (I personally put it in a table so I could center things nicely on the page, along with some explanatory text):
<span id="result">0</span>
<span id="otherend">0</span>
Hope this saves somebody else some time and energy!

Increment when element becomes visible?

I am working with the skrollr plugin.
I have a set of arrows. One points down and the other up. When you click the down arrow it takes you to the next section/chapter of the animation. Right now it works great. But my issues is lets say the user does the following:
He/she scrolls half way through the page(lets say section 5). They then decided to see how much of the animation is left. So they click the next section arrow.
This user will be put to section 2 even though they are at section 5 because I have no way to detect when the user hits each section so I can update the arrow #hrefAnchor.
What I was thinking is adding an interval/ event listener that would detect when the section is visible on the DOM and update the arrows to take you to the previous and next sections.
Does anyone know how I can approach this idea?... and will work in ie >= 9

If you're willing to modify the Skrollr library, something I had done was add:
else if(prop === 'javascript') {
eval(val);
}
as an option in skrollr.setStyle which allows then for you to add a hook for arbitrary JavaScript code on elements like each section here using data-XXX="javascript:myFunction();" and I believe Skrollr will even still interpolate numbers in your arguments for you.

If you have control of what gets executed when "next" is clicked, can you check the scroll value at that time to determine which section it is between and switch on that to send them to the appropriate section? Essentially, rather than trying to keep the target current at all times which is wasteful/difficult/error prone, just calculate it when it matters - when the click occurs.

If you give your element a class like "visible", you could select all the visible elements by using jQuery:
$(".element.visible:last-of-type").on("click", function() {
});

Any issues with hiding a select list behind a div and selecting it with JavaScript?

I need to horizontally center text in a select list, specifically for android and iphones. It seems this cant be done with CSS so im looking for a workaround.
I was thinking about hiding the input behind a div with centered text, and using JavaScript to select the input when you click on the div. I would then need to change the text in the div to equal that of the selected option. If the div was created with JavaScript then the page would will be usable with JavaScript disabled.
I had another idea but this seems trickier to me. I could use JavaScript to get the screen width, apply a calculation, and then apply the right amount of text indentation to the input.
Im interested in best practice but this is a demo project not a live one. Im using jQuery. Thanks
UPDATE - Ive tried the following, where the div#cover covers a select input. It works fine in my iPad. However my old Android wont always focus on the input. Firefox does focus on the input but the options dont fly you, you have to scroll them with arrow keys. So it seems this solution is not as simple as id hoped.
$('div#cover').click(function(){
$('#select').focus();
});

Your idea on hiding the select behind the div looks OK
I did a more complex thing - completely hiding the select, replacing it with HTML, doing all interaction from JS and all styling in CSS and reflecting the changes to the underlying select (which can for instance be submitted as a form element in a normal way)
The jQuery plugin I wrote was very tiny anyway, as I put all styles and positions in CSS which gave me the full control over the appearance and big flexibility

Code is from here: jQuery - function runs fine when fired on div click, but not on page load
function textIndentFunc () {
textString = $('#from-1 :selected').text();
$('#hidden').text(textString);
textWidth = $('#hidden').width();
inputWidth = $('#from-1 select').width();
indentMy = (inputWidth / 2) - (textWidth / 2);
$('#from-1').css('text-indent',indentMy);
}
$('#from-1 select').change(function() {
textIndentFunc();
});
textIndentFunc();

If autocomplete is at the bottom of the page, autocomplete options float above text area

We are using this autocomplete plugin: jQuery AutoComplete
However, there's a problem when the input field is at the bottom of the page. The auto complete list (the one that appears once you start typing) shifts its position so that instead of dropping down the text box, it floats above the text box instead. It's okay if there's a lot of items in the list. However, if the options are few and the height isn't enough, there's a huge gap between the input box and the autocomplete box.
To make it clearer here's the image:
Does anybody know how to modify the code so that this doesn't happen? Or so that the AutoComplete always remain at the bottom of the input box no matter what?
I think this is the part of the jQuery that does it:
// reposition the results div accordingly to the search field
function repositionResultsDiv()
{
// get the field position
var sf_pos = acSearchField.offset();
var sf_top = sf_pos.top;
var sf_left = sf_pos.left;
// get the field size
var sf_height = acSearchField.height();
// var sf_width = acSearchField.width();
var sf_width = 285;
// apply the css styles - optimized for Firefox
acResultsDiv.css("position","absolute");
acResultsDiv.css("zIndex", 1000);
acResultsDiv.css("left", sf_left - 2);
acResultsDiv.css("top", sf_top + sf_height + 5);
acResultsDiv.css("width", sf_width - 2);
}
Apparently, the top offset value should be bigger (so that it is pushed further down) but it doesn't seem to calculate it correctly.

There is a "position" attribute you can control. You can do complex things with it, or simple things. http://docs.jquery.com/UI/Autocomplete#option-position
Note that what jQuery does by default is try to find a position that doesn't collide. If you change that, make sure you don't change it for the worse.

I was able to find out the problem. Apparently, on that particular page, some content is being generated after the page loads so the offset value doesn't take into account the height of that additional content.
What I temporarily did as a solution was to use a different ID for that page and put a condition on the jQuery to add a specific height if that ID is detected. I think I need to use some live method or maybe to load that piece of content first before the autosuggest script is loaded but for now this temporary fix will do.