I am try to add cropper.js in semantic modal. i am doing following step.
1) I have button on page called [Choose image]
2) If i am click on choose image one modal is open name is [thumbs].
thumbs modal have 2 button [choose from local pc] and [choose media].
3) If i am click on choose from local pc file dialog is open and image picker is working and cropper.js is assign to selected image perfect
4) If i am click on choose media button they open [media] modal and i have lots of images there and i have one button on each image if i am click on image path is pass to previous modal called thumbs and cropper tool is assigned but size is smaller as given size, if i am open inspect element of chrome cropper size is perfect.
You will better idea using following images.
http://prnt.sc/cnof60
http://prnt.sc/cnofei
http://prnt.sc/cnofne
http://prnt.sc/cnofxs
If see last 2 images you can difference in image.
I am using https://fengyuanchen.github.io/cropperjs/ for cropper function.
Thanks
When you init your cropper pass minContainerWidth and minContainerHeight. here i am passing 846 and 280.
var image = $("#img-preview-media-mobile");
var cropper = image.cropper(
{
dragMode: 'move',
autoCropArea: 1,
cropBoxMovable: false,
cropBoxResizable: false,
viewMode: 3,
minContainerWidth: 846,
minContainerHeight: 280,
crop: function(e)
{
var image_data = e.x +"#"+ e.y +"#846#280";
$("#img-preview-media-web-image-data").val(image_data);
}
});
and in cropper.js file change following line
/*$cropper.css((this.container = {
width: max($container.width(), num(options.minContainerWidth) || 200),
height: max($container.height(), num(options.minContainerHeight) || 100)
}));*/
$cropper.css((this.container = {
width: options.minContainerWidth ,
height: options.minContainerHeight
}));
Line number 806 to 809 in cropper js
Related
In TinyMCE editor, is it possible to turn on the resizing handles on div like they are available on images?
The object_resizing setting can only take true, false, img as possible values.
See https://www.tinymce.com/docs/configure/advanced-editing-behavior/#object_resizing
The TinyMCE source code has a isResizable function which contains
if (typeof selector != 'string') {
selector = 'table,img,figure.image,div';
}
and a showResizeRect function which activates the resizing handles.
I have not been able to activate it for a div.
This is what I have tested so far :
editor.addButton('Test', {
text: 'Test',
onclick: function() {
editor.selection.getNode().setAttribute("data-mce-resize","1");
console.log(editor.selection.controlSelection.isResizable(editor.selection.getNode()));
editor.selection.controlSelection.showResizeRect(editor.selection.getNode());
}
});
isResizable is false
Any clue?
Your code works fie on my end:
http://fiddle.tinymce.com/cugaab
I add type to the editor, highlight and use the bottom Formats>Blocks>Div option to put a div around it, use your test button and I get resize handles and the console logs 'true'.
Resized div image
There is a link in the input form to a popup window to pickup subject categories. The popup window (modal) is a long list but it is not scrolling. If I am trying to scroll then the input form is scrolling and not the popup window. The popup window is moving up with the input form. I want the popup window to scroll, so that I can go through the list of 'subject categories' to select. I am trying to modified this open source software code for my local use.
function(resultingHtml){
//retrieve the dialog box
var $Result = $('<div></div>').html(resultingHtml);
var mainDialogDivision = $Result.find('div[id^=aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_]');
$('body').append($(mainDialogDivision[0]));
var vocabularyDialog = $('div#aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_' + vocabularyIdentifier);
vocabularyDialog.dialog({
autoOpen: true,
overflow: scroll,
height: 450,
width: 650,
modal: true,
title: $Result.find('title').html()
});
You should be able to accomplish this using CSS. Adding style overflow:auto to the main modal element should allow you to scroll through all the subject categories.
You don't mention which DSpace theme you are using, so I assume you are using theme Mirage (the default DSpace theme), then adding the following CSS to the style.css file of your theme should solve your scrolling problem:
.ui-dialog.ui-widget.ui-widget-content
{
overflow: auto
}
I have created a portfolio-type (WordPress-based) website, using FullPage and Flexslider (as a absolute positioned pop-up), and it has a FullScreen button, which is currently giving me some nightmares, but only on the second ".section" in of the FullPage (it only has two sections).
I am also using SlimScroll.js as advised on the FullPage documentation as it can be taller than the window.
For Chrome the animation is "clunky", and when it goes fullscreen it waits like a second until it actually does. Please see the image below:
Screenshot of transition happening
I have added the following code and it worked for the first section, but not to the second section...:
html:not(.ios) .fp-section.active {
height: 100vh !important;
}
html:not(.ios) .fp-section.active .fp-tableCell {
height: 100vh !important;
}
On Safari, though, the transition is smooth but, every now and then, when it finishes it flickers...!
On Firefox there's not much problem as the fullscreen fades in and out. (Is there a way to replace it for a zoom-type animation?
My FullPage settings:
$('#fullpage').fullpage({
// Navigation
slideNavigation: false,
// Scrolling
easingcss3: 'cubic-bezier(0.850, 0.000, 0.250, 1.000)', //easeInOutCirc
scrollingSpeed: 500,
scrollOverflow: true,
// Design
controlArrows: false,
// Events
afterLoad: function(anchorLink, index) { // after changing section
if (index == 1){
// Load scrollDown link so that you don't have to load it afterwards
$('#main').load(scrollDown + ' .main-content', function(){
$.fn.fullpage.reBuild();
});
// Hide menu
if ( $( '#site-navigation' ).hasClass( 'toggled' ) ) {
$( '#site-navigation' ).removeClass('toggled');
$( '#site-navigation .menu-toggle').attr( 'aria-expanded', 'false' );
$( '#site-navigation ul').attr( 'aria-expanded', 'false' );
}
}
colorInversion();
popupSlider();
},
afterRender: function() { // so that it applies to first section too
colorInversion();
popupSlider();
},
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) { // after changing slide
//$.fn.fullpage.reBuild();
popupSlider();
}
});
My FlexSlider settings:
$('#popup-slider').flexslider({
animation: 'slide',
slideshow: false,
easing: 'easeInOutExpo',
animationSpeed: 0,
customDirectionNav: $(".flex-direction-nav a"),
// Usability features
video: true,
// Special Properties
manualControls: '.popup-slider-link',
// Callback API
start: function(slider){
$('.slides li *').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
},
after: function(){ // After each slider animation completes
flexslideColorInversion(); // Check for color inversion
$('#popup-slider').data('flexslider').vars.animationSpeed = 500; // Put animation speed back to 500
},
});
(Flexslider is initialised inside the popupslider() function.)
Is there a way to "fix" these issues?
Thank you so much in advance to anyone who may be able to help me with this.
EDIT:
I have seen that the lag in Chrome was because the popup was over the thumbnails and therefore was still resizing them even though they weren't in view; my solution to this was to apply a "display: none" to when the popup slider was on.
The Flicker in Safari is because FullPage.js changes the sections' sizes and their "translate3d", so there is a flicker when that adjustment occurs. The default Fullpage.js characteristic is to actually show part of the section above while it's adjusting, but as I am using 100vh for the .active section it doesnt show on Chrome, Opera or Firefox and only flickers in Safari (hence me wondering what the flicker was!)
Probably the only way around it is to recode Fullpage.js's translate3d (and height/width) codes also with "vh" so that it doesn't have to adjust the size. If any one has a ready code of this, that would be really appreciated! (IE8 is support is not required).
Cheers
I have to put image loading at client side, which is basically right after browser finishes requesting a page, an ajax call is triggered to load list of images, then slides are added into sider container. Number of photos is not known after that ajax call.
I tried building html text of slides, and assign into slider container, then trigger the slider-starter. But the slider doesn't show properly.
Thanks a lot for any suggestion
I post what I did here in case it's helpful for someone:
//function to start the slider
jssor_slider1_starter = function (containerId) {
var options = {
$AutoPlay: false,
$SlideDuration: 800,
$FillMode: 2,
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$ChanceToShow: 2,
$Lanes: 1,
$SpacingX: 14,
$SpacingY: 12,
$Cols: 6,
$Align: 156,
$Orientation: 2
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
//Ajax function to start the slider after loading the 'content' of slider
//getImgUrl is the url of page returning urls of images contained in slider. Format of response can be whatever as long as you can parse it, my sample is [[[url1,url2..]]]
$.ajax({
url:getImgUrl,
success:function(data){
var imgurls_str=data.substring(data.indexOf('[[[')+3,data.indexOf(']]]'));
var imgurls=imgurls_str.split(',');
var imgHtmls='';
for(var i=0;i<imgurls.length;++i){
imgHtmls+='<div><img u="image" src="'+imgurls[i]+'" /><img u="thumb" src="'+imgurls[i]+'" /></div>';
}
$("#slides").html(imgHtmls);
jssor_slider1_starter('slider1_container');
}
});
You are doing in a right way.
All you need is to check slides (you added dynamically) are correct or not.
To check html created dynamically, you can copy it out and test it in a standalone html file to see if the slider works.
I'm manually porting an extension I wrote in Chrome over to Firefox. I'm attaching a panel to a widget, and setting the content of that panel as an HTML file. How can I make the panel shrink and grow with the content? There's a lot of unsightly scroll bars and grey background right now.
var data = require("self").data;
var text_entry = require("panel").Panel({
width: 320,
height: 181,
contentURL: data.url("text-entry.html"),
contentScriptFile: data.url("get-text.js")
});
require("widget").Widget({
label: "Text entry",
id: "text-entry",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: text_entry
});
Not setting the height property of the panel makes it quite tall.
You might want to check out this example that resizes the panel based on the document loaded. If you want to resize based on changes to the content size, at least on initial load:
https://builder.addons.mozilla.org/package/150225/latest/
( sorry for the delay in respinding, been afk travelling )