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, посмотрите.
В любом случае, нужно обращаться к уникальным классам, иначе не выйдет.

Сегодня в 04:17

#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

Запретить подгрузку стилей из шаблона

Модификация дефолтного шаблона в свой

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

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

InstantCMS Team

О проекте

Поддержка

Дополнения