Is it possible to link to an Element Id within a container that already has an element id?
My setup is that I have Tabs which have an element id, we use this to link our customers to open this tab. Within the tabs, we have accordions. Basically it is a FAQ section for different types, and each type has a huge list of FAQS which we categorise.
Currently, we are able to link customers to #type1 but cannot link #type1#faq1.
What we are trying to achieve is to give the customer a HTML URL link which opens up a tab, then opens up the FAQ accordion which has for this example an element id of #faq1.
Related
We are using Sitefinity 11 and MVC. We are trying to use just one template for the main heading pages that reside just under the root of the site. On that template, we'd intend to use a vertical navbar (using the included Sitefinity navbar widget set to the Vertical view, its Bootstrap 4) which will reside on the left side of the page.
We want the navigation to show the top most page of that section (which we have enabled by turning "ShowParentPage" to True, and display child pages up to 3 levels deep (including the top page...so child and grand child pages). The tricky part is that we'd like for it to stay the same, even when the user navigates into one of the child pages and always show that top level with the two sub levels. There is no built in functionality for this currently, and the closest option to use is to set the widget to always show current page and children. But again, this results in it setting the current page to the top instead.
There are only going to be three or four of these top level pages under the home page, so if push comes to shove, we could create a different template for each section of the site, and then just set the navigation widget to always default to the top page of that section which is another built in option on the navigation widget, but this seems like it would result in duplicated effort.
I've been trying to modify the NavigationView.Vertical razor html view to achieve our desired result, but I am having no luck. My thought, is that if I could check to see if the parent page, or parent of the parent page has a certain page title (which should remain pretty static over time, although yeah I know this can lead to risk of the page name is changed), then set that as the active node, and then have the code do what it is doing already, which is to loop through the child pages and write them to the navigation menu.
This is a snippet of the default code on the view:
#model Telerik.Sitefinity.Frontend.Navigation.Mvc.Models.INavigationModel
<div class="#Model.CssClass">
<nav>
<ul class="nav flex-column navbar-child-custom">
#foreach (var node in Model.Nodes)
{
<li class="nav-item">
<a class="nav-link #GetClass(node)" href="#node.Url" target="#node.LinkTarget">#node.Title</a>
#RenderSubLevelsRecursive(node)
</li>
}
</ul>
</nav>
</div>
If I could somehow set that node in the for-each loop to the top most parent page, then I could just let it do it's thing and it would work, but I don't know of a proper way to do this.
Any help or suggestions are much appreciated!
EDIT: I've attached some images which shows the page hierarchy (which you can see has Members, Retirees, and Employers as the three top level pages I'm referring to), the selection used in the template, and then also the result on the page when you are on the members page, and then what happens to the left nav when you are on the Pensions page which is just under Members. In this case, we want the navigation to remain the same, as if you were on the Members page.
Hierarchy
Selection
Members page View
Pension Page View (child of Members)
I think you should use the "All Pages under a Particular Page" option and select the Members page.
This, it will always show the child pages of the Members page.
Having the ShowParentPage to True (as you already have) will display the Members page as well.
I have some buttons (links) on my webpage which has a link with values in it so it filters the content on the page. The filter part is working fine but I can't get it to focus on the ID.
The current href value is:
website/?type=Appartment&submit2=#
What I want is that it goes directly to the div named houses so it does not keep going to the top.
I tried making the URL like this:
website/#houses?type=Appartment&submit2=#
But the above does not do anything at all.
Summary:
How do I target a div and have the form values in the URL at the same time?
Have you tried website/?type=Appartment&submit2=#houses?
First visit http://velnikolic.com/music/?page_id=6#test
Then hover over the music tab on the navigation. There is a highlight on both "Classic and Category 2". I think the reason for this is because they both link to anchor tags on the Music page. Is there a way to highlight only the item clicked on. For example if I clicked "Classic" only Classic and Music would be highlighted not all three.
one Idea is that u can remove ".current-menu-item" on the rest submenu items,
and only make sure you assign ".current-menu-item" to the one u cliked
when u click on one of the submenu "li".
I have an html page with three divs containing text content. I want to scroll to a particular div depending upon the link that the user clicks on the home page.
There are three links on the home page; so what I want is if the user clicks on link 1 he is scrolled to div 1 on the resultant page, if he clicks on link 2 on the home page, then the page is scrolled to div 2 on resultant page and so on.
If you want to scroll the current document to a particular place, the
value of HREF should be the name of the anchor to which to scroll,
preceded by the # sign. If you want to open another document at an
anchor, give the URL for the document, followed by #, followed by the
name of the anchor.
Use a bookmark with the anchor tag:
First
Second
Third
You would just substitute the value after the '#' symbol to the appropriate element IDs.
Reference: http://devedge-temp.mozilla.org/library/manuals/1998/htmlguide/tags7.html
Most if not all new browsers also support the id as an anchor destination
<div id="div1">...</div>
Will respond to ...
as well as the name attribute does
Easiest method is using Fragment Identifier. Whenever you are creating links, attach the id of the element you want to scroll to, on the end of link. For example:
link.html#divToScrollTo
An example usage:
Scroll to div with divToScrollTo as id
After clicking on this link, the browser to first navigate to link.html and then scroll to an element with divToScrollTo Link.
I have a left pane with 5 items as hyperlink. When i click on the hyperlink, i wanna display corresponding item description in the right hand side.
I am developing the website using html.
By default there will be some description. when i click on item1, i wanna display the details of item1 and click on item2 i wanna display item2's details.
How can do this? Can i display the page in the iframe or something? what is the best practice?
If you want to use an IFrame, then you can do so, and just set the target of the hyperlink to be the name of the iFrame.
However, iFrames are considered bad practice. What would be better, is to use JQuery and use the load command.
For example, if your right hand pane has an id of right-pane:
item 1
function showItem(url) {
$('#right-pane').load(url);
}
You use the target attribute. :)
http://www.w3schools.com/HTML/html_frames.asp