JavaScript - Need Help With Jquery Driven Script To Resize All Images To Parent Element

Hi,

I have a small problem with a page I'm working on. I have an anchor tag inside a table that has a mouseover event that updates a contextual help box. I need to add a similar mouseover event to the anchor tag that does the same thing, but updates the help box with different text.

The problem I have is that when the mouse is over the table, no matter if I move the mouse over the anchor, the help text only displays the message that is passed from the table's mouseover function call.

I think the solution *may* be something to do with event bubbling, but I'm not exactly sure how to implement it. The code I'm dealing with is below:

The code below is PHP.
The table mouseover (for reference):
Code:

echo "<table class='cleanTable' width='100%' style='margin-top: 5px'";
	    echo " onMouseOver=\"updateHelpText('Message 1.');\" onMouseOut='clearHelpText();'>";
	    echo "<tr><th>&nbsp;</th><th>&nbsp;</th><th>First Name</th><th>Surname</th><th>Last Login</th></tr>";

The anchor mouseover:
Code:

echo "<tr class='cleanrow'><td><a href='newMember.php'><img border='0' src='images/icon_add.gif'></a></td><td></td>";
		echo "<td colspan='3'><a class='workbenchLink' href='newMember.php' onMouseOver=\"updateHelpText('Message 2');\" onMouseOut='clearHelpText();'>Invite a new colleague...</a></td></tr>";
		echo "</table>";

The function (javascript):
Code:

function updateHelpText(newText) {
		document.getElementById("helpBox").innerHTML = "<h4>&nbsp;" + newText + "</h4>";
	 }

Any help with this would be great, thanks.

ok so here is the problem in more detail

i have a dropdown menu wrapped in a div attached to this div is the onmouseout event which hides the div this is working

the problem however is when moving from 1 link to the next in the dropdown the onmouseout event of the wrapper div is firing and hiding the div prematurely

see it live

relevant code:
Code:

<div id="roster_drop" class="drop_menu" style="left: 128px;" onmouseout="this.style.display = 'none';">
	<a href="roster.php">Superstars</a>
	<a href="champions.php">Champions</a>
	<a href="titlehistory.php">Title History</a>
</div>

how do i make the event only trigger when your mouse leaves the div itself and not crossing onto a link

Hi Experts,

i have 2 JS array and i need to have dependency between them knowing that 1st Array has parent element of the 2nd one.

i.e


ARRAY1
ID VAL ID2
2 Dep1 10
3 Dep2 20
4 Dep3 30

ARRAY2

ID VAL ID2 PARENT
20 team1 11 10
21 team2 12 10
22 team3 13 20
23 team4 14 30


i need to have two different DDL's where when i choose VAL = Dep1 on ARRAY1 , i should see on the 2nd DDL only elements with parent corrsponding to Dep1 ( PARENT =10).


how this can be possible thanks

I've got a page (hrnewseastanglia.com) where I have to use a jquery function to stretch the body to the user's window height if it isn't already.

In the same code I also use a condition that if the body is bigger than the user's window, the content has a padding to stop it going over the grass.

The reason I need to do the resize is because I have a background image that needs to sit at the very bottom of the page (with no bar or gap below it). The reason the padding can only exist when the body is bigger than the window is because it will put a scrollbar on pages that shouldn't have them.

It works great, but the only trouble is that if somebody decides to resize their window on a page that fits in it - it breaks.

This is my script:
Code:

<script type="text/javascript">

$(document).ready( function() {
	
	stretch_portal_content();
	$(window).resize( stretch_portal_content );
});

function stretch_portal_content() {
	// if the body isn't at least as big as the user's window - force it to be
	if( $(window).height() > $('body').height() ) {
		$( '#wrapper' ).height(
			$(window).height() - ( $('body').height() - $('#wrapper').height() )
		);
	}
	
	// if the content goes beyond the window make sure it doesn't go beyond the grass at the bottom
	if( $(window).height() < $('#wrapper').height() ) {
		$( '#wrapper' ).css("padding-bottom", '130px');
	}

}

</script>

I've been scratching my head over this for hours but haven't come up with a solution. If anyone can help I'd really appreciate it!

