commerce site that has a particular tab navigation code that allows users to click and view information.
The Tab Nav looks like this:
Details | Shipping | Returns | Lifestyle View
When you click on anyone of these a paragraph appears below the tab with more information. What happens though is that all the other list items get pushed below the paragraph rather than staying in their current positions. So for instance if I click on "Details," the "Shipping," and "Returns," tab gets pushed down. I would like all the menu items to stay intact and just have the paragraph appear below each menu.
Any help would be greatly appreciated.
the page can be found at:
http://babsandmickieco.myshopify.com/collections/clothing-all/products/sana-dress#
As I've demonstrated in this JSFiddle, it really is a case of just appending an in flow element onto the list item. In the example I have provided, I used the following jQuery code to append a paragraph element (P) to a List item element (li).
Snippet
$("#clickAble").click(function(e) {
$("#clickList").append($("<p id='appended'>Hello</p>"));
});
As you can see, it's fairly obvious what his does. This created something of a rough example, but it's a working example nonetheless.
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.
been looking for a similar issue for a moment but couldn't find anything about that anywhere.
Working on an ASP.NET project and I need my asp:DropDownList to have it's elements sliding DOWN when selected.
When the selected item is the first one, everything is OK since I'm at the top of my element list, but if I select the dropdownlist when the selected item is like the XXth, the list will be displayed with a slide going up and down at the same time (that makes my currently selected item in the middle of the displayed list).
I want my list to be sliding down always, whatever my selected element position is (the same display as if the selected element was always the 1st).
Hope my question is clear.
If you need any screen, I'll send you some but it's probably not necessary.
Thanks by advance for your answers !
I currently have a navigation that is based on the bellow image. (sorry about the terrible sketch) I have a tab along the top called "films" that is also classed as a department.
I would like the tab "films" to open the sub cat films located in the department tab as though the mouse was hovered over that.
Currently the department "films" is a list item under an ordered list of department and has an ID of MM05.
The tab "films" is again another li in an unordered list for the top bar that originally had its own drop down.
Not sure how I can get around this!
This is sadly not possible just using CSS as "Cascading" means that you can only go downwards with your selectors.
You would have to use Javascript for this.
This would look something like this
<script>
var linkToOpenDropDown=document.getElementbyId("filmLink");
var dropDown=document.getElementbyId("dropDownList");
linkToOpenDropDown.onmouseover=function() {
dropDown.style.visibility='visible';
};
linkToOpenDropDown.onmouseout=function() {
dropDown.style.visibility='hidden';
};
</script>
From your drawing, I am thinking you will have a static DIV that holds a sub menu. So on click it would "visibility: hidden / visible" change to what you need. I assume that is the location where you want it to show, so mouse over wouldn't work since you can reach it from the button location with out going mouseout...
Please do provide little more code or info on this, thanks.
If i understood correctly, I would make that a onclick (show, hide) type DIV, and have that div with LI use onMouseOver Show / Hide additional panels
This problem refers to the main (header) nav menu on THIS PAGE.
When any of the items in the "Services" drop-down submenu is clicked, I want the "Services" page to open (in the existing browser window) AND for a specific anchor tag element on the "Services" page to be in focus. I've achieved this OK. BUT, when the targetted anchor tag is in focus, I want it to also behave just like a manual mouse hover had been performed on its parent div, ie there should be a slide-down of text corresponding to the focussed element.
For a manual demo, go HERE and hover on one of the vertical list items - text will slide down to the right of the list.
HTML for the "Services" submenu link:
<li> collaborative law</li>
HTML for the targetted "a" tag and its parent div (ie "a" tag that should be in focus on "Services" page):
<div id="mylist1"><h3>Collaborative Solutions</h3></div>
Script to drive the hover behaviour of the focussed "a" tag and its parent div:
//fades in desired text after fading out whatever text is already displayed:
$(document).ready(function() {
$('#mylist1').mouseover(function() { //note first list item must be called mylist1 to avoid conflict with other code
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
//capture click events as well:
/* $('#mylist1').click(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});*/
//capture focus events on <a> as well:
$('#myTag1').focus(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
});
Note the main nav menu has been created using jquery, via a Dreamweaver extension.
What I have so far:
When the "Services" page opens, the correct target is in focus (as shown by the browser address bar). However, this focus is not triggering the expected text slide-down event. When I hit tab, the next list div goes into focus (as expected) & the appropriate text slide down occurs.
Am I hoping for too much? Have I misunderstood the limitations of 'in focus'" Will Mt Hotham have a killer snow season this year ?
Your sage advice is greatly welcomed!
Kirk
I'm not sure your use of "in focus" is quite what I expect... Having a fragment in the url doesn't necessarily give focus to that element, it just moves the display down to it. I assume the reason it works for tabbing is that tabbing does focus on elements and I assume it starts at the element that has been scrolled to.
What I'd suggest is breaking out your display script into a named function (so it can be used from elsewhere) and then on page load you can pull out the fragment from the url (eg #famLaw). Using that fragment you should be able to find the right element on the page and focus it.
It should be noted also that pulling the display text into a separate function has the advantage of consolidating your code - you are basically duplicating the code in the onfocus and onready events so breaking it out makes for easier maintenance and reuse. :)
P.S. I guess yes for Mt Hotham. I'd never heard of it before but I'm going to be optimistic.
I've got the following report setup:
1. Letterhead (not in the header, since i only want it on the first page)
2. List control with some data
when i export the report to PDF, and the contents of the List are less that one full page - my letterhead is displayed on the first page (the rest of the page is empty) and the List content gets moved to the second page.
if the List grows over 1 page - reports is showing up just fine (Letterhead and portion of the list on the first page - the rest on the second page)
It looks like it tries to keep the list on 1 page as long as its contents fit on the page - but when you add the letterhead to the contents it overflows the page, and the list gets bumped down to the next page.
Is there any way to keep the list on the first page regardless of its size.
Putting the letterhead in the list is my last resort, I'd like to hear some other solutions.
uploaded a sample .rdl to illustrate the problem
got rid of the list for simplicity, the problem seems to be with a textbox wanting to show up on 1 page
p.s. see this question for more details
What is the source of your text? Is it coming from a dataset? If so, Add a paragraph id in it, set your table to group on the paragraph id and show only the group header. In the group, add a bottom padding value of say 5. The table will handle the paragraph breaks for you, and if it grows more the a page it will handle it for you. Make sure that keep together is set to false. The paragraph id will be used to sort the dataset by id ascending.
sorry I didn't notice your comment at the end. The only other thing that i can think of is to shift your list up closer to the header and eliminate all empty space at the end. Also, make sure the KeepTogether option in the list is set to false. This way it will break up your list rather than move it to the next page.
you can put both the letterhead and the list inside a rectangle so they are always grouped together.
Reporting services also tries to keep the relative spaces you have in the designer, so if you list is aligned to the bottom of the page and there is a space form the header; it will keep the space on top and align everything to the bottom of the page.