js в smarty шаблоне

1
2
Следующая
Показаны 1-15 из 17

#1 17 апреля 2015 в 09:37

Здравствуйте. 1.10.6.
В шаблоне такая структура

{foreach key=tid item=b from=$a}
<div class="parent">
<div class="child">...</div>
</div>
{/foreach}

В результате выводятся три блока.
Нужно при hover на ".parent" спрятать див ".child". (Hover на "child" не реагирует.) Пробовал сделать так

$(function(){
	$(".parent").hover(function(){ 
  $(".child").toggleClass("opacity");  
});
});

Но тогда при hover прячутся все три "child". Тогда решил добавить к "parent" data-id={$tid}

<div class="parent" data-id={$tid} >

и в ф-ции

var str = S(".parent").attr(data-tid);
{literal}
$(function(){
	$(str).hover(function(){ 
  $(".child").toggleClass("opacity");  
});
});
{/literal}

Но так не работает. Не подскажите как правильно сделать?

Разработка мобильных приложений

#2 17 апреля 2015 в 09:55

В вашем первом примере в $(".child").блабла(); выбираются все дети.
Ваш второй пример — посмотрите сперва значение переменной str, прежде чем писать $(str).тратата();

Совет. Модифицируйте первый пример. Попробуйте id присваивать детям, а не родителю. При наведении на родителя перечисляйте id скрываемых детей.

NOP

#3 17 апреля 2015 в 09:56

Я здесь вставлял смарти в js, посмотрите.
В любом случае, нужно обращаться к уникальным классам, иначе не выйдет.

Сегодня в 13:52

#4 17 апреля 2015 в 10:06

