Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Location
    Braga
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Iframe tooltip code problem

    I have this code to use a iframe to open tooltips of certain items that I have on the website.
    The problem is that when I mouseover in the link that opens the tooltip it shows inside the iframe the entire web page and not just the item within a class ID.
    I use Joomla 3 framework to create articles, may be influencing this code to not function properly.
    What can I modify in this code to only open the item in the iframe?

    Code:
    window.addEventListener('load', function() {
    	var body = document.body,
    		css = function(styles) {
    			for(var i in styles) this.style[i] = styles[i];
    		},
    		fr = document.createElement('iframe'),
    		url = 'http://';
    
    	css.call(fr, {
    		border: 'none',
    		display: 'none',
    		height: '480px',
    		left: 0,
    		position: 'fixed',
    		top: 0,
    		width: '200px',
    		zIndex: 10000
    	});
    	
    	fr.scrolling = 'no';
    	
    	body.appendChild(fr);
    	
    	body.onmouseover = function(e) {
    		e = e || window.event;
    		var self =  e.target || e.srcElement;
    		if((self.tagName == 'A' && ~self.href.indexOf(url)) || (self.tagName == 'IMG' && self.parentNode.tagName == 'A' && ~self.parentNode.href.indexOf(url))) {
    			fr.style.left = e.clientX + 20 + 'px';
    			fr.style.top = e.clientY + 10 + 'px';
    					
    			fr.onload = function() {
    				this.style.display = 'block';
    			}
    					
    			fr.src = (self.href || self.parentNode.href) + '?tooltip=load';
    					
    			self.onmousemove = function(e) {
    				e = e || window.event;
    				fr.style.left = e.clientX + 20 + 'px';
    				fr.style.top = e.clientY + 10 + 'px';
    			}
    					
    			self.onmouseout = function() {
    				this.onmouseover = null;
    				this.onmousemove = null;
    				fr.src = '';
    				fr.onload = null;
    				fr.style.display = 'none';
    			}
    		}
    	}
    }, false);

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,683
    Thanks
    25
    Thanked 656 Times in 655 Posts
    Tool Tips are easier in CSS. Here is an example:

    Code:
    <style type="text/css">
    div.tooltip {outline:none; }
    div.tooltip strong {line-height:30px;}
    div.tooltip:hover {text-decoration:none;}
    div.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:-30px; margin-left:28px; width:240px; line-height:16px; }
    div.tooltip:hover span{ display:inline; position:absolute; color:#111; border:1px solid #DCA; background:#fffAF0;}
    .callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;} /*CSS3 extras*/
    div.tooltip span {
    	border-radius:4px;
    	-moz-border-radius: 4px;
    	-webkit-border-radius: 4px;
    	-moz-box-shadow: 5px 5px 8px #CCC;
    	-webkit-box-shadow: 5px 5px 8px #CCC;
    	box-shadow: 5px 5px 8px #CCC;
    }
    </style>
    
    
    <div class="tooltip"> Tooltip
    	<span>
    		<strong>
    			Most Light-weight Tooltip
    		</strong><br />
    		This is the easy-to-use Tooltip driven purely by CSS.
    	</span>
    </div>
    
    <div class="tooltip">Another Tooltip
    	<span>
    		<strong>
    			CSS only Tooltip
    		</strong><br />
    		Pure CSS popup tooltips better then Iframes.
    	</span>
    </div>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Jun 2014
    Location
    Braga
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes for sure.
    But, I would like to use the same tooltip in several articles using the page url of the item tooltip embedding.
    It's like a snippet url.
    But if I only code css will not work for what I want, I guess.
    http://www.wowdb.com/achievements/character/general]Example

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,683
    Thanks
    25
    Thanked 656 Times in 655 Posts
    I guess if you like iframes your gonna use iframes. Me, I'd rather crave my ex-wife's name on my chest with a dull razor blade.
    Copy and paste the message is not bad. Faster for user. Could not guess which method uses more code.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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