I'm working on an ASP.NET web app in VS2010,C#, I want to make something like this page:
http://www.just-eat.co.uk/restaurants-simplyscrumptious/menu
when you click on food categories on left, page jumps to that category without any postback, how can I achieve it?
How to move with out post back
You use the anchor # at the end of the same page url following with the name that you with to move.
Then inside the page you place an anhro with the name that you wish to jump like
<a name="MovePosition"></a>
So if you make a link like http://www.site.com/catalog.aspx#MovePosition the browser will brink the line with the <a name="MovePosition"></a> on top.
reference: http://www.w3.org/MarkUp/1995-archive/Elements/A.html
categories menu always on the same point
If you also notice the categories on the left are stay on the same position. This can be done by many ways. In this specific page is use a script to change his location. How ever the better is to place the categories inside a div and give on this div this extra style position:fixed;bottom:0px; and will stick on the position that you have place it relative to his parent div.
There are many ways to keep the category menu stay on the same point. One other can be found here : http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm even so is old code.
Just addition to the previous answer #Aristos
If on the same page, just do
Go to section 1
If on another page then do
Go to section 1 on another page
Then define the sections with <a name="#sectionName"></a>
<a name="section1"></a>
Thi section 1
content for section 1 follows
<a name="section2"></a>
This section 2
content for section 2 follows
Related
I have a 'Meet Our Team' section on my home page and I want to be able to click a menu button 'Meet Our Team' and be directed there, even if I click it from another page.
My problem is that if I use #meet_our_team as the URL, the link doesn't work from another page. However, if I use a relative or absolute path plus '#meet_our_team' (e.g. home/#meet_our_team), the functionality works but it becomes styled like the 'Home' button when on the home page (i.e. the button looks pressed).
This is because the CSS class 'current-menu-item' is applied to the list element.
Is there a way I can have a working button that also styles correctly? I assume if I can suppress aria-current, it would work but I don't know if that is possible.
It was a simple enough fix. Simply add the below to Additional CSS. On my first attempt, I didn't specify 'a' and so it didn't work
#menu-item-1745 a {
color: #5a5a5a;
}
[ng-bootstrap] in case of multiple ngbNav on same page, contents of second and below navs are never displayed with ngbNavOutlet directives, but the first only (looks like it can recall ng-template of first ngbNav only).
thx for your help.
I see there is the same id used for the first and the second nav panels. Just make it unique and both nav panel will work well.
Use the attribute from the API domId
[domId]="unique-id-here"
https://ng-bootstrap.github.io/#/components/nav/api
I need to set HREF attribute of an anchor tag to work in all URLs like "/" and "/Home" and "/Home/Index" to scroll in top of a div.
the problem is if i set that to "/Home/Index#ToTop" and someone click on that anchor tag, he/she will redirect from "/" or "/Home" to "/Home/Index#ToTop" that is not very nice!
any idea?
If you just want to scroll to the top <a href="#"> will bring you back to the top of the page.
If you want to scroll to an element that's somewhere on the page use <a href="#id-of-div"> so without the /Home/foo/bar stuff.
See also: What is href="#" and why is it used?
Edit based on comment
So you want the link to scroll to top of home page if you're still on the homepage without redirect, and you want the link to redirect you to home page and scroll to top of it, if you're not on the home page?
I think you've to create a different link depending on the page you're on.
So if user is yoursite.com/home, the link will be <a href="#id-of-div"> and if user is yoursite.com/foo/bar the link will be <a href="./Home/Index#id-of-div">
You can determine the current URL in the controller. Quick search on SO gives me:
How to get current page URL in MVC 3
In .NET MVC, is there an easy way to check if I'm on the home page?
It's been a while since I've worked with MVC, so I can only help with some old memories and quick searching
Anchor Tag Helper in ASP.NET Core
You can use "asp-fragment"
<a asp-controller="Speaker" asp-action="Evaluations" asp-fragment="SpeakerEvaluations">Speaker Evaluations</a>
The generated HTML is:
Speaker Evaluations
Drupal 6.28:
I'm re-theming a particular section of a site and the new design called for five pages to be displayed as five tabs on one page with the appropriate one shown when either clicking on the tab itself or in an expanded menu to the left.
I created all that in html and jquery so that I could deep-link the tabs, ie... someone can click on any menu link and hit the page with the appropriate tab open instead of having to go to the master page and then click the appropriate tab. (using location.hash)
This is all working fine, but the last tab is to house content that currently is a view set as a block.
What is the best way to pull that view/block into the html div I have set aside for that specific content?
I have used this great snippet before:
<?php
$block = module_invoke('block', 'block', 'view', '15');
print $block['content'];
?>
which allows one to place any block anywhere, but with a view with a display set as a block, I'm not having any luck invoking that view. Also, I'd had to have to use "php" instead of 'full html' on the node since it's just a snippet but as it's not currently working, it probably doesn't matter.
so, I'm trying to figure out how to have something like this:
<!-- all the other tabs content-->
<div id="fifthTab">
all the content from the view which is set to 'display like a block'
</div>
I'm fairly new to Drupal and not even sure if I create a page display how I would call that data anyway.
So my html structure is:
MAIN PAGE LINK
-sub link/tab 1/default
-sub link/tab 2
-sub link/tab3
-sub link/tab4
-sub link/tab5
So if someone either clicks on on the sub link/tab 5 in the left nav or clicks on the actual tab 5 or enters the url xxx/#tab5, the appropriate tab is show, the rest hidden. That's all working great, I just cant get the view content to show in that tab5.
so a page template based on the url is the easiest. The variable $content is just placed in the last tab and all other html content for that specific page is just put in the template.
At least this way, as docs are added, it's still dynamic and the static info is easy to edit if needed.
Just in case something similar comes up for someone else.
First, I am a new at webpage programming and I didn't seem to find a similar question to address the situation I am trying to figure out. Maybe I wasn't using the right terminology...
I have a parent html file (House.html) with essentially two iframes displayed ("room" and "info"), see below.
House.html<br>
-iframe "room"<br>
-iframe "info"
iframe "room"<br>
-Room.html<br>
-->link "link_A"<br>
-->link "link_B"<br>
iframe "info"<br>
-A.html (some text)<br>
-B.html (some text)<br>
Within the "room" iframe I am loading Room.html where there are multiple links contained (link_A and link_B). Clicking a link (link_A) is supposed to change "info" iframe to show A.html. Again, clicking link_B is supposed to change "info" iframe to show B.html. All html pages are on the same domain.
I understand how to link a child to a parent, but I am trying to figure out how to display different html pages in a specific iframe within a parent html page from a third html page.
Can anyone point me to an answer? Would I need to use an if() function in House.html and a target value from link_A or link_B?
From http://webdesign.about.com/od/iframes/qt/target-links-iframes-and-frames.htm
When you create a document to be inside an IFRAME, any links in that frame will automatically open in that same frame. But with the target attribute on the link (the A element or AREA element) you can decide where your links should open.
You can choose to give your iframes a unique name with the id attribute and then point your links at that frame with the ID as the value of the target attribute.
For your specific example, it would look something like:
Page A
Page B
You could use JavaScript to change the src attribute of the second iframe. You can do that with jQuery - e.g. put this code into iframe1 (untested).
$('a').click( function() {
$('#iframe2', window.top.document).attr('src', 'new-src.html');
});
Note that the parent page and the frames need to come from the same domain and subdomain (due to the single origin policy). If that's not the case, you would probably need to reload the whole page, by putting target="_top" in the link inside the iframe, and changing the src on the server side.