I am working on dubaiexporters.com.
Recently i have added floating images(left and right side).
It goes below footer.
i dont know why its happening but if i set the height of both images as (height:320px;),it does not go.
i have used below css and javascript:
css:
.emi {
position:absolute;
width: 150px;
height: 320px;
bottom: 40px;
z-index: 1000;
}
#emi_l div{float:right; font-size:11px;}
#emi_l div a{color:#FFF; text-decoration:underline;}
#emi_l { left: 5px; }
.zindex { z-index: -999; }
.emi1 {
position:absolute;
width: 150px;
height: 320px;
bottom: 40px;
z-index: 1000;
}
#emi_l1 div{float:right; font-size:11px;}
#emi_l1 div a{color:#FFF; text-decoration:underline;}
#emi_l1 { right: 5px; }
.zindex { z-index: -999; }
Javscript:
<script type="text/javascript">
jQuery(document).ready(function($){
var $banner = $('.emi'), $window = $(window);
var $topDefault = parseFloat($banner.css('top'), 10);
$window.on('scroll', function() {
var $top = $(this).scrollTop();
$banner.stop().animate( { top: $top + $topDefault }, 500, 'easeOutCirc' );
});
var $wiBanner = $banner.outerWidth() * 2;
function zindex(maxWidth){
if( $window.width() <= maxWidth + $wiBanner ) {
$banner.addClass('zindex');
} else {
$banner.removeClass('zindex');
}
}
});
function hide(){
$('#emi_l').hide('slow');
}
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
var $banner = $('.emi1'), $window = $(window);
var $topDefault = parseFloat( $banner.css('top'), 10 );
$window.on('scroll', function() {
var $top = $(this).scrollTop();
$banner.stop().animate( { top: $top + $topDefault }, 1000, 'easeOutCirc' );
});
var $wiBanner = $banner.outerWidth() * 2;
function zindex(maxWidth){
if( $window.width() <= maxWidth + $wiBanner ) {
$banner.addClass('zindex');
} else {
$banner.removeClass('zindex');
}
}
});
function hide()
{
$('#emi_l1').hide('slow');
}
</script>
<html><body>
.
..
....
...
<div class="emi" id="emi_l">
<div><a onClick="javascript: hide()">Close [x]</a></div>
<%--<a href="https://www.expogr.com/eite/" onclick="javascript: safari()"><img src="images/EITE_DE 01.jpg" alt="Ethiopia International trade exhibition 2019" border="0" title="Ethiopia International trade exhibition 2019"></a>--%>
<a href="https://www.expogr.com" onclick="javascript: safari()"><img src="images/expoafrica.jpg" alt="Ethiopia International trade exhibition 2019" border="0" title="Ethiopia International trade exhibition 2019"></a>
</div>
<div class="emi1" id="emi_l1">
<div><a onClick="javascript: hide()">Close [x]</a></div>
<%--<a href="https://www.expogr.com/eite/" onclick="javascript: safari()"><img src="images/EITE_DE 01.jpg" alt="Ethiopia International trade exhibition 2019" border="0" title="Ethiopia International trade exhibition 2019"></a>--%>
<a href="https://www.expogr.com" onclick="javascript: safari()"><img src="images/expoafrica.jpg" alt="Ethiopia International trade exhibition 2019" border="0" title="Ethiopia International trade exhibition 2019"></a>
</div>
</body></html>
Any help will be appreciated.
