We Keep Coding

b-toast notification is overlay in modal in bootstrap-vue in VUEJS

This is picture
I'm using $bvToast.toast() for using toast notification.
This is some line of code
this.$bvToast.toast('Hit enter to submit\n Click outside to cancel', {
title: 'Variant info',
autoHideDelay: 2000,
appendToast: true,
solid: true,
toastClass: {zIndex:9999999}
})
I think it's kind of having problem with z-index but I do not how to override z-index for b-toast? I saw some property toastClass, I set toastClass:{zIndex:9999}, but it still not work.
Edit 1:I just add toastIndex in data and use it like in -pic 2-. Is that right? I'm not familiar with syntax?
full pic
pic 1
pic 2

determine my own fancybox order

I'm working on a website where images need a fancybox. The images are however not placed in a chronological order in the HTML because they are part of a booklet I realised using booklet.js. So my question is, can I determine in what order fancybox opens my images?
I have tried to get this to work for some time now and made a fiddle for demonstrative purposes.
http://jsfiddle.net/XF8WW/7/
In my fiddle I determine what image has been clicked and what the next/previous image can be. Next I check if fancybox opens the correct image on a first attempt. If it fails I try to close fancybox and open it myself for the correct image.
The only problem in my solution can be found in the last function I wrote (clickPage).
In clickPage I try to close fancybox and reopen it for the correct image. Unfortunately either fancybox doesn't completely close or it doesn't reopen for that image.
function clickPage($pageNr) {
$.fancybox.close();
//$('.fancybox-overlay.fancybox-overlay-fixed').click();
$pageNrMinOne = $pageNr - 1;
$pageNrMinOne = $pageNrMinOne.toString();
$pageNr = $pageNr.toString();
console.log($pageNr);
console.log($pageNrMinOne);
$(".page" + $pageNr).eq($pageNrMinOne).trigger('click');
//$('.page' + $pageNr).click();
}
I know the code works, because when I enter it in the console it does.
Thank you for your time
Have a nice day

Alright, I managed to fix it.
Rather than using this script for my booklet:
http://www.netzgesta.de/booklet/
which rearanges the HTML I used this script:
http://builtbywill.com/code/booklet/
The latter doesn't rearange the HTML and is in my opinion the best booklet script out there so far.
Thanks everyone for your replies!
Have a nice day

I recommend handling your data needs separately (instead of using img src), passing it into the fb sig as the first argument:
var images = [
{
'href' : 'http://dromenopmaat.be/dromen_op_maat/images/nl/1_big.jpg',
'title' : 'some title' //optional
},
{
'href' : ' http://dromenopmaat.be/dromen_op_maat/images/nl/2_big.jpg ',
'title' : 'some title'
},
//etc
]
$.fancybox.open(
images,
{
index : 0,
nextEffect : 'none',
prevEffect : 'none',
margin : 100,
padding : 10,
type : 'image',
wrapCSS : 'fancy-gallery-wrapper',
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.7
},
title : {
type : 'inside'
}
}
});
(fancybox v2.0)
Ultimately, you are making your project overly complex, needlessly.
Build a json object in the order you wish, and send fb whatever extra params you might need (i just pulled this from a project, so tailor as you see fit).
Hope that helps -

Javascript Fancybox 1.3.4 Solution but needed it further explained please

This answer has been taken from this post:
Fancybox problem on iPhone
This was voted as best answer but I am new and still learning at js and I am having such a difficult time putting this all together, can someone help me with some more detailed instructions?
Fancybox attempts to auto resize and center itself everytime that the
browser window is resized, and this event gets triggered a lot on
iPads and iPhones. For fancy box 1.3.4, the code which controls this
is line 608: $(window).bind("resize.fb", $fancybox.resize);
To fix the issue, I modified this part of the fancybox JS, and added
another option called "resizeOnWindowResize", which you can set to
false for iPad and iPhone users, or just disable all together.
if(currentOpts.resizeOnWindowResize) { $(window).bind("resize.fb",
$fancybox.resize); } You must also add a default value for this
option in $.fn.fancybox.defaults hash map.
Then, when calling fancybox you can utilize this new option:
$('#fancybox_link').fancybox(${'scrolling': 'no',
width: 'auto',
height: 'auto',
centerOnScroll: false,
resizeOnWindowResize : false});
I got as far as go to line 608. I really do not know what to do next. What should the final product look like after you've added "resizeonwindowResize" and the if statement?

Add this:
if(currentOpts.resizeOnWindowResize) {
$(window).bind("resize.fb", $.fancybox.resize);
}
Where you find:
$(window).bind("resize.fb", $.fancybox.resize);
Near the bottom of:
$.fn.fancybox.defaults = { //blah blah blah options here.
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){},
// Add this
resizeOnWindowResize: true
};
Then save and when you call the fancybox:
$('.photo_gallery a').fancybox({
resizeOnWindowResize: false
});

