I want to remove the animation when open or close the modal. Can I do it?
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope,
hardwareBackButtonClose: false,
animation: null
})
I try to use null value but it not working for me.
'none' is the built in way to disable the animation:
$ionicModal.fromTemplateUrl('templates/modal.html', {
animation: 'none'
})
This should be written somewhere.
I used similar approach and seems to work:
#login-modal{
transform:none !important;
}
I don't think ionic supports a value for animation that will disable the animation all together. As far as I am aware, the only animations that Ionic supports are the ones listed here. https://github.com/driftyco/ionic/blob/master/scss/_animations.scss
If this is true, I would say the easiest solution to getting somewhere without any animation is to set up a new state and link to that state through ui-sref and set the animation equal to none.
Use animation: 'no-animation' to disable transition but fade still work.
Edit #1:
maybe it cannot find class no-animation. not a good idea.
Edit #2:
Use
#login-modal{
transform:none !important;
}
to disable it.
Related
So I'm wondering if there is a way for me to disable the YouTube controls, seekbar, and title (watch later) overlay buttons.
I use the YouTube keyboard shortcuts all the time and when I see the top and bottom overlay slide in, it irritates the crap out of me as it hides useful info behind the semi transparent bars.
I'm using Firefox with Stylish installed but can't seem to find a way to do this.
If you set YouTube to always use the HTML5 player (a good idea anyway), then you can hide the controls using Stylish.
This does the trick:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("www.youtube.com") {
.ytp-chrome-bottom, .ytp-chrome-top {
display: none !important;
}
}
But be warned:
It's probably not possible to hide the Flash player controls. (Don't use Flash anyway.)
Using Stylish like this hides the controls at all times -- which I find just as annoying as the controls flashing up at unwanted times.
I implement this in chrome, and this method should work in firefox.
Firstly, install an ad blocker extenstion like AdBlocker.
Secondly, open extenstion options interface and add following code snippet to your own filter:
youtube.com###movie_player > div.ytp-gradient-top
youtube.com###movie_player > div.ytp-chrome-top
youtube.com###movie_player > div.ytp-gradient-bottom
Then it wiil work.
An image descrip this:
How to find that filter, it also is easy, open your target website and click F12 key, do this first :
Then construct a formula defined by AdBlocker:
(Website's Host)##(The selector)
and here is:
youtube.com###movie_player > div.ytp-chrome-bottom
It should be noted that you need set the video full screen to find the selector when you want to block the title in full screen mode.
(There may be a grammatical error, but I don’t think it will affect your understanding.)
It worked after adding these in Ublock Origin Filters:
youtube.com###movie_player > div.ytp-gradient-top
youtube.com###movie_player > div.ytp-chrome-top
youtube.com###movie_player > div.ytp-gradient-bottom
The easy way to do it is:
Go to 'share' then click 'embed';
You get a video preview and just uncheck the relevant options below.
Need Stylus.
In fullscreen, controls will be hidden unless mouse over the botton area.
.html5-video-player.ytp-fullscreen > .ytp-chrome-top,
.html5-video-player.ytp-fullscreen > .ytp-gradient-top,
.html5-video-player.ytp-fullscreen > .ytp-gradient-bottom {
display: none !important;
}
.html5-video-player.ytp-fullscreen > .ytp-caption-window-container > .caption-window.ytp-caption-window-bottom {
margin-bottom: 0;
}
.html5-video-player.ytp-fullscreen > .ytp-chrome-bottom:hover {
opacity: 1 !important;
}
.html5-video-player.ytp-fullscreen > .ytp-chrome-bottom:not(:hover) {
opacity: 0 !important;
}
When you add a CKEditor to a div inside a div with: "overflow: scroll" the toolbar won't move when scrolling the parent div...
<div id="wrapper" style="overflow: scroll;">
<div contenteditable="true">This is the ckedito</div>
</div>
An example can be found here: http://jsfiddle.net/W8Dt4/
Does anyone know a workaround around this problem?
I think the desired behaviour would be:
Keep the toolbar at the top of the editor div when there's enough room.
Move the toolbar to the bottom of the editor div when there's not enough room on top and there is enough room on the bottom.
Using version 4.4.3, I was able to solve this problem by fire the window scroll event in a similar way that it is done in other areas in CKEditor. Attach a scroll event to the parent container that has overflow:scroll; set on it and trigger the window scroll within. The positioning is a little clunky but still works.
$("#parent-with-scroll").on('scroll', function (evt) {
CKEDITOR.document.getWindow().fire('scroll');
});
Yup. CKEditor never considered such case and, most likely, editor will never deal with such edge case.
Still, what you need is a scroll listener for editor.element.getParent() in those lines of floatingspace plugin. Unfortunately, you have to wait for the ticket #9816 to be resolved, because it changes the way of re-positioning the toolbar, and makes your case possible to fix. Once the fix is released (in 4.2.1), you got to basically change the lines to look like this:
var elementParent = editor.element.getParent();
editor.on( 'focus', function( evt ) {
...
elementParent.on( 'scroll', uiBuffer.input );
} );
editor.on( 'blur', function() {
...
elementParent.removeListener( 'scroll', uiBuffer.input );
} );
editor.on( 'destroy', function() {
...
elementParent.removeListener( 'scroll', uiBuffer.input );
} );
If you want, you can give it a try with this ticket branch. Otherwise, you got to need to wait for the upcoming release to patch your code.
There's also one thing that you need to know: each floating toolbar is appended to <body>, so it will never belong to the same (overflowed) container enclosing your editor. Even though the toolbar will scroll along with the container, it will always float above it and there's not much you can do about it unless you also hack this line. Note that I haven't tested it.
I hope this helped you.
I want to disable the two finger swipe that causes Chrome going back or forward.
I have a website where the user might lose progress on his work if he doesn't specifically saves.
I have tried using window.onbeforeunload but that doesn't seem to work if I have hashes in the url (back forward would change between www.example.com/work/#step1#unsaved www.example.com/work/#step0) and the event doesn't seem to trigger.
I was about to switch to another solution but today I noticed that in Google Docs it's completely disabled. How did they achieve that?
Disable Chrome two fingers back/forward swipe
This worked for me. In your CSS file:
html {
overscroll-behavior-x: none;
}
body {
overscroll-behavior-x: none;
}
Make the specific page open in a new tab/window by default (by putting target="_blank"> in hyperlink). That way there'll be no previous page to go back to.
Or prevent Horizontal Scrolling by default. To do that, you can use jquery.mousewheel to do:
$(document).on("mousewheel",function(event,delta){
// prevent horizontal scrolling
if (event.originalEvent.wheelDeltaX !== 0) {
event.preventDefault();
}
});
Assuming you have a horizontal-scrolling element, adding overscroll-behavior-x: contain; is the easiest way prevent the scroll action from spilling out into the page and causing the navigation.
https://dev.to/danburzo/css-micro-tip-prevent-history-navigation-on-horizontally-scrolling-elements-3iil
https://caniuse.com/#feat=css-overscroll-behavior
Disable or replace swipe gestures for Google Chrome 61
The question that leads me here was marked "duplicate" and closed to answers. I believe this answer is better suited for the "duplicated" question, however, I feel this answer could possibly save time for someone landing on either question.
Better question:
Disable navigation swipe on Chrome browser in javascript
This Google developers article helped me to allow the e.preventDefault() to work and prevent swipe gestures as of Chrome 61.
https://developers.google.com/web/updates/2017/01/scrolling-intervention
givanse's answer to the following was the code that I used to write my own swipe event handlers:
Detect a finger swipe through JavaScript on the iPhone and Android
In summary, the following two events are used to implement the swipe gestures:
handleTouchStart (e) {
...
},
handleTouchMove (e) {
...
e.preventDefault()
}
As of Chrome 56, the default behavior is to make the event listeners passive and thus disable the ability to prevent Chrome's swipe gestures. To override this behavior, event listeners can be added as follows:
document.addEventListener(
'touchstart',
this.handleTouchStart,
{passive: false}
)
document.addEventListener(
'touchmove',
this.handleTouchMove,
{passive: false}
)
By passing the {passive: false} object as the third parameter to the addEventListener method, the listener is registered as active and can stop Chrome's default behavior with the e.preventDefault() event method.
Building on both the previous answers given by #roy riojas and #redgetan - I combined their answers to allow for this to be dynamic and prevent both forward and backwards - again - per #roy's comments - you must know the class of your element, and for this implementation - the class of the nested element that is actually being scrolled
(function ($) {
$(document).on('mousewheel', function(e) {
var $target = $(e.target).closest('.scrollable-h');
var scroll = $target.scrollLeft();
var maxScroll = $target.find('.scrollable-h-content').width() - $target.width();
if(scroll <= 0) {
if(scroll <= 0 && e.originalEvent.wheelDeltaX >= 0) {
e.preventDefault();
}
}
if(scroll >= maxScroll) {
if (scroll >1 && e.originalEvent.wheelDeltaX <= 0) {
e.preventDefault();
}
}
});}(jQuery));
I've been working on something similar where I want to override the forward/backward history swiping gesture. Depending on what your swipe area is you can tweak the selector as follows:
html { touch-action:none; }
This is the associated documentation that gives you all the properties to all touch actions like panning or zooming features built into the browser.
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
I was able to disable it by typing chrome://flags in the address bar and heading down to "Overscroll history navigation" and setting it to "Disabled" from the dropdown.
You can disable back/forward with this code:
document.addEventListener("wheel", function(event) {
event.preventDefault();
}, { passive: false });
Note that adding { passive: false } is essential, at least in Chrome. If you only want to disable back/forward in certain areas you can use code like this (assuming you're using jquery and you add the class disable-back-forward to the sections where you want to disable back/forward):
document.addEventListener("wheel", function(event) {
if ($(event.target).closest('.disable-back-forward').length)
event.preventDefault();
}, { passive: false });
Hi this worked for me on chrome but not for the entire page, but for places where I have scrollable content.
In Google Docs (Spreadsheets) it seems to be working because they don't have a back page to go. If you navigate to another URL (manually) it will not prevent you from navigating back.
$(document).on('mousewheel', function(e) {
var $target = $(e.target).closest('.scrollable-h');
if ($target.scrollLeft () <= 4) {
$target.scrollLeft(5);
return false;
}
});
One thing to keep in mind is that the code above is making two assumptions:
your element with horizontal scrollable content has a class scrollable-h
If checks if the scrollLeft if bigger less than 4px and then just make it scroll to 5px
returning false effectively cancel the back gesture
Important:
- This only prevents the back swipe gesture, when is done fast, if you do it very slow it will still trigger sometimes.
Also this does not prevent the forward swipe gesture, but it could also be done by checking if the element has reached the maximum scrollLeft. If that is the case then move it 20px back and return false to prevent the event from happening... It is up to you to add this use case if it happens to make sense to you.
You can take a look to a proof of concept here. http://jsfiddle.net/royriojas/JVA6m/#base
You're looking at the problem at the wrong level. OnBeforeUnload is simply not triggered because there is nothing being unloaded from the browsers perspective. Therefore you have, quite bluntly, implemented the wrong mechanism for versioning - fragments are for page states, not document states as you are using it now.
If you insist on maintaining state through hash fragments you need to use another mechanism to guard against page state changing. Since all current browsers support LocalStorage I'd use that. And well, while at it, put all the document state data there instead of in the URL, since that is how Google Docs does it and that is why they don't have this issue.
I'm building a website that uses highcharts. When I view the site on a mobile device, touching within the graph area pops up the tooltip, which prevents scrolling. I have tried all of the following, as suggested in other SO questions, without success:
$('#graph-container').click(function() { return false; });
$('#graph-container').children().click(function() { return false; });
chart.container.onclick = null;
plotOptions: {
series: {
enableMouseTracking: false // (stops tooltip but still blocks scrolling)
}
}
For now I've added a second div that covers the graph on mobile devices, so the user touches the div instead of the graph, but that is more a workaround than a solution. I also tried removing all listeners from every element of the graph using things like $('svg').off() in Chrome's console, without any noticeable change in the graph's behaviour. Is there a way to do this that I'm missing?
Highcharts JS v2.3.5 (2012-12-19)
Little HACK:
edit Line: 9026: this.setDOMEvents();
into: // this.setDOMEvents();
or delete it.
I hope it helped!
Here you can find simple Gist for that.
Also, in upcoming Highcharts 3.0 touch events should be upgraded and fixed similar issues. See roadmap: http://www.highcharts.com/support/roadmap
I have a Validator attached to a field. When validation fails, I want the red line to appear in the field, but I do not want the red icon to appear to the right of the field. How can I accomplish this? I don't see this functionality in the documentation. Thanks!
I also posted this on Sencha's forums but they are very slow: http://www.sencha.com/forum/showthread.php?175577-How-can-I-disable-the-TextField-validation-icon&p=718440#post718440
I got the answer from the Sencha forums.
Check out Field.setMessageTarget(String) - you'll want to pass in
"tooltip" (or, to just not draw that icon, anything but "side"). With
that set, it shouldn't even attempt to draw the icon.
http://www.sencha.com/forum/showthread.php?175577-How-can-I-disable-the-TextField-validation-icon&p=718440
What about converting the field in a DOM element, then navigate till the Red icon and apply a style to disable it?
Something like:
((El)passwordField.getElement().getParentElement().getChildNodes().getItem(2)).setStyleAttribute("display", "none");
You could have a CSS style like this :
.x-form-element img {
display: none;
}
or
.x-form-item img {
display: none;
}
All the images in a form element won't be displayed.
dateField.forceInvalid("error message which u want to pass"),.it will automaticaly show an exclamation mark on the right side of the date field