averin13

Проблема c input и autofocus

averin13 добавил вопрос в Проблемы верстки

Добрый день. У меня есть две проблемы: 1) Почему поле input не подсвечивается в Mozilla,Opera жёлтым , как в Google Chrome например? Вот фотка : Вот ссылка: http://slizers.com/list1.html 2) Вторая проблема заключается в том, что autofocus не загружается, то есть при нажатии на кнопку поиск выплывает окошко и там должен быть autofocus. Возможно ли это как-нибудь это сделать? Мною опробованы методы : 1) Скрипты <script type="text/javascript"> function formfocus() { document.getElementById('element').focus(); } window.onload = formfocus; </script> 2) <input id="q" autofocus> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> 3) Просто свойство HTML5 autofocus и autofocus="autofocus" Ничего не работает. У меня кривые руки или это можно сделать? Мне кажется здесь ещё проблема в том, что он должен показаться только при нажатии по кнопке поиск. Может быть так сделать нельзя? Только когда на странице изначально, а не выплывает. Ссылка та жа Вот ссылка: http://slizers.com/list1.html На всякий случай html помещаю сюда. <!Doctype> <html> <head> <title> </title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui.core.js"></script> <script type="text/javascript" src="jquery.jmpopups-0.5.1.js"></script> <script type="text/javascript" src="ui.datepicker1.js"></script> <link href="client2.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> //<![CDATA[ $.setupJMPopups({ screenLockerBackground: "#003366", screenLockerOpacity: "0.7" }); function openStaticPopup() { $.openPopupLayer({ name: "myStaticPopup", width: 550, target: "myHiddenDiv" }); } function showClient(id) { var curl = "client.php"; if (id != null) { curl += "?fid=" + id; } $.openPopupLayer({ name: "Client", width: 800, url: curl }); } function showPhone() { $.openPopupLayer({ name: "Phone", width: 800, target: "phonediv" }); } function showView() { $.openPopupLayer({ name: "View", width: 800, target: "viewdiv" }); } function showFilter() { $.openPopupLayer({ name: "Filter", width: 800, target: "filterdiv" }); } function closePopup(nm) { $.closePopupLayer(nm); } //]]> </script> </head> <body> <table class="menutable" style="font-size:18px;font-weight:bold"> <tr> <td width="150px"><a onclick="showPhone();" style="cursor:pointer"><div>Поиск</div></a></td> </tr> </table> <div id="phonediv" style="display:none" > <div class="popup"> <div class="popup-header"> <h2>Поиск по телефону</h2> <a href="javascript:;" onclick="closePopup('Phone');" title="Close" class="close-link">Х</a> <br clear="all" /> </div> <div class="popup-body" "> <form name="pform" method="POST"> Поиск по телефону: <input type="text" name="phonesearch" id="q" autofocus /> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" class="submitcl" value="ПОИСК"/> <br/> </form> </div> </div> </div> </body> </html> Заранее спасибо за помощь.

12 декабря, 2011

Слайдшоу работает во всех браузерах, кроме Chrome

averin13 ответил в тему пользователя averin13 в Javascript

Спасибо за помощь,сам всё решил. Просто нужно было отключить Adblock. Извиняюсь за потерю вашего драгоценного времени.

Слайдшоу работает во всех браузерах, кроме Chrome

averin13 ответил в тему пользователя averin13 в Javascript

Мне нужен ответ, как заставить это слайдшоу работать. Что для этого нужно сделать?

Слайдшоу работает во всех браузерах, кроме Chrome

averin13 добавил тему в Javascript

