We Keep Coding

I need help to open menu on click on a href link in html?

i have tried from last few days but unable to open megamenu on click of ahref link, after done some code checkup, i have found some hint in css, in that if i make visibility value to visible then megamenu shows otherwise not, i want that menu to be open only on click right now it's opening on hover event and below code to be executed only onclick of ahref tag
.menu-subs, .menu-column-4
{
visibility: hidden!important;
}
below is ref. screenshot for menu
menu-screen

You will need to include some JavaScript to your code. Here are some examples on how to use it.
<button onclick="myFunction()">Click me</button>
<element onclick="myScript">
object.onclick = function(){myScript};
object.addEventListener("click", myScript);
I would also recommend using technologies like bootsrap or angular to deal with menus and navigation bars. They make life easier and is good to know how to use them.

If you want to make it so that when you click something them menu is visible, you could use the onclick function in the href and toggle the visibility of the menu using css display: non or block.
HTML: you are creating a div with the css properties of that class and assigning it an id. you are also creating a link that will call the javascript function when clicked
<div class="menu-subs" id="menu">
// the menu
</div>
<h1 onclick="openMenu()">Open menu</h1>
CSS: the class which is not displayed currently
.menu-subs, .menu-column-4
{
display: none;
}
Javascript:
function openMneu(){
//get the menu element in the html
elem = document.getElementById("menu");
// set the styling of the menu to visible
elem.style.display = "block"; //or inline block depending on your other css
}
when openmenu is called by the clicking of the heading open link. You could also use element.addeventlistender, bit that would be a bit harder, so i suggest you try this.
This should work, lmk if it does
(this is my second stackoverflow answer :|)

on click apply class with different css properties

I am trying to apply a class on click to li of my div.
This is the js I have.
$(document).ready(function() {
$('#toggleme').click(function() {
$(this1).addClass('active_class');
});
});
Now when I click at the cart, I want to change that cart image.
I am trying to do that via the css by applying the class background-image:url(""); property. But for some reason I am not able to get it working.
Here's the fiddle
Please help.

