I have a website that is using js to switch between two different navigation menus. It has always worked up until a week ago or so and I can't figure out why. Wondering if anyone here can point something out to me that I'm not seeing.
Here's my markup:
<div class="catMenu">
Works
</div>
<div class="newboxes" id="newboxes1" style="display:block;" >
...the 1st menu
</div>
<div class="catMenu2">
<a href="javascript:showonlyone('newboxes2');" >About</a>
</div>
<div class="newboxes" id="newboxes2" style="display:none;">
...the 2nd menu
</div>
And Here's my js:
$(document).ready(function() {
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
});
When I look at my console using firebug, I get the following error:
ReferenceError: showonlyone is not defined
but with my lack of knowledge about js, I'm not entirely sure how to fix this.
Can anyone shed some light?
If you're going to invoke the showonlyone function using href="javascript:showonlyone()" you'll have to define it in the global scope, currently it's defined inside your document.ready() function.
You can also expose it explicitly using the window keyword:
$(document).ready(function() {
window.showonlyone = function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
});
Building on haim770's answer
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
$(document).ready(function() {});
Try this:
$(document).ready(function() {});
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
You're using jQuery, so move your inline JavaScript out of your HTML and use a data attribute to store thechosenone variable. Then you can use jQuery to add click methods to your anchors, grab the variable from the data attribute and run the rest of the code.
HTML
<div class="catMenu">
<a data-chosen="newboxes1">Works</a>
</div>
JS
$(document).ready(function() {
$('a').click(function () {
var thechosenone = $(this).data('chosen');
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
DEMO
While your format is close to working and haim770 has already shown the problem, I would change your format a bit, here. Try this:
<div class="catMenu">
<a id="LinkNewBoxes1" class="ToggleDisplay">Works</a>
</div>
<div class="newboxes" id="NewBoxes1" style="display:block;" >
...the 1st menu
</div>
<div class="catMenu2">
<a id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>
<div class="newboxes" id="NewBoxes2" style="display:none;">
...the 2nd menu
</div>
$(document).ready(function() {
$(".ToggleDisplay").click(function(e){ //Event Handler for ToggleDisplay clicks
var BoxToDisplay = $(this).prop("id").replace("Link", ""); //Removes 'Link' from anchor tags ID and assigns to variable
$(".newBoxes").each(function(){
if ($(this).prop("id") == BoxToDisplay) //Check if this is the right one to display
$(this).show();
else
$(this).hide();
});
e.preventDefault(); //Prevent browser's default action for anchor clicks
return false;
});
});
Thanks Andrew!
HTML
<div class="catMenu">
Works
</div>
<div class="newboxes" id="NewBoxes1" style="display:block;" >
...the 1st menu
</div>
<div class="catMenu2">
<a href='#' id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>
<div class="newboxes" id="NewBoxes2" style="display:none;">
...the 2nd menu
</div>
JS
$(".ToggleDisplay").click(function(e){
var BoxToDisplay = $(this).prop("id").replace("Link", "");
$(".newboxes").each(function(){
//Check if this is the right one to display
if ($(this).prop("id") == BoxToDisplay)
$(this).show();
else
$(this).hide();
});
e.preventDefault();
return false;
});
FIDDLE
Related
HTML:
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Test</a>
<div class="accordion-section-content" id="accordion-1"></div>
</div>
</div>
My JS (which i took from http://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery):
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery('.accordion .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
jQuery(this).addClass('active');
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
The code that you've posted looks fine to me. Be sure to include the jQuery JS file on your page at the end of the tag.
I have this code
<style>
.Parent {width:500px;height:500px;background:#000}
.Parent .Child {width:250px;height:250px;background:#F00}
</style>
<div class="Parent">
<div class="child"></div>
</div>
<script>
$(document).ready(function() {
$('.Parent').click(function () {
$(this).hide()
});
/*
But if i click on <div class="Child"></div> ,
<div class="Parent"></div> won't get hidden .
*/
});
</script>
I want my code to hide'.parent',
When I click on areas in .Parent witch doesn't include .Child elementand if the areas I click was included in '.child' area , it don't do anything .
so what would u guys suggest ?
Simply make of event.stopPropagation(); to stop event of child from propagating to parent.
So script becomes:
$('.Parent').click(function () {
$(this).hide();
});
$('.child').click(function (e) {
e.stopPropagation();
});
See the fiddle: "http://jsfiddle.net/sftknxeo/1/"
just do this:
$('.Parent, .child').click(function(e) {
if ($(this).hasClass('child')) {
return false;
}
$(this).hide();
});
$('.Parent, .child').click(function(e) {
if ($(this).hasClass('child')) {
return false;
}
$(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='Parent' style='width:auto; padding:50px; border:red solid 1px;'>
<div class='child' style='width:200px; height:200px;border:green solid 1px;'>
child
</div>
</div>
You can use the event's target to determine what you have clicked on. This way you can also assign an event to happen if you have clicked on the child. (If need be.)
$('.Parent').click(function(e){
if(e.target == this){
$(this).hide()
}
});
DEMO
Quick and dirty version would be simply to add another event handler. Add a click handler to child that hides parent. Then if you click on parent, it hides itself, and if you click on child, it hides parent.
$('.child').click(function (e) {
$('.parent').hide();
});
Not the most elegant solution, sure, but it's quick and easy and should get the job done.
$('.Parent').click(function () {
$(this).css("visibility", "hidden");
$(".Parent" ).children().css("visibility", "visible");
});
If you just want to hide parent then it will do the needful.
Check for the clicked element by looking at the target property of the event object. Here is something you might want to do:
$(function () {
$('.Parent').click(function (e) {
if ($(e.target).hasClass("child")) {
return false;
}
$(this).hide();
});
});
$('.parent').click(function(e) {
if ($(this).hasClass('child')) {
return false;
}
$(this).hide();
});
I have 2 divs with different content. I want to show the related div when I click on the link. It's showing both divs at the moment and it was supposed to show only the related one.
jsfiddle
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$('div.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
HTML
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is one!</p>
</div>
<br/><br/>
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is two!</p>
</div>
Make the script understand its relation. Change it to:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$this = $(this);
$('div.tip-2').fadeOut(200, function () {
$this.next('div.tip-2').fadeIn(200);
});
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
Fiddle: http://jsfiddle.net/praveenscience/g25hsdw6/4/
Try this
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next().fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
updated Fiddle
Please try this:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next('.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
http://jsfiddle.net/Rino_Raj/g25hsdw6/5/
When i click on second item with slideToggle, first item close.
$(function() {
$('.toggleSitemap').find('ul').css('display','none')
$('.toggleSitemap').click(function(){
$(this).parent().find('ul').slideToggle('slow');
});
});
http://jsfiddle.net/qHZsZ/2/
I dont know how much will this help you. I also needed to implement accordian(toggle) in my MVC project once, and I used something like this:
View.aspx:
<div class='toggle' style="float: left">
<div style="float: left;clear:both;">
<br />
<span class="ulGroup" jqattr="<%:Group.Key %>" style="font-weight: bold;font-color: black;cursor: pointer"><img src="<%: Url.Content("~/Images/imageplus.gif")%>"/>
<%:Group.Key%></span>
</div>
<div class="togglebox" style="clear:both;" >
<!-- Write contents as you wish -->
<!-- as
<ul> test
<li>Test1></li>
<li>Test2></li>
<li>Test3></li>
</ul>
.
.
.
-->
</div>
</div>
And called a design.js (javascript file) as :
$(document).ready(function () {
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over span
$(".ulGroup").click(function () {
var valueText = $(this).attr('jqAttr');
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).parent().next(".togglebox").css("display");
if (x == "block") {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
else {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
$(this).parent().next(".togglebox").slideToggle("fast");
return true;
});
});
You're pretty close. I think the key ingredient you're missing is to prevent propagation of the click event.
Also, to make it a little less quirky, you only want the click event to fire if the target's direct parent has the toggleSitemap class.
$(function() {
$('.toggleSitemap').click(function(e){
if ($(e.target).parent().hasClass('toggleSitemap')) {
e.stopPropagation();
$(this).children('ul').slideToggle('slow');
}
});
});
Here's an example: http://jsfiddle.net/DkbNA/2/
i have a jquery function that displays a hidden content on each element in the loop of elements. This work perfectly, but the problem is that when i append new elements to the loop it stops working. It actually works on some elements and doesn't work on others (strange behavior).
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".see_all").click(function(){
if ($(this).next().css('display') == 'none'){
$(this).next().show();
}
else
if($(this).next().is(':visible')){
$(this).next().hide();
}
});
})
</script>
Html CODE
<div class="center_container">
<%for users in #user%>
<div class="see_all">
<span style="color:#808080;cursor:pointer">See All Reviews(<%=#beep_count= (#beep.opposes.count + #beep.neutrals.count + #beep.supports.count)%>)</span>
</div>
<div style="display:none;" class="hidden">
No reviews available
</div>
<%end%>
</div>
i have tried solving it with this
$("body").on("click", ".see_all", function() {
if ($(this).next().css('display') == 'none')
{
$(this).next().show();
}
else
if($(this).next().is(':visible'))
{
$(this).next().hide();
}
});
but it didn't work. am i making a mistake in my new jquery solution :(
PLEASE HELP
SOLVED....i found out that i had compatibility problem with my jquery file