I have to position the image container at the top of the page, but there is no parameter.
I have found a small snippet in the docs of fancybox3, That works for me, but not for the navigation buttons. They are still in the middle of the page:
afterShow : function( instance, current, e ) {
$('.fancybox-content').css('transform','translate3d(0px, 30px, 0px)');
}
Spacing around content is controlled by CSS padding property of wrapping element. This is the default value for element containing an image:
.fancybox-slide--image {
padding: 44px 0;
}
#media all and (max-height: 576px) {
.fancybox-slide--image {
padding: 6px 0;
}
}
You can adjust that for your likening. As you can see, this gives greater flexibility that just some js option.
Related
I have slick carousel and slick lightbox.
The latter has no dots or navigation links. How to add them?
Since lightbox using slick itself:
Add dots : true to dist/slick-lightbox.js (or rebuild coffeescript)
SlickLightbox.prototype.initSlick = function (index) {
/* Runs slick by default, using `options.slick` if provided. If `options.slick` is a function, it gets fired instead of us initializing slick. Merges in initialSlide option. */
var additional;
additional = { initialSlide: index, dots:true };
//...
}
Add styles to make them available
.slick-dots {
bottom: 0;
}
.slick-dots li button::before {
color: #9f9f9f;
}
.slick-dots li.slick-active button::before {
color: white;
}
Microsoft Edge shows a confusing icon when dragging and dropping elements using the html "draggable" attribute. I think it might be considered a "cursor", but I am unsure. Regardless, is it possible to hide this copy/stop icon?
Microsoft Edge on Windows Example
As far as Windows is concerned, it looks like this icon only shows up on Edge. Chrome has a default behavior of a cursor change (much less obtrusive).
Google Chrome on Windows Example
Any browser on MacOS has neither the icon or the cursor change.
Here's a codepen example where you can see the behavior reproduced
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.setDragImage(document.getElementById("drag-image"), 0, 0);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
.droppable {
float: left;
min-width: 100px;
min-height: 80px;
border: 1px solid black;
margin: 0 32px;
padding: 8px;
}
#drag-image {
background: #eee;
padding: 4px;
position: absolute;
bottom: 0;
left: 0;
}
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)">
<h1 draggable="true" ondragstart="drag(event)" id="drag1">Drag Me</h1>
</div>
<div class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drag-image">Drag Me</div>
Background/why it matters: This could be considered a minor inconvenience, but for an application that is centered around drag and drop behavior this sort of UX mishap can be really confusing for the end user. Not only does the icon compete for attention with the drag image, but the icon is also potentially misinforming the user on the action they are taking. The "copy" icon is used when a droppable area is available, but the user could be moving (cutting) or creating a net new object from something that does not exist yet (think dragging a new component onto the screen in squarespace or a similar app).
I suggest you to use DataTransfer.dropEffect property in your code may help to solve the issue for MS Edge.
The DataTransfer.dropEffect property controls the feedback (typically visual) the user is given during a drag and drop operation. It will affect which cursor is displayed while dragging. For example, when the user hovers over a target drop element, the browser's cursor may indicate which type of operation will occur.
Example:
function dragstart_handler(ev) {
console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function drop_handler(ev) {
console.log("drop: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function dragover_handler(ev) {
console.log("dragOver: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move"
}
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection to move the element.
</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
JsFiddle Example link
Output in MS Edge:
Reference:
DataTransfer.dropEffect
I love the new CKEditor in Typo3, much better than the old RTE.
But I have an question about its configuration:
Is it possible to increase the width of the dropdowns?
I've tried the tips:
.cke_combo_text { width:auto !important; }
.cke_combopanel { height:600px !important; }
But it doesn't work. Any tips?
Found it!
We are using our own template-distribution.
You have to add in the ext_tables.php
//Overwrite BE-Stylings if needed. e.g. increase the select-width of ckeditor for Inline- / Block-Styles
if( TYPO3_MODE == "BE"){
$GLOBALS['TBE_STYLES']['skins']['backend']['stylesheetDirectories']['[your_ext_key]'] = 'EXT:[your_ext_key]/Resources/Private/Backend/';
}
Then you can add a stylesheet:
eg. typo3conf/ext/[your_ext_key]/Resources/Private/Backend/rte_ckeditor.scss
.cke_combopanel {
min-width: 35rem !important;
.cke_panel_frame {
min-width: 35rem !important;
}
}
I have a series of divs in a step type layout. I am learning to use Scss at the moment and I thought maybe a mixin could work through the 12 divs and arrange them for me. So far I've got:
#mixin steps(){
$stepBlocks: 12;
#for $i from 1 through $stepBlocks {
.steps-#{$i} {
position: absolute;
top: (($i * 296) + px);
display: block;
}
}
}
This is what my div structure looks like:
I've made a HTML mockup as well:
http://jsfiddle.net/vdecree/CGGyL/
As you can see, the fiddle works fine, however how can I negate the effect of the first one? I need the first element to be top: 0; is there an if statement I can use? If you think you've a better way in which I can do this, I'd appreciate any help.
What you're likely wanting to is start with an offset of 0, rather than 296px.
#mixin steps(){
$stepBlocks: 12;
#for $i from 1 through $stepBlocks {
.steps-#{$i} {
position: absolute;
top: ($i - 1) * 296px;
display: block;
}
}
}
When I searched for the icons used by JQGrid, I found single PNG file with all the icons. I am wondering how it can use portion of the image as icon for buttons used in JQGrid.
jqGrid uses icons from jQuery UI Theme. Usage of multiple icons (pictures) in one PNG file is the standard optimization. If one separate icons in multiple files then loading of enery separate file follow long time because of round trip times. Even is multiple files will be loaded parallel (multiple parallel HTTP request) loading of one file is more effectively.
So it you examine jquery-ui.css of jQuery UI (for example here) you will find the following
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
width: 16px;
height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url(images/ui-icons_469bdd_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_d8e7f3_256x240.png);
}
.ui-state-default .ui-icon {
background-image: url(images/ui-icons_6da8d5_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
background-image: url(images/ui-icons_217bc0_256x240.png);
}
.ui-state-active .ui-icon {
background-image: url(images/ui-icons_f9bd01_256x240.png);
}
.ui-state-highlight .ui-icon {
background-image: url(images/ui-icons_2e83ff_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url(images/ui-icons_cd0a0a_256x240.png);
}
/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
...
Every row of the body of the grid have the class "ui-widget-content". So the icons will be from the image with the relative URL images/ui-icons_469bdd_256x240.png (see CSS rule for .ui-widget-content .ui-icon):
On the other side the pager have the class "ui-state-default". So the icons will be from the image with the relative URL images/ui-icons_6da8d5_256x240.png (see CSS rule for .ui-state-default .ui-icon) and so on.
So all icons will be loaded from one file. All icon have the same height and the width 16px, but different icons have different background-position. So different 16x16 px parts of the index will be used.
The optimization method have the name Image Sprites. You can read about it here. There are some server solution which allows to combine many images (PNG and GIF images, but not JPG) referenced from a CSS file into a single large image on the fly on the server (see here). There are also places in Internet (like here) which allows you to upload multiple files and to get one combined image. In any way the solution is very old already and it will be intensively used by web developers.