Solved

JQuery acting strange

Posted on 2013-12-18
8
216 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
 
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
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)

707 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now