PDA

View Full Version : popup like jack's blog system :D



luke83
30 Oct 2006, 5:11 AM
i would like to have a popup system like the one in the jack's blog comment system.

This is the code i implemented that works fine:


<html>
<head>
<title>LukeChat</title>
//// next here standard script & css resource, the forum parser boke the code, sorry
<link>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

<script></script>
<script></script>
<script></script>
<script></script>

<link>
<link>
<link>

<script></script>
<style>
*{font:10 Verdana, Arial, Helvetica, sans-serif;padding:2px;}
#head{
text-align:center;
height:20px;
line-height:20px;
font-weight:bold;
border:0;
cursor:move;
background: #EFF5FF url(img/blue.png) repeat-x left bottom;
}
#profile{border:1px solid #AEC1D9;}
#profile_det{padding:5px;}
.loading-indicator {
font-size:8pt;
background-image: url('/blog/images/wait.gif');
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
}
a{
display:block;
width:200px;
}
</style>
</head>
<body>
<div>
provolone (#)
provolone (#)
provolone (#)

provolone (#)
provolone (#)
provolone (#)
provolone (#)
provolone (#)
provolone (#)

provolone (#)
</div>
<div>provola</div>
<div>
<div>dettagli profilo</div>
<div></div>
</div>
<script>


var MyRenderer= {
render: function(el, o){
var str=o.responseText;
str=str.split("|");
eval("str='<div>+str[1]+"+str[0]+"
"+str[2]+"</div>'");
var prf = getEl('profile_det');
prf.update(str);
}
};

var ccc = YAHOO.ext.Element.get('profile');
var myDialog = new YAHOO.util.DD("profile");
myDialog.setHandleElId('head');

ccc['opened'] = false;
ccc['lx'] = 0;
ccc['ly'] = 0;
ccc.hide();
function poppy(lnk,txt){
var lnk = YAHOO.ext.Element.get(lnk);
var mgr = new YAHOO.ext.UpdateManager('profile_det');
mgr['indicatorText'] = '<div>Loading...</div>';
mgr.setRenderer(MyRenderer);
mgr.update('profile.php', 'id='+lnk.id);
if (!ccc.opened){
ccc['lnk']=lnk;
ccc.setX(lnk.getX());
ccc.setY(lnk.getY());
ccc.show(true,.40);
ccc.setBounds(200, 200, 200, 200, true, .35);
ccc['opened']=true;
}else{
if (ccc.lnk.id!=lnk.id){
ccc.hide();
ccc['opened']=false;
ccc['lnk']=lnk;
ccc.setX(lnk.getX());
ccc.setY(lnk.getY());
ccc.setWidth(0);
ccc.setHeight(0);
ccc.show(true,.400);
ccc.setBounds(200, 200, 200, 200, true, .35);
ccc['opened']=true;
}else{
ccc.hide(true,.35);
ccc.setBounds(ccc.lnk.getX(), ccc.lnk.getY(), 0, 0, true, .35);
ccc['opened']=false;
}
}

}



</script>
</body>

</html>

now, if i try to copy and past this code in this one http://www.jackslocum.com/blog/examples/layout3.htm code, the popup don't work :(

there is a simple whay to implement the popoup system like the jack's one?

thx a lot, men

techno_adi
30 Oct 2006, 5:20 AM
try disabling the html in this post option while posting such codes..
it will not strip off the script etc.. tags..

jack.slocum
30 Oct 2006, 11:59 AM
I have a new object coming in the next release called BasicDialog. It creates a dialog like my comment dialog. It has some cool features, such as automatically create tabs, automatic body height synchronization (for easy overflow scrolling), animation targeting (to animate from any existing element), 4 way resizing, drag and drop moving, custom button implementation, and automatic state management across page views (location and size). It's pretty sweet. I can give you a pre-release copy if you'd like to test it.

luke83
30 Oct 2006, 3:53 PM
thanks a lot man, i will wait your next realese... gr8 work...i love so much your library...

luke83
31 Oct 2006, 12:25 AM
yesterday.. it was late.. today i re-read the topic and i see about the prerelease.. if u can give me it's great.. of course i will report all kind of bugs and i hardly test it :p

thx, man

ps: my email: luctre[AT]hotmail.it if u want to send it by the mail... :D

Animal
31 Oct 2006, 12:52 AM
I have a new object coming in the next release called BasicDialog. It creates a dialog like my comment dialog. It has some cool features, such as automatically create tabs, automatic body height synchronization (for easy overflow scrolling), animation targeting (to animate from any existing element), 4 way resizing, drag and drop moving, custom button implementation, and automatic state management across page views (location and size). It's pretty sweet. I can give you a pre-release copy if you'd like to test it.

Super-cool. I've been thinking of writing one using your Resizable to take over from YUI's Panel, but putting it off hoping you'd come up with the goods... Which is always a good bet!

I'll switch over to this widget to pop up my list grid in my entity lookups.

Are these going to have a "modal" option which will mask off access to the underlying page?

I implemented something similar when YUI came out. When you rendered it into a container, modality was relative. That is, the underlay only masked out that container.

Also I enabled a "maximizable" config property which allowed you to maximize the element into its container. When maximized, the maximize button became a "Restore" button.

And a "minimizable" property which hid the dialog, replacing it with a DIV of a given style. (Size and background so that it looked like an icon)

jack.slocum
31 Oct 2006, 2:24 AM
It has modal but it masks the whole page (this could be changed I'm sure).

Minimize/Maximize would be cool. I didn't do anything too fancy because I wanted to keep it lightweight. One of the reasons I avoid the YUI ones is they are so heavy.

The themes turned out pretty clean, similar to the comments dialog but better. I added rounded corners, matching borders, custom buttons, etc.

There's a whole new gray theme for BorderLayout as well.

http://www.jackslocum.com/blog/images/dlg1.gif

http://www.jackslocum.com/blog/images/dlg2.gif

Animal
31 Oct 2006, 2:27 AM
I like the blue theme. I've gone with that on my grid implementation.

When is the release with BasicDialog due out?

jack.slocum
31 Oct 2006, 2:33 AM
I'll probably toss it in the "beta 2". Seems like .33 has been beta forever. :)

I am about 80% done with a complete rewrite of the TabPanel UI. About time eh? No more 2 elements per tab, or elements like em, strong, etc that you have to guess what they are. The CSS is MUCH shorter and a piece of cake to understand.

I already have auto sizing tabs, min tab width, max tab width, preferred tab width and auto fitting the tabs to the container. I am now working on implementing scrolling when the tabs have reached the min width and are still overflowing.

jack.slocum
31 Oct 2006, 2:35 AM
The new Tab CSS and UI will break any custom CSS that has been created (since the elements are entirely different) but I figured with all the new features it would be ok. This is the first time I have really changed anything in the library that is sure to break stuff. The API is the same.

Animal
31 Oct 2006, 4:21 AM
I'll probably toss it in the "beta 2". Seems like .33 has been beta forever. :)

I am about 80% done with a complete rewrite of the TabPanel UI. About time eh? No more 2 elements per tab, or elements like em, strong, etc that you have to guess what they are. The CSS is MUCH shorter and a piece of cake to understand.

I already have auto sizing tabs, min tab width, max tab width, preferred tab width and auto fitting the tabs to the container. I am now working on implementing scrolling when the tabs have reached the min width and are still overflowing.

Fantastic. I knew the CSS could be simpler. I was again, just waiting for it to happen - I'm sure the "unnattached" tabs problem I've been having will go away now.

http://www.timetriallingforum.co.uk/style_emoticons/default/NotWorthy2.gif

jbowman
1 Nov 2006, 5:18 PM
I found references of basicdialog in the beta 2, is what's in that version complete enough to use? If so, is there any place on this site you're using it that I can use an example? I got most of my sessions coding done and am about to start on a login form that i'd love to use basicdialog for to bypass using yahoo's container include if possible.

jack.slocum
1 Nov 2006, 9:49 PM
http://www.jackslocum.com/blog/examples/dialog/hello.php

Note: the resources and much of the underlying code have completely changed. I will be putting up beta 2 very soon with the updated code.

The buttons have been CSS sprited to get rid of the image loading flicker.

jbowman
2 Nov 2006, 6:13 AM
whoa, that's amazingly simple to use. I can't wait to get home tonight and play with it :D Thanks Jack

dave
2 Nov 2006, 3:30 PM
First of all, great work on your extensions! You really know your stuff!

I have done a fair amount of desktop application programming, but I'm a beginner at best when it comes to Javascript. The BasicDialog that you have looks to be exactly what I've been trying to implement with the various pieces, but without success. I'm trying to get a grid on a tab in a modal, draggable, resizable container where the grid will resize automatically with the container. Would the BasicDialog handle that? Is it available for download? Also, I see that the grid has an option to load data remotely with paging, but is there any way to have it work on scroll like the rico livegrid does?

Thanks in advance for any help you are able to give me!
Dave

jack.slocum
2 Nov 2006, 7:17 PM
It's like 2 lines of code to get the grid to resize with the dialog.

There's no option to load on scroll. There will be someday though, I just need the time to make a GridView and new CSS for it.

dave
3 Nov 2006, 9:11 AM
Thanks for the quick response! Here is what I have. I have seen reference to grid.autosize(), but I don't know what event or how to hook into it to add that line. Please excuse my lack of knowledge, this is all new to me and I'm struggling a bit. If you could point me in the right direction, I would appreciate it greatly! Dave



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="./css/resizable.css">
<link rel="stylesheet" type="text/css" href="./css/grid.css" />
<link rel="stylesheet" type="text/css" href="./css/example.css">
<link rel="stylesheet" type="text/css" href="./css/container.css">
<link rel="stylesheet" type="text/css" href="./css/ResizePanel.css">

<script type="text/javascript" src="./js/yahoo.js"></script>
<script type="text/javascript" src="./js/event.js"></script>
<script type="text/javascript" src="./js/dom.js"></script>
<script type="text/javascript" src="./js/dragdrop.js"></script>
<script type="text/javascript" src="./js/animation.js"></script>
<script type="text/javascript" src="./js/container.js"></script>
<script type="text/javascript" src="./js/yui-ext.js" ></script>
<script type="text/javascript" src="./js/grid-example.js"></script>
<script type="text/javascript" src="./js/ResizePanel.js"></script>

<script>
var panel;

function init() {
panel = new YAHOO.widget.ResizePanel("win", { effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}, width:"10em", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true, modal:true } );
panel.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>

<body>
<input type="button" onclick="Javascript: panel.show(); Example.init();" value="Show">
<div id="win" style="visibility:hidden">
<div class="hd">
<div class="tl"></div>
<span>Selection Grid</span>
<div class="tr"></div>
</div>
<div class="bd">
<div class="ygrid-mso" style="width: 100px; height: 100px; size:auto" id="grid-example"></div>
</div>

</div>
</body>
</html>

jack.slocum
3 Nov 2006, 12:38 PM
You will need more control over initialization. To be specific, the YUI panel is going to display:none the grid, so you need to initialize the grid first (before you initialize the panel) so it can do it's measurements before they are unavailable.

As for resizing the grid with the YUI resize panel, I have no clue. I have never used it.

dave
3 Nov 2006, 2:31 PM
Thanks for the info! And, thanks for sharing your techniques!

After seeing another post which referenced looking at the forum.js file, it finally dawned on me what I needed to do to get at files referenced in view/source. If I can see a working example, then I don't mind spending the time figuring things out on my own, I just was lost as to where people were getting these files when there wasn't a link given. Also, I wanted to be sure that it is ok that I download these files and use them for reference.

jack.slocum
3 Nov 2006, 2:41 PM
Everything is available for you to reference and/or use the code directly. That's what this site is all about.

Robo
24 Jan 2008, 6:17 PM
Is there a way to create custom rounded or graphic borders around dialogs/panels? Or a way to add additional div structures to the border of panels/dialogs? I want to create a cool UI look like we have at www.retrevo.com and more.

Can this be done?

Thanks!
Robert@retrevo.com

Foggy
24 Jan 2008, 11:08 PM
It is possible, but you have to create a custom theme...
You could take a look at the gray theme from 2.0, there are rounded panels ;)