I have found a jQuery slide show at http://tobia.github.com/CrossSlide/ which interests me because of its smooth, cross-browser fade transitions. I would like to add a feature which automatically resizes the images proportionally, to fit the browser window. This feature is demonstrated in the Supersized slide show at www.mauitradewinds.com, but I am not satisfied with the quality of fade transition with Supersized -- especially under Safari. I would appreciate any guidance as to how to implement auto-resizing with the Cross-slide plug-in. Additionally, it would help if Cross-slide launched the slide show without waiting for all images to load.

i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why?

i test it on this
site: Quote:
http://bowser.effectgames.com/~jhuck...rd/test10.html

Code:

$(document).ready(function(){
   $("#d_clip_container").hover(
  function () {
    $(this).append($('<span class="tip">click to copy</span>'));
  },
  function () {
    $(this).find("span:last").remove();
  });
})

i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you.

Overview
Well it's been a while since I've been here! Another set of eyes on this would really help me out. I have a simple slider plugin that I wrote in jQuery. One of the parameters that I've written is which element you want to be the container for each slide. In the example I'm going to post, I'm using a list item (li).

The Problem
Due to lazy coding or whatever, I really made a blunder of things inside my plugin. Throughout the plugin, I'm calling that parameter directly. Because of this, the script context is being applied to EVERY element on the page.

So...when I pass in the tag jQuery selector: $('li') as the element selector, it works...but it applies the slider effects to every <li> on the page, not just the container I assign to the plugin.

Every time I change $('li') to anything more specific at all (a class, an id, better selector) or I rewrite the plugin to use something more specific (hard-coded), the browser usually crashes due to an unresponsive script. I'm seeing this in Chrome & Firefox. I'm guessing this some kind of weird closure-memory leakage issue that I'm just not ready to handle, or something about the way jQuery and event delegation/binding works.

The frustrating thing is that if I do a console.log of the element parameter, and I use something more specific....it returns just fine! The script blows up the page though....

The Code
Code:

