My question: How to create an on hover effect with for my ASP.net menu.
The problem is that since the standard ASP.net menu doesnt have an on hover function, its quite hard/impossible(?) to create.
After doing my homework i saw some people who tried it with css, jquery and other methods... but i would prefer 'normal' html or css without incredibly complicated solutions.
Should that really be impossible, is there any clear way how to use it?
Most of the css options failed, or were incredibly complicated.
What exactly should happen:
A menu item for example
<asp:MenuItem NavigateUrl="~/Pages/Test.aspx" Text="Test" Value="Test" Selectable="true"></asp:MenuItem>
Should get a different background because of on hover effect.
Maybe changing the CSS from within the C# code into something else?
Thanks for your answer!
~Solved~
Thank you very much for your help! The problem is solved thanks to both of the answers.
I tried inplementing that menu, when i noticed that in this menu the hover effect also didnt work. What was the problem? I use 2 css files. And because the first css file contained some instruction as to how to handle the a:hover, all of the other hover effects were ignored.
Now that i know why the hover effect wasnt working, i can solve this problem. Thank you both very much!
Alright guys, it took me quite some time to figure out how to create the on hover effect with the ASP.net menu. So, i found an easy way, without all the hard stuff or lots of code.
If you look at your asp page in your browser, go to page source. When you look at your menu, you will notice that it looks like this:
<li>
<a class="level1" href="Home.aspx">
<img src="../Images/home.png" alt="" title="" class="icon" />Home</a></li>
<li>
<a class="level1" href="Page2.aspx">
<img src="../Images/homehover.png" alt="" title="" class="icon" />Page2</a><ul class="level2">
The solution would be to change your css:
a:hover[href*="Home"][class*="level1"]
{
color: black;
}
This piece of CSS selects the A element, where (in the HTML) the attributes href and class contain(or are equal to) Home and level1.
It might be a bit different if you have a more complex menu then i do, for i have just 2 levels deep. (menu and submenu)
Hope it helps you guys!
Then this is the end of my first question/answer on stackoverflow.
Thanks for your help!
ps: If it doesnt work, remove all a:hover statements in all related css files to the page with the menu. It might also be a problem if you use the StaticHoverStyle/DynamicHoverStyle.
Related
I've been experimenting around a lot with the MudBlazor Library lately. I'm pretty happy with it and considering to use it in my next project. But currently I have a issue that confuses me.
To make the issue easier replicable, I created a new and clean demo solution in Blazor WASM ('ASP.NET Core Hosted' checkbox checked). In the client sided project, I installed the default MudBlazor Package and made all relevant code additions according to the documentation to make the library work.
I added the relevant MudTheme-Code to the MainLayout.razor-File, which in simplified terms currently looks like this:
#using MudBlazor;
#inherits LayoutComponentBase
<MudThemeProvider #ref="#_mudThemeProvider" IsDarkMode="true" />
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
About
</div>
<article class="content px-4">
#Body
</article>
</main>
</div>
#code {
private MudThemeProvider _mudThemeProvider;
}
Now the issue is that the DarkMode of the MudTheme works as intended, but only for the content inside the MainBody. The top-row (which I want to use as a header row for additional features) doesn't initially get applied after loading the page:
So I've tried to comment out the background-color line in the .top-row class of the MainLayout.razor.css-File, which doesn't seem to change anything, even after restarting the application.
Only when changing a line in the MainLayout.razor.css-File (even if it is just a comment) while the background-color line is also removed, then the top-row will also be in the dark-mode.
I can only guess why the application behaves like that. I've tried several ideas and googled around, but I wasn't able to find a solution for this.
So my two questions here are:
Why does the dark-theme have a conflict with the white background color in the css of the top-row, but not the rest of the application (body content of all pages)?
Why does the dark-theme not get applied to the top-row, unless I make a change in the MainLayout's css-File, even if it just a comment? What can I do to get the dark theme working after the initial rendering?
Let me know if you need any additional files or code from the solution.
Thanks!
This seems to me a cache problem.
You have several options:
Reload the page with CTRL + F5 (Windows/Linux) or ⌘ + ⇧ SHIFT + R (Mac)
Use the incognito mode of your browser (example for Chrome: https://support.google.com/chrome/answer/95464)
Disable the cache with developer tools (example for Chrome: Disabling Chrome cache for website development) - this my favourite, but remember that this setting is only active while the developer tools are open
He, I'm currently restyling a site that I'm working on. It's a VS2013 project and I'm still getting the hang of using Visual Studio for web dev.
Currently the project has quite a lot of <asp:HyperLink></asp:HyperLink> tags
I know that I can use <asp:HyperLink CssClass="testingCss"></asp:HyperLink> to change the css of these HyperLinks in css using classes but there are so many links that I'd have to edit to fix this. Is there any quicker way of dealing with this? Like making a default text color property in my site's css file?
For example, the css used in p tags:
p {
color:red;
}
I'm sure there has to be a way to do what I want to do like this p tag example I gave. Would appreciate any help I can get here as it should save a lot of time and maintenance.
Thank you in advance!
It will be a <asp:HyperLink> in your markup but when the page is rendered, this will be output as a regular HTML anchor - <a>
For this reason you can target it the same way you would any other anchor:
a { color:red }
Just Add this code to your css
a{color:#ff0000}
Turns out my problem was the bootstrap css conflicting with my other css file. I just changed the css in the bootstrap file to get what I wanted. You guys were right to say that you just need to change the a tag for HyperLinks in asp.net projects. Thanks for the help.
I am currently building a test harness for the company I work at. I have experience both with C# and WatiN and have never encountered the issue I am now having.
Below, is a snippet of the markup for the page giving me the issue:
<div id="toggle1" class="NavLayout toggle">
<span onClick="toggleMenu(1, false);">
<span id="toggletext1">Quote Processing</span>
</span>
</div>
As you can see, I have a div, 2 spans and an image. I am using WatiN to try and click the image, that will then expand the menu, exposing yet another layer that I will need to click something else on. The problem I am having is in getting the 'Click' to happen. From what I can see in the snippet, it seems to me I need to be able to click the event, but cannot 'find' it with the code.
Any help out there to be had?
I have also had issues with clicking on certain elements.
I've run into issues where I could only click on an element if it was highlighted by mousing over the element.
Since I cannot see your code snippet, I can't tell if there is any javascript that deals with mouseover associated with the image, but if there is, you can try the following:
img.FireEvent("onmouseover");
img.FireEvent("onmousedown");
img.FireEvent("onMouseup");
You might also might want to try img.FireEvent("onclick") as well.
These are all guesses, since I can't see your code. It's also possible that rather than clicking on the image element itself, that you may want to try clicking on the parent object.
EDIT:
Ok, now that I can see your code, it appears that you should fire an onClick event against the span with the 'onclick' code in it.
I don't see an image listed in your code snippet, but this code should call the parent of the lowest level span.
Watin.Core.Span span = browserinstance
.Span(Find.By("innertext", "Quote Processing"));
span.Parent.FireEvent("onclick");
The DOM content that you intended to post is not visible. You might want to edit your post and check if it is visible.
In order to click on images
Watin.Core.Image img = browserinstance.Image(Find By Constraint);
if (img!=null and img.Exists)
img.ClickNoWait();
OR
img.FireEvent("onclick");
I've got a Master Page with multiple ContentPlaceHolders. One of them will sometimes be empty. If they both have content, I'd like to make visible a buffer so there is some space between them, but this should remain hidden otherwise.
My question is, how can I determine from the C# code-behind of my Master Page whether the ContentPlaceHolder of a child page has any content assigned to it? All I really want is a boolean yes/no answer.
Thanks!
perhaps
YourContentPlaceHolder.Controls.Count > 0
Would that work for you?
Maybe I am missing something, but it seems you just need to get spacing. Why not just wrap the first ContentPlaceHolder in a div with a padding-bottom? There may be a more efficient way to do this, but you get the idea.
You could programmatically add a div to your first ContentPlaceHolder with something like ...
<div class="spacer" />
and in your css have this ...
div.spacer { margin-bottom: 5ex; }
you may need to put a   in the div to get around some browser bugs :)
Im new into that asp.net thing, but here goes.
I got at ImageButton, and when its clicked i want the image displayed in another window. If I can avoid using ajax i would like to do that.
If possible would like to make the window modal, but still avoid ajax, since Im not ready to mix more technolgies yet.
The existing answers with JavaScript are fine, but just to suggest an alternative - could you use a HyperLink (with an ImageUrl set so you still get an image) and set its Target property instead?
IMHO the best practice to show a picture is in the same page on the top of the content. I personally use Lightbox. You can find the documentation on their page, so it should be easy for you to integrate their JavaScript code.
Somewhat like this:
<asp:ImageButton ID="imbJoin" CssClass="btn-find" AlternateText="Find" ToolTip="Find" runat="server" ImageUrl="~/library/btn-find.gif" onClick="javascript:popUp("ServicesLocator.aspx")" />
Resource: http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_22832169.html
Using the ImageButton you need to use a JavaScript to open it in a new window. You can also look into the OnClientClick-event
You can use the ImageButton's OnClientClick property:
<asp:ImageButton ... OnClientClick="javascript:window.open('url_to_image');" >
But this popup window will not be modal.
The following javascript will do what you're looking for:
window.open('page.html','WindowTitle','width=400,height=200')
It might be worth pointing to a two relevant entries in the excellent EFNet's #javascript FAQ:
Correct Use of Popups - yay accessibility!
How do I make a popup window the same size as my image?
How do I create a custom 'OK' dialog or something similar? - modal windows are not that useful and something like the suggested Lightbox or similar scripts would be better "modal" options
Correct Use of Links - this one being only partly on-topic but the previous answers use of the "javascript:" pseudo protocol made it necessary: it is never required nor useful in a web page that should work across browsers. After all, JavaScript is the default (and only) scripting language.
Thank you for all the answers! I ended up using lightbox
I found this example
http://neutrongenious.wordpress.com/2007/09/08/lightbox-for-asp-net-2-0/
And it works perfectly