Can someone help please?

outcast · May 6, 2012

I am trying to make a "bubble up" effect I found on a page for my site. When you mouse over the red squares in my site they are supposed to "bubble up" until you move the mouse away again. I have managed to get it to work as far as the effect goes, but the problem is that I cant figure out how to still have everything in the site at the same positions. As it is now the effect works, but all the icons jump away to another location :/

I have example here: http://www.sendspace.com/file/ntvh65

The Page.html file is without the effect working (you can insert it though by moving the id in the comment on line 64 down into the div under it).

The indexProblem.html file is with the effect in place but this problem occuring.

Can someone please look at this and help me to get this right?

I have just started out with this so I am very very bad at this yet. :/

I found the effect here and I downloaded the file and have been removing very much of the code and adjusting it to my own needs:

http://aext.net/2010/02/learn-jquery-first-jquery-plugin-bubbleup/

drding · May 6, 2012

Hi there,

I took a look at your files and compared them to the source files and here's what I shifted around, put back, and fixed to get it all working properly:

HTML code:

Code:

<!DOCTYPE html>

<html>

<head>

<title>Test</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="bubbleup.jquery.js"></script>

<script type="text/javascript">

$(function(){

    $("ul#menu li img").bubbleup({tooltips: true});
    
});

</script>

<link rel="stylesheet" href="Page.css" />

</head>



<body>


<div class="Header">


		
</div>
    
    
						<!-- id="menu" -->
<div class="Box">

<ul  id="menu"	>



		<li><a href="Link.html"> <img class="Thumbnail" src="pic.png" /></li>
      
        <li><a href="Link.html"><img class="Thumbnail" src="pic.png" /></li>
        
        <li><a href="Link.html"><img class="Thumbnail" src="pic.png" /></li>
         
        <li><a href="Link.html"><img class="Thumbnail" src="pic.png"  /></li>
        
        <li><a href="Link.html"><img class="Thumbnail" src="pic.png" /></li>
        
        <li><a href="Link.html"><img class="Thumbnail" src="pic.png" /></li>
              
     
	
</ul>

</div>

</body>

</html>

Here I linked to a publicly hosted version of the JQ library, added the ul back around the your menu images, enclosed them in your Box div, and changed up the function call to reflect the new list set up (basically going by the demo).

CSS code:

Code:

@charset "utf-8";
/* CSS Document */

	 
body{
			
 background-color: blue;
			
}
	 
	 
.Header{
	
 background:url(Title.png) no-repeat center center;
 height: 44px;
 margin-top: 20px;
 margin-left: auto ;
 margin-right: auto ;

}
	
	 
.Box {

  background:url(Box.png) no-repeat center center;
  width: 850px ;
  height: 600px;
  padding-top: 50px;
  margin-left: auto ;
  margin-right: auto ;
  
}
	 
#menu img {

 width: 100px;
 position: relative;
 top: 60px;
 left: 115px;
 border-style:none;
}

ul#menu {

 margin: 5px 0px;
 
}

ul#menu li {

padding: 0px;
display: inline-block;
*display: inline; /* IE 7 and below */
position: relative;
margin-left: 5px;
margin-right: 5px;
width: 48px;
height: 48px;

}

ul#menu li img {

width: 48px;
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0 8px 0 0;
border: none;

}	
	
#menu a{

text-decoration: none;

}

