I am new to jquery ui and I am trying to add a class to the selectmenu in jquery ui. I am trying this, but its not coming. Can somebody please help me in this
$('#dd1').change(function () {
var input = $(this);;
if (!input.val()) {
input.selectmenu().addClass("test");
}
else{
input.selectmenu().addClass("test1");
}
});
.test {border: 3px solid #FF0004;}
.test1 {border: 3px solid #28AF08;}
Is it the correct way to add class to select menu dynamically? Please guide me
Do you want to add a class to the original select element or to the generated elements?
You could add a class to button and menu by using:
input.selectmenu( "widget" ).addClass( "test" );
Use .filter() to add a class to button or menu only.
Related
Having a small issue with tooltips in the editor, read the api but can't understand what it is saying and I can't seem to find examples anywhere that I can understand either.
I have set up a Classic Editor build, and all the buttons on the toolbar have tooltips with the default position below the button, I want to be able, just for this one instance of the editor, to change the tooltip position to above the buttons instead. The instance is set up like this:
ClassicEditor.create( document.querySelector( '#content' ) )
.then( editor => {
console.log( 'Editor was initialized', editor );
this.annEditorInstance = editor;
} )
.catch( err => {
console.error( err.stack );
} );
That creates an editor instance that is set up exactly as I want, except for the issue with the tooltip. How do I change this? Thanks in advance.
There are two approaches to the problem:
CSS
Tooltips elements have either .ck-tooltip_s or .ck-tooltip_n class. By default all CKEditor 5 tooltips have the former so you could override it in your styles and make it act like the later:
<style>
.ck.ck-tooltip.ck-tooltip_s {
bottom: auto;
top: calc(-1 * var(--ck-tooltip-arrow-size));
transform: translateY( -100% );
}
.ck.ck-tooltip.ck-tooltip_s .ck-tooltip__text::after {
top: auto;
bottom: calc(-1 * var(--ck-tooltip-arrow-size));
transform: translateX( -50% );
border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
}
</style>
JS
The UI of the editor is an MVC(VM) structure. The position of the tooltip can be controlled using the JS and the Button#tooltipPosition property ('s' or 'n').
E.g. you can access the toolbar UI elements using editor.ui.view.toolbar and change their properties:
editor.ui.view.toolbar.items.map( item => item.tooltipPosition = 'n' )
but note that not all toolbar items are buttons. Some, for instance, are dropdowns so you'd need to use item.buttonView.tooltipPosition = 'n' in that case. So unless you really want to use JS, I'd go with a simple CSS solution.
I'm using the Column Selector Widget on Mottie's excellent tablesorter. It works great!
However, when a user clicks on the button (using CSS Popup only mode), the only way to dismiss the selection modal is to click on the same button again. This is inconsistent with the rest of my app, which dismisses bootstrap modals when clicking anywhere outside of the modal.
I know I can write an onClick function to monitor the whole body, but I wonder, is there a built-in option that I've missed that will dismiss the column chooser when a user clicks outside the box?
That "Column" button uses a hidden checkbox to show/hide the popup - it's pure HTML & CSS and completely customizable.
If you to modify the current setup, add the following (demo):
HTML (add after the "columnSelectorWrapper")
<div id="columnSelectorOverlay"></div>
CSS
#columnSelectorOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
display:none;
}
* note: remove the background: rgba(0,0,0,.5); setting if you don't want the dark overlay.
Then add the following setting to the .columnSelector definition:
z-index: 1;
Then add this javascript
$('#colSelect1').on('change', function() {
if (this.checked) {
$('#columnSelectorOverlay').show();
}
});
$('#columnSelectorOverlay').click(function() {
$('#colSelect1').prop('checked', false);
$(this).hide();
});
I am new to vaadin. I have one button it should look like a link. I have created button like,
Button title = new Button(item.getSubmissionTitle());
title.setStyleName(BaseTheme.BUTTON_LINK);
I also tried using
title.setStyleName("link);
but still I am getting look and feel of button. Is there any way to change the button using css Or any alternative ways by wich the button should appear as a link.
EDIT
I just found out The button is getting css from Table. And overriding the button style.
For table, it has written
table.setDebugId("submissionsTable_id");
css for button in table is:
#submissionsTable_id .v-table-cell-wrapper .v-button-caption{white-space:normal !important;text-decoration:none;}
#submissionsTable_id .submission-content{width:350px;}
#submissionsTable_id .v-table-cell-wrapper .v-button-caption:hover
{
background:#3F1A7D;
color: #FFFFFF;
}
#submissionsTable_id .v-button-caption:hover
{
background:#3F1A7D;
color: #FFFFFF;
}
Now, How can i exclude my Link button to override the table's style or how can I add new style to button which should not inherit the style of the table.
A future reference for anyone else with this issue. According to the Book of Vaadin online:
https://vaadin.com/book/vaadin7/-/page/components.button.html#figure.component.button.basic
Some built-in themes contain a small style, which you can enable by adding Reindeer.BUTTON_SMALL, etc. The BaseTheme also has a BUTTON_LINK style, which makes the button look like a hyperlink.
If you are using the Reindeer theme the code would be:
title.setStyleName(Reindeer.BUTTON_LINK);
Apparently resetting styles for a particular element is not possible, according to this post. You have to selectively overwrite the css properties for that element in order to simulate the aspect of a link.
If it's any help, the following is some CSS I scrounged up that simulates to some degree the look and behaviour of a link:
a:link {
color: #0000FF;
background-color:#FFF;
text-decoration:underline;
}
a:visited {
color: #800080;
background-color:#FFF;
text-decoration:underline;
}
a:hover {
color: #0000FF;
background-color:#FFF;
text-decoration:none;
}
a:active {
color: #FF0000;
background-color:#FFF;
text-decoration:none;
}
Note that the default look and behavior of a vanilla link depends on the browser its viewed in.
No need to play with the Button; there is a Link component for this.
#Override
protected void init(VaadinRequest vaadinRequest) {
HorizontalLayout layout = new HorizontalLayout();
Link link = new Link("Go to stackoverflow.com",
new ExternalResource("https://stackoverflow.com/"));
layout.setMargin(true);
layout.addComponents(link);
setContent(layout);
}
So I created a Widget that the user clicks on and it opens up a Panel, I have a couple of Questions about the panel.
How Do I style the Panels borders, background color, etc..? I'm including an HTML file in it's contentURL, can I add CSS to alter it? If so how do I select it via CSS?
I also want to add a Close Button and keep the panel open always unless they click the close button.
On second thought, for the Add-on i'm trying to program it might be better if I make a window, is a window pretty stylable so I can make it look cooler?
Thanks for any help.
I don't think you can style panel borders. The panel border styles depend on the operating system and you cannot touch them. You can only really influence the inner area of the panel, effectively you get an iframe inside the panel that you can play with. E.g. to change the background your panel can contain:
<style type="text/css">
html
{
background-color: red;
}
</style>
You cannot, the panel is not a real HTML object, but a XUL window with an iframe or HTML inside.
I believe since Firefox 30 you can access to this object, you can read:
Avoid panel to autoHide in Firefox extension
Of course it's a kind of hack, looks like Mozilla is not really "open" ^^
I was able to modify the border of the panel:
/*run this first*/
var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
noautohide: true,
noautofocus: false,
level: 'top',
style: 'padding:15px; margin:0; width:150px; height:200px; background-color:steelblue;border-radius:15px'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
win.document.querySelector('#mainPopupSet').appendChild(panel);
panel.addEventListener('dblclick', function () {
panel.parentNode.removeChild(panel)
}, false);
panel.openPopup(null, 'overlap', screen.availLeft, screen.availTop);
So if you know the panel of your id just do this:
var sss = Cc['#mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var css = '';
css += '#YourPanelIdHere { border-radius:15px; opacity:.5; border:1px solid red; }';
var cssEnc = encodeURIComponent(css);
var newURIParam = {
aURL: 'data:text/css,' + cssEnc,
aOriginCharset: null,
aBaseURI: null
}
var cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI);
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET);
//sss.unregisterSheet(cssUri, sss.USER_SHEET);
That will style your panel. You don't have to use panel id in the style sheet, just anything that target your panel will do.
I'm a newbie and have some problems with making new divs draggable.
The example is: http://jsbin.com/iyexi3/
The problem is when I show the dialog for the name, I create some divs, but they aren't draggable.
You've made some elements that are hardcoded in the HTML draggable by doing this:
$('.seleccionable').draggable({
drag: function(e, ui) {
$('#status_nombre').html($(this).attr('id'));
$('#status_top').attr('value',$(this).css('top'));
$('#status_left').attr('value',$(this).css('left'));
}
,containment: '#layout'
,refreshPositions: true
,snap: true
});
When you add a new element you need to call .draggable() for that one too.
One way to do it would be to put that selector/draggable code into a function and call it after you've added a new element.
The issue is that when you append a new element to the DOM, it doesn't inherit the event handlers of the existing draggable elements.
You may have some luck with liveQuery
This will allow you to create live events on all current and future elements matching a selector. It's similar to the built-in live() method. I haven't used it but it should work with draggable.
finally find the solution is afther append the new div...
$('#nv_objeto').click(function(){
var nbr =prompt("Por favor escriba el nombre del Objeto:","");
$("#layout").append("<div id='"+c_nbr(nbr)+"' class='seleccionable' style='top: 300px; left: 400px; width : 40px; height : 40px; background-color : black; position :absolute;'></div>");
$('#layout > div:last').blur().draggable({
drag: function(e, ui) {
$('#status_nombre').html($(this).attr('id'));
$('#status_top').attr('value',$(this).css('top'));
$('#status_left').attr('value',$(this).css('left'));
}
,containment: '#layout'
,refreshPositions: true
,snap: true
});
});
thanks for the help.