I have just started my study with css and html and I have first problem. I try to show my menu after clicked on it. When I clicked on it, menu item' s show up and immediately hide. How can I show it and hide after next click on my menu?
There is demo: jsfiddle.net/jekfej46/1/ Thanks a lot.
This is happening because :active is only a state. When you click an element, it changes the state to :active but only as you keep holding it. The best way to do it would be using jQuery to add a class to the menu when you click that button.
If you don't know how to use jQuery, there are lots of tutorials all over the internet that can easily guide you through. It's pretty easy once you get the principles.
Here's a working fiddle: http://jsfiddle.net/jekfej46/1/
In this case, JavaScript checks if the element already has the active class. If it does, the class is removed so the menu closes. But you can change that behaviour if you want.
You can't do the click event only with CSS. You need JavaScript here. Something like this will do this for you using jQuery.
$('#category').on('click', function(){
$('.dropdown-content').show();
});
Ohh, a lot guys. Now, I know that I also need js and jQ to improve my pages. Thanks.
Related
We have a webapplication, which works fine when using the finger to touch for actions. We just got a apple pencil but that does not click the buttons or links, we can write using that in the textarea's, but any button click does not work. I tried to search for a probable solution, but could not figure our any directions. Any idea of what could be causing that will be very helpful.
One thing I was able to figure out, if I add the event onmousedown rather than onclick, all the events work, but I do not want to change the whole website code from onclick to onmousedown if there is another easier way of doing this. Thank you for any input !
I could not find a proper solution for this. But I have tried this and this seems like working find
$(window).bind('touchstart', function(e) {
e.target.click();
});
If I set button to disabled, and someone clicks it, how can I make it display another div, which contains explanation why its disabled?
I have no clue how to do this, and would realy appreciate some help.
Thank you!
I had a problem like this a while ago. I think the solution was to wrap a div around the button and detect a click on the div, via jquery. Not pretty but gets the job done.
you can make it using javascript onClick event.
There are many ways to do that. You can create an element using document.createElement and a text node using document.createTextNode to create your own message panel.
or you can just create a div then target it using querySelectors of javascript then use innerHTML.
I wrote some codes here for you. pls check the link:
https://jsfiddle.net/jLt5hjn8/
I made this picture hopefully it's clear. I want to drag this element and move it to another and make a copy of it there, I actually don't want it to be dragged. I know how to work with DOM, but I don't know anything about HTML5 so what should I do?
my question
Assuming you want what #putvande asks is correct, you could use jQuery UI to achieve this.
To give you an idea, take a look at this demo: jQuery Droppable: Shopping Cart Demo. Drag the Buckit Shirt (Products/T-Shirts) to the Shopping Cart and you will se how it copies the element to another element on the page. You can do the same with and . You can view the source code be selecting the view-source link beneath the demo and there is also a link to the complete API documentation for droppable functionality beneath that.
I have to change functionality of toggle button in web application built on JS Dojo api.
Currently it is dijit.form.ToggleButton, but it should have adittional option for dropdown menu with checkboxes. dijit.form.ComboButton looks like a viable option for that, but the problem is that it behaves like a regular button, and not like toggle button. What would be the best option to solve this problem?
One option I thought of was to manually change style of combobutton to make it look like it is checked, but I'm not really sure how to do that.
Any help would be appreciated.
Perhaps using a dijit/TooltipDialog with the ToggleButton onChange event?
We are building a css drop down megamenu for a website that will include an HTML form with selects. In IE7, when you click on a select, it's pop-up menu opens up (naturally). Then when you mouseover the menu to select an item, it appears as though the focus is taken away from the page, the containing div/li loses :hover, and the whole thing closes before you can select an option.
Preview in JSFiddle here: http://jsfiddle.net/q284w/
The JSFiddle above has the offending code in "Menu 1" ... and, yes, I'm using a table to get a full-height, vertically-centered, 3-column layout in that menu. It's in the original code, so I put it in here; I don't think it's part of the problem, but you never know with IE.
This, of course, works in every other browser I can test including IE8+.
Any ideas on a workaround? Perhaps JavaScript can save the day?
Ultimately there is no easy answer for this (that I found). You simply have to work around it using JavaScript, and it's a pain. This gist of it is as follows:
Create a special class that mimics the :hover state. You will use this to "hold" the menu open.
Create a function that adds this class to the appropriate menu item and attach to onClick of the dropdown.
In another function, remove the class and attach that to onChange of the dropdown (the dropdown closes).