Nano Hash - криптовалюты, майнинг, программирование

jquery mobile: содержимое идет за фиксированным заголовком с именованным якорем

Я работаю над мобильным веб-сайтом, используя jQuery Mobile (версии 1.1.1 и 1.3.0) для фиксированного заголовка. При нажатии на ссылку с именованным якорем точка привязки перемещается в верхнюю часть страницы (за фиксированный заголовок). Большинство найденных мной исправлений предлагают добавлять поля или отступы вверху целевого содержимого либо постоянно, либо с использованием псевдокласса :target.

Это неприемлемое решение, так как оно оставляет пробел при прокрутке содержимого вверх и вниз либо постоянно, либо после перехода по ссылке.

Любые другие предложения будут оценены.

HTML:

<head>
    <title>Page Title here</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-language" content="en" />
    <!-- CSS Start -->
    <link type="text/css" rel="stylesheet" media="all" href="/css/style.css" />
    <link type="text/css" rel="stylesheet" media="all" href="/css/system-menus.css" />
    <!-- CSS End -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript" src="/jquery/jquery.mobile-1.3.0.js"></script>
    <link type="text/css" rel="stylesheet" media="all" href="/jquery/jquery.mobile-1.3.0.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("a").attr("data-ajax", "false"); 
        });
    </script>
    <meta name="description" content="Some description text." />
    <meta name="keywords" content="" />

</head>
<body>
<div id="global-wrapper">
    <div id="header" data-role="header" data-position="fixed">
        <a href="/index.html" data-ajax="false">
                    <img src="myimage.png" alt="my alt text" class="logo" />
        </a>
        <div id="top-utility-m">
            <ul>
                <li><a href="http://offsite.com/somefile.pdf" data-ajax="false">Link 1</a> |</li> 
                <li><a href="http://offsite.com/somefile2.pdf" data-ajax="false">Link 2</a></li>
            </ul>
        </div>
        <img src="/images/header_divider.png" alt="" /><br/>
    </div><!-- end fixed header -->

    <div id="wrapper">  
        <div id="content-wrapper" class="clear">
            <div id="main-content">
                <p class="scroll">Scroll Down for Menu &#8744;</p>
                <h1>This is a header on the page</h1>
                <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
                <p>Some more text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
                <p>Still more text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
                <p>Yep. Still more. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
                <p>Last little bit of text.</p>
                <div id="top-info">
                    <h3>Important Information About Blah</h3>
                    <p class="indent"><strong>Again, with the text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.  <a href="#ContH">CONTINUED BELOW</a></strong></p>
                </div>                    

        <img src="/images/divider.png" alt="" /><br/>
        <img src="/images/lg.png" alt="" /><br/>
        <img src="/images/divider.png" alt="" /><br/>
        <div><h2 class="centered">Some text with a suggested action.</h2></div>
        <a name="menu"></a>
        <div id="mainmenu-container" class="clear-block li-nav">
            <ul id="thismenu" class="links">
                <li><a href="/blah/index.html">Link 1</a></li>
                <li><a href="/moreblah/index.html">Link 2</a></li>
                <li><a href="/combined.html">Link 3</a></li>
                <li><a href="/coupons/index.html">Link 4</a></li>
                <li><a href="/how-to.html">Link 5</a></li>
            </ul>
        </div><!-- end mainmenu-container -->
        <p class="disclaimer">*Here is some text that is smaller than other text</p>
        <img src="/images/divider.png" alt="" /><br/>    

        <div id="info" class="clear">
            <h3 id="ContH">This is that important info linked to from above <em>(continued)</em></h3>
            <ul>
                <li><strong>This is a nested list of important stuff that is hiding behind the header when the link to the named anchor is clicked.</strong>
                <ul>
                  <li><strong>More important stuff that is hiding behind the header when the link to the named anchor is clicked.</strong></li>
                  <li><strong>There are lots of items in these nested lists, including:</strong>
                    <ul>
                        <li><strong>More important stuff that is hiding </strong></li>
                      <li><strong>behind the header when the link to the named anchor is clicked.</strong></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><strong>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</strong></li>
              <li><strong>Some more text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</strong></li>
              <li><strong>Still more text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</strong></li>
              <li>Yep. Still more. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</li>
            </ul>
            <p class="infoIndent">Last little bit of text that someone decided needed to line up with the bulleted list, but not be bulleted.</p>
        </div><!-- end info -->
        <div id="footer-base" class="clear">

            <p>Some text with a phone number for some additional info.</p>
            <div class="button full_btn"><a href="#mainmenu-container">Scroll Back to Menu</a></div>
            <p class="centered whitespace"><a href="http://www.fullwebsite.com/index.html?full=true">Full Web site</a></p>
            <div class="flinks">
                <center><a href="http://www.help4u.com"><img src="/images/help4u.png" alt="Help 4 U" /></a></center><br />
                <center><img src="/images/contact_us.png" alt="Contact Us" /></center><br />
                <center><a href="http://www.domain.com"><img src="/images/logo.png" alt="Corporation Web Site" /></a></center><br />
                <p class="centered">Blah text about website company<br />
                    Some more text about intended audience for the web site<br />
                    &#169; 1900 - 2013 Company Name. All Rights Reserved.<br />
                    <a href="/legal.html">Legal Notices</a> |
                    <a href="/privacy.html">Privacy Statement</a><br/>
                    <a href="http://www.help4u.com">Coupons</a> |
                    <a href="/contactus.html">Contact Us</a>
                </p>
                    <p>&nbsp;</p><p>&nbsp;</p>
            </div><!-- end flinks -->
         </div><!-- end footer-base -->            
       </div><!-- end main-content -->
     </div><!-- end content-wrapper -->
  </div><!-- end wrapper -->
</div><!--end global-wrapper -->
</body>

mobile jquery named anchor
18.03.2013

  • Покажите нам свой код проблемы. 18.03.2013
  • Я добавил HTML. По какой-то причине мой CSS не отображается здесь правильно, когда я его сохраняю (я даже пытался отформатировать его вручную). Дайте мне знать, если вам нужно увидеть CSS, и я продолжу попытки. 19.03.2013

Ответы:


1

Вот как я исправил эту проблему:

Над тем местом на странице, куда я пытаюсь сделать ссылку, я добавил

<div class="anchor-container"><div class="adjusted-anchor"></div></div>

В CSS

.anchor-container {position:relative;}
.adjusted-anchor {position:absolute;z-index: 10000;}

И этот jQuery (он должен быть при загрузке окна, чтобы подгрузились любые изображения в шапке)

$(window).load(function() {
   var h = $("#header-content");
   var headerHeight = h.outerHeight(true);
   headerHeight = Math.abs(headerHeight)*-1;
   $(".adjusted-isi-anchor").css( "top", headerHeight );
});

И теперь заголовок будет загружаться, и любые якорные ссылки на странице будут загружаться прямо под заголовком, а не за ним.

24.06.2013
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..