This is also an alternative. Just replace the $.fancybox.resize function to as follows. It's just adding a simple userAgent check to avoid the .center call for iPhones.
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
$.fancybox.center(true);
}
};

JQuery / Javascript Image Replace

I am trying to do a very simple image replace of the Twitter widget logo to a logo I specify. How can I do this, please note that the twitter logo has NO ID or class on it, so I am not exactly sure how I can do a replace, it may have to loop through each of the images and then only replace the one that matches.
Example ..
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('twitter').start();
</script>
Above is the Twitter code I am using, it renders the twitter logo and the URL is http://widgets.twimg.com/i/widget-logo.png, I need to change this to /image/twitter.jpg.

Using jQuery: find the image that has the source attribute set to the twitter logo, and replace the src attribute with the relative url to your image:
$("img[src='http://widgets.twimg.com/i/widget-logo.png']").attr("src","/image/twitter.jpg");

One option is to use the selector to locate the property with the logo on it. This can be done using the selector $('div.twtr-ft a[href="http://twitter.com"] img') to locate the tag, and then replace the src attribute using the attr function.
My issue with the above is that changes made to the widget can break your code. I chose to use the homepage for the selector since that is less likely to change than the location of the image. div.twtr-ft is optional, but helps prevent any additions to the widget which contain an anchor with an image from breaking the code.

you could use an attribute test (because it is the particular information of the element), if strictly equal :
var logoTwitter = $('img[src="http://widgets.twimg.com/i/widget-logo.png"]');
If the picture url is not so consistent(mean maybe a part is variable), you can test ends with :
var logoTwitter = $('img[src$="/widget-logo.png"]');
check these selectors : http://api.jquery.com/category/selectors/

Flowplayer in fancybox?

I am trying to get the Flowplayer to be shown inside a Fancybox, but can't quite get it working. This is my code so far;
$("a.video_link").click(function () {
$.fancybox({
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': '/flowplayer/flowplayer.swf?video=myvideo.flv', /* have also tried a couple of other options for the url settings, but without luck)
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
Any suggestions?

Try manually launching fancybox and setting setting its content to a flowplayer.
For instance, given the link:
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
class="videoLink">Demo</a>
create a JQuery click function like this:
$('a.videoLink').click(function(e) {
e.preventDefault();
var container = $('<div/>');
container.flowplayer(
'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
$(this).attr('href')
);
$.fancybox({
content: container,
width: 300, height: 200,
scrolling: 'no',
autoDimensions: false
});
});
Note that flowplayer by default takes up size of it's container, so must be given finite dimensions to view it properly.

Have you tried to create on SWF Object with jQuery thus setting the swf params with that then using the flow players content setting to directly set the html of the model.??
Also try check your debug window too see if there is any errors showing up.
-- E.G
var flashvars = { //Change this with $.extend within click callback if you need to!
file : 'yvideo.flv'
}
var flowBoxParams = {
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'width': 680,
'height': 495,
}
var $conatiner = $('<div></div>').attr('id','MediaPlayerHolder').hide();
swfobject.embedSWF("/flowplayer/flowplayer.swf","MediaPlayerHolder","300","120","9.0.0",flashvars,params,attributes);
$("a.video_link").click(function(){
//Merge basic settings with title
params = $.extend(flowBoxParams,{title:this.title,html:$container});
//Send object to FlowPlay
$.fancybox(params);
//Show the video play
$($container).show();
});
THis is just basically setting to variables with your default settings within them (flashvars ,flowBoxParams), the creating an empty div container with the id (MediaPlayerHolder) and setting it to display:none.
Then we create a basic flash element with swfObject wich is your flowplayer swf and assign it to the hidden div container.
we then wait for the user click to be activated and then we alter the default settings to add title value to the flowplayer options.
We then tell flow player to begin what it needs to do.
with thin change the visibility of the container.
This is untested but if heres any errors they should only be minor, unless flow is strict when it comes to loading the swf will itself.

I do this alot, the only way I could get it to work was by doing simply this,
JavaScript >>
flowplayer(".player", "http://www2.imperial.ac.uk/business-school/etu/courses_1112/common/scripts/flowplayer/flowplayer-3.2.7.swf");
$('.yourbox').fancybox();
Html >>
<a class="yourbox" href="#data" >This shows content of element who has id="data"</a>
<div style="display:none">
<div id="data">
</div>
</div>
If you do it this way, you will need to put an ie hack in aswell, to unload the player, when closing the box.