Solved

JQuery acting strange

Posted on 2013-12-18
8
218 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery GMAP3 Hierarchy 1 28
Regex for detecting two strings that start with same value but end differently? 5 23
Jquery 10 20
If condition on Html with Asp 11 17
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

809 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