Web Design
Mobile Internet
Brand Design
Innovative
News
Encyclopedias

How to make the jquery announcement pop up in the lower right corner of the wordpress theme

Date:2013-02-23 Source: Shangpin China Type: website encyclopedia
Word Size: small   medium   big

Beijing website construction Company Shangpin China: The HotStyle theme integrates the function of pop up the latest announcement in the lower right corner. This function can be easily opened and closed through the background theme option. Now, the implementation method is described as follows.

The implementation of this function is very simple. It uses the fadeTo or Hide function of jquery.

1. Load jquery. js

<script src=" //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>

2. Load the following js code:

<script type="text/javascript">   
    $(document).ready(function() {   
        //$('#sitefocus').hide(0, 0);    
        //$('#sitefocus').fadeIn(1800, 0);    
        $('.bm_h a').click(function() {   
            //$('#sitefocus').hide();    
            //$('#sitefocus').fadeTo(500, 0);    
            $('#sitefocus').hide(600, 0);    
            return false;    
        });    
    });    
</script> 

3. css format.

<style type="text/css">   
.focus {   
    position:fixed;    
    rightright:5px;    
    bottombottom:5px;    
    z-index:300;    
    overflow:hidden;    
    width:250px;    
    border:1px solid #AAA;    
    padding:0 10px;    
    background:white;    
}   
.bm,.bn {   
    margin-bottom:10px;    
}   
.bm_h {   
    padding:0 10px;    
    height:40px;    
    border-bottom:4px solid #009AD9;    
    line-height:40px;    
    whitewhite-space:nowrap;    
    overflow:hidden;    
}   
.cl {   
    zoom:1;    
}   
.y {   
    float:rightright;    
}   
a {   
    color:#333;    
    text-decoration:none;    
}   
h1,h2,h3,h4,h5,h6 {   
    font-size:1em;    
}   
body,ul,ol,li,dl,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,.pr,.pc {   
    margin:0;    
    padding:0;    
}   
.bm_c {   
    background:white;    
}   
.bbda {   
    border-bottom:1px dashed #CDCDCD;    
}   
.cl {   
    zoom:1;    
}   
.xld dt {   
    padding:8px 0 5px;    
    font-weight:700;    
}   
.bm_c h2 a,.bm_c dt a {   
    padding-right:10px;    
    color:#4A4E52;    
}   
.focus dt a {   
    color:#0060A6;    
    font-size:12px;    
}   
.xi2,.xi2 a,.xi3 a {   
    color:#266CB5;    
}   
.xld dd {   
    margin-bottom:8px;    
}   
.hm {   
    text-align:center;    
}   
.ptn {   
    padding-top:5px! important;    
}   
a:hover,* a:hover {   
    color:#F60 ! important;    
}   
</style>

4. PHP and html code call the latest announcement.

<? php    
     $loop = new WP_Query( array( 'post_type' => 'bulletin', 'posts_per_page' => 1 ) ); while ( $loop->have_posts() ) : $loop->the_post();    
?>    
<div class="focus" id="sitefocus">   
    <div class="bm">   
        <div class="bm_h cl">   
<a href="#" class="y" title="Close">Close</a>
<h2>Temporary announcement</h2>
        </div>   
        <div class="bm_c">   
            <dl class="xld cl bbda">   
                <dt>   
                    <a href="<?php the_permalink(); ?>" class="xi2" target="_blank">   
                        <? php the_title(); ?>    
                    </a>   
                </dt>   
                <dd>   
                    <? php echo mb_strimwidth(strip_tags(apply_filters( 'the_content', $post->   
                        post_content)), 0, 68,"..."); ?>    
                </dd>   
            </dl>   
            <p class="ptn hm">   
<a href="<? Php the_permalink();?>" class="xi2" target="_blank">View »</a>
            </p>   
        </div>   
    </div>   
</div>   
<? php endwhile; ?>  

Here, the latest announcement is called circularly. Since this announcement is integrated by the theme, it is not uniform. Please modify it according to your actual needs.



Please contact our consultant

+86 10-60259772

Please provide your contact number. The project manager of shangpin China will contact you as soon as possible.