Simple question
has the function:
var maxHeight = 0;
function calcHeight(el){
el.each(function(){
if(maxHeight < el.find('.products-title').outerHeight(true)){
maxHeight = el.find('.products-title').height();
}
});
el.find('.products-title').css('height',maxHeight);
}
calcHeight($('.mini-products-list > li'));
but the record is not found the maximum height,but this function works:
$('.mini-products-list > li').each(function(){
if(maxHeight < $(this).find('.products-title').outerHeight(true)){
maxHeight = $(this).find('.products-title').height();
}
});
$('.mini-products-list > li').find('.products-title').css('height',maxHeight);
The question is why is this happening and what record is correct using the function?
You are not using this to refer current element in function. There you are referring with el, so every time it will just determine for first element.
Use this there also like bellow.
el.each(function(){
if(maxHeight < $(this).find('.products-title').outerHeight(true)){
maxHeight = $(this).find('.products-title').height();
}
});
Related
This is about ellipsis in multiple text in responsive design.
I use jQuery to do it, but I think it will be more easier to write this code, but I have no idea to do it. I need some advice.
if(responsive>1200 && responsive<1919){
$(".ellipsis-2").each(function(){
var maxwidth=15;
if($(this).text().length > maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
console.log($(this).text().length);
});
$(".ellipsis-3").each(function(){
var maxwidth=40;
if($(this).text().length > maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
console.log($(this).text().length);
});
}else{
$(".ellipsis-2").each(function(){
var maxwidth=23;
if($(this).text().length > maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
console.log($(this).text().length);
});
$(".ellipsis-3").each(function(){
var maxwidth=53;
if($(this).text().length > maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
console.log($(this).text().length);
});
}
You just need a function to simplify your code, not really a constructor. Create one for the ellipsis logic receiving the selector for the elements to be applied as well as the max width:
function applyEllipsis(selector, maxWidth){
$(selector).each(function(){
if($(this).text().length > maxWidth){
$(this).text($(this).text().substring(0,maxWidth));
$(this).html($(this).html()+'...');
}
console.log($(this).text().length);
});
}
Now you can call it inside your if statements passing the selector and max width that you need for each case:
if(responsive>1200 && responsive<1919){
applyEllipsis(".ellipsis-2",15);
applyEllipsis(".ellipsis-3",40);
}else{
applyEllipsis(".ellipsis-2",23);
applyEllipsis(".ellipsis-3",53);
}
Depending on what else is after this code you might find some use in storing your class/width values in an object array:
var ellipsisData = [
{
className: 'ellipses-2',
smallWidth: 15,
bigWidth: 23
},{
className: 'ellipses-3',
smallWidth: 23,
bigWidth: 53
}
]
Then declare your function like the other answer:
var truncateText = function(className, maxWidth) {
$("." + className).each(function() {
if($(this).text().length > maxWidth) {
$(this).text($(this).text().substring(0,maxWidth));
$(this).html($(this).html()+'...');
}
console.log($(this).text().length);
});
};
Now decide which width you want to use:
var widthKey = (responsive > 1200 && responsive < 1919) ? 'smallWidth' : 'bigWidth';
And finally iterate over your data elements and perform the function on each:
ellipsisData.forEach(function(ellipsis) {
truncateText(ellipsis.className, ellipsis[widthKey]);
});
Unnecessary probably, but I'd already written it up so I figured I'd post it.
I'm sure this is a trivial problem but I cannot seem to figure it out. I'm trying to fade a side bar in and out, and because I have a few of them in my website, I need to give them individual IDs for Javascript.
This code works
$(window).on("scroll", function() {
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$("#menu").fadeOut();
} else {
$("#menu").fadeIn();
}
});
This doesn't
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
menu.fadeOut();
} else {
menu.fadeIn();
}
});
In the latter piece, all I'm trying to do is assign a variable.
Here's the fiddle: https://jsfiddle.net/gavinfriel/nhovvj6q/1/
Your help would be appreciated.
You have to wrap it in a jQuery call to make it a jQuery object. Otherwise it cannot find the fadeOut and fadeIn functions:
var menu = $("#menu");
or
var menu = $(document.getElementById("menu"));
You need to use jquery to convert menu to jQuery object.
So it will have the fade property
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$(menu).fadeOut();
} else {
$(menu).fadeIn();
}
});
Because if you use menu.fadeOut() it will generate error because menudoesn't have fade property
Checkout this it will work.
$(window).on("scroll", function() {
var menu = $("#menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
menu.fadeOut();
} else {
menu.fadeIn();
}
});
As others have mentioned, you've declared a JavaScript variable but are trying to use it as a jQuery object.
I would personally go with PierreDuc's answer but if you refactor your code slightly you can carry on using the vanilla JS declared vaiable, but pass the variable slightly differently:
var test = document.getElementById("test");
$(test).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test">
TEST
</div>
In your 2nd code, this might look as follows:
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$(menu).fadeOut();
} else {
$(menu).fadeIn();
}
});
I am trying to write some code that only allows buttons with the .add class function on click if there are fewer than 3 immediate children divs within the #hold placeholder div. theDiv_append is a seperate function that adds a div block within #hold div placeholder. I am trying to update the countingdivs variable to then count and update the number of divs within #hold, but it's not working. Currently, the add button does not get disabled.
var countingdivs = '1';
if(countingdivs <= '2') {
$(document).on('click',".add",theDiv_append);
countingdivs = $("#hold > div").length;
};
Any help would be great. Thanks!
Move the condition to the click handler:
$(document).on('click', '.add', theDiv_append);
function theDiv_append() {
var $hold = $('#hold'),
len = $hold.children('div').length;
if (len <= 2) {
// ...
}
}
Try:
var countingdivs = 1;
if(countingdivs <= 2) {
$(document).on('click',".add", theDiv_append);
countingdivs = $("#hold > div").length;
} else {
$(document).off('click',".add", theDiv_append);
}
Maybe try assigning countingdivs with the current length of #hold > div
var countingdivs = $("#hold > div").length;
I have a few elements. The number of them on the page changes constantly, keep that in mind.
The element is called .portalimg. I need to say if the width > height, set it's width to 125px. If the height > width, set the height to 125px.
Here's what I have:
$('.portalimg').each(function() {
var pimgw = $(this).width();
var pimgh = $(this).height();
if (pimgw > pimgh) {
$(this).css('width','125px')
} else {
$(this).css('height','125px')
}
});
EDIT: It alerts success but doesn't apply the width & height.
Where did I go wrong?
EDIT 2: Updated code with cleanest from below. That still only constrains the height property, even if the images is taller then it is wide. Take a look:
http://jacksongariety.com/gundoglabs/
EDIT 3: The issue is they all return 0. If I have an alert say the value of pimgw or pimgh, it's always 0.
EDIT 4: Finally got the best, cleanest code possible with caching and it'll always load correctly, even if it draws images form the cache:
$(function(){
$('.portalimg').ready(function(){
$('.portalimg').fadeTo(0,1).each(function(index) {
var a = $(this);
if (img.width() > a.height()) {
a.css('width','135px')
} else {
a.css('height','125px')
}
});
});
});
If there are multiple elements of class portalimg you could simply use a .each iterator: http://api.jquery.com/each/
$(function() {
$('.portalimg').each(function(index) {
var img = $(this);
if (img.width() > img.height()) {
img.css('width','125px')
} else {
img.css('height','125px')
}
});
}
$('.portalimg').each(function() {
var pimgw = $(this).width();
var pimgh = $(this).height();
if (pimgw > pimgh) {
$(this).css('width','125px')
} else {
$(this).css('height','125px')
}
});
How about this:
$('.portalimg').each(function() {
(($(this).width() > $(this).height())
&& ($(this).css('width','125px')) )
|| ($(this).css('height','125px'))
});
http://jsfiddle.net/DerekL/Qx4jF/
Your loop is wrong you should use
pimg = $('.portalimg').each( function() {;
alert("success")
var pimgw = $(this).width();
var pimgh = $(this).height();
if (pimgw > pimgh) {
$(this).css('width','125px')
} else {
$(this).css('height','125px')
}
});
This call a function on all find object with the class '.portalimg' in your document.
$('.portalimg').each(function() { var
img = $(this),
w = img.width(),
h = img.height(),
toModify = w > h ? 'width' : 'height';
img.css(toModify, '125px');
}
Might try this. Other answers are excellent to. You went wrong with the syntax of for and with body. Did you mean #body or .body?
$(".portalimg").each(function(){
var pimgw = $(this).width(),
pimgh = $(this).height();
if (pimgw > pimgh) {
$(this).css('width','125px')
}else{
$(this).css('height','125px')
}
});
I have a div with overflow:scroll.
I want to know if it's currently scrolled all the way down. How, using JQuery?
This one doesn't work: How can I determine if a div is scrolled to the bottom?
Here is the correct solution (jsfiddle). A brief look at the code:
$(document).ready(function () {
$('div').on('scroll', chk_scroll);
});
function chk_scroll(e) {
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
console.log("bottom");
}
}
See this for more info.
function isScrolledToBottom(el) {
var $el = $(el);
return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}
This is variation of #samccone's answer that incorporates #HenrikChristensen's comment regarding subpixel measurements.
Since it works without jQuery like that :
var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
I do :
var node = $('#mydiv')[0]; // gets the html element
if(node) {
var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
}
You can do that by
(scrollHeight - scrollTop()) == outerHeight()
Apply required jQuery syntax, of course...
Here is the code:
$("#div_Id").scroll(function (e) {
e.preventDefault();
var elem = $(this);
if (elem.scrollTop() > 0 &&
(elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) {
alert("At the bottom");
}
});
Since 2012 Firefox contains the scrollTopMax property. If scrollTop === scrollTopMax you're at the bottom of the element.
Without jquery, for onScroll event
var scrollDiv = event.srcElement.body
window.innerHeight + scrollDiv.scrollTop == scrollDiv.scrollHeight
For me $el.outerHeight() gives the wrong value (due to the border width), whereas $el.innerHeight() gives the correct one, so I use
function isAtBottom($el){
return ($el[0].scrollHeight - $el.scrollTop()) == $el.innerHeight();
}