Сообщений в теме: 15

[Trend78]

Вобщем поставил вот такой интересный код соц.сетей.
На пк всё шикарно,но есть пару "но",которые очень хотелось бы исправить:
1) В IE почему-то не хочет выдвигаться при наведении,в хроме всё ок.
2) Сделать пропорциональное уменьшение в зависимости от разрешения.
3) На мобильной версии загараживает почти треть экрана. Будет очень круто,если вместо него будет небольшая кнопка (по типу кнопки наверх), при нажатии на которую он бы выезжал.
Очень рассчитываю на вашу помощь! Заранее спасибо

Прикрепленные изображения

• 
• 

[Trend78]

[Trend78]

Что я не правильно делаю?
Вроде всё должно получатся.
В HTML пишу это

<div class="panel">
<div class="title"><img src="http://vapetoday.storeland.ru/design/seti.png" width="60" height="23"></div>
<div class="seti"; style="height:539px">
<iframe src="http://ejfe.ru/noreg?type=lenta&face=pkstarf96&vk=vape_today&twit=pkstarf96&insta=trend788&color=E9EDF5&count=10&width=" frameborder="0" width="170" height="535"></iframe>

</div>
</div>

В html там где скрипты пишу:

$(function(){
$('.panel > .title').click(function(){
$(this).next('.seti').stop().slideToggle();
});
});

В ксс это:

.panel {
width: 60px;
height: 23px;
border: #c2c5cc solid 1px;
border-radius:4px;
margin:0;
position:fixed;

top:6.5em;
right:0px;

}
.panel > .title {
width: 60px;
height: 23px;
cursor: pointer;
background: #e9edf5;
}
.panel > .seti {
width:15em;
margin:0;
position:fixed;
right:-4.3em;
top:8em;

border-radius: 4px;
border: 1px solid #c2c5cc;
border-bottom: 2px solid #c2c5cc;
}

Тут всё получается,а у меня почему то скрипт не работает


upd!

$(document).ready(function () {
	$('.panel > .title').click(function () {
  $('.panel > .seti ').slideToggle('normal');
	});
});

Получилось!!! в main.js вставить

[Trend78]

