Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Floating fixed images on right/left side of the page. 
 
ajaxjagadish
Jr. Member
 
Total Posts:  2
Joined:  2013-04-08
 

Hello,
I have written html,css,jquery code to have floating images on the right side of the page for special deals and to track order.
I have this code in the static block. This static block I have included in the homepage, so the floating images are working well in the homepage. However, I want these floating images to be displayed on catalog and product page as well. Any help on how this can be done would be greatly appreciated.

Please check my site http://www.jagzee.com for the floating images on the sides.

I code in the static block is below:

<style>
.
order_status_block{
 background
-imageurl("{{media url='wysiwyg/track_order_2.png'}}");
 
positionfixed;right3pxbottom:380px;
background-position: -0px -96pxwidth229pxheight58px;
 
z-index26;
}
.order_status_block a{
 width
229pxheight58px;
 
float:left;
}

#tvc_we{
transitionright .5sheight .5s,bottom .4s;
-
moz-transitionright .5s,height .5s,bottom .4s/* Firefox 4 */
-webkit-transitionright .5s,height .5s,bottom .4s/* Safari and Chrome */
-o-transitionright .5s,height .5s,bottom .4s/* Opera */
position:fixedbottom:200px
    
height72px;right:15px
}
#tvc_we1{
transitionright .5sheight .5s,bottom .4s;
-
moz-transitionright .5s,height .5s,bottom .4s/* Firefox 4 */
-webkit-transitionright .5s,height .5s,bottom .4s/* Safari and Chrome */
-o-transitionright .5s,height .5s,bottom .4s/* Opera */
position:fixedbottom:380pxright:2px;height111px;
}
#tvc_we:hover{height:100px;right:25px;bottom:180px}
#tvc_we1:hover{height:150px;right:12px;bottom:360px}
</style>


<
div id "gulabo" >
</
div>
<
div id="track" class="order_status_block"><a href="http://jagzee.com/sales/guest/form/">&nbsp;</a></div>
        <
div style="clear: both;"></div>

<
script type="text/javascript">
jQuery(window).load(function()
jQuery
("#gulabo").html('<a target="_blank" href = "http://www.jagzee.com" rel="gpop" ><img id="tvc_we" onmouseover="jQuery("#xxx").fadeIn(600);" onmouseout="jQuery("#xxx").fadeOut();" src="http://t2.dkrt.in/media/wysiwyg//xxx.png" style=""></a><div id="xxx" style="position: fixed; right: 132px; bottom: 211px; display: none;"><span style="  -moz-border-radius: 10px;-webkit-border-radius: 10px;    -khtml-border-radius: 10px;    border-radius: 10px;background-color: white; padding: 11px; font-family:Segoe UI, Verdana; font-style:italic; font-size: 21px; color:#191970;border: 3px solid navy;font-weight: bolder;">No time to buy new specs?</span></div>');

});
</script>
 
Magento Community Magento Community
Magento Community
Magento Community
 
prateekgupta
Guru
 
Avatar
Total Posts:  541
Joined:  2010-06-04
India
 

HI,

You can include this static block in phtml file. phtml file you can get by enabling template path hints.

<?php echo $this->getLayout()->createBlock(\’cms/block\’)->setBlockId(\’blockid\’)->toHtml() ?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top