I've got a problem with Blazor, probably something with routing. I'm using MudBlazor components and I can see a strange behavior. I've got the navigation menu (MudNavMenu) and when I'm choosing to go to another page, it redirects me successfully, however it's not redirecting to the beginning of the page - it's redirecting to the same moment as the last page.
So for example: You scrolled all the way down, Yoy were at the end of the page, then You choose to go to another page and this page is loaded at the end, not at the beginning.
I have no idea why is that (and I would like a new page to be loaded at the beginning of course). I tried with normal href, MudBlazor Href, hrefs/Hrefs with Id (#), code-behind NavigationManager with NavigateTo method. It behaves same for every solution.
MainLayout.razor:
<MudLayout>
<MudAppBar Style="background-color: #FFFFFF">
<MudImage Width=200 Src="images/svg/logo-blue.svg"></MudImage>
<p class="title-text">Some Title</p>
<MudSpacer />
<MudIconButton Icon="#Icons.Material.Filled.Menu" Color="Color.Info" Edge="Edge.End" OnClick="#((e) => DrawerToggle())" />
</MudAppBar>
<MudDrawer #bind-Open="#_drawerOpen" Anchor="Anchor.Right">
<NavMenuMud />
</MudDrawer>
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.Medium" Class="pt-5">
#Body
</MudContainer>
</MudMainContent>
</MudLayout>
#code {
bool _drawerOpen = false;
void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
NavMenuMud.razor
<MudNavMenu Bordered="true" Rounded="true" Margin="Margin.Dense" Color="Color.Info" Class="pa-2">
<MudText Typo="Typo.h6" Class="px-4">Navigation</MudText>
<MudText Typo="Typo.caption" Class="px-4 mud-text-secondary">Click to navigate</MudText>
<MudNavLink Href="/" Match="NavLinkMatch.All" Icon="#Icons.Rounded.Home">Main page</MudNavLink>
<MudNavLink Href="/Example1" Match="NavLinkMatch.Prefix" Icon="#Icons.Rounded.Info">Example1</MudNavLink>
<MudNavGroup Title="List" Icon="#Icons.Rounded.ListAlt">
<MudNavLink Href="/Example2">Example2</MudNavLink>
<MudNavLink Href="/Example3">Example3</MudNavLink>
<MudNavGroup Title="Examples">
<MudNavLink Href="/Examples/Example4">Example4</MudNavLink>
</MudNavGroup>
</MudNavGroup>
</MudNavMenu>
Beside these, I have some razor components with content of course (some MudTexts, MudPapers etc., nothing questionable).
I'm facing a similar problem. A long search for a solution to this problem led me to change here, I didn't find an answer here, I started digging guides for redirecting to blazor wasm.
And I noticed that I didn't read the guides carefully, in general, the App.razor file contains the following standard code:
<Found Context="routeData">
<RouteView RouteData="#routeData" DefaultLayout="#typeof(MainLayout)" />
<FocusOnNavigate RouteData="#routeData" Selector="h1" />
</Found>
From this code as a whole, it becomes clear that when switching to another page, the priority is towards the <h1> tag.
Just add the <h1> tag to the page and when you go to this page, you will be redirected to this tag
Related
I've got an un-complicated .aspx page and I've added some bookmark anchors at that re-direct to a different page with bookmarks.
The anchors look like this:
From http://www.davincispainting.com/painting-solutions
<a class="questionLink" href="painting-answers#Answer7">Paint Chalking</a>
When you click on this Hyperlink in Firefox, the URL does indicate the bookmark:
http://www.davincispainting.com/painting-answers#Answer7
However, this do not navigate to the actual bookmark in the 2nd page
<h2 id="answer7">Paint Chalking</h2>
The problem occurs in Firefox but not IE8.
I originally thought that the Routing was causing the issue, as I do not inlcude the .aspx page extension in the link. So I added the extension, which still doesn't work.
<a class="questionLink" href="painting-answers.aspx#Answer7">Paint Chalking</a>
How can I debug this problem?
Does the page file end in an extension? If so, make sure your link includes the extension. Also, check your capitalization. Also, the standard practice for the bookmark syntax is to not navigate based on ID of a random control, but rather the anchor tag. See W3 Schools Example.
You should have...
<a id="answer7" />
<h2>Paint Chalking</h2>
and the link should look like this:
<a class="questionLink" href="PATHTOPAGE#answer7">Paint Chalking</a>
Where PATHTOPAGE is replaced with the absolute or relative path to the other page. Make sure that resolves.
The problem was the name itself:
<h2 id="Answer7" style="font-size:1.5em; color:Green;">Paint Chalking</h2>
is different than:
<h2 id="answer7" style="font-size:1.5em; color:Green;">Paint Chalking</h2>
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
So, my boss has this crazy idea - the whole website working on one single page. So far - still ok, but here's the thing:
- the different pages have different divs with content (like usual), and when some div is clicked (or link in it) some of the divs expand/collapse, working in the way of revealing different content. That's fine, but...
he doesn't want to use JavaScript or anything for dynamic view of the website ('cuz I am leaving in 2 weeks and him and the other employee are not capable of JS, thus cannot improve/maintain if needed)
his idea is to have the HTML code, for all the pages variations of the website, stored in the database, and upon clicking some link - reloading the page with the certain HTML. So not different .html files for every page, but only one for all of them.
The problem is that it works for the first page that I load, initially, but then when I call another page, it gets twisted, since I call the function, that retrieves the HTML, but the other call of the previously loaded page is still there, so it calls again. Here's sample, so you understand:
<script runat="server" type="text/C#">
public string getPage(string name)
{
string page = "null";
switch (name)
{
case "media":
page = getMediaPage(); <!-- just function from the code-behind that retrieves the html code from the DB and passes it to the page -->
break;
case "home":
page = getHomePage(); <!-- just function from the code-behind that retrieves the html code from the DB and passes it to the page -->
break;
}
return page;
}
</script>
</head>
<body onload="addEvents();">
<form id="form1" runat="server">
<div id="parent">
<div id="presentation">
SomeCompany ApS Street3 | CITY | INFO#Comapny.com TLF: 999999
</div>
<%=getPage("home") %>
</div>
</form>
So that's how the initial page will be and then just in the parent div I will call the HTML for the other pages. One example of HTML, stored in the DB:
<div id="mainmenu">
<b>HOME</b>
<br />
PRODUCTS
<br />
SUPPORT
<br />
CONTACT
<br />
ABOUT
<br />
</div>
<div id="logo">
</div>
So I call this chunk of code slam it in the page. The twist happens as I have <a href="<%=getPage("media")%>"> clicked, so it loads the page normally, but there is <%=getPage("home") %> standing statically in the page, ALL THE TIME, as I need to start from somewhere, and it attempts to load the previous page again, and... server error.
I know it's kinda stupid idea, but I can't argue with him anymore.
So my question is - is there way of handling all this with some kind of OnClick(Event e) or some other way out, with calling different functions (as I already started).
Or I should just tell the boss that it's not gonna work this way...
As stated, this isn't a great idea, but you could get it to work by using some Web Controls.
Where you have <%=getPage("home") %> in your page, change this to:
<asp:literal id="ltlContent" runat="server" />
On Page_Load call:
ltlContent.Text = getPage("home");
Any links on your page which should load other content, change these to LinkButton controls, and their click events could have:
<asp:LinkButton id="linkMedia" runat="server" onclick="LoadContent" CommandArgument="media" />
public void LoadContent(object sender, EventArgs e){
ltlContent.Text = getPage(e.CommandArgument);
}
you could try the parameters on the get url.
add them on your link "?page=media"
and then you parse the url when you arrive $_GET["page"]
I have a link on one page that needs to go to a different page, but load to a specific section on that other page.
I have done this before with bootstrap but they take all the 'coding' out of it, so I need to know how to do from scratch. Here is the markup I have based on this link (not the best resource, I know): http://www.w3schools.com/html/html_links.asp
**Page One**
<a href="/academics/page.html#timeline> Click here </a>
**Page I am linking to**
<div id="timeline" name="timeline"> ... </div>
Can I do this with just HTML, or do I need some JavaScript? If I need to do it via JS, it needs to be on the target page, right?
I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:
<div id="timeline" name="timeline" ...>
To the old format:
<a name="timeline" />
You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.
Also, check out this similar question.
You can simply use
<a href="directry/filename.html#section5" >click me</a>
to link to a section/id of another page by
To navigate to a section of another page use:
<a href="example.html#example-section>name-of-link</a>
The example.html would be the page you want to go to, and the #example-section would be the name of the id on that page that you want to navigate to.
To link from a page to another section of the page, I navigate through the page depending on the page's location to the other, at the URL bar, and add the #id. So what I mean;
This takes you #the_part_that_you_want at the page before
I tried the above answer - using page.html#ID_name it gave me a 404 page doesn't exist error.
Then instead of using .html, I simply put a slash / before the # and that worked fine. So my example on the sending page between the link tags looks like:
El Chorro
Just use / instead of .html.
To link from a page to another section just use
my first div
In a Jumi script, I'm generating the following HTML:
<h3>Header title</h3>
When I view the page, Firebug indicates that the element has turned into this:
<h3>
<a _moz-rs-heading="" name="header-title">Header title</a>
</h3>
This does not appear in the page source, so it has been changed dynamically somehow. However, even if JavaScript is disabled, this will happen.
So why would I want to suppress this useful feature? Well, I reload the page content with AJAX every ten seconds or so. Content introduced by jQuery('#my_container').html(...) does not have its header tags rewritten. Thus, after ten seconds, the header tags will turn from blue to black.
My questions are:
What part of the Joomla source code is responsible for these header tag rewrites?
How can I create header tags that opt out of such rewrites?
Joomla builds header in this file:
/libraries/joomla/document/html/renderer/head.php
You can skip Joomla headers by removing following line from your template's index.php file:
<jdoc:include type="head" />