HTML в публикация

slimlady · 8 Ноември 2013

Здравейте .... знаете ли някакви хитринки ... как да "раздвижим" публикацията (ако мога така да се изразя) . Например конкретно имам въпрос , дано правилно да ме разберете .... да речем имаме сайт за растения и искаме да напишем за розите по малко за цветовете но не искаме да стане досадни понеже за всяка една от розите има да се пише по доста ... та мисълта ми е пишем

Бяла роза
Черна роза
Червена роза
Жълта роза и т.н.

на статията да излиза така както съм го написала а с клик да се плъзне информацията и като я прочетат пак с клик да го плъзнат и да я затворят ии така и останалите. Искам всичко да е в една публикация за да не се лутат читателите. Моля ако някой може да ми помогне с това и с още хитринки ако знаете споделете. Благодаря

Sky · 8 Ноември 2013

От: HTML в публикация

Нямам опит с този CMS, но с HTML се прави така

PHP:

<a href="sait.com/index.php#first">First</a>

И за където искаш да води слагаш:

PHP:

<a name="first">First</a>

Като сменяш само first за всяка котва да е различно
http://www.w3schools.com/tags/att_a_name.asp

Torbalan Trolski · 8 Ноември 2013

От: HTML в публикация

Мисля, че има нещо друго предвид

Код:

<style>
.hiddenInfo {
    display : none;
    background-color: #FFFFE0; text-align : justify;
    border: 1px solid black;
}
.link {
    cursor: pointer;	
    display: block;
}</style>

<div id="1" class="link" onclick="displayInfo('1', true);">Бяла роза</div>
<div id="1-d" class="hiddenInfo">Цъфнала ми Бяла роза бля бля бля</div>
<div id="2" class="link" onclick="displayInfo('2', true);">Черна роза</div>
<div id="2-d" class="hiddenInfo">Цъфнала ми Черна роза бля бля бля</div>

<script>
    function displayInfo(id, showHide) {
        var desc = document.getElementById(id + '-d');
        var link = document.getElementById(id);

        if (showHide) {
            desc.style.display = 'block';
            link.onclick = function () {
                displayInfo(id, false);
            };

        } else {
            desc.style.display = 'none';
            link.onclick = function () {
                displayInfo(id, true);
            };
        }
    }

displayInfo('1', false);
displayInfo('2', false);
</script>

Принципно не е добра идея class="hiddenInfo", защото Гошко ще реши, че го клатиш нещо. Дал съм го за по съкратен вариант.
Правилният начин е да си обходиш всичките описания с javascript и да ги скриеш.
Кръщаваш си всичките дивчета info-[името на розата] * (баси ударих го на Умберто Еко

) и

Код:

<script>
function hideOnStart() {
	var elements = document.getElementsByTagName('div');
	for( i = 0; i < elements.length; i++ ) {
		id = elements[i].id;
		
		if( id.lastIndexOf("info-", 0) === 0 ) {
			displayInfo(id, false);
		}							
	}
}
hideOnStart();


</script>

Набързо скалъпен пример

slimlady · 8 Ноември 2013

От: От: HTML в публикация

а това което ви казвам , има ли си наименование ... сега например знам как е кода за "прочети още" или казано read more и знаех как да го търся .... това което ми дадохте не ми се получава

за това ако може да ми помогнете под кое име да го търся докато намеря точното ... вижте да бъда точна какво целя да постигна http://www.det-mag.com/child-development/development_0year.html#1

Torbalan Trolski · 8 Ноември 2013

От: От: HTML в публикация

slimlady каза:
а това което ви казвам , има ли си наименование ... сега например знам как е кода за "прочети още" или казано read more и знаех как да го търся .... това което ми дадохте не ми се получава за това ако може да ми помогнете под кое име да го търся докато намеря точното ... вижте да бъда точна какво целя да постигна http://www.det-mag.com/child-development/development_0year.html#1

разгледай линка с примера там всичко си бачка. Като за първоначална идея стига.

slimlady · 9 Ноември 2013

От: HTML в публикация

да нещо такова ,но не ми се получава при мен

изкарва ми всичко без да има опцията за клика

Torbalan Trolski · 9 Ноември 2013

От: HTML в публикация

Пробва ли с този код?
Това, което съм качил като пример във форума не е тествано, драснах го като идея. 100% съм опущил нещо. Все пак го пуснах в петък вечер преди кръчма

Но кода дето съм го качил във фидлето бачка, както можеш да се увериш.

slimlady · 9 Ноември 2013

От: От: HTML в публикация

да така е бачка си ... получава се ... истината е ,че много не ги чаткам ... но знам че не ми се получава защото не правя нещата както трябва ... в публикациите съм си отметнала ,че искам да ми тълкува хтмл и там си въведох да речем това което си ми дал
<div id="1" class="link" onclick="displayInfo('1', true);">Бяла роза</div>
<div id="1-d" class="hiddenInfo">
Цъфнала ми Бяла роза бля бля бля<br />
Цъфнала ми Бяла роза бля бля бля<br />
Цъфнала ми Бяла роза бля бля бля<br />
</div>
<div id="2" class="link" onclick="displayInfo('2', true);">Черна роза</div>
<div id="2-d" class="hiddenInfo">
Цъфнала ми Черна роза бля бля бля<br />
Цъфнала ми Черна роза бля бля бля<br />
Цъфнала ми Черна роза бля бля бля<br />
</div>

