Sign in to follow this  
Followers 0
WQP

При клике на кнопку div меняет координаты (js)

8 posts in this topic

Здравствуйте,  я не нашел продавца http://talk.pr-cy.ru/topic/4069-%D0%BA%D1%83%D0%BF%D0%BB%D1%8E-%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82-jquery-%D1%82%D0%B0%D0%B1%D1%8B/ и решил сделать сам.

 

Проблема:

При нажатии на картинку блок с id="arrow" должен менять marginLeft, но этого не происходит. В чём ошибка? 

<script type="text/javascript">
function 1season(){document.getElementById('arrow').style.marginLeft="93px";}
function 2season(){document.getElementById('arrow').style.marginLeft="340px";}
function 3season(){document.getElementById('arrow').style.marginLeft="590px";}
function 4season(){document.getElementById('arrow').style.marginLeft="838px";}
</script>

<a onclick="1season()" href="#season1"><img src="/wp-content/uploads/2014/01/postret1.jpg" style="padding-right: 28px;"></a>
<a onclick="2season()" href="#season2"><img src="/wp-content/uploads/2014/01/fors-mazhori_58_vzonetv.com_13486142101.jpg" style="padding-right: 28px;"></a>
<a onclick="3season()" href="#season3"><img src="/wp-content/uploads/2014/01/suits2season.jpg" style="padding-right: 28px;"></a>
<a onclick="4season()" href="#season4"><img src="/wp-content/uploads/2014/01/postret1.jpg"></a>

<div id="arrow" class="arrow-up"></div>

Share this post


Link to post
Share on other sites

Привет!

для  блока который меняет координаты нужно указать

style.position="absolute";

WQP likes this

Share this post


Link to post
Share on other sites

@r00s, если поставить данный параметр, то блок просто исчезнет. Но я решил проблему дописав в change к ID (возможно совпадало с чем-то).

Share this post


Link to post
Share on other sites

функцию с числа-то не начинайте -- это очень грубая ошибка

 

т.е. function 1season(){} - не заработает никогда, в то время как function season1(){}  -- прекрасно работает

Share this post


Link to post
Share on other sites

кстати, на счет табов, вам конент в таб как должен подтягиваться?

готовый или через аякс?

 

Вообще написать такой табулятор на джейквери - дело минут 30. у меня, кстати, он даже где-то был...

Share this post


Link to post
Share on other sites

@silicoid, у меня в подписи есть сайт перейти в раздел site.ru//season-online и посмотри как это выглядит.

Share this post


Link to post
Share on other sites


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		$('#tabulator li').click(function(){		
			var label = '#'+$(this).attr('rel');
			$('.elmBlock').css("display", "none");
			$(label).fadeIn(500);
			// если нужна динамическая загрузка контента, то код подгрузки пихается куда-то сюда. 
			// но надо учесть, что сервера как правило не реактивные, поэтому  еще нужна фукция показа таймера, если сервак тупит
			
			// Calculate Marker Position
			var bl = $(this).position().left;	
			var bw = $(this).outerWidth();
			var ms = $('#markerElement').outerWidth();
			var markerPosition = bl + Math.round((bw/2)-(ms/2));
			
			// setting Marker
			$('#markerElement').css('left',markerPosition);
		})
		
		$('#startElement').click();
	})
</script>

<style type="text/css">
<!--
ul { display:block; margin:5px; list-style:none;}
li { width: 150px; height:300px; margin:0px 10px; display:inline-block; background-color:#FFFF33; cursor:pointer;}

.elmBlock{ width:100%; height:250px; display:none;}
#markerElement{ width:25px; height:25px; background-color:#000000; display:block; position:relative;}
-->
</style>

</head>

<body>
	
    <ul id="tabulator">
    	<li rel="content_1" id="startElement"> tab1 </li>
		<li rel="content_2"> tab2 </li>
        <li rel="content_3"> tab3 </li>
        <li rel="content_4"> tab4 </li>
        <li rel="content_5"> tab5 </li>
    </ul>
	
    <div id="MarkerContainer">
    	<div id="markerElement"></div>
    </div>
    
    <div id="content_1" style="background-color:#0099CC;" class="elmBlock">1</div>
    <div id="content_2" style="background-color:#00FF99;" class="elmBlock">2</div> 
    <div id="content_3" style="background-color:#CCCC00;" class="elmBlock">3</div> 
    <div id="content_4" style="background-color:#99CC99;" class="elmBlock">4</div> 
    <div id="content_5" style="background-color:#FF6666;" class="elmBlock">5</div> 

</body>
</html>

Вот скрипт. Он работает.

если есть вопросы, можно задавать тут

 

Скрипт - более универсальный, чем приведен выше, так как ему глубоко пофих на кол-во элементов, в которое можно ткнуть

я сейчас сделал 5, но их может быть 8, 10, да хоть 100500

Главное, чтобы ul и MarkerContainer начинались с одной линии, иначе может быть кривоватое позиционирование

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.