How do you link to a place in another page without any styling issues? - css

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;
}

Related

Link to specific tab in wordpress layout?

I have created a layout in Wordpress with a plug-in called builder. I then have a page that uses this layout. The layout contains a area with tabs.
When the user clicks on a link in my main menu he is taken to this page with the first tab open. Can I change the link to take him to the second tab instead?
Actually the menu looks like this
About us
-Overview
-History
-Contact
If the user clicks on about us or overview I want him to go to the first tab.
I guess you must create something with an HTML anchor OR
$(document).ready(function() {
$('#tabs #2nditemid').click();
});
OR
$(document).ready(function() {
$('#tabs li').hide();
$('#tabs li.2nditemid').show();
});
This may vary a bit but may lead you somewhere
this must be specific only to where you have the tabs... so best is to create a page theme only for this specific page to avoid extra jquery in all pages

Change HTML/CSS from ASP(C# or VB) code

In my case, I have an HTML/CSS Menu in the site master.
So, when you hover your mouse over "Graphics", it highlights it (using CSS onHover).
Now what I need to do is that when you actually click on "Graphics" (and it takes you to the graphics page), it remains highlighted, if possible in a different colour.
I'm thinking of modifying the Site.Master style from C# or VB code.
Any ideas? Thanks.
An idea would be to check what page you are in, and apply a css class:
<li class="<%= this.Page.ToString().ToLower().EndsWith("graphics_aspx") ? "selected" : "normal"%>">
Graphics<li>
Hope it helps!
You can either use the CSS active state if the page you are on directly relates to the link, however if the menu points to sections (i.e. multiple pages) you may need to use a bit of server side code to your master page, that gets the requested URL and determines which link is active. Usual convention is to then add the class 'active' or similar to the outputted html.
You can convert the UL/LI with runat = "server" and finally add styles in the code behind
Example
Control.Style.Add("display", "none");

How to click on Toolbar element with Sahi for Test Automation?

Web page contain a button with some text for example "Test". This button actually is a toolbar element. (class ="tbButton" id="id",text="Test") and redirects to a certain table when press on it.
When I tried to use the following click methods, the button did not react.
browser.div("Test").click();
browser.click("id");
browser.click("");
browser.div("id").click();
browser.byId("id").click();
browser.containsText(browser.byId("id"),"Test");
browser.div("Test").in(browser.table("Generar")).click();
browser.byXPath("//div/Test").click();
Could anybody suggest me an alternative methods that is able to resolve the above problem?
Try with:
browser.xy(browser.div("Test"), 10, 10).click();
This will click a little inside the div.

How do I link different child html in a single parent html from a second child html?

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.

How to prevent a hyperlink from linking

Is it possible to prevent an asp.net Hyperlink control from linking, i.e. so that it appears as a label, without actually having to replace the control with a label? Maybe using CSS or setting an attribute?
I know that marking it as disabled works but then it gets displayed differently (greyed out).
To clarify my point, I have a list of user names at the top of my page which are built dynamically using a user control. Most of the time these names are linkable to an email page. However if the user has been disabled the name is displayed in grey but currently still links to the email page. I want these disabled users to not link.
I know that really I should be replacing them with a label but this does not seem quite as elegant as just removing the linking ability usings CSS say (if thats possible). They are already displayed in a different colour so its obvious that they are disabled users. I just need to switch off the link.
This sounds like a job for JQuery. Just give a specific class name to all of the HyperLink controls that you want the URLs removed and then apply the following JQuery snippet to the bottom of your page:
$(document).ready(function() {
$('a.NoLink').removeAttr('href')
});
All of the HyperLink controls with the class name "NoLink" will automatically have all of their URLs removed and the link will appear to be nothing more than text.
A single line of JQuery can solve your problem.
I'm curious on what it is you which to accomplish with that. Why use a link at all?
Is it just for the formatting? In that case, just use a <span> in HTML and use stylesheets to make the format match the links.
Or you use the link and attach an onClick-Event where you "return false;" which will make the browser not do the navigation - if JS is enabled.
But: Isn't that terribly confusing for your users? Why create something that looks like a link but does nothing?
Can you provide more details? I have this feeling that you are trying to solve a bigger problem which has a way better solution than to cripple a link :-)
A Hyperlink control will render as a "a" "/a" tag no matter what settings you do. You can customize a CSS class to make the link look like a normal label.
Alternatively you can build a custom control that inherits from System.Web.UI.WebControls.HyperLink, and override the Render method
protected override void Render(HtmlTextWriter writer)
{
if (Enabled)
base.Render(writer);
else
{
writer.RenderBeginTag(HtmlTextWriterTag.Span);
writer.Write(Text);
writer.RenderEndTag(HtmlTextWriterTag.Span);
}
}
}
Could be a bit overkill, but it will work for your requirements.
Plus I find is usefull to have a base asp:CustomHyperlink asp:CustomButton classes in my project files. Makes it easier to define custom behaviour throughout the project.
If you merely want to modify the appearance of the link so as not to look like a link, you can set the CSS for your "a" tags to not have underlines:
a: link, visited, hover, active {
text-decoration: none;
}
Though I would advise against including "hover" here because there will be no other way to know that it's a link.
Anyway I agree with #pilif here, this looks like a usability disaster waiting to happen.
If you mean to stop the link from activating, the usual way is to link to "javascript:void(0);", i.e.:
foo
This should work:
onclick="return false;"
if not, you could change href to "#" also. Making it appear as a rest of text is css, e.g. displaying arrow instead of hand is:
a.dummy {
cursor:default;
}
Thanks for all the input, it looks like the short answer is 'No you can't (well not nicely anyway)', so I'll have to do it the hard way and add the conditional code.
If you are using databind in asp.net handle the databinding event and just don't set the NavigateUrl if that users is disabled.
Have you tried just not setting the NavigateUrl property? If this isn't set, it may just render as a span.
.fusion-link-wrapper { pointer-events: none; }
Another solution is apply this class on your hyperlink.
.avoid-clicks {
pointer-events: none;
}
CSS solution to make tags with no href (which is what asp:HyperLink will produce if NavigateURL is bound to null/empty string) visually indistinguishable from the surrounding text:
a:not([href]), a:not([href]):hover, a:not([href]):active, a:not([href]):visited {
text-decoration: inherit !important;
color: inherit !important;
cursor: inherit !important;
}
Unfortunately, this won't tell screen readers not to read it out as a link - though without an href, it's not clickable, so I'm hoping it already won't be identified as such. I haven't had the chance to test it though.
(If you also want to do the same to links with href="", as well as those missing an href, you would need to add pointer-events:none as well, since otherwise an empty href will reload the page. This definitely leaves screen readers still treating it as a link, though.)
In the OP's use case, if you still have the href being populated from the database but have a boolean value that indicates whether the link should be a 'real' link or not, you should use that to disable the link, and add a:disabled to the selector list above. Then disabled links will also look like plain text rather than a greyed-out link. (Disabling the link will also provide that information to screen readers, so that's better than just using pointer-events: none and a class.)
A note of caution - if you add these sorts of rules globally rather than for a specific page, remember to watch out for cases where an tag has no (valid) href, but you are providing a click handler - you still need those to look/act like links.

Resources