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
Related
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.
My editor is tinymce4+.
It works greatly in most parts.
But no matter what I do, there's something I just can't do.
- switching editor mode instantly. -
I have a page that users can select a data and edit it and view the content. Users click on a button named " viewmode ", the other flipside is " editmode "
I achieved this by putting two DIVs in a same container, making one of them invisible by the start-look-settings users have choosen. One DIV has tinymce editor, the iframe tag, and another one has just a bunch of html values that the editor is holding. But the side effect of this is that the content style could look different, depending on its style attributes.
This web application I'm talking about now is an existing system that has its own CSSs.
It's so complicated that once you get to look at it, you might want to run away from it.
So I would like to avoid this CSS discrepancy by making editor dynamically switchable to both ways.
Loading multiple tinymce objects is the last thing I need here.
I can make editor disable by setting up an attribute - contenteditable = false -
But then the toolbar elements become bad boys here. because they still work. I hide the toolbar itself to complete this mission.
But you know, my client hated it and insisted me that the editor should provide a print button in its viewmode. This is frustrating.
So, if you could just give me an idea of how to manipulate the elements of toolbar, then I think I can manage to solve this issue.
If it's too difficult, attaching the print event listener to an external element could be also the second best option for me. Because from that moment on, I just throw the toolbar away and make a print icon on the top of the editor and attach the event to it.
Sorry for typing all the plain texts. But issue like this requires no codes I think.
Hope some tinymce guru stop by and help me out.
Finally, I made my editor switchable.
First step is to hide all the elements in the toolbar of tinyMCE.
tinyMCE toolbars have a specific class name so they are selectable with jQuery class selector. But selecting with class name alone causes getting unwanted toolbars as well, so you have to be careful with this.
FYI .eq() API might help you.
after hiding all the elements in the toolbar, ( don't hide toolbar by the way. ) do this.
tinymce.ui.Factory.create({
type: 'button',
cmd: 'mcePrint',
icon: 'print',
shortcut: 'Ctrl+P',
class : 'temp'
}).renderTo(appendTarget);
This is going to add a button element into the toolbar.
But somehow it doesn't invoke the command I defined in cmd's value.
So attaching this event to the button manually will be required.
tinymce.activeEditor.execCommand('mcePrint');
So far I created a custom-toolbar for view-mode editor. Now it's time to freeze the edior's actual content field.
It's very easy after getting iframe contents as jQuery object.
.contents() API should help you.
after that, you can select <BODY> element on your side, so the last thing left to do is to give 'contenteditable=false' attribute and value to the body tag.
Then your editor freezes.
Going back to the edit mode is easy too. Just do the backwards.
Invoke these events when you click on your own "switch" button. Then you can toggle your editor from view-mode to edit-mode ( and the oppsite way as well ).
See the image I've included. When you click on a row in the table (it won't be a table most likely, as each row will probably be a Dojo Widget), the 'pulldown shade' appears and is clickable. When the user clicks it, a new layer of content appears and the pulldown shade switches from 'Open' to 'Close'.
Can that all be done with CSS, meaning do a Hover:After type event, or am I going to have to use JS to make this happen? JS isn't an issue, just trying to confirm I'll have to use JS to make it happen.
Javascript is required for the click event,
1 - you can show the additional content with hover
2 - then bind this to click ( *no point using hover as old IE does not work unless it is an anchor tag <a> * )
3 - you then can switch the text with js.
:)
remember
css is for visual
js is for behaviour :)
In CSS there is an option to use :target pseudo class (more on this here https://developer.mozilla.org/en-US/docs/CSS/:target ), but I am not sure this will work well for in your case - you’d have to create separate element for each row, and it doesn’t seem wise.
http://rickgutierrez.bol.ucla.edu/navbartest.html
This is my basic jquery mobile navigation setup. I am attempting to get the first three navbar elements to function more like toggles with an on and off state; click the button and it switches to the other state (without affecting an of the other buttons states), click it again and it switches back. When the page loads, 1 is in the on state which is styled by .ui-btn-active and 2, 3, 4 are in the off state; I am not quite sure what part of the jquery mobile css code styles the off state. There are also ui-btn-up-a and ui-btn-down-a styles which I think may be relevant.
After some research I came across several toggleClass tutorials:
http://api.jquery.com/toggleClass/
The first demo on the jquery tutorial is closest to what I am looking for with the independent functionality. The code in that demos is straight forward and simple which is why I am frustrated that I cannot make it work on my page.
Can anyone offer some pointers? Which classes should I be using? Is toggleClass in the jquery mobile library or do I need to add a link to the latest jquery script?
Thanks
I've created a code using JsBin. Hope it helps: http://jsbin.com/exenov/4/edit
I've added a new class (custom-btn-active), which I use in the jQuery on click function.
The only thing you should do in your jquerymobile.css file is to DELETE the original .ui-btn-active css. Because I can't remove that class with the use of jQuery (I have absolutely no idea why)
Check my Jsbin > the button stays green on click, and when clicked again it goes off (don't pay attention to the blue background because that is the .ui-btn-active which you need to delete).
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!