неработает в opera

radioactive · November 22, 2012

прошу настроить кроссбраузерность

неработает в опере

http://codepen.io/SaraSoueidan/pen/otGgw

и ещё вопрос не по теме

наделал тут медиа

скажите правильноли? будет работать на других мониторах?



@media screen and (min-device-width: 2560px) { body {width: 1500px; margin:60px auto;} }
@media screen and (device-width: 1920px) { body {width: 1100px; margin:60px auto;} }
@media screen and (device-width: 1680px) { body {width: 1100px; margin:60px auto;} }
@media screen and (device-width: 1600px) { body {width: 1050px; margin:50px auto;} }
@media screen and (device-width: 1440px) { body {width: 1000px; margin:50px auto;} }
@media screen and (device-width: 1280px) { body {width: 950px; margin:50px auto;} }
@media screen and (device-width: 800px) { body {width: 700px; margin:40px auto;} }

Edited November 23, 2012 by radioactive

radioactive · November 23, 2012

Нет решения?

logicface · November 23, 2012

Вы бы лучше сделали скрин шот и обвели красным что не работает.

radioactive · November 23, 2012

Вы бы лучше сделали скрин шот и обвели красным что не работает.

вот лол, а вам не легче открыть ссылку что я в первом посте кинул?

проблема - криво открывается меню в браузере opera(

навсякий чтоб видно было вот скрин: (слева как надо)(справа это проблема, это в браузере opera)

http://floomby.ru/s1/zwJXD/full/

Edited November 23, 2012 by radioactive

Николя223 · November 23, 2012

исправил )) вроде в опере работает =) какой то ерунды там наворотили =))

вот

display поменял table-cell;

и max-width со второй колонки удалил, он на container-е стоит, а вообще код чистить надо

исправил ошибки, появились другие)) сейчас подумаю ещё

Edited November 23, 2012 by Николя223

logicface · November 23, 2012

Просто у меня в ссылке этого меню, которое вылезло вообще не показывало.=)

Николя223 · November 23, 2012

добил вроде )) Jquery плохо знаю и разбираться щас лень, поэтому пару строк JS добавил )) вот

Edited November 23, 2012 by Николя223

radioactive · November 24, 2012

добил вроде )) Jquery плохо знаю и разбираться щас лень, поэтому пару строк JS добавил )) вот

Спасибо огромное! в js я ваще 0, всё чётко!

поставил бы плюс еслиб "+" работал

Вот ещё задачка для знающих js

http://jsfiddle.net/YFs8R/ - открываем в opera

скрипт против копирования, но при действии данного скрипта неработает поиск, вернее написать в нём нельзя

нужно какнить добавить в исключения скрипта этот поиск, неработает почемуто только в opera

Edited November 24, 2012 by radioactive

radioactive · November 24, 2012

добил вроде )) Jquery плохо знаю и разбираться щас лень, поэтому пару строк JS добавил )) вот

Возникла незначительная проблема, в принципе на работу менюшки это невлияет но скрин ошибки я всётаки кину

http://floomby.ru/s1/fwf2S/full/

Николя223 · November 24, 2012

какой отладчик такое выдает? опера и хром нормально работают, а так =)

не. не применяй этот способ. я к вечеру постараюсь что нибудь придумать. mozilla все зарубилла ))

Edited November 24, 2012 by Николя223

radioactive · November 24, 2012

какой отладчик такое выдает? опера и хром нормально работают, а так =)
не. не применяй этот способ. я к вечеру постараюсь что нибудь придумать. mozilla все зарубилла ))

Это хром выдает. Буду ждать...

что насчёт задачки в посте #8

Николя223 · November 24, 2012

ssory )) за длинный пост, =) всё переписал (самому интересно было =) у меня работает в мазиле, в хроме, и опере.

в кодепене лагает, поэтому сюда выкладываю =))

P.S: чет не нашёл как спойлер сделать )))

и там осталось ещё анимацию доработать для webkit,при наведении на листочки ( в FF прикольно смотриться=)

по поводу восьмого: чувствую нужно отталкиваться от запрета на выделение...

Может натолкнет


