toastr js with SharePoint - javascript

I am trying to use toastr js in SharePoint 2013 to show notifications. Everything looks great until I add closebutton:true in toastr option. Close button appears though the alignment gets distorted for the title, message and the close button. Any idea what is going wrong with the implementation?
With closed button
without closed button

It occurs since SharePoint (core15.css) declares min-width property for button:
input[type=button], input[type=reset], input[type=submit], button {
min-width: 6em;
}
Solutions
CSS:
button.toast-close-button {
min-width: 0;
}
jQuery:
$('button.toast-close-button').css('min-width',0);
Result

This is likely a CSS issue. My guess is that some style on your site is interfering with the styles in toastr. You should be able to fix it by checking the styles in the Chrome Dev Tools (or whatever browser tools you use) to inspect the CSS, find the style that is causing the issue (toggle them on and off to help), and then create a new style to override the problem.

Related

Skrollr mobile broken. Unable to preventDefault inside passive event listener

I'm getting the following error on all chromium browsers when using Skrollr library and loading the website as mobile:
"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>"
The library was working fine last week and now I'm getting this error on every browser I try while loading page as mobile.
Even the examples in official github are broken when loaded on mobile and show the same error.
Does anyone know how this could be fixed?
skrollr.js:730--
https://raw.githubusercontent.com/Prinzhorn/skrollr/master/src/skrollr.js
Examples with the errors from the git links:
http://prinzhorn.github.io/skrollr/examples/docu/1.html
http://prinzhorn.github.io/skrollr/examples/docu/2.html
http://prinzhorn.github.io/skrollr/examples/docu/3.html
http://prinzhorn.github.io/skrollr/examples/docu/4.html
To replicate, - load the page, inspect, choose mobile and refresh. Suddenly it all breaks and reports errors.
HTML tag should have
class="skrollr skrollr-mobile"
if detected mobile device load.
I was developing a website using this and on the 9th of July 21 afternoon I noticed that behavior has changed and that's when I noticed the errors.
I've recreated a simple website using this and saw exactly the same problem. Later on I decided to check git hub linked examples and saw the same problem.
Could it be some sort of update to the browser cores? A fix or bypass would be greatly appreciated.
Update:
I've found out that adding the following line to CSS gets rid of the errors.
* {
touch-action: manipulation;
}
Unfortunately functionality of the library is still not working at 100% on mobile. The scripts that calculate the amount of scrollable area on mobile are off and adds whitespaces to the end of the document. All scroll events are affected by this miss-calculation.
So After looking into this matter a little bit more, I've found a solution which hopefully will help all the folks using this library in 2021 onwards.
To disable the errors add the following CSS:
* {
touch-action: manipulation;
}
And finally to have proper sizing of animations and no white spaces, especially if your:
transform: translateX();
gets disabled on main scroll body when you're on mobile devices, use the below code before your closing tag.
<script type="text/javascript">
if((/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
skrollr.init({
forceHeight: false
});
} else {
skrollr.init();
}
</script>
This will help all who want to imitate horizontal scrolling while using vertical scrollbar.

Dynamically loaded Bootstrap Modal does not scroll on iOS 9

Scenario: The project I'm working on requires that content get loaded into a Bootstrap 3 modal asynchronously, with loading indication displayed to the user. The actual loading is not an issue (see my Codepen below), but what is an issue is scrolling on iOS 9 devices when the loaded content is large. It works correctly on every other device that I've tried, including iOS 8. I think the DOM doesn't update the 's scroll height, so it doesn't think the modal should be scrollable.
The only work-around I've found that reliably works (but is unacceptable) is to hide/show the modal's body, thus forcing a recalculation. Bootstrap's own handleUpdate function doesn't take care of the issue.
I've created a minimal example on Codepen at http://codepen.io/jkrehm/full/LpRzJV/ (code available here). I wish I could embed a QR code in my question so you could easily get to it on your phones.
The most relevant code is this:
// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
$(this).find('.modal-body')
.html('loading...')
.load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
// Use Bootstrap's built-in function to fix scrolling (to no avail)
$modal.modal('handleUpdate');
});
});
If I change the code so the content is loaded before the modal is shown, things work fine, but there's no loading indicator for the user (just a pause of indeterminate length after they click the button and before the modal appears).
Summary: What can I do to convince iOS 9 to recalculate the .modal-body's scroll height?
Update (Aug 15, 2017):
Apparently there is no satisfactory resolution to this issue. Bootstrap has chosen to remove -webkit-overflow-scrolling:touch from the modals and filed a bug with Webkit about it. Maybe it will get fixed someday, maybe not. For now, the provided work-arounds are the best "solutions".
CSS work-around:
.modal-dialog {
height: 101%;
}
Works by making it so that the dialog is always scroll-able, regardless of content size.
From: https://github.com/twbs/bootstrap/issues/20256#issuecomment-231267164
My co-worker and I were able to figure out a hacky work-around for this issue.
Using my code from above, something like this will make scrolling work on iOS 9:
// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
$(this)
.css('overflow-y', 'hidden')
.find('.modal-body')
.html('loading...')
.load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
// Use Bootstrap's built-in function to fix scrolling (to no avail)
$modal
.css('overflow-y', '')
.modal('handleUpdate');
});
});
Note the .css('overflow-y', ...) lines. That's the magic sauce. Instead of mucking with the actual CSS, though, we're using a class – .modal-scrollfix – that we add & remove to achieve the same results.
I've created a fork of my previous pen and applied the fix. http://codepen.io/jkrehm/full/OybdrW/ (code)
I have a ticket open with Bootstrap about this issue, but I'm not sure what they can do except add documentation. Hopefully Apple fixes the issue with a future version of iOS Safari.
I managed to fix this by adding the following line just after the contecnt was dynamically loaded via javascript :
$("div#myModal").css('overflow', 'auto');

