Equal height columns with jQuery not working? - javascript

I've tried numerous approaches to getting equal columns, and none have worked for me. I've tried every variation of jQuery plugin that I could find with different calls using both document ready and window load, in head and before the end of body... just no luck... the sidebar will not continue to meet my content.
I've created a fiddle with my latest shot (which is this method: http://www.outsidethebracket.com/equal-height-columns/), but am up for changing to whichever method will work.
http://jsfiddle.net/7WraW/
$(window).load(function(){
$("#sidebar").height(Math.max($("#content").height(),$("#sidebar").height()));
})
Appreciate any help!

Works fine if you use $(document).ready instead of $(window).load:
$(document).ready(function () {
var hgt = Math.max($("#content").height(), $("#sidebar").height());
$("#sidebar,#content").height(hgt);
});
http://jsfiddle.net/mblase75/7WraW/5/

Here try this...
$(document).ready( function() {
var contentHeight = $('#content').height();
$('#sidebar').css('height', contentHeight + "px");
});

There is The jQuery plugin for equalizing the height or width of elements that's far more better and with more utilities to accomplish this, and really easy to use:
http://tsvensen.github.io/equalize.js/
hope this helps, happy coding :)

here's a simple solution for equal height columns using jquery:
$(window).load(function(){
$("#left_side").height($("#right_side").height());
});
http://jsbin.com/iyirel/1/watch

Related

Dynamically change the itemWidth of a flexslider

I have a flexSlider initialized like this:
$('.flexslider').flexslider({
itemWidth: width
});
Is it somehow possible to dynamically change the itemWidth after the initialization and force a refresh so that the new value is applied?
I finally had to modify the flexslider script in order to make the vars property available:
...
slider.vars = vars;
//FlexSlider: Initialize
methods.init();
...
Then vars.itemWidth can be modified and doMath can be called to refresh the slider:
var slider = $(".flexslider").data("flexslider");
slider.vars.itemWidth = ...;
slider.doMath();
I think that it's not possible. One way would be to remove the content inside your container (assuming it's .flexslider).
$('.flexslider').text("").flexslider({
itemWidth: newWidth
});
The problem with this solution is that you are reinitializing the whole module which might not be necessary.
Another solution would be to edit the width of the container itself:
$('.flexslider').width("NEWpx")
And the last solution: contact the dev team and ask for a refresh method.
Hope this help, cheers ;)

simultaneously scroll multiple elements

I'm at a brick wall. I have a little project:
(LINK HAS BEEN REMOVED)
You can see lots of horizontal scrolls, when you bring the browser down to mobile width, you can scroll horizontally. My problem is, how do I get it so that if you horizontally scroll one item, all the others will follow too? I have tried the following:
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
})
But I'm getting nowhere fast. Any help would be appreciated.
UPDATE
Turns out it does work when you put the code into console AFTER the page has loaded.
I resorted to:
$(document).on('scroll', '.container', function(){
$('.container').scrollLeft($(this).scrollLeft());
});
UPDATE2
Big thanks to #George and everyone who answered to point me in the right direction. The tables are loaded with jQuery:
$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"");
All I had to do was attach my scroll code after the elements were loaded, like so:
$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"", function(){
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});
You told it works from console after page has loaded. So, try this out.
$(document).ready(function(){
$(document).on('scroll', '.container', function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});
OR use the below code:
$(document).ready(function(){
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});
Hope this helps.
Please try this
$('.container').scroll(function(){
var scrolled = $(this);
$('.container').each(function() {
$(this).scrollLeft(scrolled.scrollLeft());
})
})
Hope it helps.

Count Number of Matched Elements in Document with jQuery

I need to count the amount of video thumbnails on a given product page for an ecommerce store, and then output this number on the same page in a particular HTML element.
The desired result is that on the 'Videos' tab there will be the number of videos right next to it. i.e. Videos 17
I've tried to use .length() and .append() to achieve this but am having dramas. I have about 1.5 days jQuery experience so I know I'm doing something wrong here.
$document().ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
I've set up a JSFiddle
Any help is much appreciated. Thanks!
In Jquery $() is a selector, if you say :
$(document).ready(function(){
});
it means that execute the block inside that function when my document is loaded complete on the browser, but what you write :
$document().ready(function(){
...
});
is wrong syntax and is not valid in jquery.
this should work with length:
$(document).ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
or you can use size():
$(document).ready(function(){
var numvids = $('.videos').size();
$('.countvids').append("<p>"+numvids+"</p>");
});
here is Fiddle DEMO
you code was like this:
$document().ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
which is wrong
and also you need to include query script file in your page.
you can include it from online like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
See updated fiddle.
The only error is that you did not include the Jquery link and/or
$(document).ready(function(){
http://jsfiddle.net/65BrR/4/
$document() is not Correct syntax of jquery , its $(document)
hope so its solve your problem !
$(document).ready(function(){
var numvids = $('.videos').length;
alert(numvids );
$('.countvids').append("<p>"+numvids+"</p>");
});
Your mistake was referencing the a non-existent global function called $document isntead of calling $(document). As it happens, your code would have worked, as-is, if it had been preceded by this:
var $document = $(document).ready;
But this is purely for amusement and is not very practical or readable code :)
Use the document-ready shortcut syntax
You really want to use the shorter jQuery shortcut. Instead of $(document).ready(function() {YOUR CODE HERE}); use $(function(){YOUR CODE HERE});
e.g.
$(function(){
var numvids = $('.videos').length;
alert(numvids );
$('.countvids').append("<p>"+numvids+"</p>");
});
This results in shorter code and is becoming so commonplace you might as well get used to it :)

JQuery Isotope not triggering

I have added the JQuery plugin Isotopte to my site.
It works but only after the browser resizes. The images just seem to stack up on each other before hand.
My code to is:
$(function(){
$('#isotopecontainer').isotope({
itemSelector: '.frontitem',
masonry: {
}
});
});
I've tried adding columnWidth as the site suggests but this makes no difference.
Im really not sure what is going on. Can anyone help me out at all?
I don't know exactly where your issue is but I got a working solution.
Working solution (JSFiddle)
$(document).ready(function(){
$('#isotopecontainer').isotope({
// options
itemSelector : '.frontitem',
masonry : {}
});
}
);
It has all of your options but I can't seem to find exactly where your code is wrong. I did use the document ready callback that jquery supplies however I don't think that was the issue.
Also make sure you include jquery before isotope.

Stacking Images When Page Loads

I've read through a number of similar questions but nothing has worked for me yet. The url is here: http://www.promotion1.com/home-wmc-slide
I've installed a slider and the images are stacking before the script, I do not know JavaScript...
Would anyone be willing to look at the site and see if there might be a quick fix? I seriously need the help.
Thank you!
Try changing your javascript from $(window).load(...) to $(document).ready(..)
$(document).ready(function (){
$("#pikame").PikaChoose();
});
Make sure you're using the newest version of PikaChoose and then do the following.
For your css:
#pikame{ display:none; }
In your js:
$(document).ready(function (){
var showUL = function(){ $("#pikame").show(); };
$("#pikame").PikaChoose({buildFinished:showUL});
});

Categories