Bootstrap 4 / Popper.js interfering with Autosuggestions - javascript

I have a feature that does address verification with smartystreets api I am also using a template with bootstrap4 / popper.js and jquery of course.
If you click both links, you will see the behavior. It will either break the address verification plugin or the design, but I cant figure out how to make them both work together.
The difference between the two is that one has class="form-control" whereas the other one does not. Something with the form-control class is triggering the behavior. The broken design link shows error in the console and aborts whatever process causes "display:none" to be added so the address suggestions work.
If I dont trigger that error, the address verification plugin removes the "display:none" but its immediately followed by something else in bootstrap or popper.js interfering and changing it back to display:none giving it just a blinking effect.
If anyone could take a closer look and point me in the right general direction.

if anyone else is using a template that contains autofill.js in the sourcemap of the material-design-bootstrap.js above just comment out this portion of the script as I mentioned above and it will work. Its a hack, not really an answer but it didnt seem to affect any other functionality as far as I could tell.

Related

Facebook Comment Box Disappears in Accordian

I have two examples of Facebook comment box failing to load when an accordian is collapsed and reloaded. One HTML/JavaScript basic and the other in a Wordpress site via Visual Composer - this problem also occurs in numerous other accordions
HTML Example - http://iknowdigital.co.uk/htmlexample/
Wordpress Via Visual Composer http://thesingingmajor.co.uk/test-comment-box-martin/
I have contacted Facebook Support and Visual Composer support and neither can help out.
here are the replies
From VC
Hi Martin, The issue is not with the iframe, but the js that facebook comments use to render. It is not able to re-initialize itself when it is displayed as hidden and hence the issue occur. You can see that when you add nay iframe, it works fine without any issue. It is the js from the comments which is restricting it. As mentioned previously, it will require some custom js code to re-initialize this loading when the closed (hidden) accordion is opened. Kindly check.
From Facebook
Hi Martin,The issue here is the way the library is working. If you debug the code you'll see the plugin does not disappear, the issue is that the library is changing the width of the iframe that contains the plugin to 0 and you cannot see the comments plugin. In order to avoid this situation you will have to manually change the width value again and you'll see the comment plugin is still there. I'm going to close this bug as "By design" as this is not an issue in our side.
I'm not a javascript programmer, so am really at a loss here. Can anyone chip in with some advice here?
Thanks Martin

Unknown javascript script scrolldown when enter page

I have problem with unknown javascript script which scrolldown when enter page (I think it's javascript). I trying to find over firebug, code, delete scripts, I even deleted all styles,scripts, and had a clean code.
When enter this page only in chrome browser its scroll down to comments div, I have no idea why only chrome, firefox it's not do this, I have tested 2 computers them both the same on chrome.
This is the link of the page:
http://test.ibids.co.il/add/120
Which script do it or what cause to do this?
EDIT 1 (27/01) : I don't think it's js as I have removed all JS from code.
EDIT 1 (27/01) : It wad addthis script problem.
Before you do anything else: check your imported scripts! You are importing jQuery three times! This might create unwanted side effects.
http://test.ibids.co.il/assets/js/new_js/jquery-1.9.1.js
http://test.ibids.co.il/assets/header-js/jquery-1.11.1.js
http://test.ibids.co.il/assets/notification/js/jquery-ab8e840c3dad7ccf2deadb8c40d53bdb.js
There might be more scripts / css that are not needed. Check your assets.
I cant comment so I will post answer. I have disabled all JS on site and still on reload page site was goes scroll down and then goes up so maybe it is not so JS related?
I think you have code related to navigate or nicescrollers in your script .First try to remove if you have any code related to navigateble :true ,and If you work on nicescrollers try to resize them or comment to check it once

FancyBox Jquery Null Error - Strange issue

I am experiencing a very strange issue i am hoping someone can answer (its kind of broad, but i will explain it my best), code works on local page when opened, but as soon as the same page is uploaded it throws an error. Two others have also looked at this, resulting in more confusion.
I downloaded FancyBox to use the inline feature to pop up a user form via href link, instead of taking the user to an additional page.
You can see the "stock" fancy box here:
1 fancyapps.com/fancybox/demo
Under various options, Inline is what i am using.
I didnt need all of the other features that came with FancyBox so i stripped the page to the following, which works just fine:
2 *Fancy Box Demo Stripped to Inline Feature only*
So then, i applied this code to our sandbox copy of the page to implement:
3 *Sandbox Copy with Fancy Box inline feature added to "make offer" link*
It stops working! There are no conflicts with other javascript on the page, and the only difference is that it has a couple of color .css changes, all .fancybox was named to .ptroffer and that the css code is not inline on the page (which wouldn't cause this error anyway).
This same page, opened locally works beautifully - upload and it throws error.
SCRIPT5007: Unable to get value of the property 'ptroffer': object is null or undefined
<script type="text/javascript">
$(document).ready(function() {
$('.ptroffer').ptroffer();
});
</script>
Works fine with link #2, and with link #3 locally, but with #3 uploaded it throws error.
Please!
Something in your code somewhere is overriding $. If you change that "ready" handler to call
jQuery('.ptroffer').ptroffer();
you won't get that error. However, things may not work; I think that an older version of jQuery is being imported by something (1.3!), which is bad.
edit oh I see, something's pulling in Prototype. You've got a regular script soup going on there, and things are going to be unpredictable and bizarre until you get that straightened out. Probably somewhere in there something's calling jQuery.noConflict(), but that "ready" handler you're adding isn't written to expect that. Whatever code that's expecting jQuery 1.3 may be in for a surprise also.

Need help debugging - IE not displaying jquery background slider on website

I've had this problem for over a month and client isn't paying me until it's fixed.
The website is: http://www.cardwells.co.nz
I'm using WordPress as the CMS with a template and some custom work.
The template comes with a slider background inbuilt which works in all browsers except IE.
I'm also using http://www.smoothdivscroll.com/clickableLogoParade.html for the scroller at the bottom.
Basically I have no clue WHY it's not working in IE - everything seems like it should be working. I've run the site through w3 checker and used that IE specific CSS files - but no dice.
Please help.
There was no real solution - really =\ I disabled, removed, reuploaded and reenabled the template. Either a file was a miss or a DB connection error somewhere along the line. So stupid.

Internet Explorer 7+8 jQuery Error with infiniteCarousel

Hai guise! I am having a spot of trouble with some jQuery I am using, this was previously working but I have made many developments since then and tried to track back to find out what the issue was, but I am unsuccessful - hence, my presence on here. Anyway, I am getting some JS errors in both IE7 and IE8 with the catch my frame jQuery infiniteCarousel plugin, I am literally pulling my hair out over this as when you remove any reference to this everything works beautifully.
Here is a link to the page.
If anyone can shed any light on the matter you would be a life saver!
The problem is that the jQuery infinite carousel plugin is poorly written and the minifaction process requires well formed JavaScript. If you take his code and run it through JSLint you'll see it needs dozens of fixes before it's likely to minimize properly. This is something the author of the plugin needs to rectify.
Although it isn't throwing any errors, it seems that the plugin is loosing track of the elements. A possible solution would be to hook into the start and complete events and stop all the button events until it has completed the animation.
Alternatively, use this plugin instead: http://sorgalla.com/jcarousel/

Categories

Resources