Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

JQuery acting strange

Posted on 2013-12-18
8
Medium Priority
?
222 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
Create CentOS 7 Newton Packstack Running Keystone

A bug was filed against RDO for the installation of Keystone v3. This guide is designed to walk you through the configuration for using Keystone v3 with Packstack. You will accomplish this using various repos and the Answers file.

 
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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)
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…
Suggested Courses

730 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