Editor breaks code after saving it

[TestclueDev]

Hello, On https://testclue.com/ main page there are 4 gifs, I used this: <p style="margin: 0px; font-size: 12px; line-height: normal; font-family: Helvetica;"></p> code to make the work on hoover only. Alto this code after saving it in default editor, it gets broken in this code: <p style="margin: 0px; font-size: 12px; line-height: normal; font-family: Helvetica;"></p> , making the resources not visible on site.

[TestclueDev]

It seems also you page breaks the code up, I will use gist: https://gist.github.com/highacid/1d157250f697493aaa6621c9064f54c7

[TestclueDev]

<p style="box-sizing: border-box; margin: 0px 0px 22px; color: #4b4d4d; font-family: Lato; font-size: 14px;">Url: http://testclue.com/</p> <p style="box-sizing: border-box; margin: 0px 0px 22px; color: #4b4d4d; font-family: Lato; font-size: 14px;">user: support</p> <p style="box-sizing: border-box; margin: 0px 0px 22px; color: #4b4d4d; font-family: Lato; font-size: 14px;">pass: ngsKRQAKHzTI607RW@bq6%gj</p>

[Anshuman Sahu]

Well i found it not be saving in the text mode also of the default wp-editor . At first when you put the code in the text mode and update the page it shows but as soon as you switch to Visual editor it trims the all the attributes . guess you need to do these mouseover stuff with the help of js files . You can add custom js in wp-content/plugins/wplms-customizer/js/custom.js file .

[TestclueDev]

Hello, my developer created a custom js for this, yet it seems the class it never gets updated properly... Can you explain why is this not working with your theme? $(document).ready(function(){ $('img.hover-animate').unbind('mouseover').unbind('mouseout'); $('img.hover-animate').bind('mouseover', function(e){ e.preventDefault(); var mySrc = new String($(this).attr('src')); var newSrc = mySrc.replace('static','animated'); $(this).attr('src', newSrc); }); $('img.hover-animate').bind('mouseout', function(e){ e.preventDefault(); var mySrc = new String($(this).attr('src')); var newSrc = mySrc.replace('animated','static'); $(this).attr('src', newSrc); }); });

[H.K. Latiyan]

Please change the first line: $(document).ready(function(){ To: jQuery(document).ready(function($){

[TestclueDev]

made the changes, still not working.

[Anshuman Sahu]

Okay can you please confirm if this is working on a simple html page ? Please also confirm if the js was added in the custom.js file i mention in wplms customizer plugin ? Can you please share the html that you have used with the above js ?

[TestclueDev]

I will test it in some other place, and let you know.

[H.K. Latiyan]

Ok thanks for the update.

[Author]

Posts