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
    Mar 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question :hover issue/is this possible

    I'm trying to create a page that looks (like this). Simple, easy. The next step is that when the visitor hovers over the larger text section or poll section it will fly out. The rest of the page will grey out and the note will be front and center and take up most of the page area. (look something like this.)

    I'm not even sure this is possible, but it's what my boss is insisting on. I'm working in a ColdFusion environment (which I'm learning) but I know my HTML/CSS well enough, I don't know JS so I've stayed away from it since it's harder to adjust what you don't know. I've tried Google and gotten a few idea's that either don't work or not quite what I want and I haven't been able to cannibalize it.

    Basically, is what they want possible? Is it possible in just CSS or will i need some JS?

    Here is my latest attempt (ignore the horrible background image I'm using it as a placeholder while they decide on looks), (Here is what it's looking like) it's going well as far as the mouse over working but not so well in the looks department:
    Code:
    <!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CEO Blog</title>
    <style type="text/css">
    	a {
    	 text-decoration: none;
    	 outline: none;
    	}
    	div#page {
    		margin: 60px auto;
    		border: 1px solid #dedede;
    		width: 910px;
    	}
    	.TogWrap {
    		
    		padding: 22px;
    		position: absolute;
    		top: 140;
    		left: 60;
    	}
    	#togTrigger {
    		padding: 7px 8px;
    		width: 350px;
    		color: #000;
    	}
    	.togContent  {
    		z-index:200;
    		position: absolute;
    		top: 50;
    		left: 50;
    		width: 500;
    		margin-top: 9px;
    		border: 1px solid #bebebe;
    		padding: 16px 10px 10px 10px;
    		background-image: url (/img/test2.jpg);
    		background:grey;
    	}
    	.cork {width:1000px;}
    </style>
    <script type="text/javascript">
    <!-- HIDE FROM OLD BROWSERS
    /* <![CDATA[ */
    
    	var oVTog = {
    	toggle: function (el) {
    			oVTog.container = el.parentNode;
    			oVTog.para = oVTog.container.getElementsByTagName('p')[0];	
    			oVTog.para.style.display = "none";
    
    			el.onmouseover = function () {
    						  oVTog.para.style.display = '';
    						  return false;
    					};
    			el.onmouseout = function () {
    						  oVTog.para.style.display = 'none';
    						  return false;
    					};
    			el.onclick = function () {
    						  oVTog.para.style.display = oVTog.para.style.display == 'none' ? '' : 'none';
    						  return false;
    					};
    			}
    	};
    	window.onload = function () {
    		var l = document.getElementById('togTrigger');
    		oVTog.toggle(l); 
    	};
    
    /* ]]> */
    //END HIDING -->
    </script>
    </head>
    <body id="bd">
    <!-- image -->
    <img class="cork" src="img/test2.jpg">
    <!-- image end -->
    
    			
    
    		<div id="theTog" class="TogWrap">
    			<a href="#" id="togTrigger">
    		<!-- Visiable Blog Content -->
    				<b>Header</b><br /> IT's SO FLUFFY!<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus.</a>
    		<!-- End Visiable -->
    			<p class="togContent">
    		<!-- Mouse Over Content -->
    			  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    							  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    							  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    							  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    				Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    				convallis, sagittis vitae, convallis sit amet, lectus<br />
    		<!-- End Mouse Over -->
    			</p>
    		</div>
    
    </div>
    
    </body>
    </html>
    Last edited by obmckenzie; 03-22-2012 at 03:22 PM.

  • #2
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Well to be honest, a lot of the js stuff I've used doesn't require me to know how to edit js, just how to put files in folders properly. However, a lot of the design concepts I've learned include not using javascript for things like hovering and mouseovers- I think the rule was "don't use javascript for links unless it actually goes somewhere."

    That being said, while I'm sure you can do it just fine with a hover or onmouseover command, I really have been enjoying utilizing the tools on jqwidgets (google it). Their tooltip seems rather simple to use and you could probably add that and alter your code with (relative) ease.


  • Users who have thanked achira for this post:

    obmckenzie (03-28-2012)

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Have you tried one of the various lightbox scripts?

  • Users who have thanked Apostropartheid for this post:

    obmckenzie (03-28-2012)

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by achira View Post
    Well to be honest, a lot of the js stuff I've used doesn't require me to know how to edit js, just how to put files in folders properly. However, a lot of the design concepts I've learned include not using javascript for things like hovering and mouseovers- I think the rule was "don't use javascript for links unless it actually goes somewhere."

    That being said, while I'm sure you can do it just fine with a hover or onmouseover command, I really have been enjoying utilizing the tools on jqwidgets (google it). Their tooltip seems rather simple to use and you could probably add that and alter your code with (relative) ease.

    I'll look into jqwidgets and see if I can get the desired effect. Thanks!

    Quote Originally Posted by Apostropartheid View Post
    Have you tried one of the various lightbox scripts?
    No, I haven't. I just googled it and it looks like exactly what I'm looking for. I see examples with images, is it possible to use without images?*Simple google seems to have answered that* Thank you! I knew I'd seen it, but couldn't remember what it was! Yes!


  •  

    Posting Permissions

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