Почему этот JavaScript показывает все строки вместе, а не одну за другой, как на демонстрационной странице?

0
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript' src="http://vaakash.github.io/jquery/easy-ticker.js"></script>
<div class="demo3">
        <ul>
            <li>what causing the layout to break? Attempting to make a horizontal layout website ?</li>
            <li>WordPress Mobify mobile theme, CSS</li>
            <li>Gridview with Table.Rows.Count ==0 to show Footer row that include checkbox with imageurl cast</li>
            <li>JS/jQuery - animated random name picker</li>
        </ul>
    </div>
<style>

.demof{
    border: 1px solid #ccc;
    margin: 25px 0;
}
.demof ul{
    padding: 0;
    list-style: none;
}
.demof li{
    padding: 20px;
    border-bottom: 1px dashed #ccc;
}
.demof li.odd{
    background: #fafafa;
}
.demof li:after {
    content: '';
    display: block;
    clear: both;
}
.demof img{
    float: left;
    width: 100px;
    margin: 5px 15px 0 0;
}
.demof a{
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #06f;
}
.demof p {
    margin: 15px 0 0;
    font-size: 14px;
}

.demo3 {
    font-family: Arial, sans-serif;
    border: 1px solid #C20;
    margin: 50px 0;
    font-style: italic;
    position: relative;
    padding: 0 0 0 80px;
    box-shadow: 0 2px 5px -3px #000;
    border-radius: 3px;
}
.demo3:before {
    content: "Latest News";
    display: inline-block;
    font-style: normal;
    background: #C20;
    padding: 10px;
    color: #FFF;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
}
.demo3:after {
    content: '';
    display: block;
    top: 0;
    left: 80px;
    background: linear-gradient(#FFF, rgba(255, 255, 255, 0));
    height: 20px;
}
.demo3 ul li {
    list-style: none;
    padding: 10px 0;
}
</style>
<script type='text/javascript'>
$(function(){
$('.demo3').easyTicker({
                visible: 1,
        interval: 4000,
                direction: 'up'
});
});
</script>

Текст прокручивается все нормально, но в LatestNews я все время вижу 4 строки всех строк текста, а не каждый раз каждую строчку по одной строке каждый раз, как на демо-странице:

Демо-страница

В демонстрационном примере LatestNews каждый раз прокручивается одна строка.

Что я должен изменить, и почему это так, что есть 4 строки каждый раз, а не один, как на демо-странице?

  • 0
    Еще одна проблема, которую я вижу, - это прокручивание строк текста вверх, а начало каждой строки - прокрутка / касание последних новостей в красном поле.
  • 3
    Вместо ссылок на вашу страницу, пожалуйста, включите jsfiddle (или аналогичные) в качестве ссылок на ваш сайт, те, которые были изменены или являются неработающими ссылками, будут бесполезны для будущего пользователя с подобными проблемами. Кроме того, создание скрипки, сосредотачивающейся на проблеме, иногда помогает найти проблему заранее.
Показать ещё 8 комментариев
Теги:

1 ответ

1
Лучший ответ

На вашем конкретном веб-сайте, который вы связали в то время, когда padding указанное в стиле .demo3 установлено на 0, 0, 0, 80px .demo3.

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

После проверки вашего сайта. Проблема в том, что ваш сайт также импортирует еще один файл CSS:

<link rel="stylesheet" type="text/css" href="/files/main_style.css?1398686941" title="wsite-theme-css">

Этот файл содержит все типы стилей, в том числе несколько с !important и этот файл, похоже, переписывает или стили CSS.

Если вы откроете свой сайт, откройте отладчик и найдите строку <link...> и удалите ее (только с консоли), вы увидите, что ваш HTML будет выглядеть нормально. Имейте в виду, остальная часть вашего сайта не будет.

Я не знаю, какое влияние вы оказываете на этот файл, но чтобы компенсировать его, не меняя его, измените свой 115px от 80px до 115px (или того, что когда-либо подходит) в стиле .demo3, аналогично этому:

.demo 3{
    ...
    padding: 0, 0, 0, 115px // changed from padding: 0, 0, 0, 80px
    ...
}

Я попробовал выше в консоли на вашем сайте, и, похоже, это трюк.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню