Adding an extra overlay div to the base tpl in the "fancybox-stage" ruins the captions for some reason. Without using the base tpl, the caption is read properly from tye data('caption') attribute. Is this intended?
baseTpl:
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="fancybox-infobar"><span data-fancybox-index></span> / <span data-fancybox-count></span></div>' +
'<div class="fancybox-toolbar">{{buttons}}</div>' +
'<div class="fancybox-navigation">{{arrows}}</div>' +
'<div class="fancybox-stage"><div style="position:absolute;z-index:99999;"id="overlay"></div></div>' +
'<div class="fancybox-caption"></div>' +
"</div>" +
"</div>",
Even if I try to add +caption+ to the caption div in base tpl, the console error says caption is not defined, so that's not a solution either. Won't work with +slide.opts.$orig.data('caption')+either.
I fixed it by directly editing the base tpl within the js file of fancybox, using the base tpl change through options and javascript although having exactly the same code, breaks caption functionality, however inside the core js file, it does not.
Related
I'm currently implementing a Swiper using react. I'm using Bullets as pagination marks. My code for the pagination looks as follows:
<Swiper
navigation
pagination={{
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
}}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
Since I'm using react the attribute of the span should be className instead of class. The problem is, that if I change it to className instead of class, the CSS of the bullets does not get applied. I hope somebody can help me to fix this, thanks in advance.
Use it like this,
return <span className={`${className}`}>{index + 1}</span>;
This will work!
I am trying to display my data in Green color I tried with different methods but still it is not getting populated.
if(typeof(this._serverList)!="undefined"){
var apparr=this._ApplicationList.find(x=>x.appNm==app);
let strlist1=this._serverList.filter(i=>i.envId==envId&&i.appId==apparr.appId).map(x=>x.serverName);
if(typeof(strlist1)!="undefined"){
strlist1.forEach(line=>{
if(line!="")
line.fontcolor("green"); //HERE IS PROBLEM, NOT POPULATING
list+='.'+line+'\n';
});
}
return list;
}
Your problem is using the fontcolor() method - that's old and won't work in HTML5:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor
If you are rendering the HTML properly from this string, then you should be able to easily achieve this by just assigning some hardcoded HTML to it (that's all fontcolor() does). So instead of doing line.fontcolor(color), you could just replace that line with:
line = '<p style="color: #000">' + line + '</p>
Or use template strings, etc.
document.getElementById('red-text').innerHTML = '<p style="color: red">hello!</p>';
<div id="red-text"></div>
How can I have different breadcrumbs background pictures, depending on visited page? Is this possible without using some additional modules?
You really don't need a module for this. What you can do is specify a div id on each page (in the content), and then, you will have a CSS that is something like the following:
#page-123 .breadcrumb{
background-color: #ff0000; /* background color is red */
}
I think the easiest way is to modify the index.php file of your template:
Something along the lines:
<head>...</head>
<?php
$params = &$app->getParams();
$pageclass = $params->get('page_title');
$pageclassname = str_replace(' ', '-' ,strtolower($pageclass));
?>
<body id="<?php echo $pageclassname; ?>"> ... </body>
That way you have a nice id that you can use for all your styling needs and your css code is more readable.
Please, see image below and you will see what I talking about.
When I click on link or picture feature of Summernote BoosTrap Editor ( v0.6.16 ) the Modal appears inside another Modal, that's weird. I don't know if I have some CSS overriding another ones or if its BUG of SummerNote.
Summernote url: http://summernote.org/#/
Thanks.
I found the issue. In my point of view its a incompatibility between SummerNote and bootstrap-modal plugin.
In SummerNote I found code below:
var tplDialog = function (className, title, body, footer) {
return '<div class="' + className + ' modal" aria-hidden="false">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
(title ?
'<div class="modal-header">' +
'<button type="button" class="close" aria-hidden="true" tabindex="-1">×</button>' +
'<h4 class="modal-title">' + title + '</h4>' +
'</div>' : ''
) +
'<div class="modal-body">' + body + '</div>' +
(footer ?
'<div class="modal-footer">' + footer + '</div>' : ''
) +
'</div>' +
'</div>' +
'</div>';
};
What the meaning of this, when i click on Link or Picture feature on SummerNote he calls the .modal() and the default behavior of this function, on Bootstrap-modal Plugin, is create a new div with class="modal-dialog". If I remove this class="modal-dialog" and try again, everything works fine!
i think you just need to enable this option
dialogsInBody: true
$('.summernote').summernote({
height: 300,
dialogsInBody: true
});
As originally pointed on this issue, Summernote´s crew has included the solution in the documentation, which says to include the following option:
$('#summernote').summernote({
dialogsInBody: true
});
But even so you experience a bug that freezes the underlaying modal, you can use this ugly, but handy and short workaround:
$('.modal.link-dialog').on('hide.bs.modal', () => {
setTimeout(() => {
if ($('.modal:not(.link-dialog)').hasClass('show')) {
$('body').addClass('modal-open');
}
}, 0);
});
It basically re-add the modal-open class to the body when another modal is active.
I have a flash object, and when it loads the IE "image not found" graphic shows up for a fraction of a second and then disappears.
I've tried to check for errors, and the only one which may be relevant is this:
SEC7113: CSS was ignored due to mime type mismatch
jquery.uploadify.css
(It is being sent as text/javascript).
I don't know if this is relevant and could cause such behaviour.
On all other browsers, including IE9, it does not happen.
Any ideas?
EDIT:
I am using the uploadify script, which generates the flash object - this is the code:
// Create the button
if (!settings.buttonImage) {
var button = jQuery('<div />', {
id : settings.id + '_button',
'class' : 'uploadifyButton ' + settings.buttonClass,
html : '<span class="uploadifyButtonText">' + settings.buttonText + '</span>'
});
jQuery('#' + settings.id).append(button);
jQuery('#' + swfuploadify.movieName).css({position: 'absolute', 'z-index': 1});
} else {
jQuery('#' + swfuploadify.movieName).addClass(settings.buttonClass);
}