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

Home Forums Support HTML & Javascript Code in Custom HTML Widget Can't Perform Well

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1128982
    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>
    #1129036
    Leo
    Staff
    Customer Support

    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.

    #1129076
    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

    #1129091
    Leo
    Staff
    Customer Support

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

    #1129216
    BAMBANG

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

    #1129219
    Leo
    Staff
    Customer Support

    So what does it look like when using GP?

    #1129255
    BAMBANG

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

    #1129268
    Leo
    Staff
    Customer Support

    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.

    #1129522
    BAMBANG

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

    #1129765
    BAMBANG

    Thanks for your response, this problem resolved

    #1129944
    Leo
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.