The indicator line is not showing up on the active tab on page load.
Initialize it on the onOpen callback in collapsible.
$('body .collapsible').collapsible({onOpen: function(){ $('ul.tabs').tabs() } })
Related
I am building a simple front end site and I'm using Bootstrap for styling.
I have built a section using modals. The user clicks on a button to open the modal and then sees a centred modal.
What I would Like
I want to be able to allow the user to click a button at the bottom of the modal and be redirected to another part of the page and the modal close.
I have successfully been able to move the user to the new part of the page by using <a> tags, href and id's and also by using onclick="window.location.href='#middle'", and have also been able to dismiss the modal.
THE PROBLEM is when the user clicks the button on the modal, they are redirected to where I want them to go to and the modal closes BUT then instantaneously the window moves back to the original place where the modal button was pressed.
I want to stop the moving back to the place where the original modal was clicked and leave the user at the place they got to when they clicked the button.
I have tried using <a> tags instead of <button> and it has the same effect.
Here is a working example jsfiddle showing the problem.
https://jsfiddle.net/peamanschesthair/kdu5gno1/42/
Any ideas are greatly appreciated.
Use setTimeout to delay the location change, after the modal hide event. To determine the element that triggered the dismiss, check the document.activeElement...
$('#exampleModalCenter').on('hide.bs.modal', function (e) {
var closeTrigger = document.activeElement.id
if (closeTrigger === 'btnMove') {
setTimeout(()=>{
window.location.hash = '#middle'
},400)
}
})
Demo: https://codeply.com/p/WW9aB8OeNx
Alternate option: Set a data flag in the modal hide event if the btnMove has been clicked, then chain the hidden event and check the data flag...
$('#exampleModalCenter').on('hide.bs.modal', function (e) {
var closeTrigger = document.activeElement.id
if (closeTrigger === 'btnMove') {
this.data = 'move'
}
}).on('hidden.bs.modal', function (e) {
if (this.data === 'move') {
setTimeout(()=>{
window.location.hash = '#middle'
},400)
}
})
I use summernote on the bootstrap modal.But when click the dropdown item on the toolbar, the dropdown menu not show on the right place or even not exit the drop down DOM.I'll show you the picture below:
enter image description here
And I've search for a long time in summernote github issue list and stackoverflow.I try add "dialogsInBody: true", but not working.Anyone can help me about this problem.Thank you!
use $('.dropdown-toggle').dropdown();
Try this. Here work fine.
callbacks: {
onInit: function() {
//when inside a modal, re-link the dropdown
var thisNote = $(this);
if(thisNote.closest('.modal').length>0){
thisNote.next().find('.dropdown-toggle').dropdown();
}
}
}
How can I display a modal dialog from the context menu?
I can show a new window from context menu which opens in its own tab:
var menuItem = {
"id": "rateMenu",
"title": "Rate Item",
"contexts": ["all"],
}
chrome.contextMenus.create(menuItem);
chrome.contextMenus.onClicked.addListener(function (clickData) {
open('index.html');
});
I also know how to show a modal dialog, using bootstrap (for example) on the page itself:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
In this particular case I want to show a modal dialog that you cannot close unless you press the "close" button.
However, I have no idea how to show the modal popup window straight away from the context menu.
Does anyone have any idea how this can be achieved?
Thank you!
I have done the same. Just use content script to show modal.
Example : When user clicks the context menu item, send message to content script to let it know about it so that it should open a modal.
background.js:
chrome.contextMenus.onClicked.addListener(function (clickData) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {type: "openModal"});
});
});
contentscript.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch (request.type){
case "openModal":
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
break;
});
Make sure to include necessary css and js files under content_scripts in manifest.json
"content_scripts": [
{
"matches": ["https://*/*"],
"css":["bootstrap.min.css"],
"js":["jquery.min.js","bootstrap.min.js","contentscript.js"],
"run_at":"document_end"
}
]
NOTE : Using bootstrap.min.css may conflict with the page UI and it may change it. To avoid this, move your modal and the required js and css files in a separate html file(modal.html). Then inject your iframe into the tab using content script.
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("modal.html");
iframe.frameBorder = 0;
iframe.id = "myFrame";
$(iframe).hide();//necessary otherwise frame will be visible
$(iframe).appendTo("body");
Remember to add modal.html and all the css and js files that are used inside modal.html like modal.js,bootstrap.min.js,bootstrap.min.css under web_accessible_resources:
web_accessible_resources": ["modal.html","modal.js","bootstrap.min.js","bootstrap.min.css"]
Now you can hide or show your iframe using content script but to show and hide modal, it can be done from inside iframe only. So you would need to pass a message from background to iframe to show the modal.The code above mentioned for contentscript will work for iframe also.
In case you want to hide the iframe, just send message from iframe to contentscipt using window.parent.postMessage().
Example:
modal.js:
window.parent.postMessage({ type: "hideFrame" }, "*");
contentscript.js:
window.addEventListener("message", function(event) {
if (event.data.type == "hideFrame") {
$("#myFrame").hide();
}
});
I have problem with Edge browser. In my web site I have buttons with span tags inside them. In this span tags I bind text and icons. So far I had no problem but on Edge browser it is possible to click on disabled buttons. After investigating problem I found out that, when button contains span tags inside, it is possible to click on button. Here is how it looks on my web site:
<button id="btnRefresh" type="button" class="btn btn-primary" ng-click="refresh()" ng-disabled="performingAction">
<span ng-class="performingAction && action == 'refresh' ? 'fa fa-cog fa-spin' :'fa fa-refresh'"></span>
<span>{{ refresh }}</span>
</button>
Here is example to testing:
<button type="button" disabled="disabled" onclick='alert("test");'>
<span>Click me!</span>
</button>
One option would be to hide buttons instead of disabling, but I prefer to disable them. Please suggest solution to over come this issue.
Just set
pointer-events: none;
for disabled buttons.
Here's CSS to disable all disabled elements everywhere:
*[disabled] {
pointer-events: none !important;
}
pointer-events documentation
This is a bug in Microsoft Edge. Disabled buttons accept clicks if they contain any HTML elements (i.e. if they contain anything else than just text).
Reported multiple times via Microsoft Connect:
Event bubbles from child element into element (by SO user Ryan Joy)
Bootstrap/Jquery disabled buttons generate click events and show tooltips even disabled
The bug was still present in Build 10565 (16 October 2015).
It was fixed in the November update, Build 10586.
A possible (but ugly) workaround is to call some Javascript in onclick for every button, which then checks if the button is disabled and returns false (thus suppressing the click event).
One work around I've come up with using angularjs is inspired by Ben Nadel's blog here
So for example:
angular.module('myModule').directive(
"span",
function spanDirective() {
return ({
link: function (scope, element, attributes) {
element.bind('click', function (e) {
if (e.target.parentNode.parentNode.disabled || e.target.parentNode.disabled) {
e.stopPropagation();
}
})
},
restrict: "E",
});
}
);
Since you're not always going to be using a span element and probably don't want to create a new directive for every element type, a more general workaround would be to decorate the ngClick directive to prevent the event from reaching the real ngClick's internal event handler when the event is fired on a disabled element.
var yourAppModule = angular.module('myApp');
// ...
yourAppModule.config(['$provide', function($provide) {
$provide.decorator('ngClickDirective', ['$delegate', '$window', function($delegate, $window) {
var isEdge = /windows.+edge\//i.test($window.navigator.userAgent);
if (isEdge) {
var directiveConfig = $delegate[0];
var originalCompileFn = directiveConfig.compile;
directiveConfig.compile = function() {
var origLinkFn = originalCompileFn.apply(directiveConfig, arguments);
// Register a click event handler that will execute before the one the original link
// function registers so we can stop the event.
return function linkFn(scope, element) {
element.on('click', function(event) {
if (event.currentTarget && event.currentTarget.disabled) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
});
return origLinkFn.apply(null, arguments);
};
};
}
return $delegate;
}]);
}]);
I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.
It's on a Joomla site, and so we're using MooTools.
I'm having trouble getting the action of the click event to work. Any thoughts?
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display.getNext(); //HELP HERE PLEASE
});
});
Many thanks!!
Dan
Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display(accordion.previous + 1);
});
Working fiddle here: http://jsfiddle.net/9859J/