We are migrating an asp.net intranet to SharePoint and automating the conversion via PowerShell.
We only want to scrap links from within the DIV tag with a classname 'topnav'. Not all the links on the page
$url = "http://intranet.company.com"
$page = Invoke-WebRequest -Uri $url
$div_topnav = $page.ParsedHtml.getElementsByTagName('div') | ? {$_.className -match 'topnav'}
This gets us the HTML of the topnav, but how best to extract just the application links from the Applications nodes? We do not want HOME or Documents nodes?
<div class="topnav" >
<ul class="lev1 clearfix" >
<li class="lev1 pos1 first lev1_first">
Home
</li>
<li class="lev1 pos2 haschildren lev1_haschildren">
Applications
<ul>
<li class="lev2 pos1 first lev2_first">
App 1
</li>
<li class="lev2 pos2 haschildren lev2_haschildren">
Training
<ul class="lev3">
<li class="lev3 pos1 lev3_pos1 first lev3_first">
App 3
</li>
<li class="lev3 pos2 lev3_pos2 last lev3_last">
App 4
</li>
</ul>
</li>
</ul>
<li class="lev1 pos3 haschildren lev1_haschildren">
Documents
<ul>
<li class="lev2 pos1 first lev2_first">
Doc 1
</li>
<li class="lev2 pos2 haschildren lev2_haschildren">
Training
<ul class="lev3">
<li class="lev3 pos1 lev3_pos1 first lev3_first">
Doc 3
</li>
<li class="lev3 pos2 lev3_pos2 last lev3_last">
Doc 4
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I think that is what you want:
[xml]$div_topnav=
#"<div class="topnav" >
<ul class="lev1 clearfix" >
<li class="lev1 pos1 first lev1_first">
Home
</li>
<li class="lev1 pos2 haschildren lev1_haschildren">
Applications
<ul>
<li class="lev2 pos1 first lev2_first">
App 1
</li>
<li class="lev2 pos2 haschildren lev2_haschildren">
Training
<ul class="lev3">
<li class="lev3 pos1 lev3_pos1 first lev3_first">
App 3
</li>
<li class="lev3 pos2 lev3_pos2 last lev3_last">
App 4
</li>
</ul>
</li>
</ul>
</li>
<li class="lev1 pos3 haschildren lev1_haschildren">
Documents
<ul>
<li class="lev2 pos1 first lev2_first">
Doc 1
</li>
<li class="lev2 pos2 haschildren lev2_haschildren">
Training
<ul class="lev3">
<li class="lev3 pos1 lev3_pos1 first lev3_first">
Doc 3
</li>
<li class="lev3 pos2 lev3_pos2 last lev3_last">
Doc 4
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
"#
($div_topnav.GetElementsByTagName("a") | ? "#Text" -Like "App *").href
The output will be your links of all of your apps.
PowerShell couldn't parse your posted $div_topnav Content, because there is a closing li-tag missing for your li-tag in line 6 (I fixed that in my Code snippet).
Related
I'm trying to get the navigation bar of my first website to work but I can't find my mistake.. I'm working with Typo3, Fluid and Bootstrap. When I create a navigation bar manually in my template file it works perfectly fine but whatever I try in this typoscript file, the navigation bar items are only normal links instead of nav-items.
lib.navbar = HMENU
lib.navbar {
entryLevel = 1
1 = TMENU
1 {
wrap = <ul class="navbar-nav">|</ul>
NO = 1
NO {
wrapItemAndSub = <li class="nav-item">|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
}
ACT <.NO
ACT {
wrapItemAndSub = <li class="nav-item active">|</li>
}
}
}
I call the file in my template like this
<f:cObject typoscriptObjectPath="lib.navbar" />
This simple copy pasta in my template works
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
It seems like the
wrap = <ul class="navbar-nav">|</ul>
gets ignored but when I try
wrap = <h1><ul class="navbar-nav">|</ul></h1>
the h1 works.
Edit: Fixed it with this line:
ATagParams = class="nav-link"
You can try below menu typoscript.
lib.navbar = HMENU
lib.navbar{
1 = TMENU
1{
expAll = 1
wrap = <ul class="navbar-nav mr-auto">|</ul>
NO {
allWrap = <li class="nav-item"> | </li>
ATagParams = class="nav-link"
}
ACT = 1
ACT {
wrapItemAndSub = <li class="nav-item active"> | <span class="sr-only">(current)</span></li>
ATagParams = class="nav-link"
}
}
}
Thanks, but it has the same problem. I found the reason though. The pages names are still inside an
<a href="index.php?id=1">
When I manually change it to
<a class="nav-link" href="index.php?id=1">
it works. But I don't know where this comes from in my code or how I can change it.
I am lost at trying to achieve a menu like this in typoscript.These pages should not be in the menu : excludeUidList = 2,3,5,6,7,48,49,50,51,52
<ul>
<li>
<span>First page</span><i class="fa fa-plus"></i>
<ul class="submenu">
<li>
</i>
<ul class="submenu">
<li>sub sub page</li>
<li>sub sub page</li>
</ul>
</li>
<li>
<span>Title</span>
</li>
<li>
<a href="link to third sub-page" class="submenu-toggle" ><span>Title</span></a>
</li>
</ul>
</li>
<li>
</i>
<ul class="submenu">
<li>
</i>
</li>
<li>
</i>
</li>
</ul>
</li>
</ul>
Could anyone point me in the right direction?Help would be appreciated
ok just in case someone has the same problem here is what i did and it works fine for me
lib.theMenuMobile = HMENU
lib.theMenuMobile {
entryLevel = 0
excludeUidList = 2,3,5,6,7,48,49,53,54,55
1 = TMENU
1 {
wrap = <ul>|</ul>
expAll = 1
NO = 1
NO {
wrapItemAndSub = <li class="uppermobilelink">|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
ATagBeforeWrap = 1
ATagParams = href="#" class="submenu-toggle mldisabled"
linkWrap = |<i class="fa fa-plus"></i>
}
}
2 < .1
2.wrap = <ul class="submenu">|</ul>
2.NO {
ATagTitle.field = subtitle
ATagParams = href="#" class="submenu-toggle"
linkWrap = |<i class="fa fa-plus"></i>
wrapItemAndSub = <li>|</li>
}
3 < .2
}
I am going to implement twitter bootstrap's carousel in order to display five items at once. My system uses the template engine smarty.
I am already familiar with smarty basics. The following code would display all my items:
<ul class="thumbnails">
{foreach $items as $item}
<li class="span2">
<div class="caption">
<h5>{$item.title}</h5>
</div>
<div class="thumbnail">
<img src="{$item.image}" alt="">
</div>
</li>
{/foreach}
</ul>
Unfortunately twitter bootstrap's carousel needs all the items separated into blocks, like that:
<ul class="thumbnails">
<div class="item active">
<ul class="thumbnails">
<li class="span2 offset1">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span2 offset1">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
</ul>
</div>
...
</ul>
How do I achieve this by using smarty's foreach loop:
Putting 5 items into one div.item the next 5 items into the next div.item and so on
The first div.item should get the class 'active'
The first item in every div.item should get the class '.offset1'
Smarty defines some magic variables which allow you to see how many times the loop has gone through (see the documentation for {foreach} for all the details).
In your case you want to check:
{$item#first} to open the first, active div.item
{$item#iteration is div by 5} to close and open the next div.item, and give its first li the offset1 class
{$item#last} to close off the last div.item whether or not it's divisible by 5
I am trying jsTree for the first time, and have the problem that after calling jstree(), the text in my <li> elements vanishes. After the call, my tree looks like this:
<div id="assessment-treeview" class="jstree jstree-0 jstree-focused jstree-classic">
<ul>
<li class="jstree-last jstree-open"><ins class="jstree-icon"> </ins>
<ul style="">
<li class="jstree-last jstree-open"><ins class="jstree-icon"> </ins>
<ul style="">
<li class="jstree-last jstree-leaf"><ins class="jstree-icon"> </ins></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Before the call it looks like this:
<div id="assessment-treeview">
<ul>
<li>Specific Outcomes
<ul>
<li>[section: name not available for import]
<ul>
<li>[outcome: name not available for import] </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The jstree call looks like this:
$("#assessment-treeview").jstree({ "themes": { "theme": "classic" } });
What could be causing this?
jsTree doesn't like pure text nodes inside the 'li' tag. When I put the item text into a tag like 'span', everything worked fine again.
From the question code above:
<li><span>Specific Outcomes</span>
<ul>
.
.
</ul>
</li>
i have a tree menu that i need to open on specific branch.
1. on click on an A element i open the all next UL.
now i want to close all other UL exept the ones that are parents of the A element.
i want to write a function that will get an argument that is a A ID and will open the menu in the right place.
my jquery code
$(document).ready(function() {
$(".solmenu").click(function() {
$(this).nextAll("ul").slideToggle();
});
my css
ul.solmenu_3140_1 {display:none;}
ul.solmenu_3140_2 {display:none;}
my html
<ul class="solmenu_3140_0">
<li>
<a class="solmenu" href="javascript:void(0);">1</a>
<ul class="solmenu_3140_1">
<li>
<a class="solmenu" href="javascript:void(0);">11</a>
<ul class="solmenu_3140_2">
<li>
<a class="solmenu" href="javascript:void(0);">111</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">112</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">113</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">114</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">115</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">116</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">117</a>
</li>
</ul>
</li>
</ul>
<ul class="solmenu_3140_1">
<li>
<a class="solmenu" href="javascript:void(0);">12</a>
<ul class="solmenu_3140_2">
<li>
<a class="solmenu" href="javascript:void(0);">121</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">122</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">123</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">124</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">125</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">126</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">127</a>
</li>
</ul>
</li>
</ul>
<ul class="solmenu_3140_1">
<li>
<a class="solmenu" href="javascript:void(0);">13</a>
<ul class="solmenu_3140_2">
<li>
<a class="solmenu" href="javascript:void(0);">131</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">132</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">133</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">134</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">135</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">136</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">137</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="solmenu_3140_0">
<li>
<a class="solmenu" href="javascript:void(0);">2</a>
<ul class="solmenu_3140_1">
<li>
<a class="solmenu" href="javascript:void(0);">21</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">22</a>
</li>
</ul>
</li>
</ul>
<ul class="solmenu_3140_0">
<li>
<a class="solmenu" href="javascript:void(0);">3</a>
<ul class="solmenu_3140_1">
<li>
<a class="solmenu" href="javascript:void(0);">31</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">32</a>
</li>
</ul>
</li>
</ul>
<ul class="solmenu_3140_0">
<li>
<a class="solmenu" href="javascript:void(0);">4</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">5</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">6</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">7</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">8</a>
<ul class="solmenu_3140_1">
<li>
<a class="solmenu" href="javascript:void(0);">81</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">82</a>
</li>
</ul>
</li>
</ul>
<ul class="solmenu_3140_0">
<li>
<a class="solmenu" href="javascript:void(0);">9</a>
<ul class="solmenu_3140_1">
<li>
<a class="solmenu" href="javascript:void(0);">91</a>
<ul class="solmenu_3140_2">
<li>
<a class="solmenu" href="javascript:void(0);">911</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">912</a>
</li>
<li>
<a class="solmenu" href="javascript:void(0);">913</a>
</li>
</ul>
</li>
</ul>
<ul class="solmenu_3140_1">
<li>
<a class="solmenu" href="javascript:void(0);">92</a>
</li>
</ul>
</li>
</ul>
<ul class="solmenu_3140_0">
<li>
<a class="solmenu" href="javascript:void(0);">10</a>
</li>
</ul>
example of my code
sounds like you may want to trigger a click event on a specific node
see http://api.jquery.com/trigger/