Toggle between two functions doesn't work - javascript

I tried making a button toggle between two functions but I can't get it to work. Could you guys tell me why?
function a(el) {
document.getElementById("myNav").style.height = "100%";
}
function b(el) {
document.getElementById("myNav").style.height = "0%";
}
$("menubutton").click(function() {
return (this.tog = !this.tog) ? a() : b();
});
It's supposed to open/close the navigation but it does nothing at all :/

There are several errors in your code.
Anyway, if I get your requirements (i.e. jus toggling the visibility of the myNav component), and supposing menubutton is the ID of a button:
$("#menubutton").click(function() {
$("#myNav").toggle();
});
See specs:
http://api.jquery.com/toggle/
Instead, you you need a show function and an hide function for your components, to reuse somewhere else, you can use $("#myNav").show() or $("#myNav").hide()

It would be a bit long to explain why but they way I wanted to it doesn't work with toggleClass.
Anyway, Rory McRossan (first comment under my question) found the solution it was just a typo. I was pretty sure I tried this solution but I obviously didn't. Thank you Rory

Related

Trouble with Accordion and toggling icons

I am trying this for hours, but seems I have somehow a total brain-fart
What I want to achieve is making an accordion with toggling icons and sliding up panels.
This basically works the minus changes to plus but not when I toggle click the certain header.
$('.accordion-wrapper').on('click', function (e) {
e.stopPropagation();
$(this).next('div.accordion-panel').stop(true, false, true).slideToggle();
// $(this).find('.unalex-plus').toggleClass('glyphicon-plus glyphicon-minus');
$('div.accordion-panel').not($(this).next('div.accordion-panel')).slideUp();
if (!$(this).hasClass('active-panel')) {
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus ');
$(this).addClass("active-panel");
} else {
$('this').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');
$(this).removeClass('active-panel');
}
});
This is my fiddle: https://jsfiddle.net/emd381md/11/
I've edited your Fiddle.
You shouldn't use addClass and removeClass in that manner.
toggleClass is a better (and more readable) solution.
Here is a working demo https://jsfiddle.net/ju9L9rne/13/.
Issues were with the names of classes in the if statement. You were using .unalex-plus which is a class all the accordians have, which is what caused the problems.
So I just changed that class to either .glyphicon-minus or .glyphicon-plus depending on, which was needed.
The changed code:
if (!$(this).hasClass('active-panel')) {
$('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus ');
$(this).addClass("active-panel");
} else {
$('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus');
$(this).removeClass('active-panel');
}
I don't check your whole code but this looks a bit crazy, maybe the error is here?
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');
You first remove glyphicon-plus and add it afterwards.

JQuery fades not working in IE9

I'm new to JQuery and can't for the life of me figure out why this isn't behaving properly. As the content in my "content" div changes, I want it to fade in and out. I created a generic "load" function to do this:
function loadPage(page, callback) {
if(current_doc != page) {
current_doc = page;
$("#content").fadeOut(400, function() {
$("#content").load(current_doc, function() {
$("#content").hide().fadeIn(400, function() {
if(typeof(callback) == 'function'){ callback(); }
});
});
});
}
}
Is there some sort of glaring mistake that I'm missing?
Thanks.
P.S. - This code works fine in Firefox.
One thing to check in IE, in Internet Options > Advanced, under Multimedia should be a checkbox that says "play animations in webpages". Ensure that is checked.
While I'm not entirely sure why, placing the content div inside another div and fading that instead seems to have done the trick. I would think that that would have been giving me issues only if "content" itself were being deleted, but that isn't the case from my code. Oh well.

JavaScript Text Transition

