www.webdeveloper.com
Results 1 to 3 of 3

Thread: using onclick rather than ID

  1. #1
    Join Date
    Aug 2012
    Posts
    3

    using onclick rather than ID

    I have an overlay script that pops up when a link like:

    Code:
    <a id="b1" href="page.html">link</a>
    is used. The problem is that I need multiple links but can't use the same ID.

    Here is the code:

    Code:
        $(function(){
    
    	$('#b1').frameWarp();
    
        });
    I have tried replace #b1 with .b1 and a.b1 and using class instead of ID. This works fine on the first link but any subsequent links clicked cause the first page clicked to open again. I think there is a conflict with classes already being used in the script for the overlay.


    Is there a way I can use onclick in <a> to get this to work the same way?


    The script is from a plugin but here is the rest of it:

    Code:
        (function($){
    
    	// Private varialble deffinitions
    
    	var body = $('body'),
    		win = $(window),
    		popup, popupBG;
    
    	var frameCache = {};
    	var frameCacheDiv = $('<div class="frameCacheDiv">').appendTo('body');
    	var currentIframe;
    
    	// The main plugin code
    
    	$.fn.frameWarp = function(settings){
    
    		// Supplying default settings
    
    		settings = $.extend({
    			cache: false,
    			url: '',
    			width:600,
    			height:500,
    			closeOnBackgroundClick: true,
    			onMessage:function(){},
    			onShow:function(){}
    		}, settings);
    
    		this.on('click',function(e){
    			
    			e.preventDefault();
    
    			var elem = $(this),
    				offset = elem.offset();
    
    			// The center of the button
    			var buttonCenter = {
    				x: offset.left - win.scrollLeft() + elem.outerWidth()/2,
    				y: offset.top - win.scrollTop() + elem.outerHeight()/2
    			};
    		
    			// The center of the window
    			var windowCenter = {
    				x: win.width()/2,
    				y: win.height()/2
    			};
    
    			// If no URL is specified, use the href attribute.
    			// This is useful for progressively enhancing links.
    
    			if(!settings.url && elem.attr('href')){
    				settings.url = elem.attr('href');
    			}
    
    			// The dark background
    
    			popupBG = $('<div>',{'class':'popupBG'}).appendTo(body);
    
    			popupBG.click(function(){
    
    				if(settings.closeOnBackgroundClick){
    					hide();
    				}
    
    			}).animate({	// jQuery++ CSS3 animation
    				'opacity':1
    			},400);
    
    
    			// The popup
    
    			popup = $('<div>').addClass('popup').css({
    				width	: 0,
    				height	: 0,
    				top		: buttonCenter.y,
    				left	: buttonCenter.x - 35
    			});
    
    			// Append it to the page, and trigger a CSS3 animation
    			popup.appendTo(body).animate({
    				'width'					: settings.width,
    				'top'					: windowCenter.y - settings.height/2,
    				'left'					: windowCenter.x - settings.width/2,
    				'border-top-width'		: settings.height,
    				'border-right-width'	: 0,
    				'border-left-width'		: 0
    			},200,function(){
    
    				popup.addClass('loading').css({
    					'width': settings.width,
    					'height': settings.height
    				});
    
    				var iframe;
    
    				// If this iframe already exists in the cache
    				if(settings.cache && settings.url in frameCache){
    					iframe = frameCache[settings.url].show();
    				}
    				else{
    
    					iframe = $('<iframe>',{
    						'src' : settings.url,
    						'css' : {
    							'width' : settings.width,
    							'height' : settings.height,
    						}
    					});
    
    					// If the cache is enabled, add the frame to it
    					if(settings.cache){
    						frameCache[settings.url] = iframe;
    						iframe.data('cached',true);
    						settings.onShow();
    					}
    					else{
    						
    						// remove non-cached iframes
    						frameCacheDiv.find('iframe').each(function(){
    							var f = $(this);
    							if(!f.data('cached')){
    								f.remove();
    							}
    						});
    					}
    
    					iframe.ready(function(){
    						frameCacheDiv.append(iframe);
    						setUpAPI(iframe, settings);
    						settings.onShow();
    					});
    				}
    
    				currentIframe = iframe;
    
    			});
    
    		});
    
    		return this;
    	};
    
    	// Helper Functions
    
    	function hide(){
    
    		if(currentIframe){
    			currentIframe.hide();
    			currentIframe = null;
    		}
    
    		popupBG.remove();
    		popup.remove();
    	}
    
    	function setUpAPI(iframe, settings){
    
    		if(sameOrigin(settings.url)){
    
    			// Exposing a minimal API to the iframe
    			iframe[0].contentWindow.frameWarp = {
    				hide: hide,
    				sendMessage:function(param){
    					return settings.onMessage(param);
    				}
    			};
    		}
    	}
    
    	function sameOrigin(url){
    
    		// Compare whether the url belongs to the
    		// local site or is remote
    
    		return (getOrigin(url) == getOrigin(location.href));
    	}
    
    	function getOrigin(url){
    
    		// Using an anchor element to
    		// parse the URL
    
    		var a = document.createElement('a');
    		a.href = url;
    
    		return a.protocol+'//'+a.hostname;
    	}
    
    })(jQuery);

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Lightbulb

    I'm not sure I fully understand the problem.
    Why the need for id's anyway?

    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <style type="text/css">
    #linkList {
      height:100px;
      width:200px;
      border: 1px solid blue;
    }
    </style>
    
    </head>
    <body>
    
    <div id="linkList"></div>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=263199
    
    var linkList = [
     ['http://www.webdeveloper.com','Web Developer'],
     ['http://www.codingforums.com','Coding Forums'],
     ['http://www.dreamincode.com','Dream In Code']
    ];
     var str = '';
     for (var i=0; i<linkList.length; i++) {
       str += '<a href="'+linkList[i][0]+'">'+linkList[i][1]+'</a><br>';
     }
     document.getElementById('linkList').innerHTML = str;
    </script>
    </body>
    </html>

  3. #3
    Join Date
    Aug 2012
    Posts
    3
    http://valhallamod.com/test/
    Here is an example. The second row of links are working the correct way except each id needs to be defined in script.js:

    Code:
    $(function(){
    
    	$('.b1').frameWarp();
    
    	$('#b2').frameWarp({
    	});
    
    	$('#b3').frameWarp({
    	});
    
    	$('#b4').frameWarp({
    	});
    });
    The first row is using class but frame.php doesn't change after the first link is clicked. The gid parameter in the URL is being returned on frame.php.

    I need to either make an infinite amount of #bX variables or use onClick so that the overlay pops up and shows the correct page.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles