Im trying to make the icon im using into a button that when pressed, triggers the navigation bar to open. Here is the HTML:
<div id="fixedBar">
<h1>Company</h1>
</div>
The class is the icon image and the id triggers the nav bar. The problem is that when I click the icon, the page scrolls back to the top due to the href of '#'.
Im not sure how I can get the icon to not link to anything when clicked.
Thanks!
a href is not needed just use a fake link class
<span class="fake-link" id="fake-link-1"> fake link</span>
.fake-link {
color: blue;
text-decoration: underline;
cursor: pointer;
}
You can remove the href attribute on your a , which is valid in HTML5. This will turn your link into a placeholder hyperlink.
If you're using Javascript in your application, you can set an event handler for the click, and use the preventDefault() method.
Code example with jQuery :
$('a').on('click', function(e){
e.preventDefault();
});
Related
I am trying to use one of the 'checkbox hacks' in which an accordion opens or closes when the user clicks on a label that toggles a checkbox.
The issue is that the webpage I am working on does not use labels, but rather h4 elements. So the user would be clicking on the h4 element to open/close the accordion. As far as I know, making this work directly is not possible. Or is it? I thought that maybe I could overlay an empty label over this h4 element, so that the user would be clicking on the label. Is that possible? Or is making a javascript accordion the only option here?
Here's a suggestion how to do it:
<body>
<!-- Add cursor : pointer to show the user he can click -->
<h1 onClick="myFunc()" style="cursor: pointer;">test</h1>
<script>
// Do something here
function myFunc(){
console.log("title clicked")
}
</script>
</body>
I need to remove the tooltip from the button.
I'm using Angular/Electron for a desktop application.
I have the following code in the .html file:
<button class="close-button" (click)='closeDialog()'>
<mat-icon class="svg-mat-icon" svgIcon="menu_cancel"></mat-icon>
</button>
This is the 'X' button in the upper-right corner of the screen. When I hover the mouse over it I get a tooltip "menu_Cancel" above it.
How can I remove that tooltip? The button is self-explanatory, and the user does not need to know the filename used.
Thanks.
I had the same problem. I resolved it doing it in my SCSS :
mat-icon {
svg {
pointer-events: none;
}
}
I have bunch of links and I need to change the texts color to red after user clicks them
I have something like:
<li class="test" ng-repeat="item in items">
<a href="" ng-click="clickMe()" class="test-li">
{{item.name}}
</a>
</li>
Currently the style is like
.test-li {
color: black;
}
I want my texts to turn red after user clicks them.
So I do:
.test-li:visited {
color:red;
}
It works when I click the item, but the color changes back to black after I click another item. I feel like this can be archive simply in CSS without setting ng-class. Can anyone help me about it? Thanks a lot!
You don't have any destination url given in your links, so there really isn't a way for the browser to know which links have been visited. I think if you were to add a simple #test, #test1, #test2, etc to your href attribute in your links, you would find that your CSS does work as intended.
Since your link doesn't actually go anywhere, you'd be better off adding a 'visited' class to your <a> element when clicked, via JS.
jQuery exmample:
$('li a').click(function(){
$(this).addClass('visited');
// or you could use $(this).toggleClass('visited'); depending on what you want to achieve.
});
I have something like this:
http://jsfiddle.net/D2RLR/5649/
And it works fine for checking checkboxes from a dropdown menu in bootstrap. But the problem is that this segment of code:
<a href="#">
<input type="checkbox">
<span class="lbl"> Every day</span>
</a>
Will cause the page to reload if someone clicks on the text in the label ('Every day').
I don't want the reload behavior. I tried to change the anchor to a span tag, but it loses the style of onhover, highlighting the entire row together. Also tried to take out the '#' from the anchor and simply make it:
<a href=''>
but the checkboxes don't seem to be responsive to clicks.
Does anyone have any good solution to this?
To your dropdown-menu add the class dropdown-with-checkbox (or another more qualifying class name)
then add the following script:
$(function(){
$('.dropdown-with-checkbox a').click(function(e) {
// ?: Are we clicking a checkbox inside the a-tag?
if(e.target.type === 'checkbox') {
// Yes, but we do not want to prevent the default checkbox behaviour
return;
}
// Do not reload the page when clicking the a tag
e.preventDefault();
})
});
Sidenote 1:
Adding e.stopPropagation(); in the click handler will prevent clicks from propegating up to the 'dropdown' handler, closing the dropdown on click.
Sidenote 2:
You should also structure your checkboxes like this:
<label>
<input type="checkbox"> Label
</label>
This way, clicking the lable will toggle the checkbox.
You could also go with the span approach and create a css class which changes the cursor on mouse over.
.pointer {
cursor: pointer;
}
That way you keep the mouse over effect but don't have to worry about it linking somewhere or reloading the page.
For my curiosity, given a CSS-only button markup like this one: http://www.cssbutton.me/ryanjohnson_me/4fea99463f2df0f605000043, one can create a button visually using:
<div class="button">Click</div>
But how can we actually make it functional? For example, make it link to some other page, so when user clicks on it, she gets redirected.
I've tried wrapping a <a href> inside the <div>, but the button text shows up as a link, which is undesirable. I also tried the opposite - wrapping the <div> inside a <a href>, which seems to work but I was told this is not valid html code.
Any other suggestion?
P.S. The targeted browsers would be IE8+, chrome 14+, Firefox 11+, Safari 5+ and Opera 11+, if this makes any difference.
Have you tried changing the
<div class="button">Click</div>
into <a class="button" href="#your_link">Click</a>?
It should work as a normal link, and have the css buttons stylings and expected behavior.
Use JavaScript to bind an action to the button.
function addEventHandler(elem,eventType,handler) {
if (elem.addEventListener)
elem.addEventListener (eventType,handler,false);
else if (elem.attachEvent)
elem.attachEvent ('on'+eventType,handler);
}
addEventHandler(document.getElementById('yourButton'), 'click', function(e) {
document.location.href = "newpage.html";
});
Add to the css:
a.button { text-decoration: none; }
To create button links:
<a class="button" href="/somewhere.html">Somewhere</a>
Using JavaScript, specifically jQuery, you can do
<div class="button" id="myButton">Click</div>
$("#myButton").click(function()
{
location.href = "mypage.htm";
});