We Keep Coding

How do I change css overflow property of a parent html element when hovering on a mega menu link

So I am using mega menu in my wordpress site and I need to change an element above the mega menu to have visible overflow css when hovering over a mega menu item. here is what I have tried so far.
<div class="l-canvas">
<div id="mega-menu-wrap-max_mega_menu_2" class="mega-menu-wrap">
<div class="mega-menu-toggle" tabindex="0">
<div class="mega-toggle-block mega-menu-toggle-block mega-toggle-block-right mega-toggle-block-1" id="mega-toggle-block-1">
</div>
</div>
<ul id="mega-menu-max_mega_menu_2" class="mega-menu mega-menu-horizontal" data-event="hover" data-effect="fade_up" data-effect-speed="200" data-second-click="close" data-document-click="collapse" data-vertical-behaviour="standard" data-breakpoint="979" data-unbind="true">
<li class="mega-menu-item mega-menu-item-type-taxonomy mega-menu-item-object-product_cat mega-menu-item-has-children mega-align-bottom-left mega-menu-flyout mega-menu-item-10217" id="mega-menu-item-10217">
<a class="mega-menu-link" href="#" aria-haspopup="true" tabindex="0">Link Text</a>
</li>
</ul>
</div>
</div>
And The css is pretty straightforward
.l-canvas{
overflow:hidden;
}
The javascript is where I am having some trouble. Here is what I had working in a fiddle but cant figure out what is going wrong on my page.
$('.l-canvas').on('mouseover', '.mega-menu-item', function () {
$('.l-canvas').css('overflow', 'visible')
});
//remove the overflow visible on mouseout
$('.l-canvas').on('mouseout', '.mega-menu-item', function() {
// on mouseout, reset the overflow to hidden
$('.l-canvas').css('overflow', 'hidden');
});
I think I am close, but just cant seem to get over the final hump. I just don't understand why it wont work on my page or in console of developer tools. Thanks for any help and feedback you can give me on this issue.

Try this:
$(".mega-menu-item").on({
mouseenter: function() {
$(this).closest(".l-canvas").css('overflow', 'visible');
}, mouseleave: function() {
$(this).closest(".l-canvas").css('overflow', 'hidden');
}
});
Have a look at the JQuery documentation for detailed information:
http://api.jquery.com/on/
https://api.jquery.com/closest/
First of all, you will want to listen to the events that occur when you enter or leave a menu-item. Next you will want to find a specific element up the DOM and manipulate the CSS of that element.
Hope this helps!

How can I hide and element using CSS on initial page load until the Javascript link is clicked

I currently have a webpage that looks like this:
I would like to make it so the "Click to view Gallery of This property" button does not show on the initial load, but does show once the property links are clicked.
Here is an example of my current code:
function changeImage(image, link) {
document.getElementById('imageReplace').src = image;
document.getElementById('linkReplace').href = link;
}
HTML:
TEXT
TEXT
TEXT
<img src="INITALPAGELOADIMAGE" alt="Images" id="imageReplace" class="changeImageClass">
<span style="float: right; padding:2px;"><Button>Click to view Gallery of This Property</button></span>
From what I understand I will want to use to use this function to hide the element:
document.getElementById('element').style.display = 'none';
But I am unsure how to work this into my current code. Do I add this with my current function, or is this a separate function all together?
If someone could point me into the right direction of how to code this properly I would really appreciate it.
Thank you so much,
-Kasandra

I think this is one of those exceptional cases where you want to use inline style to hide your element. This is because it takes a few seconds for the JavaScript to load. So some users may end up seeing the element when they first get on the page, then see it quickly disappear.
<img src="INITALPAGELOADIMAGE" alt="Images" id="imageReplace" class="changeImageClass" style="display: none;">
<span style="float: right; padding:2px;"><Button>Click to view Gallery of This Property</button></span>
Add an onclick attribute to your property links,
TEXT
And use the following function to show the elements
function changeImage (src, href) {
// get a reference to the DOM elements
var img = document.getElementById('imageReplace'),
link = document.getElementById('linkReplace');
// update the elements
img.src = src;
link.href = href;
// show the elements
img.style.display = '';
link.style.display = '';
}
Here's a quick demo (updated).

Using css, you can have the block have display: none; and then when you use show it will change the display to default (usually display: block;)

How to achieve hover effect using javascript?

