[Resolved] HTML & Javascript Code in Custom HTML Widget Can't Perform Well

[BAMBANG]

I have added floating box widget on my footer widget but the floating box widget can’t showing well on my single post. I have tried to add this code to my another blog that not use GP Premium theme and this code showing well. This is my code.

<style type='text/css'>
#box-message {
position:fixed !important;
position: -webkit-sticky; /* Safari */
position: sticky;
display:none;
top:350px;
left:28%;
margin:0px 0px 0px 0px;
width:40%;
height:auto;
padding:12px;
background: rgb(56,191,195);
background: -moz-linear-gradient(to bottom right 90deg, rgba(56,191,195,1) 0%, rgba(74,198,202,1) 0%, rgba(110,210,213,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(56,191,195,1) 0%, rgba(74,198,202,1) 0%, rgba(110,210,213,1) 100%);
background: linear-gradient(90deg, rgba(56,191,195,1) 0%, rgba(74,198,202,1) 0%, rgba(110,210,213,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#38bfc3",endColorstr="#6ed2d5",GradientType=1);
font-family: "Segoe UI", sans-serif;
text-align:center;
font-size:20px;
font-weight:300;
color:#fff;
border: 4px solid #aecad7;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:17px;
}

#box-message a.close {
position:absolute;
text-decoration:none;
color:white;
background-color: #4c4c4c;
border: 2px solid #aecad7;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: Georgia, Serif;
top: -19px;
right: -21px;
left: -21px;
font-size: 11px;
line-height: 12px;
width: 13px;
height: 13px;
text-align: center;
font-weight:bold;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
jQuery.noConflict(true);

jQuery(document).ready(function($){
var isScroll = false;
$(window).bind("load", function() { 
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {

$(this).parent().fadeOut();
return false;
});
});
$(window).bind("scroll", function() {
		var scrollPosition = $(this).scrollTop(); 
		if(scrollPosition >= 50 && !isScroll){
			// Animate Top Value When Page Loaded Completed
			isScroll = true
$('#box-message').fadeIn('fast');
 $('#box-message').animate({top:"350px"}, 0);
		}
	});
});
</script>

<div id='box-message'>
<span>Selamat Datang</span><br/>
<span>&</span><br/>
<span style='margin-top:10px; font-weight:bold;'>Selamat Belajar</span>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>

[Leo]

Hi there,

Not quite sure what you meant by it can’t show well?

I checked a single post and not seeing a footer widget.

How are you adding the code?

Have you checked with the author of the code?

It shouldn’t be related to the theme as the theme simply displays whatever you’ve added for you.

[BAMBANG]

I have added the code
– http://prntscr.com/qmc02a
– http://prntscr.com/qmc0p0

I have applied this code to my other blog widget and perform well.
– http://prntscr.com/qmc1ha

[Leo]

Does the code work like that in a default twenty series WP theme?

[BAMBANG]

Yes, now I use twenty sixteen theme and the code perform well
– http://prntscr.com/qmepth

[Leo]

So what does it look like when using GP?

[BAMBANG]

The code perform well in customize mode but can’t perform well in normal mode, blank only
– http://prntscr.com/qmfgkw

[Leo]

When something works in the customizer preview but not on live site, most of the time it’s a caching issue or a plugin conflict.

Can you make sure to clear and disable the caching plugin first?

If that doesn’t work, disable all plugins except GP Premium as well.

[BAMBANG]

I have deleted cache and disable all plugin, but this code stay not perform well

[BAMBANG]

Thanks for your response, this problem resolved

[Leo]

No problem 🙂

[Author]

Posts