Show images with javascript Help needed

I'm making a website where the user sees a text when hovering over an image. Problem is, it doesn't work on mobile devices(touchscreen etc). So I have been coding a script which will detect wether the client is desktop or mobile, if it's mobile, it will show the text over the image instantly.
But it's not really working. Can someone find my mistake?
Here's the link to the test webpage: Link.
Code can be found in the head. (sorry i dont know how to paste it in)
Thanks!
something like bootstrap would automatically turn your hover events into click events on mobile
Another option would be to use #media queries to make them visible on mobile
use #media(min-width:768px){
.textOnHover{
visibility:visible;
}
}
Rather than browser detection you should be using feature detection for this kind of task. Take a look at Modernizr for detecting touch functionality on the client's browser. You can then use their JavaScript API to solve your problem.
If you opt for CSS class names in your Moderniser build, it will add helper classes to your <html> element so you'll be able to use an entirely CSS solution, like so:
.touch .text {
visibility:visible;
}

How do I identify source of element.style injected by js?

I am updating a wordpress website for a client so am unfamiliar with the structure of the whole site.
On the blog page (http://shoreditchradio.co.uk/blog/) , posts are displayed in a wrapper #blogleft, which is defined in the css file as follows:
#blogleft {
float: left;
width: 580px;
}
however via the inspector I can see that the width is being over-ridden to be 100%
element.style {
width: 100%;
}
My question is - what is the easiest way to determine where this is being injected from? As far as I know it can only be from a javascript file somewhere in the site.
I have been poking around in the inspector for some time now. Is there a simple way to identify the source of an injected inline style like this? Any help much appreciated!
That width:100%; is hard coded on the HTML, you can see this by checking the style attribute on the div tag in the HTML.
The easiest way for CSS and HTML debugging is by using the developer tools/web inspector tools (integrated in firefox and chrome or by plugin such as Firebug). The element.style CSS selector means it is hard coded on the selected element.
"hard coded", in this case, means it is directly injected through the HTML. Through the developer tools/web inspector tools you should be able to determine the origin of the CSS in question.
If you want to troubleshoot "injected stylesheet" in Chrome
Open develop console -> Network
Filter it something '.css'
Look for extensions domains that load some CSS files
Find the extension in your extensions list by filtering domain (like on the pic "hcndlme...")
Try to disable the extension and reload the page

window.open() without title nor toolbar, nothing but content-

im trying to open a popup with nothing but the content using javascript in html.
no status bar, no toolbar, no scrollbars, ..., and NO TITLE BAR.
The code must work with Internet Explorer, but the more the better in this case...
i know there are some properties sushi as toolbar=no status=no.. but what about title=no?
It isn't really necessary to use window.open, but i must work with javascript.
Thanks in advance!
Why would you want a popup without any way for the user to control that popup (moving the window, minimizing, closing, etc)? This goes against all usability guidelines on the web.
If you still want to do something like this, I would recommend an inline lightbox. This would allow you to control the styling of the popup, however it wouldn't ever leave your site's main window.
A popular solution for this that has a lot of work already completed would be colorbox.
If you don't need all of the power or functionality of colorbox, it would be pretty easy to roll your own since you have no desire to show any controls.
$("a").click(function() {
$(document).append('<iframe id="chromelessPopup" src="popup_src.html"></iframe>');
}
And then some CSS to style your popup:
#chromelessPopup {
height: 400px;
width: 340px;
border: 2px solid #000;
position: absolute;
top: 10%;
left: 35%
}
IE has Kiosk Mode (F11 or -k on the command line) but this mode cannot be invoked by webpages for obvious security reasons. Hiding everything (taskbar, etc) from the user's view by a website is clearly not desirable. All popups opened by webpages have a title bar.
I've got some documentation that says there is a titlebar=no option to window.open() and that IE also supports fullscreen=yes.
Note that I haven't tried these.

Categories