Posted 12 years ago
·
Author
I am unsure exactly where to put this.
i just know that it goes with the scripting. but since it uses, JQuery i was unsure where to put it.
what this is is kinda like a pop up when the page loads,
no its not the Alert pop up window thingy.
what this does, is it pops up a DIV layout that when the page loads, it fades in, and when you click on or away from the picture/text, it will make the pop-up go away.
Exaple: http://avatars.imvu.com/Heathersboy17
only thing is, this was customized so when the panel (the URL panel in my case) is whatever the width is, it is made to be centered on the page.
you can customize it to your liking so it is positioned wherever you want.
Since the new HTML5 has come out, i really hope to see some new stuff being able to be made for our homepages, i have already gotten alot of questions from people on IMVU about how i made this, what it was made with and so on and so forth.
But i figured i would share this with the T.I.M. members, and see what you guys would be able to do with it lol
~~!Edit!~~
Fixed Example Link
~~!Edit!~~
Updated code, when page loads, popup shows, and covers entire page, also scrolls with the page untill you click on the mask or picture.
i just know that it goes with the scripting. but since it uses, JQuery i was unsure where to put it.
what this is is kinda like a pop up when the page loads,
no its not the Alert pop up window thingy.
what this does, is it pops up a DIV layout that when the page loads, it fades in, and when you click on or away from the picture/text, it will make the pop-up go away.
Exaple: http://avatars.imvu.com/Heathersboy17
only thing is, this was customized so when the panel (the URL panel in my case) is whatever the width is, it is made to be centered on the page.
you can customize it to your liking so it is positioned wherever you want.
<style type="text/css">
.paneltitletext, .panelmenu {visibility:hidden;}
#aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel, #visitors_panel,
#messages_panel, #tagcloud_panel, #stickers_panel, #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel, #rss_panel, #url_panel, #special_panel,#outfits_panel, #video_panel, #groups_panel, #slideshow_panel, #badges_panel {
width: 900px !important}
#rightColumn {display:none !important;}
</style>
<!--Pop Up Scripting -->
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function popup(){
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$('.window').fadeOut('slow',0.8);
$(this).fadeOut(1000);
$('.window').hide();
});
});
$(document).ready(function(){
$(window).resize(function(){
$('.window, #dialog').css({
position:'absolute',
left: ($(window).width()
- $('.window, #dialog').outerWidth())/2,
top: ($(window).height()
- $('.window, #dialog').outerHeight())/2
});
});
$(window).resize();
});
</script>
<style type="text/css">
#mask {
position:fixed;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
width:508px;
height:404px;
display:none;
z-index:9999;
}
#boxes #dialog {
width:508px;
height:404px;
}
</style>
</head>
<div style="position:fixed; left:0px; top:0px; width:100%; height:100%;">
<!-- Pop Up Box is Here -->
<div id="boxes">
<div id="dialog" class="window">
<!-- Contents Of Pop Up Box -->
<a href="#" class="close"><img src="http://i85.photobucket.com/albums/k69/brandenwolf/Untitled-2-5.png" width="508" height="404"></a>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 100%; height: 100%; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>
</html>
Since the new HTML5 has come out, i really hope to see some new stuff being able to be made for our homepages, i have already gotten alot of questions from people on IMVU about how i made this, what it was made with and so on and so forth.
But i figured i would share this with the T.I.M. members, and see what you guys would be able to do with it lol
~~!Edit!~~
Fixed Example Link
~~!Edit!~~
Updated code, when page loads, popup shows, and covers entire page, also scrolls with the page untill you click on the mask or picture.
Last edited by Mew on Fri Jul 13, 2012 11:07 pm, edited 3 times in total.
