|
JavaScript - Help With Loading Divs/dynamic Ajax Content
I'm working on my portfolio and I want to get content to load into my "middle" div upon clicking on the buttons in the sidebar.
I'm able to get it to load, but I can't figure out how to get the CSS to load. I keep getting errors in the code. Here is the code I'm using: http://www.dynamicdrive.com/dynamici...jaxcontent.htm Here is what I've got: Code: <img src="images/rule.png" id="rule" width="1" height="1" />
<a href="javascript:ajaxpage('about.html', 'middle');"><img src="images/about.png" width="195" height="101" alt="about" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('work.html', 'middle');"><img src="images/work.png" width="195" height="101" alt="work" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<img src="images/resume.png" width="195" height="101" alt="resume" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('contact.html', 'middle'); loadobjs('contact.css', 'feature.js')"><img src="images/contact.png" width="195" height="101" alt="contact" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" /></div>
I'm working on the contact page right now, just trying to figure out how to get it to load properly. Here is a screenshot of what it's supposed to look like: https://skitch.com/jillianadriana/r7...itled-document I can't get it to load with the custom CSS. Similar TutorialsHello, I have a rather complex problem involving ajax and the dynamic loading of text. Basically, I have a flash player with a video and a series of annotations that the customer would like to appear next to the flash player. These annotations need to dynamically light up and move as the timecode associated with the annotation is passed on the flash player's timecode. I had a basic static system up and running fine. The problem is that the videos could be 3 hours long and have thousands of annotations - which causes a looonng load time for the page so I would like them to appear dynamically. At the moment I have tried using the below code to load the first 100 annotations and then when the 100th annotation appears, the next 100 should load up. The trouble is that it doesn't work! The first 100 annotations cycle through perfectly but then nothing seems to happen when the 100th annotation is read. Please help! Here's the code.... On the record's html page, I load up the first 100 annotations in the $annotations array in a container called 'media-meta-container' - which appears next to the Flash plaer: Code: <div id="media-item" style="width: 858px;"> <div id="media-meta-container" style="width: 302px;"> <ul> <? $annotate_count = 0; ?> <? for($i=0;$i<10;$i++): ?> <? if($annotations[$i]["start"] > 0 && $annotations[$i]["end"] > 0): ?> <li class="media-meta-li-off" id="annotation_container_<?=$annotate_count?>" onclick="seekPrompt(<?=$annotations[$i]["start"]?>);"><p><?=$annotations[$i]["text"]?></p></li> <input type="hidden" id="start_<?=$annotate_count?>" value="<?=$annotations[$i]["start"]?>" /> <? $annotate_count++; ?> <? endif; ?> <? endfor; ?> </ul> </div> <input type="hidden" id="count" value="<?=$annotate_count?>" size="12" /> <input type="hidden" id="start_count" value="0" size="12" /> <input type="hidden" id="start_time" value="0" size="12" /> On an attached javascript file the following function is run every 100ms to update the annotations next to the player: Code: function updateTimeCode()
{
var player = document.FLVClipEditor;
if (player)
{
var state = player.getState();
var time = player.getCurrentTime();
var start_count = document.getElementById("start_count").value;
var start_time = document.getElementById("start_time").value;
document.getElementById("annotation_container_" + start_count).className = 'media-meta-li-off';
var end_count = document.getElementById("count").value;
if(state != "stopped")
{
if(time <= start_time)
{
for(k=0;k<start_count;k++)
{
var start = document.getElementById("start_" + k).value;
if(time < start) break;
}
var start_count = k - 1;
}
if(start_count > 0) start_count--;
for(i=start_count;i<end_count;i++)
{
var start = document.getElementById("start_" + i).value;
document.getElementById("annotation_container_" + i).className = 'media-meta-li-off';
if(time < start) break;
}
//IF WE HAVE REACHED THE END OF THE AVAILABLE ANNOTATIONS THEN LOAD UP SOME MORE - THIS IS THE PART I AM HAVING PROBLEMS WITH
//THE FUNCTION FIRES BUT NOTHING HAPPENS
if(end_count == i)
{
var new_end_count = end_count + 50;
document.getElementById("count").value = new_end_count;
scroll_annotations(end_count, new_end_count);
}
document.getElementById("annotation_container_" + start_count).className = 'media-meta-li-off';
document.getElementById("annotation_container_" + i).className = 'media-meta-li-off';
if(i > 0) i--;
if(i - start_count > 3)
{
document.getElementById("start_count").value = i;
document.getElementById("start_time").value = document.getElementById("start_" + i).value;
}
var filled = document.getElementById("annotation_container_" + i);
if(i == 0)
{
var end = document.getElementById("start_0").value;
if(time > end)
{
filled.className = 'media-meta-li-on';
}
}
else
{
filled.className = 'media-meta-li-on';
}
document.getElementById("media-meta-container").scrollTop = filled.offsetTop - 412;
}
}
}
Here is the scroll_annotations() code that is being called when we reach the end of the annotations: Code: function scroll_annotations(start, end){
$.ajax({
type: "GET",
url: "/xml/record_annotations.php",
dataType: "xml",
data: "id="+id+"&media_urn="+media_urn+"&start="+start+"&end="+end+"",
success: function(xml) {
$(xml).find('annotation_item').each(function(){
var annotation_count = $(this).attr('id');
var startTimecode = $(this).find('startTimecode').text();
var start = $(this).find('start').text();
var annotate_count = $(this).find('annotate_count').text();
var text = $(this).find('text').text();
$('<li class="media-meta-li-off" id="annotation_container_' + annotate_count + '" onclick="seekPrompt(' + start +');"><p>' + text + '</p><p>' + startTimecode + '</p></li><input type="hidden" id="' + annotate_count+ '" value="' + start + '" />').appendTo('ul#annotations-list-items');
});
}
});
}
Where record_annotations produces an xml file like this to give the annotations variables: Code: <annotations> − <annotation_item id="0"> <start>64.760000</start> <annotate_count>0</annotate_count> <text> ahnfea </text> </annotation_item> − <annotation_item id="1"> <start>65.360000</start> <annotate_count>1</annotate_count> <text> we all seek. Two states for two </text> </annotation_item> − <annotation_item id="2"> <start>65.920000</start> <annotate_count>2</annotate_count> <text> people living in peace and security. </text> </annotation_item> − <annotation_item id="3"> <start>70.720000</start> <annotate_count>3</annotate_count> <text> The verbal gloves came off at an EU </text> </annotation_item> − <annotation_item id="4"> <start>73.680000</start> <annotate_count>4</annotate_count> <text> summit in Brussels as the French </text> </annotation_item> </annotations> Thank you. Let me know if there is any other information you need I am using this code... simplified for example Code: [
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"
<div id="content"></div>
Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks I need help with my divs and dynamic content. I would like my "menu" div (which includes a menu.html and menu.css file) to link to my "middle" div. Here is what I would like to accomplish: Screenshot And this is what I've got: My website I'm using this code to implement my pages into the "middle" div. Is there a way to target my "middle" div from an external menu.html page? Or is there a better way to do this? Hello all, I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page. It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user. So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it. Is this easy to do? I am new to javascript so bear with me Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#newcontent').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
The 'new content' is a div which is at the bottom of the page and is where the new content loads to! Thank you very much Right, I've been searching for a few days now and i'm looking for a AJAX/JQuery script where i can load external content in to a div. I've seen a few site's that have it, and im after it so when i click the page link it loads it in the address bar like this http://www.google.co.uk/#content/index.php or what ever. Thanks. When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete. I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size. I have grabbed the event (which references the form, is that right?) and I have something like this: Code: <button type="submit" name="name_can_vary">Search</button> event.name_can_vary.style.visibility = 'hidden'; //(obviously this isn't complete code but no doubt explains what I am talking about) ..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image. Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on). Thanks for any help. Hey, Were I am stuck is with the jquery I have a form that is done in a form class and when an option is selected from the dynamically populated drop down menu I would like it to fill in the text boxes so they can be edited. I currently have: getfeed.php - the page that is connected to the javascript Code: <?php
include('class/class.form.php');
include('class/class.users.php');
$iID = trim($_GET['extension']);
if(!$iID) die('No User Data found.');
$getValues = new Extension();
$user_info = $getValues->getUsersInformation($iID);
$sip_info = $getValues->getSipInformation($iID);
//print_r($user_info);
//print_r($sip_info);
$array = $getValues->getUsersInformation($iID);
echo '<br /><br />-- end of query --';
The Javascript Code:
if(document.id('LoadExtension') && document.id('ExtensionResponse')) { // id of select box
var sel = document.id('LoadExtension'); // ser select box as var.
sel.addEvent('change', function(chg) { // add change event to select box.
if(sel.getSelected().get('value') != '') { // on change if selected value is not empty.
new Request.HTML({
url : 'http://Domain.co.nz/Air/includes/getFeed.php?extension='+ sel.getSelected().get('value'),
onRequest: function() {
document.id('ExtensionResponse').set('html', 'loading...');
},
onComplete: function(r1, r2, html, js) {
document.id('ExtensionResponse').set('html', html);
}
}).send();
}
});
}
At the moment it does not load any data(I somehow need to get the $iID sent from the index.php but the drop down menu is a count array would I take it from this?) and is in a separate div below the form. Good day/evening. I am trying to reload the contents of a div asynchronously using jquery. It works fine if the link/button to do so is outside of the div I am reloading, but I need the button to be inside the div I am reloading and it does not work if I do it from there. I have thought about overlaying divs but I need the buttons to be very exactly positioned as its a graphical representation of a map and recoding the way the buttons are placed would not only annoy me but be very difficult. You see its an isometric view of a square, and the buttons need to be placed right along the edges of the 'diamond' therefore always coming inside or on top of the div that contains the map view. So, is what I am trying to do impossible or might I just be going about it the wrong way ? If it is the latter then I will post some code. Thanks in advance. EDIT: sorry, I didn't see the frameworks forum for Jquery stuff, if a mod could please move this thread in there then that would be just fab. I have plenty of information in my database now, and I'm thinking of making a double-frame style webpage that can pull content from the db. but the AJAX code I have is sometimes very slow. It might be my server though. Could anyone shed some light on how the following website populates the right side frame with help content? http://vb.mvps.org/hardcore/ if you double click on the file on the left, the content immediately appears on the right. I'm guessing that it doesn't come from a database, because of pages like this: http://vb.mvps.org/hardcore/html/int...elibraries.htm that same content can be seen by one of those help chapters too. So, there's a complete file for the link. Could someone tell me how exactly this works? I want to pass the "divId' function so that i can grab functions dynamically into the server where "success" is. this possible? I know the current setup is not (because " d.divId " isn't a variable) Code: function run(times,divId)
{
$(function()
{
var client_id = $('#client_id').attr('value');
$.ajax(
{
url:'http://urlhere.com',
data:{c:client_id},
timeout:99999999999999,
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'jsonpCallback',
error:function()
{
if (times==1)
{
run(2);
}
else
{
$('#'+divId).html('Error')
}
},
success:function(d)
{
$('#'+divId).html('$'+d.divId);
}
});
}
Hi, I am making a widget to work on any site, that means not my site, so I have no control of what other libraries are used on the page. Thats why I am loading my own jQuery libraries dynamically and then execute my own code. An issue I have that some sites are loading fine and all is working as expected, but some sites are executing the code 2 times. I have made a page dump and put on my own server, so I can replicate the issue better. GOOD: here is a page that works OK: (see the button that says: send these contact details and map to your mobile.) Code: http://test.plustest.info/suffolk/contact.html BAD: here is the page that shows the button I am trying to load 2 times: Code: http://test.plustest.info/cream.html As you can see the button appears 2 times, which is wrong... Even it shows 2 times, the popup appears just ok when you click on the button. Would anyone be able to check what can be wrong here? the code is in the: Code: <div id="now_send_it_wrapper"> so its easier to find. Any help would be much appreciated. Thanks, Vladas Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! hi friends, I am looking for a solution to display the records of a dynamically selected mysql table using ajax,jsp & js combinations. any sites showing some example thnx in advance. I'm just curious to know what would be the best way to go about this. I have my navigation and content area divs from my admin panel show below and what I want to do is when one of links is clicks then to load that links file into the content div. I've been told JQuery but I can not find a function exactly detailing and teaching me how to do what I'm trying to do. Code: <!-- Global -->
<div id="page-content">
<div class="container content">
<!-- Sidebar -->
<div id="sidebar" class="bImg">
<div class="bInner"><span class="bTR"></span><span class="bBL"></span>
<ul id="side-nav">
<li class="active">
<a href="#" title="Character" class="button">
<strong>
<img src="img/icons/newspaper_48.png" alt="Character" class="icon "/>
<span class="title">Character</span>
<span class="expand expanded"></span>
</strong>
</a>
<ul>
<li><a href="/mods/bio.php" title="Bio">Bio</a></li>
<li class="active"><a href="/mods/allies.php" title="Allies">Allies</a></li>
<li><a href="/mods/rivals.php" title="Rivals">Rivals</a></li>
<li><a href="/mods/quotes.php" title="Quotes">Quotes</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Submit" class="button ">
<strong>
<img src="img/icons/paper_content_48.png" alt="Submit" class="icon "/>
<span class="title">Submit</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/roleplay.php" title="Roleplay">Roleplay</a></li>
<li><a href="/mods/news.php" title="News">News</a></li>
<li><a href="/mods/match.php" title="Match">Match</a></li>
<li><a href="/mods/segment.php" title="Segment">Segment</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Booking" class="button">
<strong>
<img src="img/icons/image_48.png" alt="Booking" class="icon "/>
<span class="title">Booking</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/champions.ph" title="Champions">Champions</a></li>
<li><a href="/mods/booker.php" title="Booker">Booker</a></li>
<li><a href="/mods/compiler.php" title="Compiler">Compiler</a></li>
<li><a href="/mods/archives.php" title="Archives">Archives</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Fed Admin" class="button">
<strong>
<img src="img/icons/comment_48.png" alt="Fed Admin" class="icon "/>
<span class="title">Fed Admin</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/handlers.php" id="handlers" title="Handlers">Handlers</a></li>
<li><a href="/mods/characters.php" id="characters" title="Characters">Characters</a></li>
<li><a href="/mods/manageapplications.php" id="templates" title="Applications">Applications</a></li>
<li><a href="/mods/eventnames.php" id="templates" title="Event Names">Event Names</a></li>
<li><a href="/mods/titles.php" id="templates" title="Title Names">Title Names</a></li>
<li><a href="/mods/divisions.php" id="templates" title="Divisions">Divisions</a></li>
<li><a href="/mods/matchtypes.php" id="templates" title="Match Types">Match Types</a></li>
<li><a href="/mods/arenas.php" id="templates" title="Arenas">Arenas</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Site Admin" class="button">
<strong>
<img src="img/icons/spanner_48.png" alt="comments" class="icon "/>
<span class="title">Site Admin</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/templates.php" id="templates" title="Templates">Templates</a></li>
<li><a href="/mods/contentpages.php" id="contentpages" title="Content Pages">Content Pages</a></li>
<li><a href="/mods/bioconfiguration.php" id="bioconfiguration" title="Bio Configuration">Bio Configuration</a></li>
<li><a href="/mods/newscategories.php" id="newscategories" title="News Categories">News Categories</a></li>
<li><a href="/mods/menustructures.php" id="menustructures" title="Menus">Menus</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /Sidebar -->
<!-- Content -->
<div id="content" class="roundedBorders">
<div class="bBottom"><div></div></div>
</div>
<!-- /Content -->
Hi -- I'm learning js, and after some minor modifications my html page is now not pulling content from the xml pages, although I have: <script src="include.js" type="text/javascript"> and <body onload="getCategory('about');" which is not loading the about.xml content Troubleshooting: Yes, include.js file is on same level as html page. Any ideas? Thanks! Hello everyone, I have implemented the following code into my website Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#content').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
The div 'content' holds already a few divs, when the user hits the bottom of the screen, the new page (page2.html) loads into the 'content' div, they all load below as is expected. Unfortunately, the page3.html (Which has the same content as 'page2.html) then loads below the footer... (which is set to position:relative; ) below everything else... is there any reason why the next page would load into a different location? Thanks! Hi, Need some help please. I have the following function: Code: <script type="text/javascript">
function getVote(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("ajax").innerHTML=xmlhttp.responseText;
}
}
var questionid = document.question.questionid.value;
xmlhttp.open("GET","result.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>
I then have the following onClick: Code: <input type="radio" name="vote" value="1" onClick="getVote(this.value);" /> <input type="radio" name="vote" value="2" onClick="getVote(this.value);" /> Currently, all is good and works perfectly, the div 'ajax' refreshes ajax style with 'result.php' and I can take the value. But what I now need to do is refresh two divs. I have tried everything from putting two onClicks on the radio button, within the 'getVote' function calling in the second function and many more alternatives. The second function is pretty much the same, just a different div ID: Code: <script type="text/javascript">
function getTotal(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("total").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","total.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>
The problem I have, I think, is that both functions need to use 'xmlhttp.open', and it seems once one has ran, the functions end. Any ideas gratefully received. Thanks. Hi, I am using one simple lightbox or you can call it modal window. It doesn't load any flash content until you click on the button PLAY and when you click on close, it stops the flash game (it actually stops as when you click PLAY again the game starts from beginning) BUT this is only about FIREFOX its not the behavior in CHROME, IE or Safari except MOZILLA FIREFOX all browser act in a complete different way which is opposite to the way I described above. In chrome, IE, Safari maybe Opera the Flash content starts loading without being triggered (means if you don't click PLAY BUTTON still it loads) and even if you click on close button. Instead of stopping flash like in firefox the flash game continues to run (like being minimized instead of closed). Why is this happening, How to resolve it, I am not able to understand this strange behavior? RELEVANT CODES: CSS: Code: #fade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999999;
}
.popup_block{
width: 98.95%; height: 98.2%;
display: none;
padding: 0px;
line-height:1em;
font-size: 1em;
position: fixed;
top: 0px; left: 0px;
z-index: 999999999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.close {
height:20px;
float: right;
margin: 0 2px 0 0;
}
HTML: Code: <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a class="poplight" href="#?w=100%" rel="popup_name"><img alt="play game" class="happybutton" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://farm5.static.flickr.com/4084/4998558471_27e3985c16_m.jpg" style="opacity: 0.8;" /></a></td></tr>
</tbody></table>
<div class="popup_block" id="popup_name">
<div class="gamesharebuttons addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_button_more">Share</a></div>
<iframe id="myvideo" width="100%" height="98%" src="http://files.cryoffalcon.com/bhgames/Adventure/star%20island.html" frameborder="0" scrolling="no" allowTransparency="false"
></iframe>
</div>
JS: Code: <script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Close It" class="close"><img src="http://files.cryoffalcon.com/bloghuts/images/close%20button.png" alt="Close" width="20" height="20" /></a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 0) / 0;
var popMargLeft = ($('#' + popID).width() + 0) / 0;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
HERE IS LIVE DEMO PAGE http://bloghutsbeta.blogspot.com/201...n-testing.html Hi, well i have a issue with lightbox like stuff that i am using here http://www.bloghuts.com/2010/11/13-days-in-hell.html If you click on play that lightbox windows open and if you click close it closes down (as you expect from it) but the problem is that in firefox until you click play the game doesn't load and when you click close it closes the game BUT if you use any other broswer like chrome or IE or any you like, before you click play the game starts loading and when you will click close, it will actually minimize the game not close (like it do in firefox) I don't know why is this crossbrowser issue happening and what could be the solution to make it work like firefox in all browsers? |
|||||||