TYPO3 site menu with typoscript - typo3

I am new in TYPO3, I would like to know if it is possible to transform (using typoscript) the following structure of html-css menu in TYPO3 Hmenu. It is a multilevel structure with html lists.
<ul class="nav navbar-nav">
<!-- Home -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Home
</a>
<ul class="dropdown-menu">
<li>Option 1: Default Page</li>
<!-- One Page -->
<li class="dropdown-submenu">
Option 2: One Page
<ul class="dropdown-menu">
<li><a target="_blank" href="One-Pages/Classic/index.html">- One Page Template</a></li>
<li><a target="_blank" href="One-Pages/Classic/one_page_dark.html">- One Page Dark Option</a></li>
</ul>
</li>
<!-- End One Page -->
</ul>
</li>
<!-- End Home -->
<!-- Pages -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Pages
</a>
<ul class="dropdown-menu">
<!-- About Pages -->
<li class="dropdown-submenu">
About Pages
<ul class="dropdown-menu">
<li>About Us </li>
<li>About Us 1</li>
</ul>
</li>
<!-- End About Pages -->
<!-- Service Pages -->
<li class="dropdown-submenu">
Service Pages
<ul class="dropdown-menu">
<li>Our Services</li>
</ul>
</li>
<!-- End Service Pages -->
</ul>
</li>
<!-- End Pages -->
</ul>

It is possible, please read the very detailed manual here.
lib.textmenu = HMENU lib.textmenu {
# We define the first level as text menu.
1 = TMENU
# We define the normal state ("NO").
1.NO = 1
1.NO.allWrap = <li>|</li>
# We define the active state ("ACT").
1.ACT = 1
1.ACT.wrapItemAndSub = <li>|</li>
# Wrap the whole first level.
1.wrap = <ul class="level1">|</ul>
# The second and third level should be configured exactly
# the same way.
# In between the curly brackets, objects can be copied.
# With the dot "." we define that the object can be found
# in the brackets.
# With 2.wrap and 3.wrap we overwrite the wrap, which was
# copied from 1.wrap.
2 < .1
2.wrap = <ul class="level2">|</ul>
3 < .1
3.wrap = <ul class="level3">|</ul>
}
If you already know TypoScript, then here are the references: HMENU, TMENU, TMENUITEM

Related

Large space between image other tag with itext7

There is a large space between the image and other tag in the pdf.Here are two cases, image-text and image-image.
HTML:
<ul>
<!--============image-text==============-->
<li>コマンド <em>net view \\virtualhostname を入力します。<br></em>メッセージ
"<em>アクセスが拒否されました</em>" が表示される場合は、レジストリキーが適切に設定されていないか、または Windows OS
を再起動する必要があります。<br>
<img alt="ScreenShot005.png" height="312"
src="./images/ScreenShot005.png" title="ScreenShot005.png"
width="437"></li>
<li>他のサーバからコマンド <em>net view \\virtualhostname</em> を使用します。<br>エラー
"<em>ネットワーク上に同じ名前があります</em>" が表示される場合は、キー <em>DisableStrictNameChecking</em>
が適切に設定されていません。
</li>
<li>MMC を使用して、コンピュータ <em>virtualhostname</em> に接続します。
<ol start="1" style="list-style-type: lower-alpha;">
<li><em>SAP MMC</em> を開きます。</li>
<li>"<em>ファイル</em> –> <em>スナップインの追加と削除</em>" を選択します。
</li>
<li>"<em>コンピュータの管理</em>" を選択し、"<em>追加</em>" をクリックします。
</li>
<li>"<em>OK</em>" をクリックします。<br>
<!--============image-image==============-->
<img alt="ScreenShot006.png" height="700" src="./images/ScreenShot006.png"
title="ScreenShot006.png" width="936"><br>
<br>
<img alt="ScreenShot007.png" height="363"
src="./images/ScreenShot007.png" title="ScreenShot007.png"
width="934"></li>
</ol></li>
</ul>
PDF result:
1.
2.

Tumblr Redirects to 404 Page

