I have a simple unordered list with links in it.
<body>
<div id="topMenu">
<ul>
<li><a class="selected" href="../Default.aspx">Start</a></li>
<li>Categories</li>
<li>Elements</li>
<li>Articles</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="MainContentPlaceholder" runat="server">
</asp:ContentPlaceHolder>
</body>
I want to change the class of the link i click to the "selected" class, which is the easiest way to do this. I thought about making it into linkbuttons and saving the info in the session, but that seems overkill, there has to be an easier approach?
Well, you can just put the <a> to be runat="server" and then access them from codebehind:
hyperLink.Attributes["class"] = "opened";
You can have this in your master page with the menu, and you can have your child pages send the id of the hyperlink they need selected, something like
In your master (the linkWrapper can be your <ul> as runat server):
(HyperLink)linkWrapper.FindControl(childPageMenuAnchorLinkId);
In your child:
masterPage.ChildPageMenuAnchorLinkId = "link_Customers";
If you are using jQuery, the link from this other SO question may help you out.
jQuery add class .active on menu
EDIT:
Corrected script to use the 'selected' class, not 'active' according to OP's use.
So, if I "borrow" the script from the other answer, I believe this will work, again, if you are using jQuery...
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('#topMenu ul li a').each(function(){
// and test its normalized href against the url pathname regexp
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('selected');
}
});
});
Related
This works …
Link text
but this doesn't …
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById("mylink");
a.onclick = function() {
parent.document.getElementById('frameName').src = 'page.html';
}
}
</script>
<a id="mylink" href="page.html">LINK</a>
Any idea why I can't get the element by id from one iFrame to another? Also I know very little code so I apologize in advance if its obvious.
First i would make sure that the security of the site within the IFrame allows you to do this kind of stuff. Check out this link:
Overcoming "Display forbidden by X-Frame-Options"
Next, i would worry about the target of your anchor tag. With specifying it will default to self. In your second piece of code the target will be _self. Thus, when you click the link your javascript will want to change the source of the IFrame while the link will want to change the entire page. I would pick either a JS or HTML implemetation of linking and not both. Here is something that i put together to show one way of changing the iFrame without an actual anchor tag.
<html>
<body>
<iframe id="frameName" src="page.html"></iframe>
<button onclick="changeFrame()">LINK</button>
<script>
function changeFrame() {
document.getElementById('frameName').src ='page2.html';
}
</script>
</body>
</html>
This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible...
So I have this code...
<script type="text/javascript">
var pages=new Array();
pages[0]="listItem1.html";
pages[1]="listItem2.html";
pages[2]="listItem3.html";
pages[3]="listItem4.html";
pages[4]="listItem5.html";
var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
document.getElementById('the_iframe').src=pages[end];
i=0;}
else {
document.getElementById('the_iframe').src=pages[i];
i++;}}
if (operation=="back") {
if (i==0) {
document.getElementById('the_iframe').src=pages[0];
i=end;}
else {
document.getElementById('the_iframe').src=pages[i];
i--;}}}
</script>
</head>
<body>
<ul id="menu" role="group">
<li>Welcome
<ul>
<li>Ease of Access Center</li>
</ul>
</li>
<li>Getting Started
<ul>
<li>Considerations</li>
<li>Changing Perspective</li>
</ul>
</li>
</ul>
<iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe>
<input type="button" onClick="changeSrc('back');" value="Back" />
<input type="button" onClick="changeSrc('next');" value="Next" />
and if I click on the next or prev button, it does move somewhere,but...
let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3).
It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5.
Many Thanks For Any Help!
Okay, I'll try the code, but don't down-rate it if its off.
This is the function that you could put before the changeSrc function:
function UpdateI(value) {i = value}
This the one click event that you would add to your links in the a tag. Off course, the 4 that is sent the function in this case, would be changed to whatever is appropriate for whatever ListItem is being referenced:
onClick ="UpdateI(4)"
Does this help you?
I don't understand your code here:
document.getElementById('the_iframe').src=pages[i];
i++;
If that is going to advance to the next element AND display it, you need to increase i first. Perhaps I'm just missing something, though.
I think your problem is that if the user clicks one of your direct links, rather than "next" and "previous" i in your code is not getting updated. So if your on page 2 and click the link for 4 and then click back, i is currently 2 and not 4. Hope that helps you. Be sure mark it as the answer if it does.
add an on click event to each of the link tags that would call a single function just like you have in the input tags. Have the function take an input of some number and assign that number to i. That should do it. Sorry I cant show any source code, JAVASCRIPT is not my language. I can read it but I wouldn't dare to write code from scratch. Hope this helps you.
I am using select2 on dropdownlist of asp.net. The code is as follows:
<script type="text/javascript" src="js/select2.min.js"></script>
<link type="text/css" rel="Stylesheet" href="css/select2.css" />
var v = /* get the select control */
v.select2();
The problem is, once select2() function is called, tab ordering stops working. Therefore, when on the dropdownlist tab key is pressed, focus do not move to the control having next highest tabindex but move seemingly randomly to some other control.
Commenting the line where the function is called solve this problem but I need the filtering. I have tried some of the other techniques of filtering discussed here but they are too complicated. Select2 is very simple and useful because all you have to do is include the JS and CSS files and call the function.
How can I solve this ordering problem? Alternatively, is there another filtering option as easy to use as select2 that would help me?
After a few hours of struggle, I have solved the problem. It turns out that the select2 AJAX control do destroy the tab order if the tab is pressed as soon as it gets focus, that is, when nothing is typed in it. It does not, however, destroy tab ordering if some text is typed.
The internal structure of select2's auto-generated HTML is like following:
<div class="select2-container">
<a class="select2-choice">
<span</span>
<abbr class="select2-search-choice-close" />
<div> <b></b> </div>
</a>
<div class="select2-drop select2-offscreen">
<div class="select2-search">
<input class="select2-input select2-focused" tabIndex=<somevalue> />
</div>
<ul class="select2-results></ul>
</div>
</div>
If some text is typed in the HTML select control, then tab ordering is working correctly, if no text is typed then tab order is destroyed. I have used document.activeElement in firebug to find focused control in both cases. In case of no text the anchor element has focus, and in case of text typed the HTML input element has focus.
As shown above, while select2.js correctly set tabIndex property of HTML input element, it does not of the anchor element.
Solution
Just add the following line at the position specified further below in select2.js:
this.container.find("a.select2-choice").attr("tabIndex", this.opts.element.attr("tabIndex"));
Add the line after:
this.opts.element.data("select2", this).hide().after(this.container);
this.container.data("select2", this);
this.dropdown = this.container.find(".select2-drop");
this.dropdown.css(evaluate(opts.dropdownCss));
this.dropdown.addClass(evaluate(opts.dropdownCssClass));
this.dropdown.data("select2", this);
this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");
and before:
search.attr("tabIndex", this.opts.element.attr("tabIndex"));
this.resultsPage = 0;
this.context = null;
// initialize the container
this.initContainer();
this.initContainerWidth();
installFilteredMouseMove(this.results);
this.dropdown.delegate(resultsSelector, "mousemove-filtered", this.bind(this.highlightUnderEvent));
installDebouncedScroll(80, this.results);
this.dropdown.delegate(resultsSelector, "scroll-debounced", this.bind(this.loadMoreIfNeeded));
So it becomes:
this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");
this.container.find("a.select2-choice").attr("tabIndex", this.opts.element.attr("tabIndex")); /* atif */
search.attr("tabIndex", this.opts.element.attr("tabIndex"));
this.resultsPage = 0;
this.context = null;
Make this change in select2.js. Obviously, you need to use the full js version, not the min version.
All you have to do is add one line, stated above. This would become line no#504 in VS2008 if done correctly.
I want to add a hyperlink to a social bookmarking site om my webpage which requires me to include the name of the page it is being sent from.
Example of what I am trying to achieve:
Current page is:
http://www.testpage.com/testpage.aspx?test=34
Hyperlink I want to create on the above page:
http://www.stumbleupon.com/submit?url=http://www.testpage.com/testpage.aspx?test=34
What is the easiest way to programmatically add this customised hyperlink to a webpage?
Assuming that you have a hyperlink like that :
<asp:HyperLink runat="server" ID="myLink" Text="stumbleupon"></asp:HyperLink>
At server side :
string currentPagesUrl =
HttpUtility.UrlEncode(HttpContext.Current.Request.Url.AbsoluteUri);
myLink.NavigateUrl = string.Format("http://www.stumbleupon.com/submit?url={0}",
currentPagesUrl);
Or an alternative way (this one is easier I think) :
<a href="http://www.stumbleupon.com/submit?url=<%= HttpUtility.UrlEncode(HttpContext.Current.Request.Url.AbsoluteUri) %>" target="_blank">
stumbleupon 2</a>
I second Canavar's answer. You might want to also URL encode the currentPagesUrl string when building the hyperlink:
myLink.NavigateUrl = string.Format("http://www.stumbleupon.com/submit?url={0}",
Server.UrlEncode(currentPagesUrl));
Using jQuery:
$(document).ready(function(){
$("a.stumblethis").each(function(){
$(this).attr("href", "http://www.stumbleupon.com/submit?url="+$(this).attr("href"));
});
});
This will convert all links that have a class of "stumblethis".
When I navigate on a website utilizing MasterPages, does the application know what page I am on? If so, does it store it in an object I can access?
The reason I am asking is so I can replace this:
//masterpage
<div id="nav_main">
<ul><asp:ContentPlaceHolder ID="navigation" runat="server">
</asp:ContentPlaceHolder></ul>
</div>
//content page(s)
<asp:Content ContentPlaceHolderID="navigation" ID="theNav" runat="server">
<li>Home</li>
<li id="current">FAQ</li>
<li>Videos</li>
<li>Button 4</li>
<li>Button 5</li>
</asp:Content>
With a more elegant solution for the navigation, which highlights the link to the page by having the list item's ID set to "current". Currently each page recreates the navigation with its respective link's ID set to current.
I'd concur with Chris: use a control to handle display of this menu and make it aware of what link should be highlighted. Here's a method I use regularly. It may become more complex if you've got multiple pages that would need the same link styled differently, but you get the idea.
Dim thisURL As String = Request.Url.Segments(Request.Url.Segments.Count - 1)
Select Cast thisUrl
Case "MenuItem1.aspx"
lnkMenu1.CssClass = "Current"
Case "MenuItem2.aspx"
lnkMenu2.CssClass = "Current"
End Select
To get the current request URL from within the master page you would do:
string s = this.Page.Request.FilePath; // "/Default.aspx"
I also recommend moving your navigation into the master page instead of the content page. This will make it easier to maintain / access.
Yes, Use the below code in your master file. It will give you the content page name.
Page.ToString().Replace("ASP.","").Replace("_",".")
Alternatively you can search for page title if you have set an specific title to the child page instead of masterpage try:
this.Page.Title
Hope it helps.
this is in C#
string thisURL = Request.Url.Segments[Request.Url.Segments.Length - 1];
if (thisURL.ToLower()== "default.aspx") li1.Attributes.Add("class","yekan active");
if (thisURL.ToLower() == "experts.aspx") li2.Attributes.Add("class", "yekan active");
You should be able to get the page by accessing the Page property. IE:
string type = this.Page.GetType().Name.ToString();
You'd probably just use one of the Request path from within the master page to set the current. I'd probably also have a property on the master page to override it, so that pages without links or something could set it to something reasonable.
It worked for me this way - Thanks Jared
This is what I did to get our nav menu to highlight the current menu item for the page that we are viewing. The code is in the master page.
You basically get the filepath (Jared's way)
We use the "~" in our links so I had to strip that out.
Iterate the menuItems collection of the Menu control.
Compare the navigateUrl property.
(I'm not the best coder and even worse at explaining - but it works and I was quite chuffed with it!)
protected void HighlightSelectedMenuItem()
{
string s = this.Page.Request.FilePath; // "/Default.aspx"
string nav;
if (s.Contains("~"))
{
s = s.Remove(s.IndexOf("~"), 1);
}
foreach (MenuItem item in navMenu.Items)
{
if (item.NavigateUrl.Contains("~"))
{
nav = item.NavigateUrl.Remove(item.NavigateUrl.IndexOf("~"), 1);
if (s == nav)
{
item.Selected = true;
}
}
}
}
string s = this.Page.GetType().FullName;
string[] array = s.Split('_');
int count = array.Count<String>();
string currentPage = array[count - 2];
The navigation control, not the master page, should be in charge of what page is currently highlighted.
Either the page that is loaded should notify the navigation item who it is, or the nav control itself should keep track of it.
The point is that master pages are supposed to simply be a holder that content is displayed in. They aren't supposed to control anything.
try
this.Page.Master
It will get you the master page of the current page.
There's also the Request.RawURL