народ вы вообще о чем сейчас какие дети и ID разные, какие разные классы. да и зачем делать на js если все можно сделать на css
если нужно на js тогда код будет вот такой

 
 
    $(function(){
$(document).on('hover','.parent',function(e){
$(this).children('.child').toggleClass('opacity');
});

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

примерно все тоже самое на css

 
.parent .child {opacity:0.3;}
 
.parent:hover > .child {opacity:1;}

Осуществляю все виды работ по разработке сайтов и веб приложении. Компоненты любой сложности и конфигурации. Телеграмм @instantcms_dev

#5 17 апреля 2015 в 10:24

Джехутимери, Спасибо, это немного не то.
Странник, Так пробовал, не работает,
maxisoft, Спасибо, да надо на js, ваш вариант не хочет что то работать.(css работает). Посмотрю ещё, возможно что то упустил.

Разработка мобильных приложений

#6 17 апреля 2015 в 10:33

сайт в сети? проблема скорее всего в toggleClass() скорее всего стили не работают.

#7 17 апреля 2015 в 10:34

К сожалению на локалке.

Разработка мобильных приложений

#8 17 апреля 2015 в 10:40

Возможно ли, что это всязанно с тем, что на " .parent: hover" висит svg анимация, вот полный код

		{foreach key=tid item=article from=$articles}
 
			 <div class="box_svg">
						<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="300%" y2="0"/>
							<line class="left" x1="0" y1="100%" x2="0" y2="-200%"/>
							<line class="bottom" x1="100%" y1="100%" x2="-200%" y2="100%"/>
							<line class="right" x1="100%" y1="0" x2="100%" y2="300%"/>
						</svg>
					<div  class="red">
 
			<img src="/templates/real/002.png" alt="realm">
 
						<h3>{$article.cat_title}</h3>
						<span>2012</span>
						<span>Walnut, Pineapple</span>
						</div>
					</div>
 
					{/foreach}

Разработка мобильных приложений

#9 17 апреля 2015 в 10:41

стили для блоков покажи.

#10 17 апреля 2015 в 10:44

Спойлер

 
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Ruthie);
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
.box_svg {
	width:31.5%;
	height: 370px;
	position: relative;
	background: rgba(255,255,255,0);
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
	color: #2c3e50;
	box_svg-shadow: inset 0 0 0 3px #2c3e50;
	-webkit-transition: background 0.4s 0.5s;
	transition: background 0.4s 0.5s;
	box-shadow: inset 0 0 0 10px #fff;
	margin:0.5%;
}
.box_svg:first-child{
margin-left:0%;
}
.box_svg:last-child{
margin-right:0%;
}
.box_svg:hover {
	background:rgba(0,51,102,0.7);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	box-shadow: inset 0 0 0 10px #FFF;
}
 
.box_svg h3 {
	font-family: "codropsicons", cursive;
	font-size: 30px;
	line-height: 100px;
	margin: 0;
	font-weight: 400;
	width: 100%;
	color: #000;
}
 
.box_svg span {
	display: block;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	padding: 5px;
	color: #C60000;
	text-align:center;
}
 
.box_svg h3,
.box_svg span {
	-webkit-transition: color 0.4s 0.5s;
	transition: color 0.4s 0.5s;
}
 
.box_svg:hover h3,
.box_svg:hover span {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	color: #000;
}
 
.box_svg svg {
	position: absolute;
	top: 0;
	left: 0;
}
 
.box_svg svg line {
	stroke-width: 8;
	stroke: #CC0000;
	fill: none;
	-webkit-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
 
.box_svg:hover svg line {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
	stroke: rgba(0,51,102,0.8);;
}
 
.box_svg svg line.top,
.box_svg svg line.bottom {
	stroke-dasharray: 370 260; 
}
 
.box_svg svg line.left,
.box_svg svg line.right {
	stroke-dasharray: 400 310;
}
 
.box_svg:hover svg line.top {
	-webkit-transform: translateX(-640px);
	transform: translateX(-640px);
}
 
.box_svg:hover svg line.bottom {
	-webkit-transform: translateX(640px);
	transform: translateX(640px);
}
 
.box_svg:hover svg line.left {
	-webkit-transform: translateY(740px);
	transform: translateY(740px);
}
 
.box_svg:hover svg line.right {
	-webkit-transform: translateY(-740px);
	transform: translateY(-740px);
}
 
 
.box_svg .red{
width:90%;
height:40%;
margin:5%;
background:#CC0000;
}
.box_svg .red img{
width:50%;
margin-left:25%;
}
.opacity{
opacity:0;
}
/* Color */

Разработка мобильных приложений

#11 17 апреля 2015 в 10:51

по идее все должно работать, если правильно указаны стили в селекторах js

#12 17 апреля 2015 в 10:59

{literal}		
<script>
    $(function(){
$(document).on('hover','.box_svg',function(e){
$(this).children('.red').toggleClass('opacity');
});
</script>
{/literal}

Разработка мобильных приложений

#13 17 апреля 2015 в 11:07

Может с системой, что или с браузером. Пойду в ubuntu посмотрю.

Разработка мобильных приложений

#14 17 апреля 2015 в 12:54

В общем не понимаю, в чём проблема. Остановлюсь пока на css, а потом перенесу в сеть, там посмотрю.

Разработка мобильных приложений

#15 17 апреля 2015 в 13:11

Всем спасибо. "Разобрался", код работает в таком виде

$(function(){
	$(".box_svg").hover(function(){ 
  $(this).children('.red').toggleClass('opacity');  
});
});

Разработка мобильных приложений

1
2
Следующая
Показаны 1-15 из 17

Исходный код - закрытый код?

Нужна помощь в написании php ф

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

js в smarty шаблоне

Похожие темы

Исправить ошибку на Smart Slider

Нужна помошь с настройками smartchat

Шаблон админки, правка названия

Нужен шаблон с рабочего примера

[ЕСТЬ РЕШЕНИЕ] Шаблон Boxed и верхнее меню

[ЕСТЬ РЕШЕНИЕ] Вывод ссылки на скачивание файла в шаблоне дополнения

InstantCMS Team

О проекте

Поддержка

Дополнения