I am trying to make a custome plugin in ckeditor. What I am trying to do is to make an ajax call to my server and get a list of items, which I dynamically present into a div. For each of these items I have set an onclick attribute. The problem is that I get an error that the function in the onclick attribute is not defined.
Code snippets below:
Dialog contents:
contents : [
{
id : 'information',
name : 'information',
label : 'Information',
elements : [
{
type:'vbox',
padding:0,
children:[
{
type : 'html',
html : '<div style="width: 100%; height: 150px; float: left; border: 1px solid #666666; overflow: auto;" id="results"></div>'
},
]
}]
List element which I insert in the div:
var html = '<a onclick="showMore(' + resultNum + ')">';
html += result;
html += '</a>';
return html;
I have tried to define showMore function with these two ways:
CKEDITOR.dialog.add('popup', function(editor)
{
function showMore() {}
}
and
CKEDITOR.dialog.add('popup', function(editor)
{
showMore : function() {} (in the return block)
}
like onOk, etc, but not luck with both approaches.
Is there any way to do this?
Thanks a lot in advance!!
The problem is that you must define the showMore function in your page, not as a part of the dialog.
Related
I am using the Divi Builder in WordPress to make a list of patents in the accordion format. However, I would like to format the accordion title (of each accordion element) so that on the left is the patent#, and on the right is the title of the patent.
To do this, I would like to know how I can split the title into 2 separate sections; 1 where I can put the title number, and the other where I can type the name of the patent. Sort of like this:
Another sketch to show what I want it to look like: sketch of the goal
Again I am using Divi Builder to do this as I am a novice using WordPress. But I am assuming I would have to write some custom CSS to format the title in this way in the Divi Builder.
First is it possible to do what I am trying to do?
If so how can I do this (in the Divi Builder environment)?
Unfortunately, not all of our requirements can be met by means of ready-made tools for building a website.
In such cases, we are forced to write "fixes" in such individual cases.
I offer you a js script that does the following:
Searches for titles with text that meets the following requirements:
Starts with #
After a hash without spaces, numbers
Example: #111
Wraps the found in the span with the class specified in the configuration (at the very top of the file)
I tested here
(function() {
// Config
let classFirstHeading = 'my-heading';
let headerSelector = '.et_pb_toggle_title'; // You can replace to your selector of heading
// end config;
var DOMReady = function(callback) {
if (document.readyState === "interactive" || document.readyState === "complete") {
callback();
} else if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", callback);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState != "loading") {
callback();
}
});
}
}
function updateHeading() {
let headings = document.querySelectorAll(headerSelector);
headings.forEach(el => {
let textHeading = el.innerText;
let regexp = /^\#\d+/;
if(textHeading && regexp.test(textHeading.trim())) {
el.innerHTML = textHeading.replace(regexp, (match) => {
return '<span class="'+classFirstHeading+'">'+match+'</span> ';
});
}
});
}
window.updateHeading = updateHeading; // Give access from outside
DOMReady(() => {
updateHeading();
/* Test, you can remove this section */
let styleEl = document.createElement('style'); styleEl.type = 'text/css';
let css = `
.${classFirstHeading} {
display: inline-block;
font-size: 23px;
font-weight: 700;
margin-right: 15px;
padding: 10px 15px 10px 0;
border-right: 2px solid #000;
}
`;
styleEl.appendChild(document.createTextNode(css));
document.querySelector('head').appendChild(styleEl);
/*************************************/
});
})();
<h5 class="et_pb_toggle_title">#111 What is your refund policy?</h5>
If you don't know where to insert such code, install the Custom CSS and JS in Header & Footer plugin and just copy my js code to your page where you use the accordion
How can I hide the symbol "#" and colon ":" of order time in the WooCommerce Admin Add New order page? I've inspected the elements in Chrome to find a class or ID but not found. I know I can hide it with this code.
add_action('admin_head', 'my_custom_style');
function my_custom_style() {
echo '<style>
div {display: none;}
</style>';
}
enter image description here
I don't see a purpose of doing this, but if you really wish to do this, you can use input name css selectors to do it.
I have used CSS and JS both to get rid of # and :.
add_action('admin_footer', 'bks_my_custom_style');
function bks_my_custom_style() {
echo '
<script>
jQuery(function() {
var text = jQuery(".order_data_column_container .form-field").contents().filter(function() {
return this.nodeType == Node.TEXT_NODE;
}).remove();
});
</script>
<style>
input[name="order_date_minute"],
input[name="order_date_hour"]
{
display: none;
}
</style>
';
}
The code goes inside functions.php file.
Tested and WORKS.
Screenshot :
Is there a selector that specifies CSS to only applied when matching a specific URL or part of URL?
For example, here is my CSS stylesheet:
p {
color: green;
}
url("home.html") {
color: blue;
}
url("about.html") {
color: yellow;
}
path("/path/index*") {
color: indigo;
}
When the user visits home.html I want the home.html selector to be applied. When I'm on the about.html URL I want the about.html to be applied.
CSS media queries allow you to switch to a different set of styles when the width of the view changes. It also lets you specify a different set of styles when the user is going to view on the screen or send it to a printer.
My question again is, "Is it possible to specify a different set of styles depending on the URL or values in the URL." So it's not a question of how to do what I'm asking but if it's possible to.
I am using a CMS and it has a theme that allows you to add your own CSS. There is one stylesheet. That's it. Not two but one.
And I have one page that has specific CSS to that page and only that page. That is the origin of this question. There may be a thousand workarounds but my question is not about the workarounds.
However since this has been answered I do not mind workaround answers related to the question.
It looks like the #document rule was proposed for just this case but it was removed from CSS3 spec and planned for CSS4. From my tests it does not appear to be supported and it's not listed on caniuse at the time of this posting.
The syntax is as follows:
#document url("http://www.example.com/widgets/") {
body {
color: white;
background: tomato;
}
}
/* The above applies styles only to the page at the given URL */
#document url-prefix("http://www.example.com/widgets/") {
/*
Styles written here are applied to all URLs that
begin with 'http://www.example.com/widgets/'
*/
}
#document regexp("https:.*") {
/* Styles written here are applied to all URLs that begin with 'https:' */
}
Test code using #media query for comparison:
var styleTag = document.createElement ("style");
document.head.appendChild (styleTag);
var sheet = styleTag.sheet;
sheet.insertRule ("#media (min-width:600px) { html {color:red}}", 0);
console.log(document.styleSheets.length);
Results:
// no errors, stylesheet is added
Test code testing #document rule:
var styleTag = document.createElement ("style");
document.head.appendChild (styleTag);
var sheet = styleTag.sheet;
sheet.insertRule ("#document url('http://www.google.com') { html {color:red}}", 0);
Results:
/*
Exception: SyntaxError: An invalid or illegal string was specified
#Scratchpad/3:4:0
*/
TIL about #document thanks to #BoltClock
More info
You could attach a data-url custom attribute to an element's parent tag, either in the HTML or using JavaScript, and then query that data's value in CSS. Here's a working example:
const urlHolder = document.getElementById("url-holder");
document.getElementById("changer").onclick = () => {
urlHolder.dataset.url = "https://mywebsite.com/about"
};
#url-holder[data-url*="blog"] .url-based{
background-color: red;
}
#url-holder[data-url*="blog"] .url-based::after{
content: "You're on the blog page!"
}
.url-based::after{
content: "You're not on the blog page."
}
.box{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 5px;
}
<button id="changer" type="button">Change data-url to "https://mywebsite.com/about"</button>
<div id="url-holder" data-url="https://mywebsite.com/blog">
<div class="box url-based"></div>
<div class="box not-url-based"></div>
</div>
No idea how performant such a solution would be though.
To be sad there is no pseudo classes to select element's based on URL.The only way you can do it is by adding class to the body tag or specific element and then override the CSS.
if just for only HTML, use jQuery
<script>
var currentLocation = window.location.pathname;
if (currentLocation == 'home.html'){
$('head').append('<link href="home-style.css" rel="stylesheet">');
} else if (currentLocation == 'about.html'){
$('head').append('<link href="about-style.css" rel="stylesheet">');
} else {
$('head').append('<link href="index-style.css" rel="stylesheet">');
}
</script>
If use you WordPress:
Add your theme function.php
function site_stil_script() {
if ($_SERVER['REQUEST_URI']=='/YOURPAGE/') {
wp_enqueue_style( 'theme_css', get_template_directory_uri() . '/assets/css/theme-difrent-style.css', array(), '20120208', 'all' );
} else {
wp_enqueue_style( 'theme_css', get_template_directory_uri() . '/assets/css/theme-style.css', array(), '20120208', 'all' );
}
//other lines....
}
add_action( 'wp_enqueue_scripts', 'site_stil_script' );
I have the next div:
<div class="div-class" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;" title=<%=myDesc%>
How can I show the tooltip only when ellipsis is active?
I find this function
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
But I didn't know how to use it knowing I use jsp and struts
Try something like this:
Working DEMO
Working DEMO - with tooltip
$(function() {
$('div').each(function(i) {
if (isEllipsisActive(this))
//Enable tooltip
else
//Disable tooltip
});
});
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
For anyone using qtip (being quite popular).
First, add a class to each of your overflowing elements.
<span class="ellipsis-text">Some very long text that will overflow</span>
Then, use the jQuery selector to select multiple such elements, and apply the qTip plugin (or any other tooltip that comes to mind) on to your elements as such:
$('.ellipsis-text').each(function() {
if (this.offsetWidth < this.scrollWidth) {
$(this).qtip({
content: {
text: $(this).text()
},
position: {
at: 'bottom center',
my: 'top center'
},
style: {
classes: 'qtip-bootstrap', //Any style you want
}
});
}
});
I am working with a project where I have to use Flexigrid.js; But I get lots of things are missing in the plug in. Like I want to disable some buttons whose I don't want to enable at initially. So, I couldn't do that.
So, I update the flexigrid.js and make that for everyone.
Hope this will help.
Thank you
If we want to add extra attributes like title, disable etc how to do this?
Answer: I have updated my flexigrid.js for doing that. I have changed the previous js and replaced fbutton div>span into input tag.
Change the following code
btnDiv.innerHTML = ("<div><span>") + (btn.hidename ? " " : btn.name) + ("</span></div>");
if (btn.bclass) $('span', btnDiv).addClass(btn.bclass).css({
paddingLeft: 20
});
if (btn.bimage) // if bimage defined, use its string as an image url for this buttons style (RS)
$('span',btnDiv).css( 'background', 'url('+btn.bimage+') no-repeat center left' );
$('span',btnDiv).css( 'paddingLeft', 20 );
if (btn.tooltip) // add title if exists (RS)
$('span',btnDiv)[0].title = btn.tooltip;
with
btnDiv.innerHTML = ("<input type='button' value='"+ (btn.hidename ? " " : btn.name)+"' name='"+ (btn.hidename ? " " : btn.name)+"'/>") ;
if (btn.bclass) $('input', btnDiv).addClass(btn.bclass).css({
paddingLeft: 20
});
if (btn.bimage) // if bimage defined, use its string as an image url for this buttons style (RS)
$('input',btnDiv).css( 'background', 'url('+btn.bimage+') no-repeat center left' );
$('span',btnDiv).css( 'paddingLeft', 20 );
if (btn.tooltip) // add title if exists (RS)
$('input',btnDiv)[0].title = btn.tooltip;
Then, check whether attribute property is exists or not and set the attributes
//checking attribute property is available or not
//Start
if (btn.attribute) {
var attributes = btn.attribute; //getting the attributes
for(var key in attributes){
if(key!="style" && key!="disable")
$('input',btnDiv).attr(key,attributes[key]);
else if(key=="disable" && attributes[key]){
$('input',btnDiv).attr("disabled","disable");
}
else if(key=="style"){ //getting style value in css
for(var style in attributes[key]){
$('input',btnDiv).css(style,attributes[key][style]);
}
}
}
}
//End
Now change the CSS for input.
.flexigrid div.fbutton input
{
float: left;
display: block;
padding: 3px;
border : none;
}
Work done. Now set your attribute property in the buttons.
Example :
buttons : [
{name: 'Add', bclass: 'add', onpress : test, attribute: {title:"add",disable:true,style:{'border':'1px solid black;'}}}
],
Reply me if any bug is found.
Thank you