I'm trying to create a page where links are generated dynamically and added into existing DIV element in my masterpage.
Currently, I'm using Html.ActionLink() to display links, but I want to do it dynamically when the page loads.
In my code behind, I cannot reference menu item to add links to it. Is there anything I'm missing?
This is the fragment from my master page now.
<div id="menu" runat="server">
<ul>
<li><%: Html.ActionLink("Page1","Page1","Home") %></li>
<li><%: Html.ActionLink("Page2","Page2","Home") %></li>
<li><%: Html.ActionLink("Page3","Page3","Home") %></li>
</ul>
</div>
Right now, I'm just trying to come up with a basics so, I'm simply trying to get just one link displayed. Later on, I will want to replace all the ActionLinks to be generated from code behind.
This is the part from my master.cs to generate just one link for now:
String str = Url.Action("Page1", "Home");
HyperLink hp = new HyperLink();
hp.NavigateUrl = str;
hp.Text = "Page1";
menu.Controls.Add(hp);
I found the solution. What I needed to do is just to find my div control on the page and add the link control to it:
HtmlGenericControl div = this.FindControl("menu") as HtmlGenericControl;
div.Controls.Add(hp);
Related
I have an Accordion Tab repeater that I would like to add an anchor tag to each unique title within the transformation.
Here is my code:
<li>
<a href="#tab-<%# DataItemIndex+1%>-<%# Container.Parent.Parent.ClientID %>" title="<%# Eval("Title") %>">
<span class="tab-item-title"><%# Eval("Title") %></span>
<span class="ui-icon"></span>
<%# String.IsNullOrEmpty(Eval<string>("MainText")) ? "" : "<div class=\"tab-item-subtitle\">" + Eval("MainText") + "</div>" %>
</a>
</li>
I tried adding:
<a id="<%# Eval("AnchorLinkName") %>" name="<%# Eval("AnchorLinkName") %>"></a>,
but it didnt work.
No need to post this in both the DevNet and SO. The DevNet automatically includes SO posts tagged as "kentico". Reference original answer here:
https://devnet.kentico.com/questions/adding-an-anchor-tag-in-a-repeater-transformation
Typically what you do in this case is have a datasource web part on the page and specify the necessary fields (where, page types, order by, etc.). You take note of the datasources name and add that to two repeaters on the page. One repeater is or your anchor link navigation and the other is the actual content you wish to display (link to).
One thing to note, is the anchor link needs to be a URL friendly value. So something with spaces or un-encoded URL values will NOT work.
In your navigation repeater (where you link FROM), you'll need something like the following in the transformation:
<li>
<%# Eval("DocumentName") %>
</li>
In your listing repeater (where you link TO), you'll need something like the following in the transformation:
<div class="faq-item" id="faq-<%# Eval("DocumentID") %>">
... your content here
</div>
Reference W3Schools Bookmarks
I own a website at https://shadowdragonp.github.io/ using a somewhat well-known template called "Squadfree."
On the navigation bar, there are your typical buttons, such as "home", "about", "contact", etc. However, there is also a drop-down menu (not hyperlinked) called "Portals" that takes you to various sub-directories. Although the navigation bar changes depending on the sub-directory, the "portals" menu will always be the same on every page.
The "portals" menu will include more items on the list as time goes on. I do not want to edit all of the pages when I add an item to the portal menu, so I am looking for a way to possibly reuse code for the HTML. All suggestions are welcome!
<li class="dropdown">
Portals <b class="caret"></b>
<ul class="dropdown-menu">
<li>Music</li>
<li>Games</li>
<li>Software</li>
<li>Image Gallery</li>
</ul>
</li>
Add a new html file to a directory something like PortalSubMenu.html. write the code you want to reuse inside of this newly created html document. In your case its gonna be the code your wrote above. Now assign an Id to your navigation bar lets say id="menu". Once done write the following script just before the ending of body tag ''.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
//wait until the dom is fully loaded
$(document).ready(function () {
//adds PortalSubMenu.html content into "#menu" element
$('#menu').load('PortalSubMenu.html');
});
</script>
Don't forget to remove the Portal navigation drop down from man page as this will be coming from separate source. For more info take a look at this Stack Overflow thread Link
I hope you will achieve what you are looking for but I still recommend you to use some server side rather then plain html. because in that case you will generally have a master page or Layout page where you can define things that will stay same across your websites.
I am working with Semantic UI in a rails project and wanted to create a dropdown menu with items that would link to other view pages. Most of the problems i've seen with the dropdown stemmed from users not initializing the dropdown menu which I was able to do.
Here's my code:
<div class="ui floating dropdown button">
Course<i class="dropdown icon"></i>
<div class="menu">
<% #topics.each { |topic| %>
<a class="item" href="articles/<%= topic.id %>">
<span class="text"> <%= topic.name %></span>
</a>
<% } %>
</div>
</div>
Different things i've tried:
Creating a separate hardcoded links / a tags like <a href="articles/4"> outside of the dropdown menu. This creates a working link and directs me to the article show view page with the id of 4.
Changed the wrapping 's class as "ui floating dropdown item" as well
I've also looked up other users' posts that shows they have the same exact problem. But when i try their solution, my dropdown menu items still do not work and i'm not sure what i'm doing wrong. Here are their posts:
https://github.com/Semantic-Org/Semantic-UI/issues/3234
https://github.com/Semantic-Org/Semantic-UI/issues/453
The two most important things seem to be:
Not putting the dropdown class definition as part of an anchor tag (inserting an anchor tag inside an anchor tag in the dropdown menu)
Not surrounding each anchor tags with their own <div class="items"> tags but to integrate them into one line like <a class="item" href="#"> # </a>
Can anyone help me understand what i might be overlooking? Let me know if i left out any critical information, would love to update the post with the relevant data right away, thank you!
After doing more and more research, I came to the conclusion that the links were not working in my semantic-ui dropdown menu because of some code, most likely Javascript, that i had inserted before.
Of course, i ruled this way out of the realm of possibility because there was no way i would forget about such code but i decided to go through all of my .js files just in case.
Lo and behold, i had a jQuery selector return false when a .item was being clicked...
I felt really silly and i didnt want to believe it at first but if you're having this problem and you've checked everything else like i have, it's probably your javascript!
Can someone please offer me some advice?
I'm trying to customise a website and its HTML Nav Menu. By default, the menu already highlights the current tab for all existing pre-built pages.
http://webservices.retrotorque.com
I've added a new page to the website - Website Design - and I've added a tab to the menu for that page. All fine. But I can't find a way of making that tab become highlighted for only when that page is viewed.
Here is the existing code for one of the default tabs, which works fine.
<li class="first <#tag:homesection /#>">
Home
Here's my code for the menu tab I've created for my new page:
<li class="levelone <#tag:webdesignsection /#> ">
Website Design
<li>
My problem is that I can't find where to define:
<#tag:webdesignsection /#>
So I may need to find another solution.
I've thought of another approach:
<li class="levelone active">
Website Design
<li>
This code does work, but only in so much as the tab is always highlighted, whichever page is being viewed.
Is there a way of wrapping this up in a 'conditional'? So that it only applies when viewing the websitedesign page. And I could have a non-active alternative, conditionally set up for when viewing any of the other pages.
Thanks.
i think you should put JQuery there that can addClass and removeClass active from li element.
there is for example
var url = document.URL;
$('#example li a[href="'+url+'"]').parent().addClass('active');
I am creating a hierarchical list with expandable/ collapsible list items. When a user clicks on a list item to expand it a table pops up with some info. Right now, grails is rendering all of the tables when the page is loaded. However, I only want the tables to be loaded when the list item is clicked. I am using partial templates to house the table html and using
<g:render>
To render them. Is there a way to convert the code I am going to post so that the div with class="list" to only load on click? If not, is there a way to call the g:render tag only on click?
<g:each in="${group2List}" var="item">
<li class="liClosed"><b>
${item}
</b> <%= Application.findAllWhere((group2): item, (group1): group).size() %>
<ul>
<div class="list">
<table id="portfolio">
<g:render template="tableHeader" />
<g:render template="applicationRow"
collection="${Application.findAllWhere((group2): item, (group1): group)}"
var="applicationInstance" />
</table>
</div>
</ul></li>
<br />
</g:each>
So, Is there a way to add an onClick event for the li that renders that div class="list" only on click? Or a way to call those g:renders onClick while keeping them inside the ul.
Thanks for any help!
Like #sudhir commented above, you can't load server-side content into client-side content. The grails tags are rendered once the page is loaded. But you can use ajax to load the data in the server and render a partial template with the new data in it. That's exactly what you need. You can check out this link that may fit your needs.