I have 3 bullet images.
1 for active, 1 for hover and 1 for the rest links.
Here is my code:
<img src="images/othersdefdot.png" onclick="funcCaller('fund', 'images/reddot.png', 'local', 'images/othersdefdot.png', 'youthgames', 'images/othersdefdot.png')" name="fund">
How to achieve hover effect in this link?
Check the demo page here

<a href="#" class="toc selected" onMouseover="showPic1()" onMouseout="showPic2()">
<img id="link_img" src="/images/othersdefdot.png" />
</a>
Javascript:
function showPic1() {
document.getElementById('link_img').src = "/images/img1.png";
}
function showPic2() {
document.getElementById('link_img').src = "/images/img2.png";
}

I'm not exactly sure what you're asking, but you can use the onmouseover property.
<img src="images/othersdefdot.png" onclick="funcCaller('fund', 'images/reddot.png', 'local', 'images/othersdefdot.png', 'youthgames', 'images/othersdefdot.png')" onmouseover="javascriptFunction()" name="fund">

You must be looking at the jQuery scrollable here:
http://flowplayer.org/tools/demos/scrollable/plugins/index.html
I think this is what you want.

if its just for hover effect, there is no need to use javascript. You could just use css:
a img:hover{
/*change background*/
}
however if you insist, you could attach event handler onmousedown to it. hope that helps.

hide and unhide a div

I am designing a web page in which I got struck at some point.
I am using 3 upload buttons in a div, let the id of the div be "uploadDiv"
I have a right arrow and down arrow images
if I click on the down arrow image, the content of the "uploadDiv" should be displayed
if I click on the right arrow image, the content of the "uploadDiv" should be hidden
The images should be in the same place.
What is the solution?

It sounds like you are talking about a collapsible panel of some form. Depending on what the underlying architecture is of your source code is, Microsoft's Ajax Control Toolkit has a pretty good collapsible panel option.
Another great option out there is to look at jQuery and the jQuery UI components.
http://jqueryui.com/demos/accordion/
http://jqueryui.com/demos/accordion/#collapsible
SAMPLE
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
collapsible: true
});
});
</script>
<div id="accordion">
<h3>File Upload</h3>
<div>
CONTENT HERE
</div>
</div>

The question is vague, but whatever your actual goal you'll achieve the effect by toggling a class on your target divs and letting your CSS implement the effect. This is far superior to changing style directly with JS because it separates the concern of styling to the styling layer, and with an umbrella class this let's you cheaply modify the effect with additional properties at a single point.
Now the CSS that you actually want could be visibility: hidden (if you want the layout flow to be preserved) or display: none (if you want the layout to collapse) or even something exotic like changing the opacity or colours if you want to achieve a greying out effect.
Finally enabling this in JS can be done easily by appending or replacing the content of element.className property but realistically a much improved effect can be had by leveraging a library like jquery or mootools which will offer you most of this work already wrapped into widgets and such niceties as animated fading etc..
Don't fall into the maintenance trap of creating the effect with JS and don't fall into the trap of reinventing the wheel where amazing silver rimmed varieties exist already for free.

<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'hidden';
}
else {
if (document.uploadDiv) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'hidden';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.uploadDiv.visibility = 'visible';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'visible';
}
}
}
</script>
Above script toggles the style.visibility property of the div. which can be "visible" or "hidden"
<img src="right.png" onclick="hidediv()" />
<img src="down.png" onclick="showdiv()" />
Use the onclick events to call the needed hide or show div
Taken from http://www.webmasterworld.com/forum91/441.htm

By using JQuery you can made it in a easy way.
you can Download Here jquery.js file.
js:
<script src="js/jquery.js"></script>
<script>
$j(document).ready(function(){
$("#hide").click(function(){
$("#uploadDiv").hide(); //hide the div
});
$("#show").click(function(){
$("#uploadDiv").show(); //show the div
});
$("#toggle").click(function(){
$("#uploadDiv").toggle(); //toggle the div
});
});
</script>
html:
<div id="uploadDiv">Some text here !</div>
<div id="hide">Hide</div>
<div id="show">Show</div>
<div id="toggle">toggle</div>
click on particular div to perform desired operation.

Add a class to your css file,
.hidden { display: hidden; }
Add a onclick event to your buttons
The button to hide
... onclick="document.getElementById('UploadDiv').className = '.hidden'" ....
The button to show
... onclick="document.getElementById('UploadDiv').className = '.default'" ....

