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>
Related
Well the real reason i need to know this is due to the working of my modal
In my modal's JavaScript code , its defined to trigger open modal window only when the class is "modal-button"
let open_modals = [];
$(function() {
// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");
Below is the html code which works perfectly along with this
<!-- Trigger/Open The Modal -->
Click Me
Although i want the text "Click Me" to not inherit the properties of class "modal-button" but still have that class ,so modal opening functionality is not broken. Hence i tried something like this...
<!-- Trigger/Open The Modal -->
<div class="modal-button">
<span class="text">Click Me</span>
</div
But it is breaking the modal opening functionality probably because the text-"Click Me" is not inhereting class "modal-button" due to the span tag
Hence i think i have to find an alternative of span tag for styling inline elements
Hopefully someone can give me a better approach to this
Thanks in advance
There's nothing stopping you from having two classes on the same element like this:
Click Me
The second class listed will take priority over the first for styling, but the element will still be found by any CSS query that looks for the first class.
I need to create a dropdown with "change password" section in it, the dropdown is supposed to appear on click, let the user change the password and close when the button is clicked again.
This is how it looks like at the moment:
The popup closes as soon as the user clicks on it, so the user cannot update the password.
I know it might be a dumb question, but I'm new to programming and just learning..
This is what I got so far:
$('.ui.dropdown')
.dropdown({
on: 'click'
})
<div className="ui dropdown link item" tabIndex="0" href="/Account/Profile">Hi {this.props.username}
<div className="menu">
<div className="item">
<ChangePassword/>
</div>
</div>
</div>
Thank you so much in advance!
I'll just point out why this is happening for you, there's a few updates you could make to your code but I'll let you figure that out as you go :)
Firstly, onClick() will trigger whenever a mouse click occurs on the element you've set it on, as well as all the children of that element:
e.g (this is just semi-psuedo)
<div onClick={} >
<button />
<button />
</div>
In this case, onClick will trigger when you click the parent div which, on the page, will be wrapping both buttons.
If you've set the method to trigger when the ui-dropdown component is clicked, this will occur whether the drop down is open or not.
The usual way to do this would have two separate components:
Button (The thing you click on to open the dropdown)
The Dropdown
If you put the onClick function on the Button element, but have it activate the Dropdown element, your problem will be solved :)
I am trying to be as clear as possible without just downright fixing it for you, let me know if you need any more clarity!
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();
});
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.
In Chrome I have a simple contenteditable="true" span, and if the user clicks anywhere around it, the cursor shows up and he/she can start editing. This is annoying b/c I only want the cursor to show up when the user clicks on the span itself, not outside of it.
Example: http://jsbin.com/oyamab/edit#javascript,html,live
Html below...
<body>
<span id="hello" contenteditable="true">Hello World</span>
</body>
If you visit that link in Chrome, click anywhere in the rendered html box (the far right column in jsbin), and you can start editing. In Firefox on the other hand, you have to click on the actual span to edit it (yay!).
Do I need to just accept this as a Chrome thing, or is there a hack around it? Thanks.
I strongly suspect it's just a WebKit thing. You can work around it though by making the span contenteditable only when it's clicked
Demo: http://jsfiddle.net/timdown/nV4gp/
HTML:
<body>
<span id="hello">Hello World</span>
</body>
JS:
document.getElementById("hello").onclick = function(evt) {
if (!this.isContentEditable) {
this.contentEditable = "true";
this.focus();
}
};