Change your JS code to this:
$(document).ready(function () {
var img=0;
$('#toggleme').click(function () {
$(this).toggleClass('active_class');
if(img==0){
$(this).find("img").attr("src", 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/simple-red-glossy-icons-business/086707-simple-red-glossy-icon-business-cart5.png');
img=1;
}else{
$(this).find("img").attr("src", 'http://www.daru-koi.com/images/winkelwagen.png');
img=0;
}
});
});
Here is the JSFiddle
Also note that the icon in your code is due to the img tag source and not the CSS. Therefore overwriting using CSS will not help.
The above code switches the source everytime you click.

See the cascade.
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector
You have two background image rules applying to the element:
.active_class {
background-image : url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/simple-red-glossy-icons-business/086707-simple-red-glossy-icon-business-cart5.png");
}
and
style="background-image:none"
The style attribute one is more specific and "wins".
Avoid style attributes. Define the default styling in the stylesheet. (Or just remove it entirely since none is the default in the browser stylesheet).

Your jQuery is working correctly in that it is toggling the active_class when clicked. You can use developer tools (in Chrome or IE, press F12) to verify.
The problem is your jQuery targets the <li> element, but you have an <img /> element within it that is not affected by jQuery in any way.
You need to have the default cart image displayed as a background in CSS and use the jQuery to toggle between it and a different image.

Using jquery to change background of an element created with Jquery

I am trying to display search results on my page for a list of people then allow the user to select one of those search results.
I create a table of people using jquery, which each row having a class of .searchResult and I want to highlight (or change background) of that row on hover but it doesn't seem to work the way I'm doing it.
Is there an issue arising because they are rows that I have made after the page was loaded? Or is there an issue with changing the background color of a row?
JS
$(function(){
$('.searchResult').hover(function(){
$(this).css('background-color', '#ff0')
});
});
Here is a jsfiddle for how I'm trying to allow an action on the newly created rpws: http://jsfiddle.net/uxWwZ/

You can do this with pure CSS:
.searchResult:hover td {
background-color: #ff0;
}
http://jsfiddle.net/mblase75/6Pme2/

I would suggest going with the CSS answer, but if you must stay with JQuery, you need to use delegation since they are being added after page load.
$(function(){
$(body).on('hover','.searchResult',function(){
$(this).css('background-color', '#ff0')
});
});

Script issue on website

When I use dynamic options, the second option looks strange when the script is run.
I've made a fiddle with the problem http://jsfiddle.net/niklasro/GqGGA/ but it won't run the script that should activate the dynamic option:
function cities(obj){
if(obj.value == '3'){
//undisplay cities options municipality_control2
document.getElementById('municipality_control').style.display='none'
}else{
$('#cities').load('/cities?regionId='+obj.value);
}
}
How can my problem be resolved?

The problem is a pseudo css class that jQuery adds a style called active and then forces it to behave. Because this is the active control it has the active styling. You can see it in your example if you click on the dropdowns.
If you force remove this styling with code like this http://jsfiddle.net/mGAs4/5/ it will go away. You can also add CSS to change what the active class does for this type of element.
Something like
select:active { background:white; }
I think this will also work
select.active { background:white; }
But I have not played around with jQuery's active support much.

Remove a:hover in javascript

I have the following javascript code:
$('#s2 a').click(function(){
var cB = $(this);
var f = parseInt(cB.attr('data-f'));
var r = parseInt(cB.attr('data-r'));
var c = parseInt(cB.attr('data-c'));
if (pA == false && !isClickAllowed(f,r,c)) {
return false;
}
// more stuff comes here
}
This makes a link not clickable. This all works. I also want to remove the hover effect. The CSS code for this is:
.pc a:hover {
background-color: #FFF;
I thought removing the class would do it like: cB.removeClass('pc'); but this doesn't work.
Any suggestions on how to do this?
Thank you for your time
--EDIT--
Hmm I think I see why it aint working. At the top of the document I have this:
$(document).ready(function() {
setScale();
$(window).resize(setScale);
if (!('ontouchstart' in document)) {
$('body').addClass('pc');
}
more code here
This sets the .pc a:hover for all links when opened the page on a pc rather then a touch device (e.g. iPad). I need to disable this pc hover ONLY on the links are not clickable like in:
if (pA == false && !isClickAllowed(f,r,c)) {
return false;
}
Hope this helps!

cB is the anchor which isn't being references by the CSS class you indicate, the parent would have the class pc for this to work. cB.parent().removeClass('pc'); would do it.
-- EDIT --
Following the erudite comments below it would seem that cb.parents('.pc').removeClass('pc') or cb.parents().removeClass('pc') (I've not benchmarked to see which is quicker) would be the comprehensive solution.
Good catch to James, Anthony, and Tadeck!
-- EDIT 2 --
Following the question update, I'd suggest adding another class to your links, i.e. clickable, then your CSS becomes:
.pc a.clickable:hover {
background-color: #FFF;
and you can just remove the clickable class on those links that you don't want to show the highlight. The better course of action may be to simply replace the links that are disabled with either raw text or as spans with an identifying class, i.e. disabled_link if you want to have the option to enable them later.

Though there was no HTML provided, based on the code, cB does not appear to be the element which has the class of pc but rather an ancestor of cB. You would need to remove the class from that.
If the direct parent is the only ancestor with the class of pc, you can do the following:
cB.parent().removeClass("pc")
If only one ancestor other than the direct parent has the class of pc and the parent does not, you can do the following:
cB.closest(".pc").removeClass("pc")
If multiple ancestors have the pc class, you can use the following:
cB.parents(".pc").removeClass("pc")
And finally, if multiple a tags exist within .pc then you cannot use the approach of removing the class, as this will affect all a tags within that .pc.

cB.removeClass('pc') should indeed remove aclass. Make sure your css behaves correctly in all scenarios. Also try targeting the parent

I would add a disabled class to the CSS that comes after the :hover rule and overrides it with the disabled styles, which may or may not be the default. Then, you can just do:
cB.addClass('disabled');
The reason your existing solution doesn't work is because you're removing the class from the element when its parent has the class.

Since your CSS issue was already solved, I want to point out another improvement:
I see that you are using cB.attr('data-f') to store some data, but attr should only be used for valid HTML attributes. You should consider using the jQuery data method which was created just for the purpose of storing non-attribute data into an element.
http://api.jquery.com/jQuery.data/

<p id="example">This is an example.</p>
<script>
document.getElementById('example').style.borderWidth = '4px';
</script>
Note that borderWidth is different than border-width. This can be used for the other styles. As a rule of thumb, take away the dash and make the first letter of the second word capital. If it doesn't work, Google it.