После в оформление дадох хтмл/джаваскрипт и сложих там

function displayInfo(id, showHide) {
var desc = document.getElementById(id + '-d');
var link = document.getElementById(id);

if (showHide) {
desc.style.display = 'block';
link.onclick = function () {
displayInfo(id, false);
};

} else {
desc.style.display = 'none';
link.onclick = function () {
displayInfo(id, true);
};
}
}

displayInfo('1', false);
displayInfo('2', false);

най-накрая в CSS сложих

.hiddenInfo {
background-color: #FFFFE0;
text-align : justify;
border: 1px solid black;
}
.link {
cursor: pointer;
display: block;
background-image: url('http://icons.iconarchive.com/icons/deleket/rounded-square/16/Button-Info-icon.png');
background-position: right;
background-repeat: no-repeat;
}

ноо.... стана едно нищо

кажи ми къде греша

Torbalan Trolski · 9 Ноември 2013

От: HTML в публикация

Дай линк към страницата, ако искаш може и на лс. Да видя всъщност какво ти маже блогера.
Че там съм поствал за псоелдно май през 2008 или 2009

Torbalan Trolski · 9 Ноември 2013

От: HTML в публикация

Пропуснала си таговете
<style> и <script>
във фидлето е разделен кода на секции и си ги слага само.

Код:

<style>
.hiddenInfo { 
    background-color: #FFFFE0;
    text-align : justify;
    border: 1px solid black;
}
.link {
    cursor: pointer;
    display: block;
    background-image: url('http://icons.iconarchive.com/icons/deleket/rounded-square/16/Button-Info-icon.png');
    background-position: right;
    background-repeat: no-repeat;
}
</style>

<div class="link" id="1" onclick="displayInfo('1', true);">
Бяла роза</div>
<div class="hiddenInfo" id="1-d">
Цъфнала ми Бяла роза бля бля бля<br />
Цъфнала ми Бяла роза бля бля бля<br />
Цъфнала ми Бяла роза бля бля бля</div>
<div class="link" id="2" onclick="displayInfo('2', true);">
Черна роза</div>
<div class="hiddenInfo" id="2-d">
Цъфнала ми Черна роза бля бля бля<br />
Цъфнала ми Черна роза бля бля бля<br />
Цъфнала ми Черна роза бля бля бля</div>
<script>
    function displayInfo(id, showHide) {
        var desc = document.getElementById(id + '-d');
        var link = document.getElementById(id);

        if (showHide) {
            desc.style.display = 'block';
            link.onclick = function () {
                displayInfo(id, false);
            };

        } else {
            desc.style.display = 'none';
            link.onclick = function () {
                displayInfo(id, true);
            };
        }
    }

    displayInfo('1', false);
    displayInfo('2', false);
</script>

Пробвах го това в блогера - бачка.

slimlady · 9 Ноември 2013

От: HTML в публикация

да получи се ... но е малко отдалечено едно от друго аз ще го базикна и ще стане работата ... а unclego ли се казва това чудо

и много ти благодаря ...

slimlady · 9 Ноември 2013

От: HTML в публикация

а това как става знаеш ли?

Torbalan Trolski · 9 Ноември 2013

От: HTML в публикация

slimlady каза:
да получи се ... но е малко отдалечено едно от друго аз ще го базикна и ще стане работата ... а unclego ли се казва това чудо и много ти благодаря ...

Блогера ти слага автоматично лайн-брейкове - оправя се от тука

Нещо ми е дошла музата след тия водки снощи. Ето ти код с бонус сменя ти иконката, като отвориш нещо.

Код:

<style>
.hiddenInfo { 
    background-color: #FFFFE0;
    text-align : justify;
    border: 1px solid black;
}
.link {
    cursor: pointer;
    display: block;
    background-image: url('http://icons.iconarchive.com/icons/deleket/rounded-square/16/Button-Info-icon.png');
    background-position: right;
    background-repeat: no-repeat;
}
</style>

<div class="link" id="1" onclick="displayInfo('1', true);">
Бяла роза</div>
<div class="hiddenInfo" id="1-d">
Цъфнала ми Бяла роза бля бля бля<br />
Цъфнала ми Бяла роза бля бля бля<br />
Цъфнала ми Бяла роза бля бля бля</div>
<div class="link" id="2" onclick="displayInfo('2', true);">
Черна роза</div>
<div class="hiddenInfo" id="2-d">
Цъфнала ми Черна роза бля бля бля<br />
Цъфнала ми Черна роза бля бля бля<br />
Цъфнала ми Черна роза бля бля бля</div>
<script>
    function displayInfo(id, showHide) {
        var desc = document.getElementById(id + '-d');
        var link = document.getElementById(id);

        if (showHide) {
            desc.style.display = 'block';
            link.onclick = function () {
                displayInfo(id, false);
            };
            link.style.backgroundImage = "url('http://icons.iconarchive.com/icons/deleket/button/16/Button-Close-icon.png')";           


        } else {
            desc.style.display = 'none';
            link.onclick = function () {
                displayInfo(id, true);
            };
        link.style.backgroundImage = "url('http://icons.iconarchive.com/icons/deleket/rounded-square/16/Button-Info-icon.png')";

        }
    }

    displayInfo('1', false);
    displayInfo('2', false);