Есть слайдшоу на вот этой странице: http://web-luck.ru/cookie/# . По сути при нажатии на кнопку картинки должны прокручиваться, а в Chrome это не выполняется.Если что Chrome 15.0.874.120 m, Windows 7. Вот сами исходники: Javascript $(document).ready(function () { if ($.browser.webkit && document.readyState != "complete"){ setTimeout( arguments.callee, 100 ); return; } var content = $("#gallery ul").html().replace(/\t/g,'').replace(/\r\n/g,'').replace(/\n/g,'').replace(/\<\/A\> \<LI\>/g,'</A></LI><LI>'); $("#gallery ul").html(content) var width = $("#gallery ul").attr("scrollWidth") - $("#gallery ul").attr("clientWidth"); var indent = 0; var factor = 2.5; var elapsed = width * factor; var widthStop = 100; var factorStop = 8; $("#gallery .prev").mouseenter ( function () { $('#gallery ul').stop(true); indent = - parseInt ( $('#gallery ul').css('text-indent') ); $('#gallery ul').animate({ textIndent: 0}, elapsed - ( width - indent ) * factor, 'easeOutQuad' ); }); $("#gallery .next").mouseenter ( function () { $('#gallery ul').stop(true); indent = - parseInt ( $('#gallery ul').css('text-indent') ); $('#gallery ul').animate({ textIndent: -width}, ( width - indent ) * factor, 'easeOutQuad' ); }); $("#gallery .prev").mouseleave ( function () { $('#gallery ul').stop(true); indent = - parseInt ( $('#gallery ul').css('text-indent') ); if ( indent > widthStop ) $('#gallery ul').animate({ textIndent: '+='+widthStop }, widthStop * factorStop, 'easeOutQuad' ); else if ( indent > 0 ) $('#gallery ul').animate({ textIndent: 0 }, indent * factorStop, 'easeOutQuad' ); }); $("#gallery .next").mouseleave ( function () { $('#gallery ul').stop(true); indent = - parseInt ( $('#gallery ul').css('text-indent') ); var delta = width - indent; if ( delta > widthStop ) $('#gallery ul').animate({ textIndent: '-='+widthStop }, widthStop * factorStop, 'easeOutQuad' ); else if ( delta > 0 ) $('#gallery ul').animate({ textIndent: -width }, delta * factorStop, 'easeOutQuad' ); }); }); Html and CSS <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Art Печенье</title> <style> html, body { margin:0px; padding:0px; margin:0; padding:0; width:100%; height:100%; } body { position:relative; min-height: 100%; height: auto !important; height: 100%; } #contents { background-color: #ffffff; } #footer { height: 33px; width: 1000px; position: absolute; bottom: 0; background-image:url(footer.jpg); background-repeat: no-repeat; } a{ text-decoration:none; color:#ffffff; } .center {display:block; margin:0 auto;} ul#mainNav { margin-left:70px; margin-top:70px; padding: 0; list-style: none; float: left; background: #f7f7f7 url(1.png); width:865px; height:55px; background-repeat: no-repeat; text-align:center; } #mainNav li { float: left; width: 144px; height:55px; } #mainNav li div{ border-left: 3px solid #c9c1be; height:18px; position: relative; width: 100%; top: 18px; } #mainNav a { text-decoration: none; font-size: 18px; font-weight:900; color:#392411; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; display: inline-block; padding: 17px 0px; left: -3px; position: absolute; top: -18px; width:100%; } #mainNav li a:hover{ background-color:#392411; color:#ffffff; width:149px; z-index: 100; } #light a:hover{ background-image:#000000;; } .links { display: inline-block; /* ссылки становятся встроенными блоками */ min-width: 150px; /* минимальная ширина ссылок */ min-height: 60px; width: auto !important; /* если нужна поддержка IE6 */ width: 40px; /* если нужна поддержка IE6 */ color: #666; /* цвет текста ссылок */ font-weight: bold; /* жирность шрифта */ text-decoration: none; /* отмена подчеркивания */ text-align: center; /* центровка текста */ padding: 0px 5px 5px; /* внутренние отступы ссылок */ } .links1 { /* ссылки становятся встроенными блоками */ min-width: 119px; /* минимальная ширина ссылок */ min-height: 48px; width: auto !important; /* если нужна поддержка IE6 */ width: 40px; /* если нужна поддержка IE6 */ color: #ffffff; /* цвет текста ссылок */ font-weight: bold; /* жирность шрифта */ text-decoration: none; /* отмена подчеркивания */ text-align: center; /* центровка текста */ } .links1:hover { color: #f7a901; /* цвет текста ссылок под курсором */ } .links:hover { color: #c00; /* цвет текста ссылок под курсором */ } .image {background: url(7.png) 100% 0 no-repeat;} /* иконка картинок */ .image:hover {background: url(77.png) 100% 0 no-repeat;} /* иконка картинок при наведении мыши */ .inf {background: url(4.png) 100% 0 no-repeat;} /* иконка картинок */ .inf:hover {background: url(44.png) 100% 0 no-repeat;} </style> <link href="screen.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> <script src="main.js" type="text/javascript"></script> </head> <body style="background-color:#3a2313"> <div style="margin: 0px auto;padding-left:10px;width: 1000px; border:0px solid;padding:0px;height:1200px;background-color:#ffffff;" id="contents"> <div id="gallery" style="margin-left:10px;margin-bottom: 300px;"> <div class="container" style="padding-top:50px;"> <ul> <li><a href="#"><img src="img/img1.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img2.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img3.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img4.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img5.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img6.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img7.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img8.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img9.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img10.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img11.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img12.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img13.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img14.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img15.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img16.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img17.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img18.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> <li><a href="#"><img src="img/img19.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li> </ul> </div> <div class="nav prev" style="padding-top:50px;"><a href="#" class="links image" title="назад">назад</a></div> <div class="nav next" style="padding-top:50px;"><a href="#" class="links image" title="вперед">вперед</a></div> </div> </div> </body> </html>

Вертикальное меню

