I am loading materializecss dropdown dynamically, from an angularjs template. So initializing it at the start when main page is loaded is not working. I added following code to initialize other elements as well as dropdown in the last line
//Inside angularjs controller
//Main Left Sidebar Menu
$('.sidebar-collapse').sideNav();
// FULL SCREEN MENU (Layout 02)
$('.menu-sidebar-collapse').sideNav();
// HORIZONTAL MENU (Layout 03)
$('.dropdown-menu').dropdown();
$('.button-collapse').sideNav();
$('.collapsible').collapsible();
$('.dropdown-button').dropdown();
Every other elements are getting initialized except the dropdown. I am getting following error due to the last line, if i remove that line everything works fine except dropdowns. I am new to angular js as well as front end development. I have already searched on web, still not able to find any answer. Appreciate if you help me with this.
TypeError: Cannot read property 'childNodes' of undefined
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:36)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at nodeLinkFn (http://localhost/TempProject2/js/angular/angular.js:8241:24) <div ui-view="" class="ng-scope">
I got it working by including the dropdown content in the anchor tag that holds the data-activates attribute for the dropdown. Take a look at the code below:
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1" id="test">Dropdown<i class="material-icons right">arrow_drop_down</i>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
</a>
</li>
I had a similar problem until I found a hack that worked.
Remove the dropdown-content from the scope of the controller.
In SomeController
// add dropdown code
$('.dropdown-button').dropdown();
In your html, place the drop-down content outside the Controller scope
<section ng-controller="SomeController">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1" id="test">Dropdown<i class="material-icons right">arrow_drop_down</i>
</section>
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
You can either place it at the top or bottom. I'm still not sure why this hack works though :)
In your controller, wrap the dropdown init with a timeout. Ex:
$timeout(function(){
M.Dropdown.init(document.querySelectorAll('.dropdown-trigger')); }, 0);
Please initialize $('.dropdown-button').dropdown(); in document.ready function.
It should run after document is ready.
Related
i am using the Mittwald Typo3 Starterkit (Online-Demo). I figured out that this Starterkit uses the Typo3 fluid directory helper. How can one specify a specific CSS class for an active/selected page (I want to highlight the current page in the menu)?
Until now, I realised my Menus using Typo3 (HMENU/TMENU/ACT) but with this fluid directory helper I am completely stuck.
According to the Fluid Documentation there might be 2 ways:
classActive/classCurrent (string)
linkActive/linkCurrent (boolean)
The original code is:
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<li>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
My try which did not work (class "current" did not appear, if condition linkCurrent is not executed):
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<f:if condition="{linkCurrent}">
<li class="current">
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:if>
<f:else>
<li>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:else>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
Does anyone have an idea how this fluid directory helper works? Unfortunately, there are few examples around. Thank you a lot!
Note, the ce:menu.directory ViewHelper is not the same as the linked VHS Menu DirectoryViewHelper.
The ce: prefix is usually used by FluidStyledContent ViewHelpers, that also have menu viewhelpers.
If you want to know what properties each page row has available, you should use the f:debug ViewHelper to inspect the variable.
<f:debug>{page}</f:debug>
I have not tried that ViewHelper, ever, but it looks like it does not insert any information about, if it's the current page or if it's "active" (in rootline) like you're used to from HMENU content objects.
You might want to replace that ViewHelper with the VHS extensions menu ViewHelper.
You can use the following snippet to add a class to the active page,
I used an inline if to compare the data.pid with the page.data.uid here.
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<!-- new inline if here -->
<li{f:if(condition: '{data.pid}=={page.data.uid}', then: ' class="current"', else: '')}>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
From time to time I stumble over the following issue, that might be easy to solve. But maybe I simply don't get it.
In a XPage treeNode, e.g. used in xe:navigator of xe:applicationLayout (pageTreeNode, placeBarActions, etc.) I wonder how to influence the styleClass property so that I can influence the "selected color".
<xe:this.titleBarTabs>
<xe:pageTreeNode label="Label Acc1"
selection="/Admin/Acc1/.*" page="/xpAdminAcc1.xsp"
styleClass="bg-info">
</xe:pageTreeNode>
<!--- ... -->
</xe:this.titleBarTabs>
In this example the styleClass 'bg-info' would be assigned always to the titleBarTab. That's the tab's background. For selected tabs the class "active" gets assigned automatically: class"bg-info active".
Is there a way to define, e.g. class bg-primary to be used for active?
I'm using the bootstrap3 theme. This is the HTML generated code. As you can see, the only difference is that the class of the activated menu item contains the class "active":
<div class="col-sm-12 col-md-12 applayout-titlebar-tabsarea" role="navigation">
<ul id="view:_id1:_id2:appLayout_tb" class="nav nav-tabs applayout-titlebar-tabs" role="tablist">
<li class="menu-item active">
<a role="tab" href="/LAP/MYDB.nsf/xpAdminAcc1.xsp" class="bg-info active">Label Acc1</a>
</li>
<li class="menu-item">
<a role="tab">Label Acc2</a>
</li>
<li class="menu-item">
<a role="tab" href="/LAP/MYDB.nsf/xpAdminAcc2.xsp" class="bg-info">Label Acc2</a>
</li>
<!-- -->
If you add a stylesheet to your application and specify the styling you want to apply for that class, then because that's at application level as opposed to server level, the standard rules for CSS (Cascading Style Sheets, so styles cascade down and get extended / overridden) will apply and the application level will take precedence. Just remember to add the application stylesheet as a resource on your Theme resource / layout Custom Control / XPage. XPage is least preferable, because it needs adding in multiple places.
The easiest method is to use Firebug or other inspection tool, select the element, find the CSS that's setting the current theme, copy and paste that into your application's stylesheet and override the settings accordingly.
Here's an example with a slightly different element:
My CSS is:
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
background-color:red;
}
I have the following code
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{exp:channel:entries channel="static" sort="asc" dynamic="off"}
<li>{title}</li>
{/exp:channel:entries}
</ul>
</div><!--/.nav-collapse -->
Which is looping through a channel I have for static pages on my website. Technically it is showing all the stuff it should do. This is the code it outputs:
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Small Builders</li>
</ul>
</div>
However, when I click the link it gives me a white page. I have the htaccess from the documentation set up. I'm new to ExpressionEngine. Am I missing something completely obvious? I just want to link the the entry I've created.
If you try to go to abc.com/index/small-builders does it work? (added index)
I don't know if you're hiding index in the url or not but that can cause it.
The way I fixed this was the enable the Pages plugin on ExpressionEngine. Where I'm using ExpressionEngine 3.0.5 the plugin isn't installed/activated by default like it is on EE2.
Once this was activated I was able to assign templates and url structure no problem.
guess your post would be better on the expressionengine.stackexchange.com site.
Post it there and i´ll have a look if i can explain this to you
I've used the Wayfinder menu building extra with MODx Evo and am now attempting to use it with MODx Revo for a new site. It's working well apart from I can't yet see a way to have the 3rd level different to the 2nd level . See the way Wayfinder is currently outputting the menu (simplified here for clarity):
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown">
<a class="dropdown-toggle notransition" href="index.php?id=200">
Help
<i class="icon-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right " style="display: none;">
<li>
<a href="index.php?id=31">
FAQs
</a>
</li>
<li class="dropdown-submenu pull-left">
<a href="index.php?id=54">
Policies
</a>
<ul class="dropdown-menu pull-right" style="display: none;">
<li>
<a href="index.php?id=490">
Privacy Policy
</a>
</li>
<li>
<a href="index.php?id=489">
Terms and Conditions
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I need the 'Policies' sub-menu, with 'Privacy Policy' etc, to pull to the left, not to the right - defined in Wayfinder InnerTpl:
<ul class="dropdown-menu pull-right" style="display: none;">[[+wf.wrapper]]</ul>
So, is it possible with Wayfinder to have a 3rd level different to the 2nd level ???
I've browsed the docs and forums for days to no avail and hope that the amazing SO community has some insights. Thanks in advance!
I think you are going to have to do this with CSS, you can add the &levelClass to your wayfinder call [docs say " CSS class denoting every output row level. The level number will be added to the specified class (level1, level2, level3 etc if you specified 'level').]
that way when you can write some css for your third level items when you see something like:
<li class="dropdown-submenu pull-left level2">
your css could go something like:
li.dropdown-submenu.pull-left.level2 > ul {
/* css for pulling it right */
}
unfortunately the &levelClass does not do anything if you add [[+wf.classnames]] to the UL tag in the outer wrapper so you have to come at it sideways.
OR
your inner wrappers could be written to use a snippet to decide what classes to add:
<ul class="dropdown-menu [[!pullLeftOrRight? &id=`[[+wf.docid]]`]]">
[[+wf.wrapper]]
</ul>
Then in your snippet use the docid to determine where in the menu tree that subnav is.
[hopefully docid is available in the outerTpl - I'm not sure]
UPDATE
After reading your comments & the docs again, I think I have an idea that might work - check out the &categoryFoldersTpl attribute, setup your tpl for that with your pull right classes & for your 3rd level drop downs, set the rel="category" on only the third level resources as suggested in the docs. [which doesn't help anyone who wants different submenus for different levels, but may get you out of your bind]
manually clicking on tab(anchor tag) its displaying drop down menu(unordered list) with watir element is locating but drop down menu is not displaying
HTML
<ul>
<li id="NetworkAnalysisTabPanel__ext-comp-1038" class=" x-tab-strip-menuable x-tab-strip-active ">
<a class="x-tab-strip-close" onclick="return false;"></a>
<a class="x-tab-strip-menu" onclick="return false;"></a>
<a></a>
<a class="x-tab-right" onclick="return false;" href=""></a>
</li>
</ul>
Tried the following line of code to click on the tab
$ff.div(:id,"NetworkAnalysisTabPanel").div(:index,1).div(:index,1).ul(:index,1).li(:index,1).link(:index,2).fire_event("onClick")
I am using watir 1.6.6 version
Firstly since your HTML sample that you provided does not include the element you are using in the command you attmepted, it's hard to know where that might be going wrong. Secondly since the code you provided does have a div with a unique ID present, why not start there instead of with an outer container.
I think the problem is that you are using
.fire_event("onCLick")
However the code is monitoring for an event named "onclick" (all lower case)
Try using
.fire_event("onclick")
or if you have not already, perhaps just
.click
and see if that works for you
Also, I'd seriously recommend you upgrade to a more current version of Watir.. 1.6.6 is pretty behind the times.
Update: that html code is starting to look very familiar to me, if this is the same basic control from the other two questions you've posted so far, then try firing the 'onmousedown' event against the element that invokes the menu and see if that works