<html>
<head>
<script>
(function($) {
	$.fn.extend({
		luSlider: function(options) {
		
			var o = $(this);
		
			var defaults = {
				element : $(this),
				direction: 'left',
				next: null,
				prev: null,
				distance: null,
				speed: 'slow',
				prevAtEnd : null,
				nextAtEnd : null,
				prevNextEvent: null,
				pagination: false,
				elementClick : false,
				pager : $(this),
				callback: null
			};
			
			var options =  $.extend(defaults, options);
			
			o.data('curPosition','');
			
			// set cursor for next & previous buttons
			if (options.prev != null) options.prev.css('cursor','pointer');
			if (options.next != null) options.next.css('cursor','pointer');
				
			
			// Wrap all of our items in a super large div with hidden overflow
			o.find('ul').first().wrap("<div style='width:999999px;' id='luSliderWrapper'></div>");
			o.css('overflow','hidden');
			
			// If no distance specified, do it based on the width of a single element
			var totalWidth = 0;
			
			
			var el = options.element;

			
			// Get the total width of all our items
			el.parent('ul').css({'padding':'0px','margin':'0px'});
			
			el.each(function() {
				totalWidth += $(this).outerWidth(true);
								
				//float our items to the left
				el.css({'display':'block','position':'relative','float':'left'});

				

			});
			
			// Get individual item width
			var itemWidth = totalWidth / el.size();
			//var itemWidth = el.outerWidth(true);
		
			// Get the number of visible items based on our container size
			var spaceUsed = $(this).innerWidth() / itemWidth;
			var numVisibleItems = Math.floor( spaceUsed );
			
			
			/*
			if (spaceUsed % 1 > 0 ) {
				$(this).css({'padding-left':itemWidth/2,'padding-right':itemWidth/2});
			}*/
			
						
			// a variable to store the number of items
			var numItems = el.size();
			
			
			if (options.distance == null) options.distance = itemWidth; 


			/* Initialize the location */	
			if ( $(this).data('curPosition') == undefined ) {
				$(this).data('curPosition',0);
			} 
			
			
			// get the total number of pages
			var numPages = Math.ceil(numItems / numVisibleItems);
			
			
			togglePrevNext();
			buildPager();
			
													
			
			return this.each(function() {
			
				if (options.elementClick) {
					//el.click(function() {
					//	document.location = $(this).find('a').attr('href');
				//	});
				}
				
				//	var cb = options.prevNextEvent;
				
							
				
				// Animate Next
				options.next.click(function() {
					
					togglePrevNext();
									
					var theEnd = endOfShow();
					var howFar = options.distance;
				
					if (!(theEnd)) {

						o.data('curPosition',  Math.round( (o.data('curPosition')) + 1) );
						
						if (options.pagination) {
							howFar *= numVisibleItems;
						}				
						
						distance = "-=" + howFar;
						
						el.stop(true,true).animate({
							"left" : distance
						},options.speed);
					} else {
						// end of show	
					}			
					
					
					
					togglePrevNext();
					
					movePager();
					
					handleCallBack();
				});
				
								
				// Animate Previous
				options.prev.click(function() {
				
					togglePrevNext();
					
					//var theEnd = endOfShow('prev');
					var theEnd = startOfShow();
					var howFar = options.distance;
					
					if (!(theEnd)) {
						o.data('curPosition',  (o.data('curPosition') - 1) );
						
						if (options.pagination) {
							howFar *= numVisibleItems;
						}
						
						distance = "+=" + howFar;

						
						el.stop(true,true).animate({
							"left" : distance
						},options.speed);
						
					} else {
						// end of show
					}
										
					togglePrevNext();
					movePager();
					handleCallBack();
				}); // end prev.click
				
					
				$('#luSliderPager li').click(function() {
					var curPage = $('li.activePage').index();
					var newPage = $(this).index();
					var direction = (curPage > newPage) ? "+=" : "-=";
					
					var distance = Math.abs(curPage - newPage) * options.distance;
					
					if (options.pagination) {
						distance *= numVisibleItems;
					}

					var newLeft = direction + distance;
					
					// set position
					o.data('curPosition', newPage);
					movePager();
					
					// animate
					el.stop(true,true).animate({
						"left" : newLeft
					
					},options.speed);				

				});
				
			}); // end return
						
			function togglePrevNext() {
			
				(startOfShow() ) ? options.prev.addClass(options.prevAtEnd) : options.prev.removeClass(options.prevAtEnd);
							
				(endOfShow() ) ? options.next.addClass(options.nextAtEnd) : options.next.removeClass(options.nextAtEnd);	
			} 
			
			
			function handleCallBack() {
				if (typeof options.callback == "function") options.callback(o,options); 
			}
			
			// Determine our boundaries...and if we've reached them
			function startOfShow() {
				return(o.data('curPosition') <=0 ) ? true : false; 
			}
			
			function endOfShow() {
		
				if (options.pagination) {
					return (o.data('curPosition') >= numPages-1) ? true : false;
				} else {
					return (o.data('curPosition') >= (numItems - numVisibleItems) ) ? true : false;
				}				
			}
			
			
			
			function movePager() {
				$('.activePage').removeClass('activePage');
				$('.pager').eq(o.data('curPosition')).addClass('activePage');
			}
			
		
			
			function buildPager() {
			
				/* Custom CSS rule for pager default */
				var style = "<style type='text/css'> #luSliderPager li { float: left; display:block; width:13px; height:16px; padding: 0 5px; }";
				style += ".pager { background:url('luSlider/images/pager_button-sprite.png') left top no-repeat; cursor:pointer; }.activePage { background-position:left -15px; }</style>";
				
				$(style).appendTo("head");
				
				var numItemsPerPage = o.width() / itemWidth;
				var pager = "<ul id='luSliderPager'>";
				
				
				for (var x = 0; x < numPages; x++ ) {
					if (o.data('curPosition') == x) {
					pager += "<li class='pager activePage'></li>";
					}else {
					pager += "<li class='pager'></li>";}
				}
				pager += "</ul>";	
				
			 	$(pager).appendTo(options.pager);
			 }
			
			
			function showPager() {
							
			}
			
		}
		
	});				
})(jQuery);

</script>