Вобщем на мобильной версии всё отлично!
А вот на обычной стало вот так,хотя поместил код после @media screen and (max-width: 768px) {

Надо убрать то,что вылезло на основной версии сайта,и вместо него вставить вот это:  

.seti {
  width:15em;
margin:0;
position:fixed;
right:-11em;
top:8em;
  opacity: 0.5;
	border-radius: 4px;
	border: 1px solid #c2c5cc;
	border-bottom: 2px solid #c2c5cc;
	transition: all 250ms ease-out;   
		 z-index:155;	
 }

 .seti:hover {
   right:-2.7em;
   opacity: 1;
   width:15em;
 }

Прикрепленные изображения

• 

[Vaccina]

Перед

@media screen and (max-width: 768px) {

пропишите:

.seti {
	display: none;
}

[Trend78]

Vaccina (21 Ноябрь 2015 - 03:15) писал:

Перед

@media screen and (max-width: 768px) {

пропишите:

.seti {
display: none;
}

Там таких аж 3 штуки
Перед всеми пробовал, либо весь шаблон съезжает, либо ничего не меняется
И после пробовал-одно и тоже

[Vaccina]

Уточните пожалуйста, в обычной версии на пк необходимо скрывать данный блок?

[Trend78]

Vaccina (21 Ноябрь 2015 - 04:07) писал:

Уточните пожалуйста, в обычной версии на пк необходимо скрывать данный блок?

Надо что бы для мобильной версии было вот это:

.panel {
	width: 83px;
	height: 32px;
	 margin:0;
  position:fixed;
  z-index:1000;  
top:3.7em;
	right:1px;
	
	
}
.panel > .title {
	width: 83px;  
	height: 32px;
	right:1px;
	 border: #c2c5cc solid 1px;
	   border-radius:6px;
	cursor: pointer;
	background: #e9edf5;
	z-index:1000;  
	opacity: 0.5;
}   
.panel:hover > .title:hover {
	width: 83px;  
	height: 32px;
	right:1px;
	 border: #c2c5cc solid 1px;
	   border-radius:6px;
	cursor: pointer;
	background: #e9edf5;
	z-index:1000;  
	opacity: 1;	
	
}
.panel > .seti {
	 width:172px;
  margin:0;
position:fixed;
right:1px;
top:6em;
  z-index:1000;   
	border-radius: 4px;
	border: 1px solid #c2c5cc;
	border-bottom: 2px solid #c2c5cc;		   
}

А для пк вот это:

.seti {
  width:15em;
margin:0;
position:fixed;
right:-11em;
top:8em;
  opacity: 0.5;
	border-radius: 4px;
	border: 1px solid #c2c5cc;
	border-bottom: 2px solid #c2c5cc;
	transition: all 250ms ease-out;   
		 z-index:155;	
 }

 .seti:hover {
   right:-2.7em;
   opacity: 1;
   width:15em;
 }

И что бы они не "мешали" друг другу и не пересекались

[Vaccina]

Данный блок

@media screen and (min-width: 980px) {
  .catalogAdnCartCenter .cart {
		display: none;
  }
	.menuResp {
		display: block !important;
	 
	}
   

	.rarr {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	.btnNav {
		display: block;
	}
	.menuResp {
		clear: both;
		display: none;
	}
	.menuResp li,.menuResp a {
		display: block;
		white-space: normal;
	}
	.menuResp .active {
		background: #ddd;
	}
	.menu_select {
		display: block;
	}
	.menuResp ul {
		background: none;
		border: 0;
		box-shadow: none;
		display: block !important;
		position: static;
	}
	.menuResp ul li {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.menuResp ul a {
		display: block;
		white-space: normal;
	}
	.menuResp ul ul {
		display: block;
		position: static;
	}
	.arrow-up,.arrow-up2,.arrow-left,.arrow-left2,.toLeft .arrow-left,.toLeft .arrow-left2,.arrow-right {
		display: none;
	}
	.arrow-down {
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 4px solid #666;
		display: inline;
		display: inline-block;
		height: 0;
		margin: 5px 0 0 5px;
		vertical-align: top;
		width: 0;
		zoom: 1;
	}
	.arrow-right {
		border-bottom: 4px solid transparent;
		border-left: 4px solid #666;
		border-top: 4px solid transparent;
		display: inline;
		display: inline-block;
		height: 0;
		margin: 3px 0 0 5px;
		vertical-align: top;
		width: 0;
		zoom: 1;
	}
	.mediaIndicator {
		z-index: 1 !important;
	}
	.rarr {
		display: inline-block;
		padding: 0 2px 0 0;
	}
}

переместите и поставьте перед:

@media only screen and (max-width: 870px) {
  .logoblock-left {
		display: inline-block;
		width: 100%!important
	}

Выше них расположите:

.seti {
  width:15em;
margin:0;
position:fixed;
right:-11em;
top:8em;
  opacity: 0.5;
		border-radius: 4px;
		border: 1px solid #c2c5cc;
		border-bottom: 2px solid #c2c5cc;
		transition: all 250ms ease-out;   
				 z-index:155;   
 }

 .seti:hover {
   right:-2.7em;
   opacity: 1;
   width:15em;
 }

после:

@media screen and (max-width: 768px) {

расположите:

.panel {
		width: 83px;
		height: 32px;
		 margin:0;
  position:fixed;
  z-index:1000; 
top:3.7em;
		right:1px;
	   
	   
}
.panel > .title {
		width: 83px; 
		height: 32px;
		right:1px;
		 border: #c2c5cc solid 1px;
		   border-radius:6px;
		cursor: pointer;
		background: #e9edf5;
		z-index:1000; 
		opacity: 0.5;
}  
.panel:hover > .title:hover {
		width: 83px; 
		height: 32px;
		right:1px;
		 border: #c2c5cc solid 1px;
		   border-radius:6px;
		cursor: pointer;
		background: #e9edf5;
		z-index:1000; 
		opacity: 1;	
	   
}
.panel > .seti {
		 width:172px;
  margin:0;
position:fixed;
right:1px;
top:6em;
  z-index:1000;  
		border-radius: 4px;
		border: 1px solid #c2c5cc;
		border-bottom: 2px solid #c2c5cc;				 
}
.seti {
  display:none; 
 }

в мобильной версии блок .seti должен скрываться, блок .panel, как поняла, скрывать не нужно, так как в нем находятся .seti

[Trend78]

Vaccina (21 Ноябрь 2015 - 04:35) писал:

Данный блок

@media screen and (min-width: 980px) {
.catalogAdnCartCenter .cart {
	 display: none;
}
.menuResp {
	 display: block !important;
	
}


.rarr {
	 display: none;
}
}
@media screen and (max-width: 768px) {
.btnNav {
	 display: block;
}
.menuResp {
	 clear: both;
	 display: none;
}
.menuResp li,.menuResp a {
	 display: block;
	 white-space: normal;
}
.menuResp .active {
	 background: #ddd;
}
.menu_select {
	 display: block;
}
.menuResp ul {
	 background: none;
	 border: 0;
	 box-shadow: none;
	 display: block !important;
	 position: static;
}
.menuResp ul li {
	 display: block;
	 list-style: none;
	 margin: 0;
	 padding: 0;
}
.menuResp ul a {
	 display: block;
	 white-space: normal;
}
.menuResp ul ul {
	 display: block;
	 position: static;
}
.arrow-up,.arrow-up2,.arrow-left,.arrow-left2,.toLeft .arrow-left,.toLeft .arrow-left2,.arrow-right {
	 display: none;
}
.arrow-down {
	 border-left: 4px solid transparent;
	 border-right: 4px solid transparent;
	 border-top: 4px solid #666;
	 display: inline;
	 display: inline-block;
	 height: 0;
	 margin: 5px 0 0 5px;
	 vertical-align: top;
	 width: 0;
	 zoom: 1;
}
.arrow-right {
	 border-bottom: 4px solid transparent;
	 border-left: 4px solid #666;
	 border-top: 4px solid transparent;
	 display: inline;
	 display: inline-block;
	 height: 0;
	 margin: 3px 0 0 5px;
	 vertical-align: top;
	 width: 0;
	 zoom: 1;
}
.mediaIndicator {
	 z-index: 1 !important;
}
.rarr {
	 display: inline-block;
	 padding: 0 2px 0 0;
}
}

переместите и поставьте перед:

@media only screen and (max-width: 870px) {
.logoblock-left {
	 display: inline-block;
	 width: 100%!important
}

Выше них расположите:

.seti {
width:15em;
margin:0;
position:fixed;
right:-11em;
top:8em;
opacity: 0.5;
	 border-radius: 4px;
	 border: 1px solid #c2c5cc;
	 border-bottom: 2px solid #c2c5cc;
	 transition: all 250ms ease-out;
				 z-index:155;
}

.seti:hover {
right:-2.7em;
opacity: 1;
width:15em;
}

после:

@media screen and (max-width: 768px) {

расположите:

.panel {
	 width: 83px;
	 height: 32px;
		 margin:0;
position:fixed;
z-index:1000;
top:3.7em;
	 right:1px;
	
	
}
.panel > .title {
	 width: 83px;
	 height: 32px;
	 right:1px;
		 border: #c2c5cc solid 1px;
		 border-radius:6px;
	 cursor: pointer;
	 background: #e9edf5;
	 z-index:1000;
	 opacity: 0.5;
}
.panel:hover > .title:hover {
	 width: 83px;
	 height: 32px;
	 right:1px;
		 border: #c2c5cc solid 1px;
		 border-radius:6px;
	 cursor: pointer;
	 background: #e9edf5;
	 z-index:1000;
	 opacity: 1;	
	
}
.panel > .seti {
		 width:172px;
margin:0;
position:fixed;
right:1px;
top:6em;
z-index:1000;
	 border-radius: 4px;
	 border: 1px solid #c2c5cc;
	 border-bottom: 2px solid #c2c5cc;				
}
.seti {
display:none;
}

в мобильной версии блок .seti должен скрываться, блок .panel, как поняла, скрывать не нужно, так как в нем находятся .seti

На пк ничего не изменилось
На мобильной стало хуже

[Vaccina]

В стилях у вас отсутствует блок:

.seti {
  width:15em;
margin:0;
position:fixed;
right:-11em;
top:8em;
  opacity: 0.5;
		border-radius: 4px;
		border: 1px solid #c2c5cc;
		border-bottom: 2px solid #c2c5cc;
		transition: all 250ms ease-out;  
				 z-index:155;  
}
.seti:hover {
   right:-2.7em;
   opacity: 1;
   width:15em;
}

также после:

.panel > .seti {
	 width:172px;
  margin:0;
position:fixed;
right:1px;
top:6em;
  z-index:1000;  
	border-radius: 4px;
	border: 1px solid #c2c5cc;
	border-bottom: 2px solid #c2c5cc;		  
}

добавьте:

.panel > .title {display:none;}

[Trend78]

Vaccina (21 Ноябрь 2015 - 05:27) писал:

В стилях у вас отсутствует блок:

.seti {
width:15em;
margin:0;
position:fixed;
right:-11em;
top:8em;
opacity: 0.5;
	 border-radius: 4px;
	 border: 1px solid #c2c5cc;
	 border-bottom: 2px solid #c2c5cc;
	 transition: all 250ms ease-out;
				 z-index:155;
}
.seti:hover {
right:-2.7em;
opacity: 1;
width:15em;
}

также после:

.panel > .seti {
	 width:172px;
margin:0;
position:fixed;
right:1px;
top:6em;
z-index:1000;
border-radius: 4px;
border: 1px solid #c2c5cc;
border-bottom: 2px solid #c2c5cc;		
}

добавьте:

.panel > .title {display:none;}

На мобильно всё как и было норм
На пк так же плохо, никаких изменений
Я вот что подумал, может в html и скриптах дублировать сам код,только немного названия поменять
И просто для мобильной версии убрать отображении основной, а для основной-мобильное?

[Trend78]

Кроме вакцины никто не помогает

UPD.
Ошибся,на мобильной версии вобще пропало

[Trend78]

Ладно,отменяю задание из-за сложности
Единственное: как сделать так,что бы .panel > .seti был по умолчанию свёрнут?

[Firefly]

Trend78 (22 Ноябрь 2015 - 11:27) писал:

Ладно,отменяю задание из-за сложности
Единственное: как сделать так,что бы .panel > .seti был по умолчанию свёрнут?

Здравствуйте.
На текущий момент содержимое блока виджетов по умолчанию у Вас скрыто и раскрывается при клике на иконки.
Уточните, пожалуйста, этот вопрос актуален, возможно Вы имели в виду что-то другое?

Прикрепленные изображения

• 

[Trend78]

Firefly (23 Ноябрь 2015 - 14:40) писал:

Здравствуйте.
На текущий момент содержимое блока виджетов по умолчанию у Вас скрыто и раскрывается при клике на иконки.
Уточните, пожалуйста, этот вопрос актуален, возможно Вы имели в виду что-то другое?

Не актуален,спасибо
Сам разобрался