We Keep Coding

Disable close dropdown after click href

I would like to keep my dropdown opened after a page load. For example if I click on an item(href) into an dropdown, I would like to keep the dropdown opened after the redirection.
I've seen that there is a method jquery named stopPropagation, but it seems that this does not work for me
HTML
<div class="sidenav">
<div class="item_sn">
Groups
</div>
<div class="item_list_body">
<div class="link_sidenav">
<a href="#" class="sub_item">
group 1
</a>
</div>
<div class="link_sidenav">
<a href="#" class="sub_item">
group 2
</a>
</div>
</div>
<div class="item_sn">
Users
</div>
<div class="item_list_body">
<div class="link_sidenav">
<a href="#" class="sub_item">
user 1
</a>
</div>
<div class="link_sidenav">
<a href="#" class="sub_item">
user 2
</a>
</div>
</div>
</div>
JQuery
<script>
$(document).ready(function () {
$('.item_list_body').hide();
$('.item_sn').on('click', function (event) {
var content = $(this).next('.item_list_body')
content.slideToggle();
$('.item_list_body').not(content).slideUp();
});
});
</script>
Solution 1 (not working) :
$(document).on('click', '.sub_item', function (e) {
$(this).parent('.link_sidenav').parent('.item_list_body').toggle();
});

you can use sessionStorage to store the state of the menu and then open the menu on page load by checking the state see below
EDIT
rather than using state of the menu we should save the index of the clicked menu as discussed in the comment so updated my answer
$(document).ready(function () {
//sessionStorage.removeItem('opened');
$('.item_list_body').hide();
if (sessionStorage.getItem('opened') !== null) {
$('.sidenav>div:eq(' + sessionStorage.getItem('opened') + ')').next('.item_list_body').show();
}
$('.item_sn').on('click', function (event) {
var content = $(this).next('.item_list_body');
var elem = $(this);
content.slideDown(0, function () {
sessionStorage.setItem('opened', elem.index());
});
$('.item_list_body').not(content).slideUp();
});
});
Hope it helps

Jquery blinking trouble

I've got a following html structure:
<a class='support'>Podpořit</a>
<div class='fa'>
<a id='1' href='drak1 (1).jpg' class='fa-envelope mail-voting'></a>
<a id='1' href='drak1 (1).jpg' class='fa-facebook facebook-voting'></a>
</div>
And this is my javascript code:
$(".support").mouseover(function() {
activeButton = $(this).next();
activeButton.show();
$(this).hide();
});
$(".support").mouseleave(function() {
$(this).show();
$(this).next().hide();
});
I want to show the .fa div on .support hover and if I leave the area, I want to show .support back again. How can I do it? Now it's blinking :-(

Wrap it in a div and do like this,
$(".containerDiv").mouseover(function() {
activeButton = $(this).next();
activeButton.show();
$(this).find(".support").hide();
});
$(".containerDiv").mouseleave(function() {
$(this).find(".support").show();
$(this).next().hide();
});
In your code your are hiding the element itself which in turn cause the mouse leave event to trigger.
Fiddle