<script>
$(function() {
/* * * * * * * * Slider Code * * * * * * * */
	
	var myCB = function(o, options) {
			// my callback function executed after every transition
			//console.log(o.numVisibleItems);
	}
	
	$('#sliderContainer').luSlider({ 
		element : $('li'),
		next : $('#slide_terms_right'),
		prev : $('#slide_terms_left'),
		speed : 1000,
		prevAtEnd : "slide_terms_prev_disabled", 
		nextAtEnd : "slide_terms_next_disabled",
		elementClick : true,
		pagination : true,
		pager : "#pager",
		callback : myCB
	});
)};
</script>

</head>
<body>
<div id="sliderContainer">
		
	<ul id="mySlides">
         <li class="slide"></li>
         <li class="slide"></li>
         <li class="slide"></li>
        </ul>
</div>
</body>
</html>

notes
the line var el = options.element; is where I start to have issues. The example I mentioned of hard-coding & console.log that works is this:

Code:

...
var el = options.element;
console.log(el);  //displays what I'd expect, a jQuery object

el = o.find('li');  // only find li's that are children of the div attached to the plugin
console.log(el);  //displays exactly what I'd expect, a jQuery object of JUST the right li's

// if I change el to be this new selector tho...the browser page will crash. 'Unresponsive Script' etc.
...

Please ignore anything hard-coded into the plugin, I tossed several things in for brevity. Also if you have any other code cleanup tips, I'm more than receptive. Also for this example I removed all of the crazy ajax and php and other template-y type stuff.

I noticed the problem when I embedded the slider on my page and my top navigation menu (which uses a <ul>) started scrolling off the screen when I clicked on my slider arrows :P




THANK YOU SO MUCH,
-Celt

What I am trying to do is get a select box for possible options... Much like you see on facebook when you search for a friend. If you select one of the options an action happens and if you select outside of the box or tab else where it closes. I can seem to do one or the other but not both. The options are filled in via AJAX and JSON. Here is a sample of my code.

Code:

<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
  suggestions.hide();
  // On the change of the id_location text search for matching results.
  $('#text').keyup(function(){
    // Get the value of the id location.
    var text = $('#text').val();
    // Trim any unnecessary white spaces.
    text = jQuery.trim(text);
    // Start guessing after the length of text if greater than one.
    if (text.length > 1) {
      // Create a query string for ajax.
      var qry_str = '?suggestion=' + text;
      // Send an ajax json request.
      $.getJSON('http://example.com/page.html' + qry_str, function(data){
        // Empty the suggestions box.
        $('#suggestions').empty();
        // Show the suggestions box.
        $('#suggestions').show();
        if (data.length > 1) {
          // Start a list for the suggestion.
          $('#suggestions').append('<ul class="suggestion_list"></ul>');
          // Loop through all the results.
          for (i = 1; i < data.length; i++) {
          // Get the name.
          $('#suggestions ul').append('<li id="suggestion_' + data[i].id + '" class="suggestion suggestions">' + data[i].name + '</li>');
        }
        // If an id selection was made then place its complete text in the box and its id in the id location box.
        $('.suggestion').click(function(){
          // Get the id from the substring of the html id.
          var html_id = $(this).attr("id");
          var id = html_id.substring(11);
          // Get the name from the text.
          var name = $(this).html();
          // Alert just to test if you have the id.
          alert(id);
          // Set the value of the text box to the complete name.
          $('#text').val(name);
          // Hide and empty the suggestion box.
          $('#suggestions').hide();
          // Turn the focus back to the text.
          $('#text').focus();
        });
/*  This is the part that messes up the suggestion click function if turned on. */
        // Hide the box when focus is else where.
        $('#container').focusout(function(){
          alert('test');
//		  $('#suggestions').hide();
        });
      });
    }
  });
});
</script>
<div id="container">
  <input type="text" id="text" name="text" value="">
  <div id="suggestions">
    <ul class="suggestion_list">
      <li id="suggestion_1" class="suggestion">Option 1</li>
      <li id="suggestion_2" class="suggestion">Option 2</li>
      <li id="suggestion_3" class="suggestion">Option 3</li>
      <li id="suggestion_4" class="suggestion">Option 4</li>
    </ul>
  </div>
</div>