Here I added the css styling to the list from the demo (you'll have to fix the sizing to how you like it) and removed the underline from your links.

JQ Script

Code:

(function($){
	$.fn.bubbleup = function(options) {
		
		//Extend the default options of plugin
		var opts = $.extend({}, $.fn.bubbleup.defaults, options);
        var tip = null;


    	return this.each(function() {   
    	
    		//Set the option value passed here
            var $tooltip = opts.tooltips; 



  			$(this).mouseover(
  	  
    			function () {
            		
            		if($tooltip) {
            		
                		tip = $('<div>' + $(this).attr('alt') + '</div>');
                		tip.css({
							fontFamily: 'Helvetica, Arial, sans-serif',
                			color: '#333333', 
                			fontSize: 12, 
                			fontWeight: 'bold', 
                			position: 'absolute', 
                			zIndex: 100000
                		});
            			
            			tip.remove().css({
            				top: 0, left: 0, 
            				visibility: 'hidden', 
            				display: 'block'
            			}).appendTo(document.body);
            
            
            			//Get the width and height of current image item
            			var position = $.extend({}, $(this).offset(), {
            				width: this.offsetWidth, 
            				height: this.offsetHeight
            			});
            			
            			
            			//Get the width and height of the tip element 
            			var tipWidth = tip[0].offsetWidth, tipHeight = tip[0].offsetHeight;
            			
            			
            			
                		//Set position for the tip to display correctly
    					//Postion: top and center of image     
            			tip.stop().css({
            				top: position.top - tipHeight, 
            				left: position.left + position.width / 2 - tipWidth / 2, 
            				visibility: 'visible'
            			});
            			
            			tip.animate({
        					top: "-=24",
        				}, 'fast'); 
        			}     			
        
        			$(this).stop();
        			$(this).css({'z-index' : 100, 'top' : 0, 'left' : 0, 'width' : 48}).animate({
        				left: "-=24",
        				top: "-=24",
                		width: 96
        			}, 'fast');
        			
    			}

  			).mouseout(
  	  
    			function () {
  			
           			if($tooltip) {
                    	tip.remove();
                    }			
    			
    				$(this).stop();
        			$(this).animate({
        				left: 0,
        				top: 0,
                		width: 48
        			}, 'fast', function() {
        					$(this).css({'z-index' : 0});
        				}
        			);
    			}

  			);

    	});
    	
 	};
 	
 	$.fn.bubbleup.defaults = {
		tooltips: false
	}


})(jQuery);

Here I copied the script from the demo file into your directory. I tried using the bubble.jquery script in your directory at first but it still wasn't working. For some reason using the copy of the script that came with the demo worked. So my guess is something got messed up in the two script copies you had.

I hope this helps. I would save a copy of all your old files just in case and put them someplace else for the time being and then try these out.
Let me know how it goes.

Oh, btw, I removed the last of your menu items, just so I could get the boxes all on the same level, you'll have to put that back in if you wanted it.

outcast · May 6, 2012

Thank you so much!

It seems to work fine now!

2 questions:

Why is everything in a list? Is it easier to manage? Could it be done in a div instead?

The pop out effect is making the image go a bit down right when it pops out. is it possible to adjust this so it goes out straight or in some other direction? I have tried to adjust some numbers but I dont seem to find the right one..

Thanks again!

krymson · May 6, 2012

The proper way to do navigation is using list items it's easer to style and it's become a common practice and besides, when you have to have submenus it's the best way to create them because essentially nav items are lists, it's a list of pages on your site and with sub menus it's a list of pages within that particular page set. Get what I mean?

drding · May 7, 2012

No problem! Glad it's working.

krymson is spot on about why it's better to have nav items built in lists. It's something you see really often, even when you're just doing plain HTML and styling it; you're still going to start off with a list.

With changing the direction of the pop up, I believe the place to start experimenting with it is in the script file (bubbleup.jquery).
Before you do though, just make sure you save a copy as it is now or have that js file from the demo files on hand just in case you need to replace it again with an untouched copy. Always good to have a backup when you start futzing with code.

I'd have to take a look at that file again myself, but that's where all the action is so to speak.

EDIT:

Ok I took a look at the .js file and it looks like this part of the code here:

Code:

      $(this).stop();
      $(this).css({'z-index' : 100, 'top' : 0, 'left' : 0, 'width' : 48}).animate({
      left: "-=24",
      top: "-=24",
      width: 96
      }, 'fast');

Effects the pop up direction, specifically these two values:

Code:

left: "-=24",
top: "-=24",

I changed those two and was able to change the direction. I kept it even, so if I made one equal to say 40 I made the other 40.

outcast · May 8, 2012

Ah thanks that works!

Can someone help please?

outcast

New Member

drding

New Member

outcast

New Member

krymson

Member

drding

New Member

outcast

New Member