This is my jQuery codes
$("#divAddExistingPath").dialog('open');
$("#divAddExistingPath").dialog('option', 'width', 700);
$("#divAddExistingPath").offset({ top: offset.top, left: offset.left })
It looks like I may have to write more and more lines to get extra functionality. Is there any way concise way to write this jquery?
Thanks for helping.
Related
I read about few of the posts for custom theme and styles from less variables But can I modify at the level of say
.ant-collapse > .ant-collapse-item > .ant-collapse-header .arrow {
right: 16px; // instead of left:16px
}
What do I want? In this specific case I just want my arrow to show on right instead of left in Collapse.Panel component.
From where from I copied the styles? In the component's .css itself.
This even if possible via .less modification and compiling may not be best solution, so open to hearing the workarounds, if any?
In less file, same would translate to
right: #padding-md; // instead of original entry of left: #padding-md;
and in customization guides, I can modify only variables. Now?
Write the below code in css file
:global {
.ant-collapse-header{
//code
}
}
I'm not sure that I understand your question but what about implementing your own Collaps.panel?
import 'myPanelStyle.css'
export default class MyCollapsePanel{
render(){
return(<Collapse.panel id="my-panle" {...this.props}>{this.props.children}</Collapse.panel>)
}
}
myPanle.css:
#my-panle{
.ant-collapse > .ant-collapse-item > .ant-collapse-header .arrow {
right: 16px; // instead of left:16px
}
}
in this way, anytime you use your panel it will be as you wish and you are not corrupt any other css sheets of default Antd library.
I was wondering if you guys can help me with something.
i have the following code set:
$(document).on('mouseenter','input',function(){
soundHover.play();
});
$(document).on('mouseleave','input',function(){
soundHover.pause();
soundHover.currentTime = 0;
});
I also have a Jquery UI controlGroup formed from different controls.
I would want to use 1 function for all different controls something like instead of 'input' use 'input label select'. I works for each separately, but when i use them together, it does not work.
Is it possible to refer to multiple controls in a control group? if yes, how can I do it?
Regards,
I was using the wrong delimiter, if i use "," between the control it works as intended.
$(document).on('mouseenter','input,label,a',function(){
soundHover.play();
});
$(document).on('mouseleave','input,label,a',function(){
soundHover.pause();
soundHover.currentTime = 0;
});
I still have not gotten the 'select' part to work though.
I have integrated a tinymce editor in a rails project with active admin.
I spent almost a couple of hours looking for a way to align the editor to the right of my available space, as currently it's hiding the labels for it.
I have the following init js:
$(document).ready(function() {
tinyMCE.init({
mode: 'textareas',
align: 'right',
width: '80%',
height: 200,
autoresize_min_height: 200,
autoresize_max_height: 400,
resize: 'both',
plugins : 'advlist autolink link image lists charmap print preview'
});
});
Read much of the TinyMCE4 documentation and couldn't find a way to align the window to the right. My attempts to override the css class for this are as well no successful.
Could you please give me an advice. Does someone know how to deal with the alignment via the js init?
Here's the screenshot: http://betasve.com/wp-content/uploads/2014/09/TinymceProblemAA.png
Thank you in advance.
Try this in active_admin.css.scss:
.mce-tinymce {
margin-left: 215px !important;
+
Complementing the answer make by nistvan, works better with:
.mce-tinymce { margin-left: 20% !important;}
On my CMS I have a list of thumbnails (Sortable). The thumbnails work great and now I'm writing a plug-in to drag-them to a tinyMCE window.
As the tinyMCE window has an iFrame it doesn't work that well.
jQuery has an option for Draggables called iframeFix that works exactly as I need. However that list must be a Sortables. I've looked quite extensively on Google and found no-one with my requirements. Has anyone here on StackOverflow done it?
Apply the iframeFix to a Sortables?
If not... I'm on my way to a jQuery plug-in.
Thank you in advance!
I've done it.
You need to have a DIV on top of the iFrame to let the Draggable/Sortable flow without problems. So I used jQuery to create a DIV right on top of the iframe. Then it show's it when you grab the element and destroys it when you drop it. Works like a charm. If anyone is in need of something like that let me know.
update (by popular request):
On my specific scenario I use the following DIV:
<div id="iframeDivFixer" class="ui-draggable-iframeFix" style="background-color: rgb(255, 255, 255); display: none; width: 665px; height: 665px; position: absolute; opacity: 0.001; z-index: 1000; left: 362px; top: 290px; background-position: initial initial; background-repeat: initial initial;"></div>
And, as soon as I grab the thumbnail javascript is used to set the display property to block. The process is reversed when you release the dragabble.
A seriously old question here, but there's another way to do it using css - pointer-events:none; which is supported on all the currently supported browsers (IE11 and above - caniuse.com)
$("#sortable").sortable({
start: function() {
$("iframe").css("pointer-events", "none");
},
stop: function() {
$("iframe").css("pointer-events", "");
},
});
I have the following in my sifr-config.js file:
sIFR.replace(avenir_book, {
selector: 'p:first-child',
css: '.sIFR-root { color: #782221; font-size:22px; }',
wmode: 'transparent'
});
But it doesn't work. I've verified that the same CSS works by testing it in my normal stylesheet. Does sIFR not understand this pseudo element, or does it need to be called in a special way?
Assuming you are using sIFR 3, :first-child is not supported as indicated by this page. However, sIFR can be made jQuery compatible, read more here.
Steps to replace parseSelector with
jQuery:
1 - Make sure you include the jQuery
JavaScript file.
2 - Remove all of the parseSelector
code at the bottom of sifr.js
3 - Add the following line:
var parseSelector = $;