to hide and show your div using jquery you could do something like:
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#downArr").click(function () {
$("#uploadDiv").toggle();
$("#downArr").toggle();
$("#upArr").toggle();
});
$("#upArr").click(function () {
$("#uploadDiv").toggle();
$("#downArr").toggle();
$("#upArr").toggle();
});
});
</script>
</head>
<body>
<img id="downArr" src="downArr.jpg">
<img id="upArr" src="upArr.jpg" style="display:none;">
<br>
<div id="uploadDiv" style="display:none;">
content
</div>
</body>
Clicking the image downArr.jpg will make upArr.jpg and the content of uploadDiv visible
Check out more examples of the toggle function at http://docs.jquery.com/Effects/toggle
-Fortes

One of the easiest method to do would be using jquery.

After visiting links, Firefox selectively skips state change or a:visited styling

After clicking a link with a common href (local page or web-site)
and the href is successfully loaded, both FF2 and IE7 will display
the link with a:visited styling.
For links with href="javascript:anyfunc()", IE7 works as above
while FF2 does not display a:visited styling. No change with any
DOCTYPE.
Q: Is either behaviour with JS links and :visited considered correct?
Q: Does FF2 leave anchor state unchanged after clicking a JS link?
Q: Without having to attach an onClick handler or modify classes/style
with JS, is there a concise way to tell FF2 to use :visted
styling independent of whether href is another page or a JS link?
Example follows:
<html>
<head>
<style>
div.links { font-size: 18px; }
div.links a { color: black; text-decoration: none; }
div.links a:visited { background-color: purple; color: yellow; }
div.links a:hover { background-color: yellow; color: black; }
</style>
<script>
function tfunc(info) { alert("tfunc: info = " + info) }
</script>
</head>
<body>
<div class="links">
JS Link 1<br>
JS Link 2<br>
Common href, google
</div>
</body>
</html>

It would be difficult to style these sorts of links... whilst they may have the same href, they could potentially do anything through JS (which may make it seem that visiting it would not).
Is there a way to link to something such as a HTML page and attach event handlers to the link (and return false to stop the link clicking through)? And if the links are in fact JS hooks, I would use an element such as a <button> and style it accordingly... remember to add cursor: pointer so the end user knows it is clickable.
Using inline javascript:function(something) in a href is bad practice. Try unobtrusive event handlers.

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!

Here's my take:
Q: Is either behaviour with JS links and :visited considered correct?
The purpose of a link is to retrieve a resource. If your link doesn't go anywhere, what are you "visiting"? The behavior is correct from this perspective in my opinion.
Q: Does FF2 leave anchor state unchanged after clicking a JS link?
It seems as though it doesn't change the state of the link to :visited unless it points to an element in the page (which means the link points to the current page which is implicitly visited) or to another resource which as already been accessed.
Q: Without having to attach an onClick handler or modify classes/style with JS, is there a concise way to tell FF2 to use :visted styling independent of whether href is another page or a JS link?
I don't think so. You can probably get the visited effect if you point the href of the link to "#" and use the onclick handler for your JavaScript needs.

I have encountered the issue I believe this question is asking. Consider this simple example:
style sheet:
#homebox { display: none;}
#contactbox { display: none; }
html:
<a id="#home"></a>
Show Home
<div id="homebox">Your home</div>
<a id="#contact onclick="return showHideDiv(this);"></a>
<div id="contactbox">Contact Info</div>
script:
function showHideDiv(elem) {
if( elem.style.display && elem.style.display == "none"; ) elem.style.display = "block";
else if( elem.style.display && elem.style.display == "block"; ) elem.style.display = "none";
return true;
}
Although not the most beautiful code, it points out some issues which can develop when using javascript onlick within a href. The reason you might want to do something like this, is to create dynamic content changes without reload which show a visited style. The a links would be handier than buttons, so the visited status of the links is maintained, even though internal. However, I have noticed some issues with browsers triggering visited status on internal links, let alone internal links with javascript onclick event handlers. A button would require coding a function to control visited styles.

I agree with Alex, a link should be a link to something, not a JS trigger - a button would much more effective here.
If you do want to attach some JS function to a link, you should definitely use some unobtrusive JS to attach that function to the click event.
EG using jQuery:
$("#myLinkID").click(function () {
//function stuff
});