Помогите вставить баннер

dzimon · 11 травня 2011

Помогите пожалуйста, не могу понять в чем причина, вставляю код в header.tpl он работает только в гугл-хром, а если просто с локалки, то во всех браузерах нормально

вот сам код html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<link href="*.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(document).ready(function() {
	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	//Paging + Slider Function
	rotate = function(){
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
	}; 
	//Rotation + Timing Event
	rotateSwitch = function(){	
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	rotateSwitch(); //Run function on launch
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
});
</script>
<script type="text/javascript">
    $(function() {
        $('.temphol').hover(function() {
            $(this).children('.front').stop().animate({ "top" : '170px'}, 500);   
        }, function() {
            $(this).children('.front').stop().animate({ "top" : '0px'}, 300);       
        });
    });
</script>
</head>
<body>
<div id="banner_block1">
    	<div id="banner_block2">
        	<div class="temp">
        		<div class="temphol">
                  <img src='img/banner_small_down.png' alt='' border='0'/>
                  <img src='img/banner_small1.png' class='front' alt='' border='0'/>
                </div>
        	</div>        	
        </div>
<div id="banner_block3">
    	<div class="main_view">
            <div class="window">
                <div class="image_reel">
                	<a href="#"><img src="img/banner1.png" alt="" /></a>
                  <a href="#"><img src="img/banner2.png" alt="" /></a>
                    <a href="#"><img src="img/banner3.png" alt="" /></a>
                    <a href="#"><img src="img/banner4.png" alt="" /></a>
                </div>
            </div>
            <div class="paging">
                <a href="#" rel="1">1</a>
                <a href="#" rel="2">2</a>
                <a href="#" rel="3">3</a>
                <a href="#" rel="4">4</a>
            </div>
        </div>
</div>
    <div id="banner_block4">
    	<div class="temp">
        	<div class="temphol">
               <img src='img/banner_small_down.png' alt='' border='0'/>
               <img src='img/banner_small1.png' class='front' alt='' border='0'/>
            </div>
        </div>    	
  </div>
</div>
</body>
</html>

и css

#banner_block1 {
	width: 960px;
	height: 140px;
	margin-top: 30px;
	margin: auto auto;
	}
#banner_block2 {
	width: 180px;
	height: 133px;
	float: left;
	}
#banner_block3 {
	width: 575px;
	height: 130px;
	margin: auto auto;
	}
#banner_block4 {
	width: 177px;
	height: 130px;
	float: right;
	margin-top: -136px;
	}
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:130px;	
	width: 575px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
	padding-left: 9px;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 70px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(img/paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold; 
	background: #920000;
	border: 1px solid #610000;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

/*--------------------------------*/

.temp{
float:left;
width:178px;
}
.temphol{
position:relative;
width:177px;
height:130px;
overflow:hidden;
}
.temphol img {
position: absolute;
top: 0px; left: 0px;
}

19th · 12 травня 2011

Помогите пожалуйста, не могу понять в чем причина, вставляю код в header.tpl он работает только в гугл-хром, а если просто с локалки, то во всех браузерах нормально

Баннерорезалки не могут мешать?

dzimon · 12 травня 2011

Баннерорезалки не могут мешать?

Вы имеете ввиду дополнения которые блокируют банеры? Нет, я ими никогда не пользовался, дело в том что все картинки выводятся, только такое ощущение что не отрабатывает ява или css, они просто выводятся все как есть на экран вот скрины сделал из хрома

и оперы

EvzeNsx · 12 травня 2011

Проверьте наличие незакрытых тегов.

Как видно хром отображает все как нужно - у него есть функция автозакрытия незакрытых тегов. Может причина в этом.

dzimon · 12 травня 2011

Проверьте наличие незакрытых тегов.

Как видно хром отображает все как нужно - у него есть функция автозакрытия незакрытых тегов. Может причина в этом.

спасибо, пересчитал дивы, все вроде правильно....и если этот код не вставлять в хоме.тпл то работает и отображается корректно во всех браузерах

dzimon · 12 травня 2011

Спасибо всем, тему можно закрывать, проблема решена.....решение оказалось банально простым - код css я дописывал в конце и он просто не отрабатывался, когда перенес его в нужное место - все начало адекватно работать!

еще раз всем спасибо!

Вхід

Помогите вставить баннер

Recommended Posts

dzimon

Надіслати

Поділитися на інших сайтах

19th

Надіслати

Поділитися на інших сайтах

dzimon

Надіслати

Поділитися на інших сайтах

EvzeNsx

Надіслати

Поділитися на інших сайтах

dzimon

Надіслати

Поділитися на інших сайтах

dzimon

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

OpenCart.Pro

Important Information