I am attempting to make a slideshow out of text, wherein one piece of text fades out, and another fades in, and so on. I have it working for the most part, but there is a small issue.
When the page is first loaded, all of the pieces of text are displayed at once. Each one fades in turn, and once they have all faded once they function as I want. I have used:
(function langFade() {
var lang = $('.lang, .first');
var langIndex = -1;
function showNextLang() {
++langIndex;
lang.eq(langIndex % lang.length)
.fadeIn(1500)
.delay(2000)
.fadeOut(1500, showNextLang);
}
showNextLang();
})();
as described here, but this is causing the problem described above. I've attempted using CSS to hide all but the first piece of text when the site is loaded, but this isn't doing the trick. My suspicion is that the issue is with the HTML - it is rather different to the demo. I have created a fiddle to demonstrate what I mean.
Is there any way of fixing this, either through modifying the JavaScript, or the HTML?
Try to hide the others at first with .not(':eq(0)').hide()
(function langFade() {
var lang = $('.lang, .first'),
langIndex = -1;
lang.not(':eq(0)').hide();
function showNextLang() {
++langIndex;
lang.eq(langIndex % lang.length)
.fadeIn(1500)
.delay(2000)
.fadeOut(1500, showNextLang);
}
showNextLang();
})();
Can also use .not(':first').hide() which may be a little easier to read.
Just hide them initially. And this can be done in pure CSS. Add following class:
h2.first, h2.lang {
display: none
}
Demo: http://jsfiddle.net/XbWJS/2/

Error: "Too much recursion"

Firebug shows me the following error: too much recursion , I tried a lot to determine what causes me this error, but in vain
This is my JavaScript code:
$(".scan").click(function(e){
e.preventDefault();
var docName = $("#nomPJ").val();
$(this).attr("nomDoc",docName);
});
Another on a separated js file:
$(".scan").live("click",function(event){
alert("frame");
var e = event.target;
nomDoc = $(e).attr("nomDoc");
idDoc = $(e).attr("idDoc");
alert("id"+idDoc);
$("#title").text(nomDoc);
$("#modal-body").empty().append('<iframe frameBorder="0" height="90%" width="98%" style="margin-left: 5px" src="/GRH/Scan.jsp?nomDoc=' + nomDoc + '&idDoc='+idDoc+'"></iframe>');
$("#myModal").modal({ dynamic: true });
});
The html element:
numériser
I removed to first code, but the problem still remains.
Ok, sound like a bug, but I have readed the docs and there is not dynamic option, anyway, is well know that the modal bootstrap plugin has some other bugs like the multiple modal bug.
Posible solutions:
Modify the modal.js which is not recommended
Use another modal plugin. It seems like it works pretty well.
Merge the two click events into one
Delete the dynamic: true option on modal() function, set a fixed width to #myModal and overflow:scroll using css.
For those of you trying to actually troubleshoot this in some other application, firebug/fox is pretty rough; chrome will help you out a lot more.
If you're feeling your oats, or can't use chrome, this post saved me from a ton of hassle!
long story short, it goes through logging each function automatically, so
function apples () {
bananas()
}
function bananas () {
apples()
}
becomes
function apples () {
console.log('apples');
bananas()
}
function bananas () {
console.log('bananas');
apples()
}
so that you can see exactly which functions are wrapped up in the all-to-vague "too much recursion"
happy troubleshooting!

JQuery Hover Code: Adding an If Statement breaks it

I have this code that makes a box with information follow the mouse. It's really simple, just checks the custom attribute "description" in the div that you hover over and puts that in the box. However, I want to make it so if that div also has a certain CSS class, then it would put other information in the box, in addition to the other code still working.
$(document).ready(function(){
$(".hover").mousemove(function(e){
if ("div").hasclass("item"){
alert("div hasclass item");
} else {
var description = $(this).attr("description");
$("#hoverdiv").text(description).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+5);
}
}).mouseout(function(){
$("#hoverdiv").hide();
});
});
that's the code I have now. None of the hovers in my page work at all. This is the code that works. It's identical in every way, except no if statement.
$(document).ready(function(){
$(".hover").mousemove(function(e){
var description = $(this).attr("description");
$("#hoverdiv").text(description).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+5);
}).mouseout(function(){
$("#hoverdiv").hide();
});
});
I've tried time and time again to get this to work, and through my testing, it would seem that simply adding an if statement breaks the entire thing. I have absolutely no idea how to proceed or how to fix it.
The culrpit..
if ("div")
Maybe you were trying
if($("div").something()){
}
if ("div").hasclass("item") {
Should be:
if ( $("div").hasClass("item") ) {
For some more you can also test:
if ( $("div").is(".item") ) {
Read about jQuery .is()

Categories