JavaScript Prepended Content Not Showing On Anchor Click In Safari - javascript

I'm working on a project in WordPress that is utilizing the Theme Customizer to assist other people working on the site with me. We're dynamically loading in a lot of content and options like Google Fonts, so the loading of the Customizer takes a few seconds to fully load (lingers on the admin page, then after a few seconds progresses to the /customize.php page).
Because of this, I wanted to add a simple "Customizer Loading" message that would pop up to let users know that something was happening. Everything works fine in Chrome and Firefox, but Safari and Internet Explorer (as far as I can tell from testing in Sauce) are giving me problems.
I'm using the following bit of JavaScript to add the loading message:
$('a[href="customize.php"]').click( function() {
$('head').prepend('<style type="text/css"></style>');
$('body').prepend('<div id="loading-message"></div>');
});
Inside the <style type="text/css"> block I simply included my styles and then <div class="loading-message"></div> is where I placed my content.
What is happening in Safari (and again, IE from what I can tell) is that when ... is clicked, the styles and content are getting added to the DOM (I can see them when I inspect the page), but they don't actually become visible, whereas in Chrome and Firefox they do.
If I use e.preventDefault() on the link, the loading message shows up just fine. Other events, like alert() and console.log() register fine, and the link will continue on through as expected. It's only the new content getting added to the DOM that doesn't become visible.
I can't figure out exactly what could be causing this and would greatly appreciate any help. I tried recreating the problem in JSFiddle, but I couldn't replicate the same result I'm getting in the WordPress Admin Panel (if you change out $('a[href="customize.php"]') for any other slug in the backend like "themes.php", it has the same result though).

Related

CSS completely stopped working on my Blogspot.com site

I've been working on a CSS / HTML drop down navigation for my blogspot.com site. After coding it a few hours I had accidentally closed the tab to find out no matter what or where I tried the CSS on blogspot, the CSS wouldn't work again. Now, the HTML/CSS works anywhere else, just not on blogspot anymore.
These are the things I did:
1. Created a entire new blog under the same account, then applied
html/css
2. Cleared cookies, cache and restarted browser
3. Tried multiple browsers
4. Used stylish extension to override
5. Used console in firefox to edit HTML on other sites and added my
code to see if it worked elseware
6. Used a different computer
7. Used mobile network instead of ISP
Despite doing everything pretty much to get the css/html to work blogspot, it will refuse it now no matter what. I am guessing it is obviously an issues with blogspot.com such as a glitch or bug that I may have now caused. It also shows a lot of CSS code struck out in the styles inspector when you inspect a site via right-click.
I dab in javascript / jquery sometimes and I am wondering if there is a way to force my CSS to force override.
CSS/HTML http://jsfiddle.net/rpksx66u/
My blogspot site: https://vitalintel.blogspot.com/
Im about to pull my hair out.
update: so I moved the css/html/script element to another part of the page and it works. When the element is placed in the Cross-Column's sections in layout, it refuses to use any CSS.

Elements dissappearing in safari on ipad

Ive made a simple project with html and jquery. It works great in all browsers except for safari on ipads. Since apple doesnt have a windows version of safari i cannot check if the error is explicitly for ipad but i think so.
The problem is the photoboxes wich get their width from the jquery, they dont appear at all on the ipad. Chromes developer tools device mode shows everything correctly and i have css queries that take care of smaller screens so its only the ipad thats the problem. I havent found any way to do a web debug on the ipad either. Its hard to give a code example due to i dont really know what the error is but i have a live demo you can check out. For you on ipads, its supposed to be photos before the winter background.
http://www.mj-bygg.se/ipad/default.aspx
I am also getting the same error on desktop Chrome on the first load. If I refresh, then the pictures load fine but on first visit to the link I only get the footer image (trees.)
On the first load, none of your jQuery heights/widths are being applied. No errors in the console and if I rerun the function it works as it should (without reloading the page.)
I suggest either pushing the script further down the page or using $(window).load(function() {}
instead of
$(document).ready(function() {}
That is the only thing I can assume is wrong if it fails first time but works with the page being cached.

Javascript carousel not loading properly under some conditions?

So I've been working on a website, and the main focus of the site is a javascript-driven 3D carousel, and I got the code for the carousel from here: https://github.com/kaizouman/3dcarousel
I integrated the code into my site, and only modified the number of carousel items and the size of each item. I left the rest of the code untouched (demo.js and 3dcarousel.js). It works perfectly, but only most of the time. I've noticed that it'll work perfectly in Chrome about 90% of the time, in Safari about 80% of the time, and in Microsoft Edge & IE, it pretty much never works. When it doesn't work, it just loads each image individually. When it happens in Chrome, if I keep refreshing the page, it'll eventually work properly. Also interestingly, when I navigate to another page in Chrome and then hit the back button, the carousel will always fail to load.
Here's what it looks like in Microsoft Edge and also when it fails to load in Chrome:
And here's what it looks like when it loads properly:
I can't for the life of me begin to figure out why this is happening, does anyone have any idea? The website is located at http://lipocircuit.com/new.html.
WOW this was a simple fix, I just commented out the line that includes the prefixfree.min.js script, I guess that's outdated and not needed anymore. I feel dumb but I'll leave this up in case anyone else has this issue.

Website not displaying correctly in Safari and Chrome

I'm a complete newbie here. I have been trying to learn to code a site with HTML/CSS/JAVASCRIPT.
I am using brackets to code the site. The site I am practicing with renders properly with all css and javascript.
However when I open the .html file into safari or firefox it does not display correctly. I think it is probably a css issue as the html elements are all there.
I have other sites that I have made before that don't have this issue and I can not see where I have gone wrong.
jsfiddle.net/fs4g55m2/1 I'm using fullpage.js as well. If you notice the navbar works perfectly well. It seems to be the css after it that is corrupted (once you get to the body tag).
If you think it is CSS (and you are linking to external CSS file) try look into the network tabs in your browser's developer console to see if it is properly linked. Check to see if requested css file throw back 404 status (not found) - usually highlighted in red.
In chrome or Firefox (not sure in safari) right click on your web page and click inspect element - then choose network tab.
Hope that helps

Images don't display in ie9 when inserted using ajax and innerHTML, until users right clicks on and clicks "Show Pictures"

I was upgrading a wesbite to work with IE9 (I really hate IE), and after much fiddling it all finally worked, except that when inserting html into the page using code like the below, none of the pictures would display.
$("#div").innerHTML(htmlToInsertWithImgTags);
The inserted HTML looked a little like this:
If you right clicked on any of the img's and then clicked on "Show Pictures", they all magically appeared, like below:
This happens due to a trust setting in Internet Explorer, but if the image's you want to insert are already present on the web page, then internet explorer trusts the new content and shows the pictures.
So we got round this problem but adding code like the following (I'm aware this isn't good html) to the static part of the page, and then when this picture was inserted using Ajax and innerHTML eveything worked as you would expect.
<img url="redcircle.gif" style="display:none" />

Categories