$(function() {
$(".support").mouseover(function() {
$(this).children("div").show();
$(this).children("a").hide();
});
$(".support").mouseleave(function() {
$(this).children("div.fa").hide();
$(this).children("a").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="support">
<a>Podpořit</a>
<div class='fa' style="display:none">
<a id='1' href='drak1 (1).jpg' class='fa-envelope mail-voting'>Random content</a>
<a id='1' href='drak1 (1).jpg' class='fa-facebook facebook-voting'>Random content</a>
</div>
</div>
I added a container because you can't put a mouseleave event on an element you are hiding, because it will trigger as fast as it hides.

jQuery – Hide menu/sidebar when click in the body area

I'm very new to jQuery and coding in general and have been trying to get this sidebar to work. When you click on the INFO link a sidebar opens up. As of right now you can only close the sidebar by clicking on the X in the corner, but I want to also be able to close the sidebar when you click in the body area (but not when you click in the sidebar area). I got this to work sort of, but then I wasn't able to open any of my links to view my projects (only the second project, Frankenstein eBook, has a functioning link as of now).
Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?
I've seen a lot of similar problems on here but could never quite match it up to mine specifically. Any help would be awesome, and i Thank you!
Here is my site: Josh Diaz Portfolio
And here is a JSFiddle: JSFiddle
My HTML:
<div class="wrap">
<!--Sidebar-->
<!--Info Panel-->
<div class="infoPanel">
<nav class="closeBtn"> X
</nav>
<div class="infoText">
<h2>infoPanel</h2>
<p>Copy goes here.</p>
</div>
</div>
<section class="sidebar">
<div class="sidebarNav">
<nav> <a class="infoLink" href="#">INFO</a>
</nav>
</div>
<div class="content">
<section class="projects">
<div class="wrapper">
<ul class="grid">
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Images Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
</ul>
</div>
</section>
</div>
</section>
My JS:
$(document).ready(function () {
var menu = "close";
$('.infoLink').click(function () {
if (menu == "close") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else {
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
});
$('.closeBtn').click(function () {
if (menu == "close") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else {
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
});
});

Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?
Because $('.closeBtn') is referring to div and not the link, use $('.closeBtn a') instead.
Anyway, heres another Quick and dirty way ( needs a bit of refactoring ) but the idea is there. I'll add comments to this if it works for you: http://jsfiddle.net/Varinder/RfFSv/
$(document).ready(function () {
var menu = "close";
var $infoLink = $(".infoLink");
var $infoPanel = $(".infoPanel");
var $closeButton = $(".closeBtn a");
var $document = $(document);
$infoLink.on("click.nav",function (e) {
e.preventDefault();
e.stopPropagation();
sidebar("open");
});
$closeButton.on("click.nav",function (e) {
e.preventDefault();
e.stopPropagation();
sidebar("close");
});
$document.on("click.nav", function(e) {
if ( !$infoPanel.is(e.target) && $infoPanel.has(e.target).length === 0 ) {
sidebar("close");
}
});
function sidebar(action) {
if (action == "open") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else if (action == "close") {
console.log("stuff");
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
}
});

You can try something like this:
Your HTML
<body>
<div id="content"></div>
<div id="sidebar"></div>
</body>
And your JS
$('body').click(function(){
$('#sidebar').hide(); //hide sidebar when body is clicked
});
$('#sidebar').click(function(e){
e.stopPropagation(); //this call will cancel the execution bubble
});
I hope this help.

Want to make inactive hyperlink

I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle

if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;

This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here

Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.

Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}

Show a div when a mouseover on a link

If I mouseover on a link it has to show div.
My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.
How to do this using javascript?

Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.
Here is a demo
Markup
<a href="#">
Some
<div class="toshow">
Hello
</div>
</a>
<a href="#">
None
<div class="toshow">
Hi
</div>
</a>
CSS
.toshow {
display:none;
position: absolute;
background: #f00;
width: 200px;
}
a:hover div.toshow {
display:block;
}
You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.

Steps can be:
Make multiple divs all with different id.
Give style="display:none;" to all div.
Make links to show respective div.
In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.
Sample code:-
Your links:
Div 1
Div 1
Your divs:
<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>
JS function:
function Changing(i) {
if(i==1){
document.getElementById("myDiv1").style.display = "block";
document.getElementById("myDiv2").style.display = "none";
} else {
document.getElementById("myDiv1").style.display = "none";
document.getElementById("myDiv2").style.display = "block";
}
}
If you have more divs then you can use for loop in js function instead of if...else.

look at jquery each
<div id=div-0" class="sidediv" style="display:none" > Div for first link </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link </div>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
and essentially do something like this
$('.linkclass').each(function(i,u) {
$(this).hover(function()
{
$('#div-'+i).show();
}, function() {
$('#div-'+i).hide(); //on mouseout;
})
});

Edit: oops ...this will need jquery. dont know why I assumed jquery here.
You can give ids to all the links such as
<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>
and so on ..
and similarly to div elements
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
and so on ..
then
$("a").hover(function () { //callback function to show on mouseover
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).show();
},
function () { //if you want to hide on mouse out
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).hide();
}
);