Solved

JQuery acting strange

Posted on 2013-12-18
8
221 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
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

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

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…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

622 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