I have been using the following code to hide a radio button in a multiple choice, 3 column question in Qualtrics (so that option can be used like a sub head and cannot be selected). However the code has now stopped working with the new theme we are using.
$('QR~QID154~198').style.display='none';
The following code works to hide the radio dot, however it then right aligns all of the responses below it, so it won’t work.
$('QR~QID154~198').up().hide();
Any ideas on another way to code this in JS?
You can put the buttons in a div and show or hide the div it is easier like that. you can also use .removeClass or .addClass with the div so it can be controlled from a script that would check if the class is there it will remove it or if it's not it will add it, you can use .hasClass to check weather it is there or not.
Related
I'm working with JarvisWidgets and JQuery since some time and I need to open programmatically a widget that is collapsed by default.
Up to now I've tried the following attempts without success.
1st attempt:
$('#my-widget-id').removeClass("jarviswidget-collapsed");
2nd attempt:
$('#my-widget-id').removeAttr("data-widget-collapsed");
however I'm still unable to trigger the widget expansion.
Note: the first method should be the right one as I've seen that, when the widget is expanded by clicking on the collapse toggle button, the class jarviswidget-collapsed is removed while the attribute data-widget-collapsed="true" is always there. So the attribute is just used to define the default widget startup state; in other words if the attribute data-widget-collapsed="true" is present then the widget will appear collapsed by default, if the attribute is removed the widget will appear expanded by default. Having said that I cannot understand the reason why removing the class jarviswidget-collapsed, hence behaving as the widget was expanded by user click, the widget doesn't expand.
I think maybe they are using something similar to this:
show widget:
$('#wid-id-2').removeClass('jarviswidget-collapsed').children('div').slideDown('fast');
Hide widget:
$('#wid-id-2').addClass('jarviswidget-collapsed').children('div').slideUp('fast');
I cannot find the code source of jarvis widgets, but there is an old version here has almost the same code as above but without slideUp or slideDown function, they use only show() and hide() methods
Hope this helps
I have a form that is built into layerslider, and in order for a user to get to the next page they have to fill out the current page until it is valid and then they are allowed to move on.
At first I did this by showing/hiding the button but it was confusing my users.
What I'm doing now it changing the opacity/clickability based on if the page is valid.
My problem is that while I can change the opacity no problem I'm having a difficult time getting the buttons to be unclickable (deep link i.e. #NextPage).
My question is, is there a clean way to do this using jQuery, or will I have to put a div over it and show/hide that?
****** EDIT *******
I am using links to a deep link, not html buttons i.e. <a href="#page2">
I need to make the anchor unclickable/clickable
To disable the button, simply use:
$('#YOURBUTTON').prop('disabled', true);
I am using blocksit.js to get Dynamic Grid Layout in my web-app.
It works perfect. The problem comes when I have to dynamically hide and unhide a textbox on button click, the boxes below are not shifting down so the textbox is going under the box below. See the image below.
I have tried whole day, but without luck.
If you are not creating your div dynamically then you should, in your markup, place the textbox above your buttons :)
What to do:
Let's say this is your HTML:
--BUTTON--++--BUTTON--++--BUTTON--
--------------TEXTBOX-------------
Make it like this:
--------------TEXTBOX-------------
--BUTTON--++--BUTTON--++--BUTTON--
I posted awhile ago and got great insight on hide/show text with javascript... Now I need to take this one step further. Can't find the right combination to make it work.
Here's what I NEED:
When a viewer comes to this page, the first hide/show element is displayed in the text box AND
That element is also highlighted a certain color to display that it is active.
Lastly, as every hide/show element is clicked, that stays highlighted until the next is selected.
Here's a link to my dev site. I think it's easier this way.
http://verus.exigodigital.com/services/
Here was my previous post on the hide/show text:
Showing & Hiding Text with Javascript
REALLY appreciate the help, guys! :)
You could make 2 CSS definitions, one for the currently selected textbox, and one for textboxes that aren't selected
When someone clicks on one of the textboxes to edit its contents (the onfocus event), you just call a function that runs through all of your textboxes, and for each one checks if it's the one with focus - if it is, set the className variable of the element to "selected" or something, and it it's not the one with focus then set it's className variable to "normal" or something
If I didn't understand the question or you need more info, just let me know :)
How can a checkbox inside a drop down menu using javascript to be implemented so that every time you click the menu to change situation?
The website you have linked presents a list along this lines: http://jsfiddle.net/XJWkH/
Of course this is just a raw example but basically this is the way the dropdown list on the site works. When you click on a dropdown/submenu element, jQuery adds or removes 'checked' class on that element.
jQuery is the easiest path here. I have used this plugin with great success and have rolled my own as well.
Good luck!