I'm trying to modify redactor's image_edit and image_save methods to add some functionality.
I'm just wrapping te existing img element with a div and add another one with a text. When I press the save button in the modal and look at the source in redactor, it appears OK, but when I save the changes, redactor cuts off both divs and leaves only the original img element and desc value from the form. How can I resolve this?
Original code:
$(el).attr('alt', $('#redactor_file_alt').val());
var floating = $('#redactor_form_image_align').val();
if (floating == 'left') $(el).css({ 'float': 'left', margin: '0 10px 10px 0' });
else if (floating == 'right') $(el).css({ 'float': 'right', margin: '0 0 10px 10px' });
else $(el).css({ 'float': 'none', margin: '0' });
this.modalClose();
My code:
$(el).attr('alt', $('#redactor_file_alt').val());
var floating = $('#redactor_form_image_align').val();
if (floating == 'left') {
var align = 'left-image';
} else if (floating == 'right') {
var align = 'right-image';
} else {
var align = 'ci-image';
}
var imgDiv = $('<div class="' + align + '" />');
$(el).wrap(imgDiv);
if($('#image_desc').val()) {
$(el).after($('<div class="descr" />').html($('#image_desc').val()));
}
You should specify in the settings { removeClasses: false }
Related
I have a fixed header, when user scroll to an offset 100px, a class add to header to make it fixed:
fixed-header {
position: fixed:
top: 0,
left: 0,
right: 0,
width: 100%;
}
$( window ).on( 'scroll', function() {
if ( $( window ).scrollTop() >= 100 ) {
navigation.classList.add('.fixed-header');
document.body.style.paddingTop = "100px" // prevent page jump when fixed header
} else {
navigation.classList.remove('.fixed-header');
document.body.style.paddingTop = "0"
}
});
On top of page, when user focus a link via tab key, I use focus event listener to check the fixed class in DOM to scroll focusable element to re-position it below fixed header:
const elements = [...document.querySelectorAll(
"a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])"
)];
header = document.body.querySelector('.header-top'); // Fixed header height: 100px
const handleFocus = (e) => {
console.log(header.classList.contains('.fixed-header')); // This will false
if (header.classList.contains('.fixed-header')) {
var windowScrollTop = $( window ).scrollTop(),
focusableScrollTop = $(e.target).offset().top;
if (focusableScrollTop - windowScrollTop < 100) {
window.scrollTo({ top: focusableScrollTop - 100, behavior: 'smooth' });
}
}
};
for (const element of elements) {
element.addEventListener('focus', handleFocus, { once: true });
}
But focus callback handler fire before DOM repaint (when fixed class added to header), so it can not detect fixed class in DOM:
Wrap focus handler inside requestAnimationFrame()', don't work, if I wrap focus handler inside setTimeout()' function with 300ms, it will detect correct fixed class, but cause page scroll jump (focusable element scroll up and down).
for (const element of elements) {
element.addEventListener('focus', setTimeout(() => {
handleFocus()
}, 300), { once: true });
}
Any way to make header.classList.contains('.fixed-header') come true at the focusable link focused?
I hope someone know this issue and help to fix this problem. Thank you very much.
I am using the selected shapes to draw a larger diamond shape on my graph. When a user clicks a point. I display the data in another div, but I want to leave the clicked point highlighted. In other words, I want to 'toggle' data behind the points on and off and the clicked points need to show if they are included in the dataset. I believe I have seen this somewhere but I cannot find it. Is there a 'standard' way of leaving a clicked point in the 'highlight' state when you mouse away after clicking?
Here is my code. The pointClickCallback is getting the data through ajax and displaying it in another div. That part works. I just want to leave the point highlighted so I know which points I have clicked on.
I also need the point to revert back to normal when I click a second time. This is a toggle that allows me to select and unselect points.
EDIT: I found the interaction model example but when I add it to my code I lose my pointClickCallback functionality. I saw the call to captureCanvas and the interaction model structure.
var g = new Dygraph(document.getElementById('rothmangraph'), lines, {
//showRangeSelector: true,
title: "Personal Wellness Index (PWI)",
labels: ['Date', 'Index'],
color: ['#006699'],
valueRange: [0, 101],
axisLabelFontSize: 12,
drawPoints: true,
gridLineColor: "#aaaaaa",
includeZero: true,
strokeWidth: 2,
rightGap: 20,
pointSize: 4,
highlightCircleSize: 8,
series : {
Index: {
drawHighlightPointCallback : Dygraph.Circles.DIAMOND
},
},
axes: {
y: {
pixelsPerLabel: 20,
},
x: {
valueFormatter: function(ms) {
return ' ' + strftime('%m/%d/%Y %r',new Date(ms)) + ' ';
},
axisLabelWidth: 60,
axisLabelFormatter: function(d, gran) {
return strftime('%m/%d %I:%M %p',new Date(d.getTime())) ;
}
}
},
underlayCallback: function (canvas, area, g) {
var warning = g.toDomCoords(0,41);
var critical = g.toDomCoords(0,66);
// set background color
canvas.fillStyle = graphCol;
canvas.fillRect(area.x, area.y, area.w, area.h);
// critical threshold line
canvas.fillStyle = "#cc0000";
canvas.fillRect(area.x,warning[1],area.w,2);
// warning threshold line
canvas.fillStyle = "#cccc00";
canvas.fillRect(area.x,critical[1],area.w,2);
},
pointClickCallback: function(e,point) {
var idx = point.idx;
var line = lines[idx];
var sqltime = strftime('%Y-%m-%d %H:%M:%S',new Date(line[0]));
var dispdate = strftime('%m/%d %r',new Date(line[0]));
_secureAjax({
url: '/ajax/getDataPoint',
data: {'patient_id': pid, "rdate": sqltime},
success: function (result) {
// parse and add row to table if not exists.
var data = JSON.parse(result);
var aid = data['id'];
var indexCol = "#a9cced"
if (line[1] <= 65) indexCol = "#ede1b7";
if (line[1] <= 40) indexCol = "#e5bfcc";
var headerinfo = '<th class="'+aid+'"><span class="showindex" style="background-color:'+indexCol+'">'+line[1]+'</span></th>';
var fixdate = dispdate.replace(' ','<br>');
var headerdate = '<th class="'+aid+'">'+fixdate+'</th>';
// skip if already exists
var found = false;
var whichone = false;
$('#headerdate tr th').each(function(idx, item) {
if (fixdate == $(this).html()) {
found = true;
whichone = idx;
}
});
if (!found) {
$.each(data, function (idx, item) {
$('#' + idx).append('<td class="'+aid+'" style="width:70px">' + item + '</td>');
});
$('#headerdate tr').append(headerdate);
$('#headerinfo tr').append(headerinfo);
} else {
$('tr').each(function() {
$('.'+aid).remove();
});
}
}
});
}
});
}
I have the following plotly code:
var element = document.getElementById(scope.changeid);
function getData(division,redraw) {
var employeeData = [];
if (!division) {
$http.get(api.getUrl('competenceUserAverageByMyDivisions', null)).success(function (response) {
processData(response,redraw);
});
}
else {
$http.get(api.getUrl('competenceUserAverageByDivision', division)).success(function (response) {
processData(response,redraw);
})
}
}
function processData(data,redraw) {
var y = [],
x1 = [],
x2 = [];
data.forEach(function (item) {
y.push(item.user.profile.firstname);
x1.push(item.current_level);
x2.push(item.expected);
});
var charData = [{
x: y,
y: x1,
type: 'bar',
name: $filter('translate')('COMPETENCES.GRAPH.CURRENT'),
marker: {
color: '#23b7e5'
}
}, {
x:y,
y:x2,
type: 'bar',
marker: {
color: '#f05050'
},
name: $filter('translate')('COMPETENCES.GRAPH.EXPECTED')
}],
layout = {
title: $filter('translate')('USERMANAGEMENT.USERS'),
barmode: 'stack',
legend: {
traceorder: 'reversed'
}
};
Plotly.newPlot(element,charData,layout);
}
scope.$watch('divisionId', function (newValue, oldValue) {
if (newValue) {
getData(newValue.id,true);
}
}, true);
getData(null,false);
This generates the following chart:
<div class="panel-body">
<h4 class="text-center">{{'COMPETENCES.GRAPH_TITLES.OVERVIEW_GAP' | translate}}</h4>
<vertical-bar-chart id="chartArea" goto="competence.titleCompetenceDetails"
changeid="chartArea" xcolumn="xColumn" y-column="yColumn"
dataset="dataSet"
has-addition="true"
style="width: 80%; text-align: center"></vertical-bar-chart>
</div>
As you might be able to tell the text (x column) is being unintentionally cut off. So my question is how can i avoid this? i have attempted to increase the height of the element however without any luck :(
AS you can see here:
(oh you cant tell because of the white background but the height of panel body is 1000 px however it still cuts it off.)
Try increasing the bottom margin in layout.margin.b (more info in the plotlyjs reference page.
For reference, I had the same issue, margin bottom didn't help, but after the graph was created, I ran the following JQuery which revealed the hidden text:
var heightincrease = $('#yourID').find('.svg-container').height() + 100;
$('#yourID').find('.svg-container').height(heightincrease).find('.main-svg').height(heightincrease);
Obviously adjust as required to reveal your whole graph. Will probably break resizing so will need work if that's a concern.
I would like 3 tiles: previous, current, next.
For instance, when the user move from current to next, I would like a new next tile to be added and the old previous tile to be removed.
Is there any specific javascript function which could be used ?
Or in which function should it be implemented ? (OnPark?)
Any idea, how to implement it ?
Thanks
Thanks Jssor. It works fine. For information, this is my "do something treatment"
if (slideIndex > -1 && fromIndex > -1) {
// filter first access to keep only slide changement
var difference=slideIndex-fromIndex;
if (difference === 1 || difference === -2){
//next tile was just requested
var replaceIndex=(slideIndex+1)%3;
replaceImage(replaceIndex, nextImageUrl);
} else {
//previous tile was just requested
var replaceIndex=(2+slideIndex)%3;
replaceImage(replaceIndex, previousImageUrl);
}
}
function replaceImage(index,url){
// I have add the attributes class="tilei" where i = 0,1 or 2
// inside the tags <img u="image" ...
$('.tile'+index).attr("src",url).load(function(){
var fillHeight=this.height*720/this.width;
var top=(1130-fillHeight)/2;
$('.tile'+index).attr("style","width: 720px; height: "+fillHeight+
"px; top: "+top+"px; left: 0px; position: absolute;");
});
}
Would you do this image replacement in another way to avoid duplication code with the Jssor API, or to block any interaction during image loading ? Sincerely, Didier
You can use your own 'prev' and 'next' buttons.
You can call $Prev or $Next method when a button is clicked.
For example,
jssor_slider1.$Prev();
jssor_slider1.$Next();
And you can display/hide/alter any button when the slider parks.
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$DragOrientation: 3 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function SlideParkEventHandler(slideIndex, fromIndex) {
//do something to display/hide/alter any button
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
});
</script>
OK so I have a iframe canvas app with its height set to "Settable" with the facebook javascrip sdk calls to FB.Canvas.setSize(); and FB.Canvas.setAutoGrow();. These are working perfectly, as the iframe gets set to a certain pixel height based on its content.
The problem is that when I make a call to Fancybox, it positions itself based on this height. I know that's exactly what its supposed to do as the fancybox jQuery returns the viewport by:
(line 673 of latest version of jquery.fancybox-1.3.4.js):
_get_viewport = function() {
return [
$(window).width() - (currentOpts.margin * 2),
$(window).height() - (currentOpts.margin * 2),
$(document).scrollTop() + currentOpts.margin
];
},
But the problem is the iframe will, for a lot of viewers, be longer than their browser window. So the Fancybox centers itself in the iframe and ends up only partly visible to the majority of viewers. (i.e. iframe height is 1058px and users browser is say only 650px).
Is there a way to have fancybox just calculate the physical browser height? Or do I need to change some settings in my Facebook canvas app to make it work?
I like how the only scrollbar is the one on Facebook (the parent, if you will).
All suggestions GREATLY appreciated!
For fancybox 2 try:
find:
_start: function(index) {
and replace with:
_start: function(index) {
if ((window.parent != window) && FB && FB.Canvas) {
FB.Canvas.getPageInfo(
function(info) {
window.canvasInfo = info;
F._start_orig(index);
}
);
} else {
F._start_orig(index);
}
},
_start_orig: function (index) {
Then in function getViewport replace return rez; with:
if (window.canvasInfo) {
rez.h = window.canvasInfo.clientHeight;
rez.x = window.canvasInfo.scrollLeft;
rez.y = window.canvasInfo.scrollTop - window.canvasInfo.offsetTop;
}
return rez;
and finally in _getPosition function replace line:
} else if (!current.locked) {
with:
} else if (!current.locked || window.canvasInfo) {
As facebook js api provides page info, then we could use it, so
find
_start = function() {
replace with
_start = function() {
if ((window.parent != window) && FB && FB.Canvas) {
FB.Canvas.getPageInfo(
function(info) {
window.canvasInfo = info;
_start_orig();
}
);
} else {
_start_orig();
}
},
_start_orig = function() {
and also modify _get_viewport function
_get_viewport = function() {
if (window.canvasInfo) {
console.log(window.canvasInfo);
return [
$(window).width() - (currentOpts.margin * 2),
window.canvasInfo.clientHeight - (currentOpts.margin * 2),
$(document).scrollLeft() + currentOpts.margin,
window.canvasInfo.scrollTop - window.canvasInfo.offsetTop + currentOpts.margin
];
} else {
return [
$(window).width() - (currentOpts.margin * 2),
$(window).height() - (currentOpts.margin * 2),
$(document).scrollLeft() + currentOpts.margin,
$(document).scrollTop() + currentOpts.margin
];
}
},
I had the same problem, i used 'centerOnScroll' :true, and now it works fine...
Had the same problem. Thankfully fancybox is accessable through CSS. My solution was to overwrite fancybox's positioning in my CSS file:
#fancybox-wrap {
top: 20px !important;
}
This code places the fancybox always 20px from top of the iframe. Use a different size if you like. The !important sets this positioning even though fancybox sets the position dynamically at runtime.
Here's one way to do it by positioning the Fancybox relative to the position of another element, in my case an Uploadify queue complete div that displays a view link after the user uploads an image.
Have a style block with a set ID like so:
<style id="style-block">
body { background-color: #e7ebf2; overflow: hidden; }
</style>
Then the link to open the Fancybox calls a function with the image name, width, and height to set the content and sizes. The important part is the positioning. By getting the position of the queue complete div, generating a new class declaration (fancy-position), appending it to the style block BEFORE the fancybox loads (!important in class will override positioning from fancybox), then adding the new class using the wrapCSS parameter in the fancybox options, it positions the fancybox exactly where I want it.
function viewImage(image, width, height) {
var complete_pos = $('#image_queue_complete').position();
var css_code = '.fancy-position { top: ' + complete_pos.top.toString() + 'px !important; }';
$('#style-block').append(css_code);
var img_src = '<img src="images/' + image + '" width="' + width.toString() + '" height="' + height.toString() + '" />';
$.fancybox({
content: img_src,
type: 'inline',
autoCenter: false,
wrapCSS: 'fancy-position'
});
}