</script>

slimlady каза:
Виж файлът 7715
а това как става знаеш ли?

Знам ама ти трябват малко повечко познания по html/lavascript/css, а и безплатни платформи като блогера не са най-доброто място за такива глезотии.

slimlady · 9 Ноември 2013

От: HTML в публикация

Супер ... благодаря ти

slimlady · 10 Ноември 2013

От: HTML в публикация

Аз имам проблем , не мога да добавям повече от тия които съм написала , ако се опитам да променя ми размиста съдържанието на блога.... какво да правя ....

Torbalan Trolski · 10 Ноември 2013

От: HTML в публикация

Промених малко демото, виж там.
Дивчетата ги кръсти info-бляблябля

Torbalan Trolski · 10 Ноември 2013

От: HTML в публикация

Ето ти работещ код в блогер, какво мажеш не мога да разбера

Код:

<style>
.hiddenInfo { 
    background-color: #FFFFE0;
    text-align : justify;
    border: 1px solid black;
}
.link {
    cursor: pointer;
    display: block;
    background-image: url('http://icons.iconarchive.com/icons/deleket/rounded-square/16/Button-Info-icon.png');
    background-position: right;
    background-repeat: no-repeat;
}
</style>

<div class="link" id="info-1" onclick="displayInfo('1', true);">Бяла роза</div>
<div class="hiddenInfo" id="info-1-d">Цъфнала ми Бяла роза бля бля бля
    <br />Цъфнала ми Бяла роза бля бля бля
    <br />Цъфнала ми Бяла роза бля бля бля</div>
<div class="link" id="info-2" onclick="displayInfo('2', true);">Черна роза</div>
<div class="hiddenInfo" id="info-2-d">Цъфнала ми Черна роза бля бля бля
    <br />Цъфнала ми Черна роза бля бля бля
    <br />Цъфнала ми Черна роза бля бля бля</div>
<div class="link" id="info-3" onclick="displayInfo('2', true);">Пембяна роза</div>
<div class="hiddenInfo" id="info-3-d">Цъфнала ми Пембяна роза бля бля бля
    <br />Цъфнала ми Пембяна роза бля бля бля
    <br />Цъфнала ми Пембяна роза бля бля бля</div>

<script>
    function displayInfo(id, showHide) {
        var desc = document.getElementById(id + '-d');
        var link = document.getElementById(id);

        if (showHide) {
            desc.style.display = 'block';
            link.onclick = function () {
                displayInfo(id, false);
            };
            link.style.backgroundImage = "url('http://icons.iconarchive.com/icons/deleket/button/16/Button-Close-icon.png')";


        } else {
            desc.style.display = 'none';
            link.onclick = function () {
                displayInfo(id, true);
            };
            link.style.backgroundImage = "url('http://icons.iconarchive.com/icons/deleket/rounded-square/16/Button-Info-icon.png')";

        }
    }

    function hideOnStart() {
        var elements = document.getElementsByTagName('div');
        for (i = 0; i < elements.length; i++) {
            id = elements[i].id;
            className = elements[i].className;

            if ( (id.lastIndexOf("info-", 0) === 0) && (className.indexOf('link') != -1) ) {
                displayInfo(id, false);
            }
        }
    }
    hideOnStart();
</script>

PS Един приятелски съвет, преди да се хвърляш на такива глезотии отдели половин ден за бегло запознанство с основите. Няма нужда да си експерт, но като ти дадат пример или идея да не очакваш комплексно решение, а да можеш да го интегрираш.

slimlady · 22 Ноември 2013

От: HTML в публикация

а това другото което много искам да си го сложа в блога ... под какво име да го търся .... понеже много много искам да си сложа нещо подобно

Torbalan Trolski · 22 Ноември 2013

От: HTML в публикация

Пример ... 10 символа

HTML в публикация

slimlady

Member

Sky

Well-Known Member

Torbalan Trolski

Well-Known Member

slimlady

Member

Torbalan Trolski

Well-Known Member

slimlady

Member

Torbalan Trolski

Well-Known Member

slimlady

Member

Torbalan Trolski

Well-Known Member

Torbalan Trolski

Well-Known Member

slimlady

Member

slimlady

Member

Torbalan Trolski

Well-Known Member

slimlady

Member

slimlady

Member

Torbalan Trolski

Well-Known Member

Torbalan Trolski

Well-Known Member

slimlady

Member

Torbalan Trolski

Well-Known Member