I'm building a wordpress theme and I'm developing a sidebar which stays fixed during scrolling and goes up when you reach the comments. Here's a part of my jQuery code:
jQuery(window).bind('scroll', function () {
var flag = '';
if (calcTop() === true && calcBottom() === false && flag !== 'false')
{
jQuery('#aside-sidebar').css({'position': 'fixed', "top": "59px"});
}
else if (calcTop() === false && calcBottom() === false && flag !== 'false')
{
jQuery('#aside-sidebar').css({'position': 'absolute', "top": ""});
}
else
{
flag = 'false';
jQuery('#aside-sidebar').css({'position': 'absolute', "top": sidebarPosition()+"px"});
console.log(flag);
}
});
The issue I have is that the flag variable is not changing according to the last part of the if statement. Any hint?
in the else part if you are setting flag to 'false' it will definitely be set as u expected.
In your condition part i think you can add some refactoring as in if and else if part you are having two similar conditions .
and why are you setting flag to a string variable instead you can easily use boolean flag here.
last but not the least you can watch the console for any error. if any error occurs that means it is not coming to the setter part flag = 'false';
Related
Hello I have a problem with checkboxes in my app.
I want to set value of layer visibility to false when other layer visibility is true and also set checkbox value to checked when visibility of layer is true. I have problem with .click function - console throws me typeError checkbox[i].click is not a function.
var changeLayer = function() {
if (layers[0].M.visible == true) {
layers[1].M.visible == false
} else if (layers[0].M.visible == false) {
layers[1].M.visible == true
}
if (layers[1].M.visible == true) {
layers[0].M.visible == false
} else if (layers[1].M.visible == false) {
layers[0].M.visible == true
}
}
var checkbox = $('.layer');
for (i = 0; i < checkbox.length; i++) {
checkbox[i].click(changeLayer);
//$(checkbox[i]).on('click', changeLayer)
}
Here is image of layer switcher where after click on first layer, second one should hide and uncheck the box.
I know that is maybe silly question, but I couldn't find solution. I hope you can help me.
Your code looks fine, but you could simplify it quite a bit. The following will bind the same event to all elements with the class 'layer'.
$('.layer').click(changeLayer);
We'll probably need some more context to provide better solutions. As an FYI .click(someHandler) is just a shortcut for .on('click', someHandler), they are the same.
I'm trying to hide/show sections of a page using the following script:
$(function () {
$('.open').on('click', function () {
var contentType = $(this).attr('id');
if (contentType == "all") {
$('.content-div').show();
} else if (contentType == "train" || "manual") {
$('.content-div.' + contentType).show();
$('.content-div:visible:not(.' + contentType + ')').hide();
} else if (contentType == "close") {
$('.content-div').hide();
} else {
$('.content-div.' + contentType).toggle();
}
});
});
A jsfiddle example is here with html
The issue is with the final line in the else part - this works correctly (show/hide the relevant div(s) with the associated class) when outside the if-else statement but doesn't work in the else section - the div appears the first time a numbered button is clicked, but doesn't disappear on reclicking.
What am I doing wrong? Many thanks.
Replace:
} else if (contentType == "train" || "manual") {
with:
} else if (contentType == "train" || contentType == "manual") {
"manual" is always evaluated as true therefore this whole else-if branch is evaluated as true. See MDN for more details.
The jquery :visible and :hidden selectors are a little misleading, they select elements that consume space in the document, therefore something with visibility:hidden is classed as :visible even though it's not o_O
I need to be able to select only elements that are :reallyvisible, that I can see with my eyes eg, not opacity:0 or visibility:hidden
Obviously for an element to be visually visible all it's ancestors must also be visible so I assume a recursive look up the tree would be necessary.
Is this just too expensive?
Can anyone suggest a reliable efficient way to achieve this?
How about:
$.expr[':'].reallyVisible = function(node, idx){
while(true){
// should be faster than $(node).css()
var css = document.defaultView.getComputedStyle(node, null);
if(css.opacity == 0 || css.visibility == 'hidden')
return false;
node = node.parentNode;
if(!node || node === document)
break;
}
return true;
}
http://jsfiddle.net/jxEFk/
Try this code :
function isVisible(el){
if (el.css('opacity') != '0' && el.css('visibility') != 'hidden') {
return true
}
return false
}
$('myelement').filter(function () {
visible = true
if (isVisible($(this)) == false)
visible = false
$(this).parents().each(function(){
if (isVisible($(this)) == false)
visible = false
})
return visible == true
}).html("I'm really visible !")
I'm writing a small required HTML5 attribute fallback for various inputs. It's going pretty well so far, but I'm having trouble when checking a radio button is ':checked' and using the 'OR' || operator in the loop:
if (self.val() === '' || self.is(':not(:checked)')) {
For some reason when I add this it breaks the script slightly and will indicate that the input fields (type=text) are empty when they're not. Is there a better way at all to loop through and indicate the difference between an input type 'text' and 'radio'?
Here's the loop:
var reqClass = $('.required')
reqClass.each(function(){
var self = $(this)
// if empty
if (self.val() === '' || self.is(':not(:checked)')) {
// if it doesn't have require-checked class
if (!self.hasClass('require-checked')) {
self.addClass('require-checked')
self.parent().append('<span class="form-error">This field is required.</span>')
}
e.preventDefault()
//$('.form-submit').attr('disabled', true)
// if it's been checked, but there is a value now
} else if (self.hasClass('require-checked') && !(self.val() === '')) {
self.siblings('.form-error').hide()
}
})
Classes are obviously present for 'fallback' browsers and changed on the fly. Here's a JSFiddle, thank you for any help:
http://jsfiddle.net/cyncV/2/
A text box is indeed :not(:checked) (even if it has text in it), so the text boxes are showing as empty when they are not.
Perhaps something like
if (self.val() === '' || self.is(':checkbox:not(:checked)') || self.is(':radio:not(:checked)')
var self = this;
var empty = self.type=='checkbox' ? !self.checked : self.value=='';
if (empty) {
// do stuff
}
FIDDLE
There is a solution :
var checked = (self.is(':checkbox') || self.is(':radio')) ? self.is(':not(:checked)') : false;
if (self.val() === '' || checked) {}
Just add a little condition that if input is checkbox or radio, it look if it's checked, else it return false. Then pass the result into the if condition.
I am attempting to include an If statement in some Javascript on my .aspx page.
I declare FinishedPacking at the beginning of the page as False. Then when a user clicks the orderSubmit button, the if Statement evaluates if the value is indeed false, if so, display an alert. So far the if statement does not work. If I use just the alert with no if statement it displays the alert:
var FinishedPacking = false;
$("#orderSubmit").click(function (e) {
if (FinishedPacking = false) {
alert("The order is not finished.")
}
ClearScreen();
GetOrder();
}):
As stated if I do not include the if statement, the alert works when I click the order button. Not sure why this simple If statement is not being picked up.
You need the double-equals
if (FinishedPacking = false)
should be
if (FinishedPacking == false)
Try this
var FinishedPacking = false;
$("#orderSubmit").click(function (e) {
if (FinishedPacking == false) {
alert("The order is not finished.")
}
ClearScreen();
GetOrder();
}):
You need 2 ='s signs
if (FinishedPacking == false) {
You are trying to ASSIGN false to the variable FinishedPacking inside your condition (which is wrong) you want to COMPARE the values.