<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="" content="">
<style>
*{margin: 0px;
padding: 0px;}
body{font: Normal 62.5%/1.1 "Open Sans", Helvetica;
}
a {
color: #DDD;
text-decoration: none;
outline: none;
}
.table{
width: 1000px;
margin: 0 auto;

}
.b-tash-top{border-top: 1px dashed #444;}
.td_table{text-align: center;
box-shadow: 0 2px 0px 0px rgba(9,9,9,0.3); }
.td_first{width: 250px;
background: url('http://subtlepatterns.com/patterns/black_linen_v2.png');
display: table-cell;}
.navigation{color:#EEE;
background: url('http://subtlepatterns.com/patterns/black_linen_v2.png');
font-weight: bold;
padding-top: 25px;
padding-bottom: 25px;
font-size: 120%;
}
.t_align_right{text-align: right;
background: url('http://subtlepatterns.com/patterns/black_linen_v2.png');
padding-right: 50px;
height: 50px;
}
.t_align_right_nav{}
.t_align_right_a:link, .t_align_right_a:visited{ color: #eee;
text-decoration: none;}
.menu_item{cursor: pointer;
color: #DDD;
background: #333;
width: 35px;
height: 35px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
position: relative;
float: left;
margin-top: 5px;
margin-left: 5px;}
.menu_item hr {width: 50%;
margin: 7px auto; }
ul.nav li{list-style: none;
text-align: center;
line-height: 50px;
font-size: 170%;
color: #EEE;
border-bottom: 1px dashed #444;}
.t_align_right2{background: url('http://subtlepatterns.com/patterns/whitey.png');
border-top: 3px solid rgba(9,9,9,0.3);}
#td_first{overflow: hidden;}
.left-content, .right-content, .middle-content{
  display: block;
  float: left;
  width: 23%;
  max-width:500px;
  margin:50px 20px 50px;
  background:url('http://subtlepatterns.com/patterns/lined_paper.png');
  padding:15px;
  border:1px solid rgba(3,3,3,0.2);
  font-size:1.2em;
  line-height:1.25em;
  box-shadow:3px 3px 3px 1px rgba(6,6,6,0.2);
  position: relative;
  z-index: 1000;
}

.wrapper{
  margin:10px 20px;
  width:120px; 
  height:140px;
  /*the projects have to be floated so that they wrap when the container width decreases, this would be possible if flex-wrap was supported, but unfortunately it's not*/
  border:5px solid white;
  border-radius:1px;
  position:relative;
  background:white;
  float: left;
  box-shadow:
   1px 1px 2px 1px rgba(40,40,40,0.5);
  z-index:0;
}
.wrapper:before, .wrapper:after{
  content:"";
  display:block;
  width:98%;
  height:98%;
  background:white;
  box-shadow:
    1px 1px 2px 1px rgba(40,40,40,0.5);
  position:absolute;
  border:5px solid white;
  border-radius:1px;
  transition: all 0.5s ease-out;
}
.wrapper:before{
  z-index:-5; 
  transform:rotate(-2deg);
 -webkit-transform:rotate(-2deg) skewy(2deg) scale(1, 1);
  top:-5px;
  left:-12px;
}
.wrapper:after {
  z-index:-6;
  transform:rotate(3deg);

  top:0px;
  left:10px;
}
.wrapper:hover:before, .wrapper:hover:after{
    transform:rotate(0);
	 -webkit-transform:rotate(0deg) skewy(0deg) scale(1, 1);
}
.wrapper:hover:before{top:-3px; left:0px;}
.wrapper:hover:after{top:-5px; left:0px;}
img{
  opacity:1;
  transition:opacity all 0.5s ease;
}
.wrapper p {
  font:Bold 1.2em/2 "Open Sans";
}
.acc{ 
  margin-top:50px;
  width:100%;
  margin-bottom:100px;
}
.acc  ul  li {
  width:100%;
  height:40px;
  line-height:30px;
  font-size:1.7em;
  color:#ddd;
  padding:5px 30px;

}
.acc ul li a{ 
  display:block; 
  width:100%; 
  height:100%;
}
.acc > ul > li {
  border-bottom: 1px dashed #444;
}
.acc > ul > li:first-child{
  border-top:1px dashed #444;
}
.second-level {
  background: #333;
  display:none;
}
.second-level li{
border-bottom: 1px dashed #666;
}
.projects{
  margin:40px 50px 10px 50px;
}
.clearfix{
  clear:both;
}
.inner{
  display:box; 
  box-align:stretch;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
////////////////////////////////////
///Bolotov_ns@mail.ru///////////////
////////////////////////////////////
////////////////////////////////////
var flagShow = '1';
	function ShowOrHide(){
	if (flagShow == 1){
		flagShow = 0;
		$('#td_first').animate({ width: '1px',opacity: '0',opacity: 'hide'},600);
		$('#td_first2').animate({ width: '1px',opacity: '0',opacity: 'hide'},600);
		document.getElementById('nav1').style.position ='absolute';
		document.getElementById('nav1').style.display ='none';
		document.getElementById('nav2').style.position ='absolute';
		document.getElementById('nav2').style.display ='none';

		} else {
		flagShow = 1;
		$('#td_first').animate({ width: '250px',opacity: '1',opacity: 'show'},600);
		$('#td_first2').animate({ width: '250px',opacity: '1',opacity: 'show'},600);
		document.getElementById('nav1').style.display ='block';
		document.getElementById('nav1').style.position ='relative';
		document.getElementById('nav2').style.position ='relative';
		document.getElementById('nav2').style.display ='block';
		}
	}
//-->
</script>
</head>
<body>
<table class="table" cellpadding="0px" cellspacing="0px">
	<tr class="tr_table">
		<td class="td_table td_first " valign="top" id="td_first">
			<div class="navigation" id='nav1'>NAVIGATION</div>

		</td>
		<td class="td_table t_align_right">
			<div class="menu_item" onclick="ShowOrHide()"><hr><hr><hr></div>
			<div class="navigation t_align_right_nav">
					<a href="http://twitter.com/SaraSoueidan" class="t_align_right_a" title="Follow me On Twitter">@SaraSoueidan</a>
			</div>
		</td>
	</tr>
	<tr>
		<td class="td_table td_first " valign="top" id="td_first2">
		<ul class="nav" id='nav2'>
				<li class="b-tash-top"> </li>
				<li>Nav Link One</li>
				<li>Nav Link Two</li>
				<li>Nav Link Five</li>
			</ul>
		</td>
		<td height="1000px;" width="auto" class="t_align_right2" valign="top">
		 <div class="top-bar">
      <div id="menu-icon"></div> 
      <h2><a href="http://twitter.com/SaraSoueidan" title="Follow me On Twitter">@SaraSoueidan</a></h2>
    </div>
    <div class="content">
      <div class="projects">
        <div class="wrapper"><img src="http://www.palantir.net/files/imagecache/inset_full/general/images/WF-sketch.jpg" height="100" width="100" /><p>Some Project</p></div>
        <div class="wrapper"><img src="http://blog.echoenduring.com/wp-content/uploads/2011/07/wireframing.jpg" height="100" width="100" /><p>Some Project</p></div>
        <div class="wrapper"><img src="http://visionwidget.com/images/2010-6/0609/web-design-ui-wireframe-ui-kit.jpg" height="100" width="100" /><p>Some Project</p></div>
        <div class="wrapper"><img src="http://webdesignledger.com/wp-content/uploads/2010/05/sketched_wireframes_15.jpg" height="100" width="100" /><p>Some Project</p></div>
        <div class="wrapper"><img src="http://c0660312.cdn.cloudfiles.rackspacecloud.com/iMockups%20Final.png" height="100" width="100" /><p>Some Project</p></div>
        <div class="clearfix"></div>
      </div>
      <div class="inner">
      <div class="left-content">
        <p>This is some dummy content. This is some dummy content. This is some dummy content.This is some dummy content.</p>
        <p>This is another dummy content paragraph.</p>
      </div>
        <div class="middle-content">
        <p>This is some dummy content. This is some dummy content. This is some dummy content.This is some dummy content.</p>
        <p>This is another dummy content paragraph.</p>
      </div>
      <div class="right-content">
        <p> Some other dummy text.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
      </div>
	  </div>
	  </div>
	  </td>
	</tr>
</table>
</body>
</html>

Edited November 24, 2012 by Николя223

radioactive · November 24, 2012

ssory )) за длинный пост, =) всё переписал (самому интересно было =) у меня работает в мазиле, в хроме, и опере.
в кодепене лагает, поэтому сюда выкладываю =))
P.S: чет не нашёл как спойлер сделать )))
и там осталось ещё анимацию доработать для webkit,при наведении на листочки ( в FF прикольно смотриться=)
по поводу восьмого: чувствую нужно отталкиваться от запрета на выделение...
Может натолкнет
...

За ссылку благодарю

по менюшке - но мне чёто анимация непонравилась.. какбудто подлагивает при закрытии/открытии

надо начинать учить js чувствую много интересного узнаю)..

Николя223 · November 24, 2012

она подлагивает - потому что не могу до конца убрать width у колонки , поэтому и получается такой эффект.

Единственный выход, как я вижу - переводить её позишн в абсолют, а потом сворачивать... ну мне чёт влом сегодня уже))

Сказал - сделал . предыдущий пост поткоректировал, в гугл хроме даже незаметно всё проходит. в опере - немного есть ))

Edited November 24, 2012 by Николя223

radioactive · November 24, 2012

решено

Edited November 25, 2012 by radioactive

radioactive · November 25, 2012

ап

Sign In

неработает в opera

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information