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 1 of 1
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JQuery UI drop effect modification

    Hi people,

    Can anyone help me out im trying to use jquery's drop effect (http://jqueryui.com/demos/effect/) / (http://docs.jquery.com/UI/Effects/Drop).

    What im trying to do is use the drop effect to 'drop' in a div from the right on click of a link. But, on click of a different link that first div toggles out to the right again and then a different div 'drops' in from the right overlaying the 1st divs previous position.

    I hope you know what i mean by that? The idea is so that depending on the link clicked on the page the 'box' that drops in from the right contains different content. Im not sure how many divs i will want overall, maybe 10.

    This is what i have so far: Using interface for JQuery (http://interface.eyecon.ro/demos/ifx.html) i have made a page with 2 divs on top of eachother with links to toggle these divs seperately. Does anyone know a way to make it so that on clicking a single link i can activate one of these actions (ie toggle the first div out of view) and THEN (when the first action is over) toggle the second div into view...

    It is slightly more complex than this in fact. because i have more than 2 possible divs (as i said maybe 10 or so) so therefore i the script would have to toggle out of view 'the one that is currently in view' (whichever it may be) and then toggle into view the one corresponding div to the link that was clicked - to do this i guess the best way would if all the divs (or all but one) start as toggled 'out of view'... im not sure how to do this?

    I hope that all makes sense. Here is the code for what i have so far:
    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>
    <meta http-equiv="Content-Language" content="en" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TEST PAGE</title>
    <script type="text/javascript" src="http://interface.eyecon.ro/jquery/core.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/jquery/selector.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/jquery/event.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/jquery/ajax.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/jquery/fx.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/iutil.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/idrag.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/idrop.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/accordion.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/carousel.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/fisheye.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/iautocompleter.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/icassistant.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/iexpander.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/imagebox.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/iresizable.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/iselect.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/islider.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/islideshow.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/isortables.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ittabs.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifx.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxblind.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxbounce.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxdrop.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxfold.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxhighlight.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxopenclose.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxscale.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxscrollto.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxshake.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxslide.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/i/ifxtransfer.js"></script>
    <style type="text/css" media="all">
    *
    {
    	margin: 0;
    	padding: 0;
    }
    body
    {
    	background: #fff;
    	height: 100%;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    .ifxElement
    {
    	background-color: #B5EF59;
    	border-top: 2px solid #6CAF00;
    	border-bottom: 2px solid #6CAF00;
    	border-left: 5px dashed #6CAF00;
    	border-right: 5px dashed #6CAF00;
    	padding: 10px;
    	position: absolute;
    	width: 200px;
    	height: 200px;
    	top: 54px;
    	left: 751px;
    	text-align: center;
    	letter-spacing: 0px;
    	overflow: hidden;
    }
    .ifxElement2
    {
    	background-color: #B5EF59;
    	border-top: 2px solid #6CAF00;
    	border-bottom: 2px solid #6CAF00;
    	border-left: 5px dashed #6CAF00;
    	border-right: 5px dashed #6CAF00;
    	padding: 10px;
    	position: absolute;
    	width: 200px;
    	height: 200px;
    	top: 54px;
    	left: 751px;
    	text-align: center;
    	letter-spacing: 0px;
    	overflow: hidden;
    }
    #ifxElement strong{
    	font-size: 2em;
    }
    #fx{
    	position: absolute;
    	top: 380px;
    	left: 10px;
    }
    #fx a{
    	display: block;
    	float: left;
    	margin: 2px 10px;
    	padding: 2px;
    	color: #000;
    }
    #fx a:hover{
    	color: #6CAF00;
    	background-color: #EDFFCF;
    
    }
    
    #ifxElement2 strong{
    	font-size: 2em;
    }
    #fx2{
    	position: absolute;
    	top: 380px;
    	left: 10px;
    }
    #fx2 a{
    	display: block;
    	float: left;
    	margin: 2px 10px;
    	padding: 2px;
    	color: #000;
    }
    #fx2 a:hover{
    	color: #6CAF00;
    	background-color: #EDFFCF;
    }
    </style>
    </head>
    
    
    <body>
    	<div id="ifxElement" class="ifxElement">
    		CONTENT OF DIV1	</div>
            
        <div id="ifxElement2" class="ifxElement2">
    		CONTENT OF DIV2	</div>
            
    <a href="#" onClick="$('#ifxElement').DropInRight(500);return false;">in 1</a>
    <a href="#" onClick="$('#ifxElement').DropOutRight(500);return false;">out 1</a>
    
    <a href="#" onClick="$('#ifxElement2').DropInRight(500);return false;">in 2</a>
    <a href="#" onClick="$('#ifxElement2').DropOutRight(500);return false;">out 2</a>
    
    <a href="#" onClick="$('#ifxElement').DropToggleRight(500);return false;">toggle 1</a>
    <a href="#" onClick="$('#ifxElement2').DropToggleRight(500);return false;">toggle 2</a>
    
    		</body>
    </html>

    To throw even more into the mix of fun (!!) there appears to be a problem in IE (u never would have guessed it!) - this is that once the div has been 'toggled out of view' the link to toggle it back in no longer works. Not a problem in other browsers so im guessing there is a fix?

    Any help would be appreciated i know this is a complicated problem!!


    Matt
    Last edited by mastubbs; 08-02-2009 at 02:12 AM.


 

Posting Permissions

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