When clicking on a link I need to load a huge pdf on FancyBox overlay. Until the pdf is loaded I'm displaying a FancyBox loader. The problem is I need to add a text like "Please Wait...etc" in the FancyBox loader. Can any one help?
This is My Code:
<p>
<a class="fancypdf" href="hugepdf.pdf">Click
Here To View The PDF</a>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".fancypdf").click(function(event) {
$.fancybox.open(this.href, {
type : "iframe"
});
$.fancybox.showLoading();
$("iframe.fancybox-iframe").load(function() {
$.fancybox.hideLoading();
content: {
text: 'Loading...',}
});
event.preventDefault();
});
});
</script>
P.S.
You can modify following fiddle.
DEMO
Please have a look at below modifications:
Updated Fiddle Link: http://jsfiddle.net/PudLq/619/
1) added CSS class as:
#fancybox-loading{
background-repeat: no-repeat;
background-position: center -108px;
text-align: center;
}
#fancybox-loading div{
margin: auto;
}
.overrideLoading{
background: none !important;
color: white;
width: 92px !important;
}
2) after showing loading animation; altering the loading div HTML as per our need as follows:
$.fancybox.showLoading();
$('#fancybox-loading').append("<div class='overrideLoading'>Please Wait...</div>");
3) On hiding the animation; As suggested by "rockmandew" there is absolutely no need of reverting our HTML/CSS changes. On calling $.fancybox.showLoading() again directly; default loading animation will be shown to user. I have tested it and added one more link in fiddle to show default loading animation. Please click on "Show Default loading" to see that effect.
I hope this will help you.
I didn't have a chance to tweak the resulting positioning being a little off-center, but this may be a more simple solution:
http://jsfiddle.net/PudLq/621/
Simply add your text to an :after pseudo element with a content: rule and modify the styles of the loading wrapper to accomodate.
here's the CSS I added:
#fancybox-loading {
background: #000;
padding: 5px;
border-radius: 6px;}
#fancybox-loading:after {
content:"Please wait...";
display:inline-block;
color:#fff;}
#fancybox-loading div {margin:auto;}
Here is a forked version of your Fiddle.
I've basically span with the text "Please Wait". Then I've applied some CSS to that to position it as you did with #fancybox-loading .
Here is the new javascript code -
$(".on").click(function () {
var target = $('#target');
var overlay = $('#overlay');
overlay.width(target.width()).height(target.height()).css({
'left': target.position().left,
'top': target.position().top
}).fadeIn(200);
$.fancybox.showLoading();
$('#fancybox-loading').css({
'left': (target.width() - $('#fancybox-loading').width()) / 2,
'top': (target.height() - $('#fancybox-loading').height()) / 2,
'margin': 0
});
var labelWidth = 80;
$('body').append($('<span>', {
'class': 'waitText'
}).text("Please Wait").css({
'width': labelWidth,
'left': (target.width() - labelWidth) / 2,
'top': ((target.height() - $('#fancybox-loading').height()) / 2) + $('#fancybox-loading').height()
}));
});
$(".off").click(function () {
$('#overlay').fadeOut(200);
$.fancybox.hideLoading();
$('.waitText').remove();
});
And my new CSS -
.waitText {
position: fixed;
margin: auto;
color: white;
text-align: center;
}
Following vijayP's answers:
JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
I modified his CSS class of "overrideLoading":
.overrideLoading{
background: none !important;
color: white;
position: absolute;
top: 42px;
}
As you can see I added a "position:absolute" and a "top" position - you can modify this to however you need it to appear.
Next I altered his jQuery, which I modified to actually append a new element:
$('#fancybox-loading div').append("<div class='overrideLoading'>Please Wait...</div>");
As you can see, that reduced your required jQuery to one line.
Finally, I removed the last part of the function, which was removing the class. Since this is no longer required, you can just keep the FancyBox "hideLoading" call.
For learning purposes, I removed the following from the last function:
$('#fancybox-loading div').removeClass("overrideLoading");
$('#fancybox-loading div').text("");
Again, here is the JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
First Update:
I saw that the first user to answer, updated his answer and while works, I would suggest shying away from "!important" tags as much as possible. I too refined my answer and developed a solution that didn't use any !important tags.
What was originally: $('#fancybox-loading div').append("Please Wait..."); was now changed to:
$('#target ~ #overlay').append("<div class='overrideLoading'>Please Wait...</div>");
I noticed an earlier comment from you, which specified that you wanted to target specific loading overlays - what this function does is it: Selects every '#overlay' element that is preceded by a '#target' element - you can insert whatever target you want.
I removed all instances of the "!important" tag - this is just best/standard practice.
.overrideLoading{
color: white;
position: absolute;
top: 86px;
left: 16px;
}
Updated JsFiddle: https://jsfiddle.net/rockmandew/kmfeppec/7/
Related
I have a jQuery custom scrollbar, and I invoke it like this:
<script>
(function($){
$(window).on("load",function(){
$(".main_text,#C2,.png_container").mCustomScrollbar();
});
})(jQuery);
That works correctly for all of the page elements except .png_container, but unlike the other sections, that section is only used in a JavaScript variable that is used to substitute text in a placeholder ID, and I think that's where the problem is.
Here is how it's called from an "onclick" button event:
<div class="main_text">
<div id="C2">Main Text</div>
</div>
if (type == 101) {
var X = "<header>First Section</header><br>A classic example of good form/<br><br>More information<ul type=\"circle\"><li>Element Point 1<br></li><li>Element Point 1</li></ul><i><span class=\"span_01\">So much better</i></span><br><br><div class=\"png_container\"><img class=\"png_format\" src=\"images/Element 001.png\"></div>"}
document.querySelector("#C2").innerHTML = X;}
The png_container has a separate set of scroll bars, but they are not replaced by the custom scroll bars (the other page sections do get the custom scroll bars).
Here is the relevant css:
.png_container{
overflow: auto;
overflow-y: auto;
overflow-x: auto;
height: 400px;
width: 800px;
border: 2px solid;
border-color: green;
}
#C2{
color:#DBDBDB;
font-family: camphorW04-Thin,calibri,arial;
font-size: 14pt;
text-indent: 0px;
width: auto;
margin: auto;
margin-left: 20px;
margin-right: 250px;
}
So my question is: how can I replace the scroll bars on a section that is embedded in a JavaScript variable, as shown above?
My research has found some similar questions, but none that answer this specific question, so I hope somebody knows the answer. Thanks very much for any ideas.
You initialize the mCustomScrollbar plugin on load this way:
$(window).on("load",function(){
$(".main_text,#C2,.png_container").mCustomScrollbar();
});
The two first selectors have matching elements at this moment. But there is no existing element to match the last selector since .png_container is appended on click.
So you can safely remove .png_container from the load handler...
And initialise mCustomScrollbar on .png_container when it exists.
$(window).on("load",function(){
$(".main_text,#C2").mCustomScrollbar(); // Remove .png_container
});
$(".something").on("click",function(){
if (type == 101) {
var X = "<header>First Section</header><br>A classic example of good form/<br><br>More information<ul type=\"circle\"><li>Element Point 1<br></li><li>Element Point 1</li></ul><i><span class=\"span_01\">So much better</i></span><br><br><div class=\"png_container\"><img class=\"png_format\" src=\"images/Element 001.png\"></div>"}
document.querySelector("#C2").innerHTML = X;
$(".png_container").mCustomScrollbar(); // Add this.
}
I really don't know why this doesn't work: fiddle
When I click on the red box, I want it to move down 50px and change the height to 200px.
Any Idea?
Well this is how CSS work sadly, IDs take higher priority as a selector than a class would read this article for more info.
On click i added a class with the size/marign changes you wanted.
.box {
background-color: red;
height: 100px;
margin-top: 0px;
width: 100px;
display: block;
transition: all .5s ease-in-out;
}
.box-active {
height: 200px;
margin-top: 50px;
}
The JS
$('.box').click(function(){
$(this).addClass("box-active");
});
Here's a fiddle with the working solution.
Fiddle
You could use this instead:
jsFiddle example
$('#box').click(function(){
$(this).css('margin-top','50px');
$(this).css('height','200px');
});
I also added in the -webkit-/-moz- vendors/prefixes.
function changeprop(id)
{
$(id).css({'margin-top', '50px'});
$(id).css({'height', '200px'});
}
SyntaxError: missing : after property id
$(id).css({'margin-top', '50px'});
use : between property name and value not ,
function changeprop(id)
{
$(id).css({'margin-top': '50px'});
$(id).css({'height': '200px'});
}
this will work fine
maybe you can write your code in local html file and watch the console message throw firebug or other develop tool
thus can suffer less from error
How to make custom jquery tooltip appear as multiple line that adjusts to fixed width? So it not go in one long line (if 'title' attribute is very long). Because Now if I write long 'title' attribute, tooltip is displayed on one long line and it does not matter what width is set to tooltip element.
My code to get better understanding of what I'm asking:
http://jsfiddle.net/8XttH/
jquery code:
$(document).ready(function() {
$("body").append("<div class='tip'></div>");
$("p[title]").each(function() {
$(this).hover(function(e) {
$().mousemove(function(e) {
var tipY = e.pageY + 16;
var tipX = e.pageX + 16;
$(".tip").css({'top': tipY, 'left': tipX});
});
$(".tip")
.html($(this).attr('title'))
.stop(true,true)
.fadeIn("fast");
$(this).removeAttr('title');
}, function() {
$(".tip")
.stop(true,true)
.fadeOut("fast");
$(this).attr('title', $(".tip").html());
});
});
});
Set a max-width on the tool tip box?
max-width: 100px;
Also set the height to auto so it increases as needed
height: auto;
The text will then wrap to the next line.
See this fiddle
Use this css
div.tip{
position: absolute;
top: 100px;
left: 100px;
width:100px;
border: 2px solid #FF0000;
background-color: #FF9999;
display: none;
padding: 3px;
}
Fiddle: http://jsfiddle.net/8XttH/2/
I'm trying to position a Bootstrap popover for a trigger that sits on the far top-right corner of a 960px wide web page.
Ideally, I'd position it on the bottom and move the arrow with CSS (so the arrow is on the top-right of the popover). Unfortunately the 'placement':'bottom' positioning is not enough, since it will center it below the trigger.
I'm looking for solution that will place the popover statically below and on the left of the trigger.
This works. Tested.
.popover {
top: 71px !important;
left: 379px !important;
}
Simply add an attribute to your popover! See my JSFiddle if you're in a hurry.
We want to add an ID or a class to a particular popover so that we may customize it the way we want via CSS.
Please note that we don't want to customize all popovers! This is terrible idea.
Here is a simple example - display the popover like this:
// We add the id 'my-popover'
$("#my-button").popover({
html : true,
placement: 'bottom'
}).data('bs.popover').tip().attr('id', 'my-popover');
#my-popover {
left: -169px!important;
}
#my-popover .arrow {
left: 90%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id="my-button" data-toggle="popover">My Button</button>
I've created a jQuery plugin that provides 4 additonal placements:
topLeft, topRight, bottomLeft, bottomRight
You just include either the minified js or unminified js and have the matching css (minified vs unminified) in the same folder.
https://github.com/dkleehammer/bootstrap-popover-extra-placements
Popover's Viewport (Bootstrap v3)
The best solution that will work for you in all occassions, especially if your website has a fluid width, is to use the viewport option of the Bootstrap Popover.
This will make the popover take width inside a selector you have assigned. So if the trigger button is on the right of that container, the bootstrap arrow will also appear on the right while the popover is inside that area.
See jsfiddle.net
You can also use padding if you want some space from the edge of container. If you want no padding just use viewport: '.container'
$('#popoverButton').popover({
container: 'body',
placement: "bottom",
html: true,
viewport: { selector: '.container', padding: 5 },
content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
});
in the following html example:
<div class="container">
<button type="button" id="popoverButton">Click Me!</button>
</div>
and with CSS:
.container {
text-align:right;
width: 100px;
padding: 20px;
background: blue;
}
Popover's Boundary (Bootstrap v4)
Similar to viewport, in Bootstrap version 4, popover introduced the new option boundary
https://getbootstrap.com/docs/4.1/components/popovers/#options
I solved this (partially) by adding some lines of code to the bootstrap css library. You will have to modify tooltip.js, tooltip.less, popover.js, and popover.less
in tooltip.js, add this case in the switch statement there
case 'bottom-right':
tp = {top: pos.top + pos.height, left: pos.left + pos.width}
break
in tooltip.less, add these two lines in .tooltip{}
&.bottom-right { margin-top: -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }
do the same in popover.js and popover.less. Basically, wherever you find code where other positions are mentioned, add your desired position accordingly.
As I mentioned earlier, this solved the problem partially. My problem now is that the little arrow of the popover does not appear.
note: if you want to have the popover in top-left, use top attribute of '.top' and left attribute of '.left'
To bootstrap 3.0.0:
.popover{ right:0!important; }
And modify too
.popover { max-width:WWWpx!important; }
where WWW is your correct max-width to show your popover content.
I had to make the following changes for the popover to position below with some overlap and to show the arrow correctly.
js
case 'bottom-right':
tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}
break
css
.popover.bottom-right .arrow {
left: 20px; /* MODIFIED */
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -11px;
}
.popover.bottom-right .arrow:after {
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
}
This can be extended for arrow locations elsewhere .. enjoy!
If you take a look at bootstrap source codes, you will notice that position can be modified using margin.
So, first you should change popover template to add own css class to not get in conflict with other popovers:
$(".trigger").popover({
html: true,
placement: 'bottom',
trigger: 'click',
template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
Then using css you can easily shift popover position:
.popover.popover--topright {
/* margin-top: 0px; // Use to change vertical position */
margin-right: 40px; /* Use to change horizontal position */
}
.popover.popover--topright .arrow {
left: 88% !important; /* fix arrow position */
}
This solution would not influence other popovers you have. Same solution can be used on tooltips as well because popover class inherit from tooltip class.
Here's a simple jsFiddle
Sure you can. Fortunately there is a clean way to do that and it is in the Bootstrap popover / tooltip documentation as well.
let mySpecialTooltip = $('#mySpecialTooltip);
mySpecialTooltip.tooltip({
container: 'body',
placement: 'bottom',
html: true,
template: '<div class="tooltip your-custom-class" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});
in your css file:-
.your-custom-class {
bottom: your value;
}
Make sure to add the template in bootstrap's tooltip documentation and add your custom class name and style it using css
And, that's it. You can find more about this on https://getbootstrap.com/docs/4.0/components/tooltips/
Maybe you don't need this logic for a responsive behavior.
E.g.
placement: 'auto left'
Bootstrap 3 has auto value for placement. Bootstrap doc:
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
I am using blockUI in multiple places and they all have the same properties so i keep on repeating the same css values in all the place I use. is there a way to put it into a CSS file.
currently i use:
$.blockUI({
message: $('#Something'),
css: {
border: '5px solid #F4712',
backgroundColor: '#6F4712',
width: '300px'
}
});
can i use like:
$.blockUI({
message: $('#Something'),
css: {
class:"alertBox"
}
});
thanks
according to the documentation - you can't.
but you to do that :
the class $(".blockPage").addClass("myClass")
p.s. be sure not to give any styles in the code as you wrote .
and update to something like this :
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
$(".blockPage").addClass("myClass");
}
});
I was half way through modifying my copy of the blockUI plugin to add this functionality and found there was already a config option for blockMsgClass, setting this to your css class adds your class to the block.
$.blockUI(
{
blockMsgClass: 'alertBox',
message: 'Hello styled popup'
});
One thing to note though is that the plugin code uses inline css so you need to mark as !important for fields such as text-align, color, border, background-color and cursor: wait.
.alertBox
{
border:none !important;
background-color: #437DD4 !important;
color: #fff !important;
cursor: default !important;
}
For dynamic class adding the first answer worked, but some flicker occured, because the class was added too late.
So I added my custom class before the blockUI to the body and changed my css a bit and for me it works great:
JS:
$('body').removeClass().addClass('myCustomClass');
$.blockUI();
CSS:
div.blockPage{// default layout
width: 30%;
top: 40%;
left: 35%;
text-align:center;
}
body.myCustomClass > div.blockPage{
width: 90%;
left: 5%;
top: 3%;
text-align:left;
}
this maybe an old question but here is the answer for anyone needs it
http://malsup.com/jquery/block/stylesheet.html
basicly you will disable the default css by this line
$.blockUI.defaults.css = {};
and then add your css style inside a separate file or so .
You can define a style for your message box outside the javascript and omit the css block. In your case it could be:
<style type="text/css">
div.blockMsg {
border: '5px solid #F4712';
backgroundColor: '#6F4712';
width: '300px';
}
</style>
Look at this (v2) for further infos.
I know this is a old question but now days you can use $.blockUI.defaults.css = {}; as stated in the documentation