Social Bar Coding Request

Hi guys!

I would like to add a floating social bar to my website (HTML) but the plugin I wanna use is for WP.

Is there a way to convert this code to work under a HTML template?

Yes you can “convert” it. You just have to replace the Wordpress specific stuff like: site_url();,the_permalink(); and bloginfo(‘template_url’); with your path.
Maybe I missed one of them.

But it will not work with HTML only. You will need some PHP .

maxvarlson said
Yes you can “convert” it. You just have to replace the Wordpress specific stuff like: site_url();,the_permalink(); and bloginfo(‘template_url’); with your path.
Maybe I missed one of them. But it will not work with HTML only. You will need some PHP .

Thanks for your reply!

Everything is there but I need to to add a slowdown transition effect on mouse over that I can’t figured out for now!

Any tips will be appreciated!

Thanks!

Sawasdee said
Everything is there but I need to to add a slowdown transition effect on mouse over that I can’t figured out for now!

You could realize it with javascript. For this solution take a look at the original tutorial at Step 5 where it comes to the javascript part.

Or you could build it with css3, it isn’t supported in all browsers at the time, for that I recommend this tutorial at nettuts+ about css3 basic transitions.

maxvarlson said

Sawasdee said
Everything is there but I need to to add a slowdown transition effect on mouse over that I can’t figured out for now!

You could realize it with javascript. For this solution take a look at the original tutorial at Step 5 where it comes to the javascript part.

Or you could build it with css3, it isn’t supported in all browsers at the time, for that I recommend this tutorial at nettuts+ about css3 basic transitions.

Thanks maxvarlson for your support!

I’m getting close to the results I want but it seems that I’m not able to activate the javascript!

Here’s how I’m trying to do!

In my .html page I put this code:

<div class="container">
<ul class="thumb">
    <li><a href="#"><img src="layout/images/image1.png" alt="" /></a></li>
    <li><a href="#"><img src="layout/images/image2.png" alt="" /></a></li>
    <li><a href="#"><img src="layout/images/image3.png" alt="" /></a></li>
    <li><a href="#"><img src="layout/images/image4.png" alt="" /></a></li>
</ul>
</div>

.container {
    top:300px;
    border:0px;
    position:fixed;
    z-index: -2000;
    left:-17px;
    width:58px;
}
ul.thumb {
    float: left;
    list-style: none;
    margin: 0; padding: 0;
    width: 41px;
}
ul.thumb li {
    margin: 0; padding: 0;
    float: left;
    position: relative;
    width: 41px;
    height: 41px;
}
ul.thumb li img {
    width: 41px; height: 41px;

    position: absolute;
    left: 0; top: 0;
    -ms-interpolation-mode: bicubic; 
}
ul.thumb li img.hover {

    border: none;
}
#main_view {
    float: left;
    padding: 9px 0;
    margin-left: -10px;
}

$(document).ready(function(){
$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
        .animate({

            marginLeft: '17px', 
            top: '0%', 
            left: '0%', 
            width: '41px', 
            height: '41px',

        }, 300);

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width: '41px', 
            height: '41px', 
        }, 400);
});

//Swap Image on Click
    $("ul.thumb li a").click(function() {

    });

});

Sawasdee said
And now I have a script that I first, don’t know where to put it and make it call the .css that is placed like this: layout/css/style/light.css

maxvarlson said

Sawasdee said
And now I have a script that I first, don’t know where to put it and make it call the .css that is placed like this: layout/css/style/light.css

I am not sure if I understand you right.
You save that pice of code into a file called “filename.js”. And now you but this into your head of the html file:

<script type="text/javascript" src="fielname.js"></script>

Of course you can change “filename” to what ever you want. You also could include it at the end of the html body but that is just a performance optimisation. Pay attention to the right path of the file and do not forget to include jquery.

Everything’s working on a page without other jquery animation! As soon as there’s an animation like NivoSlider, Prettyphoto, sidebar animation works but none of the others.

There’s a conflict somewhere in there!

    <!-- CORE CSS -->
    <link rel="stylesheet" href="layout/css/core/reset.css" />
    <link rel="stylesheet" href="layout/css/core/nav.css" />
    <link rel="stylesheet" href="layout/css/core/core.css" />
    <link rel="stylesheet" href="layout/css/core/plugins.css" />
    <link rel="stylesheet" href="layout/css/core/grid.css" />
    <link rel="stylesheet" href="layout/css/core/typography.css" />
    <link rel="stylesheet" href="layout/css/core/widgets.css" />
    <link rel="stylesheet" href="layout/css/core/shortcodes.css" />
    <link rel="stylesheet" href="layout/css/core/menus.css" />
    <link rel="stylesheet" href="layout/plugins/prettyphoto/css/prettyPhoto.css" />

    <!-- HEADER STYLE -->
    <link rel="stylesheet" href="layout/css/skin/glass-blue.css" />

    <!-- BODY SHAPE -->
    <link rel="stylesheet" href="layout/css/shape/stretch-light.css" />

    <!-- OVERALL STYLE -->
    <link rel="stylesheet" href="layout/css/style/light.css" />

    <!-- JS -->
    <script src="layout/js/jquery.js"></script>

    <script src="layout/js/tools.js"></script>
    <script src="layout/js/easing.js"></script>
    <script src="layout/plugins/prettyphoto/js/jquery.prettyPhoto.js"></script>
    <script src="layout/js/swfobject.js"></script>
    <script src="layout/js/cycle.js"></script>
    <script src="layout/js/nivo.js"></script>
    <script src="layout/js/accordion.js"></script>
    <script src="layout/js/superfish.js"></script>
    <script src="layout/js/validate.js"></script>
    <script src="layout/js/custom.js"></script>

<!-- FANCYBAR START -->
<link rel="stylesheet" href="fancybar.css" />
<script type="text/javascript" src="layout/plugins/jquery-latest.js"></script> 
<script src="layout/js/social.js" type="text/javascript"></script> 
<!-- FANCYBAR END -->

FANCYBAR is the coding! Here’s a testing view!:http://www.wizzartcreative.com/testing.html

Try the Element Place WP Plugin.

For an example of what it can do, check out the live preview of the jQuery version of the same script.

designcise said
Try the Element Place WP Plugin. For an example of what it can do, check out the live preview of the jQuery version of the same script.

Thanks for your suggestion but I’m getting close to it! I’m pretty sure that it can be fix easily!

I just need to find the clue if there’s one!

Seems to work now! http://www.wizzartcreative.com/testing.html Been testing it in Firefox, IE9 , Chrome.

Still have a lot of test to do!

Thanks for helping me out guys!

Follow the development of this social bar! Some effects are coming!