We have had a Tumblr page set up for a year with no issues until this past month.
We have a page redirect in our navigation bar. The redirect goes to our main website, WordBrewery.com. The link listed in the redirect is the main URL - http://www.wordbrewery.com.
Now it is redirecting to our site's 404 page and this is added to the end of the URL:
#_=_
I have tried using this script, but it has done nothing:
<script>
if (window.location.hash == "#_=_")
{
window.location.hash = "";
}
</script>
I have also tried replacing the main URL with a shortened Google version but this has not worked either.
Any help would be greatly appreciated.
EDIT:
The hard code that I am able to edit appears like this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
{block:IfShowAvatar}
<img src="{PortraitURL-128}" class="{AvatarShape}" alt="{Title}" />
{/block:IfShowAvatar}
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{block:IfShowTitle}<li class="active">{Title}</li>{/block:IfShowTitle}
{block:IfShowArchiveLink}
<li>{lang:Archive}</li>
{/block:IfShowArchiveLink}
{block:IfShowRandomLink}
<li>{lang:Random}</li>
{/block:IfShowRandomLink}
{block:HasPages}
{block:Pages}<li>{Label}</li>{/block:Pages}
{/block:HasPages}
{block:AskEnabled}
<li>{AskLabel}</li>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<li>{SubmitLabel}</li>
{/block:SubmissionsEnabled}
{block:IfTagMenuList}
<li class="dropdown">
<a href="#" id="tag-menu" data-toggle="dropdown" aria-expanded="true">
{text:Tag Menu Title} <span class="caret"></span>
</a>
<script>
var list = '{text:Tag Menu List}';
list = list.split(',');
var html = '<ul class="dropdown-menu" role="menu" aria-labelledby="tag-menu">';
for(var i=0; i<list.length; i++) {
html += '<li role="presentation"><a role="menuitem" tabindex="-1" href="/tagged/' + list[i] + '">#' + list[i] + '</a></li>';
}
html += '</ul>';
document.write(html);
</script>
</li>
{/block:IfTagMenuList}
{block:IfShowSearch}
<li><a class="icon-search search-overlay-show"></a></li>
{/block:IfShowSearch}
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I am unsure of how to get rid of the string Tumblr adds to redirected URLs but alternatively you can hard code the link to avoid utilising Tumblr's redirect.
Beneath {block:HasPages} add <li>WordBrewery.com</li>

How to find sibling element with behat/mink?

HTML:
<div id="my-id">
<li class="list_element">
<div class="my_class"></div>
</li>
<li class="list_element">
<div class="another_class"></div>
</li>
<li class="list_element">
<div class="class3"></div>
</li>
</div>
What I want to do with behat/mink:
$page = $this->getSession()->getPage();
$selector = $page->find('css', "#my-id .my_class"); //here I need anchor element located near to .my_class div.
I don't know in which one .list_element .my_class div is. I know only anchor is next to .my_class element. Which selector should I use in the find() function?
Try one of these:
#my-id .my_class ~ a
#my-id .my_class + p
#my-id .list_element a
This is too basic question.Please see more here w3schools

optionSplit repeats only first item in Typoscript

I tried using optionsplit with TMENU in TS, but it keeps repeating only first part, and I don't know why...
Here is TS:
temp.meni5col= HMENU
temp.meni5col.special = list
temp.meni5col.special.value = 5417, 5418, 5419, 5420, 5421
temp.meni5col.wrap= <div class="dropdown_5columns"><div class="col_1"><ul>|</ul></div></div>
temp.meni5col.1 = TMENU
temp.meni5col.1{
expAll = 1
NO {
linkWrap = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
}
}
And here is HTML it generated:
<div class="dropdown_5columns">
<div class="col_1">
<ul>
<li class="first">Servisi</li>
<li class="first">Usluge</li>
<li class="first">Dodatne usluge</li>
<li class="first">Tarifni modeli</li>
<li class="first">Ponuda uređaja</li>
</ul>
</div>
</div>
I just realized optionSplit is not working. It shouldn't apply class="first" to all menu items.
Is there option in TYPO3 configuration for this function that needs to be enabled?
My TYPO3 version is 4.5.17.
Thanks!
It's because linkWrap is of data-type wrap. Use stdWrap to do an optionSplit.
http://docs.typo3.org/typo3cms/TyposcriptReference/MenuObjects/Tmenuitem/Index.html

jquery parent/children selector for counting <li>

I have this piece of HTML
<div id="fileTreeInviati">
<ul class="php-file-tree">
<li class="pft-directory">
A006 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-png">
cut.png
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
<li class="pft-directory">
A012 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-jpg">
04.jpg
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
<li class="pft-directory">
A014 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-txt">
acu.txt
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
</ul>
I'm working on a js snippet that cycle through all "a" of the "li" and checks if it has the class "new" if yes increment a counter by one. This counter now has to be printed on the relative "li" "span" 3 level before.
So I have the number of the element with the "new" class.
The js snippet is this
$("#fileTreeInviati .php-file-tree .pft-directory li").each(function(){
$(this).children("a").each(function(i,e){
if ($(e).hasClass("new")){
cont++;
console.log($(e).text());
$(this).parent().parent().parent().children("a").children("span").text(cont);
}
})
cont = 0;
});
I think I'm almost there but the counter is always 1. I think there is something mess with .children, maybe it can handle only the first occurrence?
Thanks for help
Why not just use .length instead?
$('#fileTreeInviati .php-file-tree .pft-directory li a.new').length;
Update: If you want to count every li element separately, use this:
$('#fileTreeInviati .php-file-tree .pft-directory li').each(function() {
alert($('a.new', this).length);
})
OK, I figure out how to do the magic:)
Here it is:
cont = 0;
$('#fileTreeInviati .php-file-tree .pft-directory').each(function() {
$(this).children("ul").children("li").children("a.new").each(function(i,e){
cont++;
$(e).parent().parent().parent().children("a").children("span").text(cont);
});
cont=0;
});
Now all works perfect. If you think this can do in a better way, lemme know.
Bye