Solved

JQuery acting strange

Posted on 2013-12-18
8
219 Views
Last Modified: 2013-12-20
I have this code

$('.groupContainer').each(function(){
			var rowWidth = 16;
			$(this).imagesLoaded(function($images){
				$images.filter(':not(".overlayBoxImage")').each(function(){
					if($(this).context.id != 'groupTitle'){
						$(this).parent().parent().parent().css('width', $(this).width());
					}
					rowWidth += $(this).width();
				});
				
				if(rowWidth > maxWidth){
					maxWidth = rowWidth;
					$('.vnBreadcrumbsCont').css({width: maxWidth, 'max-width':maxWidth});
					$('.guideDescCont').css({width: maxWidth, 'max-width':maxWidth});
					$('#headerContainer').css({width: maxWidth});
					$('.groupContainer').css({width: maxWidth,'max-width': maxWidth});
					$('#guideContainer').css({width: maxWidth, 'max-width': maxWidth});
				}
			});
		});

Open in new window


This code will loop to all divs called groupContainer and get the size of all the images and set the div size according to the images on the div.

The issue is that once the page loads it does not work, if you refresh the page it works.

Any reason why this will happend?
0
Comment
Question by:Medrise
  • 4
  • 4
8 Comments
 

Author Comment

by:Medrise
ID: 39727961
I made some changes and I got the code to work. I needed to load all the images first and later loop.

But I think I need to optimize this code...

$('.groupContainer').imagesLoaded(function($images){
			$(this).each(function(){
				var rowWidth = 16;
				$(this).imagesLoaded(function($images){
					$images.filter(':not(".overlayBoxImage")').each(function(){
						if($(this).context.id != 'groupTitle'){
							$(this).parent().parent().parent().css('width', $(this).width());
						}
						rowWidth += $(this).width();
					});
					if(rowWidth > maxWidth){
						maxWidth = rowWidth;
						$('.vnBreadcrumbsCont').css({width: maxWidth, 'max-width':maxWidth});
						$('.guideDescCont').css({width: maxWidth, 'max-width':maxWidth});
						$('#headerContainer').css({width: maxWidth});
						$('.groupContainer').css({width: maxWidth,'max-width': maxWidth});
						$('#guideContainer').css({width: maxWidth, 'max-width': maxWidth});
					}
				});
			});
		});

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39728275
This shortened version should do the same thing.

ImagesLoaded acts like an event handler. It merely lets you know when the images are finished loading so you can then act on them. It should not need to be called more than once.
$('.groupContainer').imagesLoaded(function(){
		var rowWidth = 16;
		$('.groupContainer').find('img').not('.overlayBoxImage').not('#groupTitle').each(function(){
			$(this).parent().parent().parent().css('width', $(this).width() + 'px');
			rowWidth += $(this).width();
			if(rowWidth > maxWidth){
				maxWidth = rowWidth;
				$('.vnBreadcrumbsCont').css({width: maxWidth, 'max-width':maxWidth});
				$('.guideDescCont').css({width: maxWidth, 'max-width':maxWidth});
				$('#headerContainer').css({width: maxWidth});
				$('.groupContainer').css({width: maxWidth,'max-width': maxWidth});
				$('#guideContainer').css({width: maxWidth, 'max-width': maxWidth});
			}
		});
   });

Open in new window

0
 

Author Comment

by:Medrise
ID: 39728392
tommyBoy,
the issue is that I have N rows (div) with the class (.groupContainer) and inside that div I have N images. Your code works, but it gives me all the images and I need to break down by rows.

That is why I had the $(this).each(function(){... and looped over the images again... that way I only get the images on that row.
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 38

Expert Comment

by:Tom Beck
ID: 39728419
It's redundant to handle the imagesLoaded event more than once. The images only get loaded once.

This is not working for you..
$('.groupContainer').imagesLoaded(function($images){
            $(this).each(function(){

...because $(this) on the second line refers to the imagesLoaded event itself, not the .groupContainer divs so there's nothing to loop through. If you want to verify, add a console.log at the second line and check the log.
$('.groupContainer').imagesLoaded(function($images){
              console.log($(this));
            $(this).each(function(){

Allow me to try again now that I understand the situation better. Put all of your .groupContainers in a wrapper with an id="groupsWrapper" or whatever you like. If there is already a parent container, use that. If the parent is the body tag, you could use that, $(body), but I probably would not.
$('#groupsWrapper').imagesLoaded(function() {
	   var rowWidth = 16;
	   $('.groupContainer').each(function(){
		  $(this).find('img').not(".overlayBoxImage").not('#groupTitle').each(function(i){
			  $(this).parent().parent().parent().css('width', $(this).width() + 'px');
			  rowWidth += $(this).width();
			  if(rowWidth > maxWidth){
				maxWidth = rowWidth;
				$('.vnBreadcrumbsCont').css({width: maxWidth, 'max-width':maxWidth});
				$('.guideDescCont').css({width: maxWidth, 'max-width':maxWidth});
				$('#headerContainer').css({width: maxWidth});
				$('.groupContainer').css({width: maxWidth,'max-width': maxWidth});
				$('#guideContainer').css({width: maxWidth, 'max-width': maxWidth});
			}
		  });
	   });
   });

Open in new window

0
 

Author Comment

by:Medrise
ID: 39729197
This is what I did.

		//Load all the images
		$('.groupContainer').imagesLoaded(function(){
			//Loop all the groupcontainers
			$('.groupContainer').each(function(){
				var rowWidth = 16;
				//Get all the images from group container
				$(this).find('img').not('.overlayBoxImage').each(function(){
					if($(this).context.id != 'groupTitle'){
						$(this).parent().parent().parent().css('width', $(this).width());
					}
					rowWidth += $(this).width();
				});
				if(rowWidth > maxWidth){
					maxWidth = rowWidth;
					$('.vnBreadcrumbsCont').css({width: maxWidth, 'max-width':maxWidth});
					$('.guideDescCont').css({width: maxWidth, 'max-width':maxWidth});
					$('#headerContainer').css({width: maxWidth});
					$('.groupContainer').css({width: maxWidth,'max-width': maxWidth});
					$('#guideContainer').css({width: maxWidth, 'max-width': maxWidth});
				}
			});
		});

Open in new window

0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39729414
And it works?
Hard to know what the imagesLoaded plugin is doing with that groupContainer selector in the background but I suppose it's acting like any of the standard event handlers do.The browser is not interpreting it as an array of divs. If it works, go for it. The only real experts on these plugins are the ones that create them.
0
 

Author Closing Comment

by:Medrise
ID: 39732555
Thanks for the help... :)
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39732718
Glad to help, thanks for the points.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question