I want to show some Infos as HTML in the Caption of a Fancybox.
These information are loaded beside the Image as an HTML element with ajax.
Until now I had an afterload method which loaded the caption content from this HTML Element into the caption by detaching it and append it into the caption after the ajax was loaded.
afterLoad : function (instance, slide) {
$( ".fancybox-slide--current .caption-content" ).detach()
.appendTo( ".fancybox-caption" );
}
This is the workaround I used, is there a cleaner way to do this?
I am not sure if I understand you, but I guess you are looking for a way to correctly update the caption. Here is a demo, you can tweak it to use ajax:
$('[data-fancybox="images"]').fancybox({
afterLoad: function(instance, current) {
if (instance.group[ current.index ].isProcessed !== true ) {
setTimeout(function() {
if ( !instance.isClosing ) {
var caption = 'Another caption for #' + (current.index + 1);
// Set caption permanently for current group item
instance.group[ current.index ].opts.caption = caption;
// Set caption for current slide object
current.opts.caption = caption;
// Update caption HTML element
instance.updateControls();
// Do this only once
instance.group[ current.index ].isProcessed = true;
}
}, 3000);
}
}
});
https://codepen.io/anon/pen/RyGZZE?editors=1010
Related
I'm trying to copy a specific cell from an Interactive Grid (which is in Display Only mode, if that matters), and instead of copying the cell I'm in, I'm copying the whole row. I can't seem to find any way to copy just the cell.
APEX versión: Application Express 19.1.0.00.15
Thank you beforehand.
Oracle Apex does not enable copy functionality to interactive report by purpose.
To enable it, you need to use even handler for copy event. This handler should be on the body or document. It can be achieved through Dynamic Action :
Event: Custom
Custom Event: copy
Selection Type: jQuery Selector
jQuery Selector: body
Then add one JavaScript true action with below code:
var text, i, selection, gridSel;
var event = this.browserEvent.originalEvent; // need the clipboard event
// we only care about copy from a grid cell ignore the rest
if ( !$(document.activeElement).hasClass("a-GV-cell") ) {
return;
}
var view = apex.region("emp").widget().interactiveGrid("getCurrentView"); //change "emp" to you IG static id
if ( view.internalIdentifier === "grid") {
text = "";
selection = window.getSelection();
gridSel = view.view$.grid("getSelection");
for (i = 0; i < gridSel.length; i++) {
selection.selectAllChildren(gridSel[i][0]);
text += selection.toString();
if (gridSel[i].length > 1) {
selection.selectAllChildren(gridSel[i][1]);
text += " \t" + selection.toString();
}
text += "";
}
selection.removeAllRanges();
event.clipboardData.setData('text/plain', text);
event.preventDefault();
}
The above will copy the current grid selection to the clipboard when the user types Ctrl+C while in a grid cell.
I wonder if the below javascript can be modified in order to trigger 'toggle' actions of interactive grid such 'selection-mode'.
apex.region( "[region static ID] " ).call( "getActions" ).lookup( "[action name]" );
Reference:
https://docs.oracle.com/en/database/oracle/application-express/20.1/aexjs/interactiveGrid.html
If someone is interested, I managed to find the solution.
Go on Interactive Grid's attributes--> JavaScript Initialization Code
and add the following code that creates a button that copies the selected cell.
function(config) {
let $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup3 = toolbarData.toolbarFind("actions3");
toolbarGroup3.controls.push({type: "BUTTON",
label: "Copy cell",
icon: "fa fa-copy is-blue",
iconBeforeLabel: true,
iconOnly: false,
disabled: false,
action: "custom-event" // instead of specific action eg "selection-copy", create a custom event
});
config.initActions = function( actions ) {
actions.add( {
name: "custom-event",
action: function(event, focusElement) {
actions.lookup('selection-mode').set(false); // select cell instead of the whole row
apex.region( "users_id" ).widget().interactiveGrid( "getActions" ).invoke( "selection-copy" ); // copy the selection
actions.lookup('selection-mode').set(true); // select again the whole row (important in case of master-detail grids)
}
} );
}
config.toolbarData = toolbarData;
return config;
}
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
function onClientClose(arg) {
// Pass the arguments from the dialog to the callback function on the main page.
GetRadWindow().close(arg);
}
function OnClientClicked(sender, args) {
CloseWithRefresh();
}
function CloseWithRefresh() {
GetRadWindow().Close();
}
</script>
</telerik:RadCodeBlock>
I want to resize my radWindow. how can i increase the radWindow size ?
And I've googled , i am not sure that why i have to use telerik:RadCodeBlock before script tag.
Note : i have not found any radwindow in my aspx file.
Search in the whole project for Radwindow or RadWindowManager and once you find the control set its Width and Height properties.
You can also get a reference to the dialog and set its dimensions via JavaScript:
var oWnd = $find("<%= DialogWindow.ClientID %>");
oWnd.show();
//Here set the width and height of RadWindow
oWnd.setSize(400, 400);
This can be set also in the OnClientShow event of the window.
https://www.telerik.com/forums/set-radwindow-height-and-width-at-the-time-on-opning
https://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/radwindow-object
This section of code in my /js/global.js file activate each image to open in a new window when clicked. Is it possible to alter this code to have each open in a FancyBox instead? I have downloaded a FancyBox plugin for a Vanilla forum I am running, and it currently only targets images embedded in posts After You Click On The Post Itself. On the main page, clicking on an image opens a new window.
// Shrink large images to fit into message space, and pop into new window when clicked.
// This needs to happen in onload because otherwise the image sizes are not yet known.
jQuery(window).load(function() {
var props = ['Width', 'Height'], prop;
while (prop = props.pop()) {
(function (natural, prop) {
jQuery.fn[natural] = (natural in new Image()) ?
function () {
return this[0][natural];
} :
function () {
var
node = this[0],
img,
value;
if (node.tagName.toLowerCase() === 'img') {
img = new Image();
img.src = node.src,
value = img[prop];
}
return value;
};
}('natural' + prop, prop.toLowerCase()));
}
jQuery('div.Message img').each(function(i,img) {
var img = jQuery(img);
var container = img.closest('div.Message');
if (img.naturalWidth() > container.width() && container.width() > 0) {
img.wrap('');
}
});
// Let the world know we're done here
jQuery(window).trigger('ImagesResized');
});
Add an specific class to your wrapped images, modifying this line
img.wrap('');
... into this :
img.wrap('<a class="fancybox" href="'+$(img).attr('src')+'"></a>');
Then bind fancybox to that selector (".fancybox") in a custom script like :
$(".fancybox").fancybox();
This assumes that you have properly loaded the fancybox js and css files.
I created an interactive map of London using the <map> tag which has 15 <area> tags defined. Upon clicking on any of the 15 areas, the source of the map is replaced by another, according to the area which was clicked on. All the areas have an individual id and the source changes according to that id.
Clicking again on the area reverts the map image back to its original source.
The simplified HTML for this is a bit like so:
<IMG id="londonmap" SRC="images/londonmap.png" USEMAP="#london">
<map name="london">
<area id="dalston" href="#" shape="rect" coords="364,75,500,200"
alt="Dalston Tube Stop" title="Dalston Area">
</map>
The jQuery I used for clicking and unclicking looks as follows:
$(document).ready(function()
{
$('#dalston').click(function()
{
// select the image and determine what the next src will be
var londonMap = $('#londonmap');
var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';
// re-bind the src attribute
londonMap.attr('src', newImageSrc);
});
});
Everything up to here works just fine. Now, I thought it would be nice, for just a bit of an extra effect to have the changing images .fadeToggle() when clicked for a smoother transition and as such changed to code to this:
$(document).ready(function()
{
$('#dalston').click(function() {
$('#londonmap').fadeToggle('slow', function()
{
// select the image and determine what the next src will be
var londonMap = $('#londonmap');
var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';
// re-bind the src attribute
londonMap.attr('src', newImageSrc);
});
});
});
The problem now is that only half the code reacts as I expected - the original image fades out, but the second one never takes its place. I'm guessing it has something to do with the order in which the events happen, but being a bit of a noob in jQuery I can't really tell what's going wrong.
Any help would be much appreciated as this is the last thing stopping me from finishing the map!
You never actually show the element back once it fades using the fadeToggle function.
You need to show it back once the image has been swapped.
UPDATE
$(document).ready(function()
{
$('#dalston').click(function() {
$('#londonmap').fadeOut('slow', function() {
// select the image and determine what the next src will be
var londonMap = $('#londonmap');
var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';
// re-bind the src attribute
londonMap.attr('src', newImageSrc);
$('#londonmap').fadeIn('slow');
});
});
});
Or chech the working example here.
Try:
$(document).ready(function()
{
$('#dalston').click(function() {
$('#londonmap').fadeToggle('slow', function()
{
// select the image and determine what the next src will be
var londonMap = $('#londonmap');
var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';
// re-bind the src attribute
londonMap.attr('src', newImageSrc);
//show the image
$('#londonmap').fadeToggle('slow');
});
});
});
You haven't told it to reverse the toggle, try this
$(document).ready(function() {
$('#dalston').click(function() {
$('#londonmap').fadeToggle('slow', function() {
// select the image and determine what the next src will be
var newImageSrc = $(this).attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';
// re-bind the src attribute and fade back in
$(this).attr('src', newImageSrc).fadeToggle('slow');
});
});
});
I'm a newbie to jQuery and I have a map with a highlight plugin, when mouse over an area I want to change the text in a div with an ID and the text I will get it from the area attribute Alt="some text"
Here is the code that used for area loops, I'm pretty sure I can add a small function here but I couldn't figure it out.
//map
clicks$(".tabs area").click(function(){
//areas loop:
$(".tabs area").each(function(){
var d = $(this).data('maphilight') || {};
if(d.alwaysOn == true){
d.alwaysOn = false;
}
});
var data = $(this).data('maphilight') || {};
data.alwaysOn = true;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
Any help or suggestions on how I can get this done would be highly appreciated.
I'm not familiar with the highlights plugin, but I think you just wanna add a mouseover event to each area like so (you would place this before/after your .click declaration):
$(".tabs area").mouseover(function() {
var alt_text = $(this).attr('alt');
$("#YOUR_TEXT_DIV_ID").html(alt_text);
}).mouseout(function() {
//do something on mouseout
});