I have various anchors to scroll through the slides of a carousel. Everything works fine, only I would like to use the automatic "active" class to change the style, I tried in various ways but I could not do it
<a data-target="#soluzioni_carousel" data-slide-to="1">1</a>
<a data-target="#soluzioni_carousel" data-slide-to="2">2</a>
<a data-target="#soluzioni_carousel" data-slide-to="3">3</a>
Related
Below is the file structure
I have default Index page under Pages folder, which has layout as _LayoutHarman.cshmtl
Code : Pages/Shared/_LayoutHarman.chtml
header menu : pages are in subfolder.ie category folder in this case
<a asp-route-cat_slug="electronic" asp-page="./category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="./category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="./category/index" >Toy</a>
footer menu : pages are on root folder
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
<a asp-page="./privacy" >Privacy</a>
Code : Pages/category/Index.cshtml
#page "{cat_slug?}/{pageIndex:int?}"
#model bList.Pages.category.IndexModel
#{
}
<nav aria-label="Page navigation example">
<ul class="pagination text-center">
#if(Model.prev_no!=0){
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.prev_no"> Previous</a></li>
}
#if (Model.no_more_record != "YES")
{
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.next_no">Next</a></li>
}
</ul>
</nav>
Here Next/ previous button generate url as follow
https://localhost:8080/category/toy/1
https://localhost:8080/category/toy/2
https://localhost:8080/category/toy/3
respective on selected category
Issue : When i visit on category page and click on prev or next button and then try to click on link Contact,Terms,Privacy i.e (which is on _LayoutHarman.cshtml) or on header menu then href become blank.
Edited One:
Code: On _LayoutHarman.cshtml
HeaderMenu:
<a href="./category/toy" >toy</a>
Footer Menu
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
Code: On Category/Index.html page
Prev</li>
Next
Now on Next/ Prev button click , header menu generates url as
https://localhost:44382/category/toy/category/toy hence error page occurs. but for footer menu contact/term/privacy works properly
I did reproduce your problem, you need to delete the point(.) in asp-page attribute in your _LayoutHarman.cshmtl.
Changed like this:
<a asp-route-cat_slug="electronic" asp-page="/category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="/category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="/category/index" >Toy</a>
<a asp-page="/Contact" >Contact</a>
<a asp-page="/terms" >Terms</a>
<a asp-page="/privacy" >Privacy</a>
And you don't need to add asp-page="category" in Pages/category/Index.cshtml, just delete this attribute in this page.
Here is my test result:
Do you really need all this extra server side processing, asp-route-cat_slug asp-page?
Can't you just use plain old fashion HTML hyperlink? As for the dynamic parameters maybe you can set only them...
View category
Just an idea to think on...
Cheers
i got a simple static site with a main navigation. working with the metalsmith generator.
Is there a native way to set current menu items active?
My current unautomated solution:
I just made a workaround like following.
A MD file page1.md as source of content with some variables i can define at top:
---
title: this is the site title
currentPage1: current
layout: main.html
---
<article class="featurette">
<p class="lead">Some content text...</p>
</article>
and my layout HTML file main.html. Where handlebars is used as engine.
i just post the part of the menu here:
<ul class="nav">
<li>
Link to Page1
</li>
<li>
Link to Page2
</li>
</ul>
both are going through the metalsmith rendering.
I got a current class on the Page1 in the menu.
Question
My solution is working so far, but as my site scales. I need to define the "current" for every site again and again. If I don't watch out this will lead to misconfiguration...
I do like to have freedom on my main navigation markup, as there are some specialities in. So I'm fine with creating this for new pages by myself.
Can i set active menu items somehow with the metalsmith-permalinks or metalsmith-canonical plugin or does there exists a metalsmith plugin suited for this case or maybe with another clever JS manipulation?
Use metalsmith-collections to create a collection of pages
.use(collections({
pages: {
pattern: '*.html'
}
}))
Then in your template loop through them to create your links:
{{#each collections.pages}}
<li>
<a href="{{path}}" {{#if_eq ../id this.id}} class="active" {{/if_eq}}>{{title}}</a>
</li>
{{/each}}
You will need to register a block helper like this: Handlebars.js if block helper ==
Make sure each page ID is unique.
For example:
---
id: phillip
layout: base.hbs
tagline: I haven't thought of one.
pagename: phils page
href: /phil/
navorder: 3
private: true
---
In inspiration from Sarah Drasner's Smashing Magazine article Replacing jQuery with Vue, I've replaced all of my jQuery with Vue in my Wordpress theme. Things are going nicely as I've already replaced functionality for modals, form validation/submission, at the like. I even got a boost in my page speed grade from Google's page speed insights tool.
The last piece of my puzzle is finishing off my navigation menu. The menu is built and working, but I'm not happy with it. My primary dissatisfaction is in conditionally rendering submenus better. For example, menu items without children receive an empty child:
<ul class="submenu"></ul>
Here's what I have so far:
Here's the shape of my Nav menu data: https://api.myjson.com/bins/jfld4
Important property definitions:
"obeject_id" is a unique indentifier
"post_parent" refers to the nav item's parent "object_id"
Notice notice top level menu items have "post_parent: 0"
Here's my Vue code for rendering the menu:" https://codepen.io/JosephAllen/pen/zLQqRr?editors=0011
<ul class="menu" id="primary-menu">
<menu-item
v-for="item in navItems"
v-if="item.post_parent == 0"
:key="item.object_id"
:class="{active: item.active}"
v-bind:url="item.url"
v-bind:object_id="item.object_id"
v-bind:post_parent="item.post_parent"
v-bind:title="item.title">
<ul class="sub-menu">
<menu-item
v-for="subItem in navItems"
:key="subItem.object_id"
v-if="subItem.post_parent == item.object_id"
v-bind:object_id="subItem.object_id"
v-bind:url="subItem.url"
v-bind:ID="subItem.ID"
v-bind:post_parent="subItem.post_parent"
v-bind:title="subItem.title">
</menu-item>
</ul>
</menu-item>
</ul>
On your <ul class="sub-menu"> element, include v-if or v-show with a test if the item contains any subItems (e.g. <ul class="sub-menu" v-show="hasSubItems"> once you've computed hasSubItems of course). Check out conditional rendering in the Vue docs.
I have multiple navigation bars in one page:
<ul class="nav nav-tabs">
<li>Home</li>
<li>About</li>
</ul>
<ul class="nav nav-tabs">
<li>Home</li>
<li>About</li>
</ul>
The status of a LI element becomes active when the belonging link was clicked. Problem: It stays active even when the user switches the tab in the other navigation.
It is not possible to switch back in the first navigation as the LI is already active there and can not be clicked. Things get even worse if you add a div.collapse.navbar-collapse in the main navigation bar and a simple link somewhere in the page:
<p><a data-toggle="tab" href="#about">About</a></p>
In many cases different nav (with tabs) will open a new page or interact on difference elements in the page. In your case being active of nav1 only will be a problem when nav2 removes or change the content related to your nav1 active state.
You could try to remove the active states with the tab event, see http://getbootstrap.com/javascript/#tabs. For your example this will be come something like;
$('.nav').on('show.bs.tab', function (e) {
$('.nav .active').removeClass('active');
})
I think the best solution is to set the active class manually in all the navs after each tab switch.
$(function() {
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
// add active class where nav entry is active
$('.nav a[data-toggle="tab"][href="'+$(e.target).attr("href")+'"]')
.parent().addClass('active');
// remove active class where nav entry is no longer active
$('.nav a[data-toggle="tab"][href!="'+$(e.target).attr("href")+'"]')
.parent().removeClass('active');
});
});
I am using OneUI which is basically just an extension of the dojo didjit widgets.
I need to put a widget inside a widget.
I am using a div with data-dojo-type="dojo.store.Memory".
I am then setting various elements of this using data-dojo-props.
So for example I have some spans and links set within the data-dojo-props.
These are work and display fine.
I am now trying to add a div which itself is a widget. So I've added the div and within this div I am setting the data-dojo-type as a HoverHelpToolTip and setting some other elements such as an onmouseover and some data-dojo-props.
Essentially what should happen is that a hover help tooltip should pop up on mouse over - but it isn't working at all.
So I suppose my question here is how do I correctly nest one widget within another?
Thanks
Sample Code
I am declaring it as follows...
<div data-dojo-id="store1819454249457680384" data-dojo-type="dojo.store.Memory" id="store1819454249457680384" data-dojo-props="data:[{"Name":"<!--o3nv--> ","id":1,"gender":"Female","ActionColumn":"<span class=\"actions\" ><a href=\"...\" onclick=\"...\" title=\"Click here to edit this item\" >Edit<\/a><span class=\"linksDivider\" > | <\/span><a href=\"#\" onclick=\"...\" title=\"Click here to delete this item\" >Delete<\/a><\/span>","Person.firstName":"werrwewre",
<!-- This is the start of the code in question -->
"HelpColumn":"<div class=\"hiddenHelpDialog\" data-dojo- props=\"forceFocus:true,connectId:['helpAnchor_rowHelp10309939']\" data-dojo- type=\"idx\/oneui\/HoverHelpTooltip\" id=\"rowHelp10309939\" style=\"text-align: left; position:relative; display:none\" widgetid=\"rowHelp10309939\" ><div class=\"helpDivDialog\" ><p class=\"helpFieldHeadingDialog\" >\u00a0<\/p><p class=\"helpDescriptionTextDialog\" >BLAH BLAH BLAH BLAH<\/p><\/div><\/div><a class=\"openHelpLink openHelpLinkDisplayField\" id=\"helpAnchor_rowHelp10309939\" onmouseover=\"idx.oneui.HoverHelpTooltip.defaultPosition=['above']\" ><\/a>"}]" ><!-- comment--></div>
It produces the following HTML which works correctly apart from the HoverHelpTip not appearing. The onmouseover is firing. Its alsmot like the widget isn't registered with dojo?!?!
<div widgetid="rowHelp1248193624" style="text-align: left; position:relative; display:none" id="rowHelp1248193624" data-dojo-type="idx/oneui/HoverHelpTooltip" data-dojo-props="forceFocus:true,connectId:'helpAnchor_rowHelp1248193624'" class="hiddenHelpDialog"> <div class="helpDivDialog">
<p class="helpFieldHeadingDialog"> </p>
<p class="helpDescriptionTextDialog">BLAH BLAH BLAH BLAH</p></div></div>
<a class="openHelpLink openHelpLinkDisplayField" id="helpAnchor_rowHelp1248193624" onmouseover="idx.oneui.HoverHelpTooltip.defaultPosition=['above'];">
<span class="hidden"> </span></a>
I fixed this by calling parser.instantiate(node) on the DOM Node when dojo is ready.
I dont know why but for some reason the widget was not being picked up/parsed.
I check dijit.registry and there was no mention of it and a lookup using dijit.byid returned undefined.
Explicitly instantiating the node worked however.
Anyone got any idea why????