The main thing is to make them click an option or hide the list if anything outside the container is clicked on or tabbed to. Is there any vent better than the focus out statement or be able to select all elements not in the container and set a focus() function on them (without having to individually name all the elements)? Thanks for any help.

Hello there I am using the below code to resize images posted on a forum, however when the page is loading it loads the images full size on sreen stretching the page to however wide the largest picture is and only resizes them once every picture has loaded and the page then goes back to normal width.

Does anyone know how I could make it so the images only display once they've resized ?


Code:

<script>

     window.onload = resizeimg;
    function resizeimg()
{
 var theImages = document.getElementsByTagName('img');
 
 for( var i = 0; i < theImages.length; i++ )
 {
  im = theImages[ i ];
       
  if( im.width > 468 && !/\/(pic1\.jpg|pic2\.jpg)/i.test( im.src ) )
  {
   im.style.width = '466px';
   im.style.border = "1px solid #000000";
   im.style.padding = "2px";
   im.style.marginBottom = "1px";
   im.onclick = function()
   {
    window.open( this.src, 'fullscale','width='+ this.width +', height='+ this.height +',scrollbars=1,resizable=1').focus();
   }

   try{ im.style.cursor = 'hand';}catch(e){ im.style.cursor = 'pointer'; }

   im.title = 'Click Here To See Image Full Size ';
  }
 }
}
</script>

Hi All!
I have a web application with an aspanel, users can add images, the program automatically make the thumbnail. when user click on thumbnail they can see a pop up modal page.

Images are in different sizes, so what I need to achieve is to get the screen resolution or browser visible area and re-size the image according to this resolution. (users could have different type of computer screen with different resolution), I need a JavaScript or jquery code.

Thanks in advance

Hi all,

I am looking for a script that I can only describe. Often, in facebook, when a new window opens there is only the first few lines of text visible followed by a few dots with an invitation to "read more". Once clicked the additional text expands and becomes visible.

I don't even know what this behavior is called so it's hard to get started.

Any help or pointers in the right direction will be much appreciated.

Anita.
Cape Town.

Hello,

http://www.phoenixdigitalweb.com/Con...urecommercial/

The main image is actually 1087 pixels wide. I want all the photos to appear 1087 pixels wide, but there is some code that is resizing the images.

Can someone please take a look for me? Let me know if any code is needed.

Thanks!!

Hi All

Is is possible to 'Refresh' a script when the browser window is resized?

I know how to execute a script using the (window).resize event but I effectively need to 'destroy' the initial instance and re-load it. This must be acheived without refreshing the browser

If it helps I'm using the SmoothDivScroll plugin which has a known bug whereby widths aren't recalculated when the window is resized. The script stops working untill the browser is restored to it's initial width and unfortunately I don't have the expertise to fix that

All help appreciated

Cheers
Craig

I'm trying to reduce the space between the page content and the footer..this is the code i'm using to resize and the method call is implemneted in master page pageload()

Code:

function resize() {
    var windowHeight;
    if (document.getElementById("leftnav") && document.getElementById("content")) {
//         document.getElementById('leftnav').style.height = document.getElementById('content').offsetHeight - 20 + 'px';
        if (document.getElementById("content").offsetHeight >= 698) {
                        document.getElementById("leftnav").style.height = document.body.clientHeight + "px";
                        document.getElementById("content").style.height = document.body.clientHeight + "px";
       }
    }

This method resizes based on the content but it gives more extra space between the content and the footer which is not our site standards. Any suggestions please?
thanks

i have this code included within a .php file on my website. I realised that my %age rules defining the width of my website page dont really work once i get to wider sizes so i want to use a fixed width page design using css code (only once wide enough) to achieve this. Please have a look at my code and tell me what im doing wrong i cant find anything wrong with my js. If js is anything like python i may need to change the output from a string to an integer or something along those lines. I can easily just doc.write the width but i cant get it to compare properly


Code:

<script type="text/javascript">
if (document.body.clientWidth > 1280)
{document.write('<link href="wdestyle.css" rel="stylesheet" type="text/css" />')};
else
{document.write('<link href="nrostyle.css" rel="stylesheet" type="text/css" />')};
</script>