自定义Javascript在Safari中不起作用？

Question

I am working on a woocommerce site and I have purchased 2 plugins to give the ability to customize the item in my product page. The plugin demo can be found here :

In this demo there are 2 plugins, one called Multistep Product Configurator (MSPC) which is the tabs at the top of the page and a second one called Fancy Product Designer (FPD) which is the product display panel underneath it.

I wanted to use these two plugins to display them one next to each other in order to avoid scrolling down the page to see the changes made with MSPC plugin.

So I have been trying to customise the css code for hours with no success. You can see my page here : I ended up using a custom javascript code in my theme's custom js section which basically repositions the wrapper a few seconds after the page loads.

My issue is that with the js code I achieved what I wanted in all browsers except safari!

Here is the code I used:

document.onreadystatechange = function(){
 if(document.readyState === 'complete'){
     setTimeout(function () {
         var x = document.getElementsByClassName("mspc-wrapper");
         x[0].style.float = "none";
     }, 3000);
 }

}

Any idea why it doesn't work in Safari browser? Feel free to try fixing this with CSS but I am pretty sure it doesn't work... Any feedback much appreciated.

Answer 1

It seems to me that your code for changing the styles is wrong:

 x[0].style.styleFloat //returns undefined

You'll be wanting to use

x[0].style.float = 'none';

If this doesn't work make sure the js is even running :)

Answer 2

Safari doesn't seem to support the state 'complete'. Try using 'loaded' instead (if it doesn't matter whether the document has been fully loaded or just loaded) since it seems to be supported by all browsers.
Reference

Just to make sure, try debugging it or throwing in a console.log to see if the if-statement ever returns true.

Answer 3

Ok guys,

Thanks a lot for taking a time to respond to this. What I had to do was to add a hook inside the content-single-product.php and then I could fix it with the CSS code.

I didn't need to add the javascript in the end.

Thanks for replying though!