averin13 ответил в вопрос пользователя averin13 в Проблемы верстки

Да, всё правильно, спасибо.

Вертикальное меню

averin13 ответил в вопрос пользователя averin13 в Проблемы верстки

Всё хорошо, только отображается меню на высоту текста, а нужно чтоб отображалось на 55px, т.е. на высоту background-image.Получается вот, что не очень меня устраивает:http://savepic.su/600168.htm

Вертикальное меню

averin13 добавил вопрос в Проблемы верстки

Есть вертикальное меню.Задана его точная ширина.В этом меню есть 6 пунктов, каждый из которых должен быть одинаковой ширины и чтоб текст был выровнен по центру каждого <li>. Нужно ,чтобы border был не на весь <li> , а только на <a> , но если так в коде указать то уменьшается сам пункт меню. Вот исходный код: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Art Печенье</title> <style> body,html{ margin:0px; padding :0 px; } a{ text-decoration:none; color:#ffffff; } .center {display:block; margin:0 auto;} ul#mainNav { margin-left:70px; margin-top:70px; padding: 0; list-style: none; float: left; background-image: url(69.png); width:865px; height:60px; background-repeat: no-repeat; text-align:center; } #mainNav li { float: left; width: 140px; text-align:center; } #mainNav a { border-left: 3px solid ; border-left-color:#c9c1be; text-decoration: none; font-size: 18px; font-weight:900; color:#392411; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; display: block; height:55px; padding: 0px 0px 5px 20px; } #mainNav li a:hover{ background-color:#392411; color:#ffffff; } #light a:hover{ background-image:#000000;; } </style> </head> <body style="background-color:#3a2313"> <div style="margin: 0px auto;padding-left:10px;width: 1000px; border:0px solid;padding:0px;height:1200px;background-color:#ffffff;" id="contents"> <ul id="mainNav" > <li><a href="#" >Главная</a></li> <li><a href="#"> О НАС</a></li> <li><a href="#">ПЕЧЕНЬЕ</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Акции</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </div> </body> </html> Вот картинка http://savepic.su/610375.htm Вот мои задачи: 1) Пункты одинаковой ширины и текст выровнен в них по центру(и по вертикали и по горизонтали)(text-align:center; не работает) 2) border должен быть по высоте тектса 3)при наведении на пункт меню, должен окрашиваться в коричневый весь пункт. Мне не нужен вариант с таблицей. Заранее спасибо за помощь.

Выравнивание в горизонатльном меню

averin13 ответил в вопрос пользователя averin13 в Проблемы верстки

Потому что border у меня картинкой. Тогда мне лучше наверное, сделать border css ? Или есть вариант получше?

Выравнивание в горизонатльном меню

averin13 добавил вопрос в Проблемы верстки

Вот картинка : . Вот её исходный: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menu</title> <style> body,html{ margin:0px; padding :0 px; } a{ text-decoration:none; color:#ffffff; } .center {display:block; margin:0 auto;} ul#mainNav { margin-left:70px; margin-top:70px; padding: 0; list-style: none; float: left; background-image: url(1.png); width:865px; height:60px; background-repeat: no-repeat; } #mainNav li { float: left; width: 143px; } #mainNav a { text-decoration: none; font-size: 18px; font-weight:900; color:#392411; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; text-align:center; float: left; display: block; margin-top:10px; padding: 0px 0px 5px 20px; } </style> </head> <body> <div style="margin: 0px auto;padding-left:10px;width: 1000px; border:1px solid;padding:0px;height:1200px;" id="contents"> <ul id="mainNav" > <li><a href="#" >Главная</a></li> <li><a href="#"> О НАС</a></li> <li><a href="#">ПЕЧЕНЬЕ</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Акции</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </body> </html> Нужно , чтобы элементы списка были выровнены между разделителями. Когда я задаю width умеян или слишком большая ширина, так что выходит на две стрчоки или слишком маленькая так, что выровнены они по какому-то краю. Сразу же оговорюсь, таблицами это делать не хочу.Заранее спасибо за помощь.

Прописание рандомных ссылок к картинкам.

averin13 добавил тему в Серверные технологии

Добрый день.Моя задача: есть картинка к ней нужно прописать рандомную ссылку. Вот такого типа: http://mysait.com/?page_id= (а здесь подставляется число, из заранее заданных.) То есть на выходе должна получится ссылка такого вида : http://mysait.com/?page_id=45. Как мне это сделать? Вот кусок кода куда надо это вставить: <?php $images = glob('rotate/*'); // Находим пути до изображений в папке images. $image = $images[rand(0, sizeof($images) - 1)]; echo '<a href=""><img src="' . $image . '" alt="' . $image . '" width="99px" height="57px" /></a>'; // вот сюда надо вставить рандомную ссылку ?> </div> Заранее спасибо за помощь.