|
JavaScript - Loading Issues
The Website: http://hudson.zzl.org
The CSS: http://hudson.zzl.org/galleria.classic.css The JavaScript: http://hudson.zzl.org/galleria.js The problem: a. first load = nothing shows up b. upon refresh everything loads very quickly and is fine. Ill explain my other loading problems once I can figure out how to fix this problem. Help please! Similar TutorialsOkay, 3 questions I'm afraid, all in reference to the JQuery Galleria on this page: http://digital.tmhcentral.com/pratt/a... Apologies for my explanations as I am a newby to anything beyond html & css. 1. I have a number of images placed in my html page simply using the img tag. When the page is loading I see these images stacked (full size) for a few seconds before galleria loads and then begins to convert them into thumbnails. Any idea how to hide the images on the page but only to appear in the galleria as the images start to load as thumbnails? 2. I wish to have the same 5px (horizontal) gap between each thumbnail. However my images are of different sizes and have been optimized to a max width or max height. I do not wish for the thumbnails to be cropped so have set: thumb_crop: false, This has now visually created an inconsistent horizontal space between each thumbnail (highlighted in pink to show the gap left and right of each one). I have already attempted to change the thumbnail width to auto in the css, but with no success. How do I remove the 'excess' left & right space from each thumbnail so that the gap appears consistent? 3. Lastly, upon page load, is it possible to hide the main stage image until a thumbnail is selected? I wish to initially display some text (where the main image sits) which is then replaced with the main image when the user clicks on one of the thumbnails. I would appreciate help on any of the above. Thanks in advance, Paul I'm no coder, as you will soon discover. The web work I do is from a purely novice, even hobby standpoint and the sites I create and host are nothing more than favors for friends and acquaintances who have needed but have not had a presence on the web. This being explained, I am asking those with coding skills to please take a look at the site I've just completed for a little diner down the road. (They're just starting out and can't afford to pay a professional web designer and, unfortunately, are stuck with me.) The site is http://d-n-ddiner.com I'm the first to say that the mouseover sound would drive me crazy, but the guys who own the diner are enthusiastic and want it left as is. I have had to combine scripts in order to have the "black-and-white to color" image effect work simultaneously with sound. The sound script depends on uploaded files: soundmanager.js, soundcontroller.swf and sound-config.xml and its tags are found incorporated with each involved image, within the body. The image effects are just the result of playing around with bits and pieces I've seen, mucking about the Internet. Its script is found within the head and also within the body, in each involved image's area, in mouseover, mouseout and, of course when specifying "name=" (such as Img_1). I opted for providing the sound in this manner because I am able to use an .mp3 file, rather than having to weigh through the pros and cons of .au versus .wav, etc., and the fickle nature of different browsers and plug-in crashes. After having many test the site (friends with varying operating systems and browsers) it appears that this mp3 solution makes the mouseover sound available to a broader range of users. Success has been achieved with Firefox, Safari, Netscape, Omniweb and Chrome. However, Internet Explorer and Opera seem to be the holdouts for both Mac and PC users. All this brings me to two requests: Would someone take a look at the site (particularly with Firefox) to determine if something might be done to help the page load more smoothly? Secondly, is there some sleight-of-hand that might be incorporated into the script to help IE and Opera detect the mouseover sound or do you consider these two browsers essentially not worth the bother? I am attaching a zip of the sound files I mentioned. The mp3 is not included but any mp3 snippet would do for testing, provided the sound config file is edited to reflect its file name. My primary concern is smooth page-loading; the IE and Opera issue is of less importance. Thank you for your patience and for any assistance you would offer. 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 Hi there, Firstly my title may be a bit misleading as I don't i'm not sure how to do it. My situation is that I have a small piece of javascript that 'cycles' through a bunch of URL's (the URL's are reports produced by SSRS). The problem is that each time the javascript loads a new URL it has to generate the report, so I have a few seconds where the screen says 'Generating Report'. What I would like is a system that never displays the Generating Report, instead I would like to maybe pre-load the next report so it is ready to show instantly. Does anyone have any idea how to do this? Any help would be greatly appreciated. Cheers, Tom. Hi everyone, I am having trouble getting a loading bar to appear from my javascript. I have the following code in place Code: $(document).ready(function(){
$(window).scroll(function(){
var h = $('#footer').height();
var y = $(window).scrollTop();
if( y > (h*0) && y < (h*1.0) ){
$('#loading').fadeIn("slow");
$('#loading').delay(10000).fadeOut();
$("#portfolios").delay(1000).fadeIn("slow");
}
});
})
I have it so when the user reacher the 'footer' div of the page, new posts appear which are contained in the 'portfolios' container div. They appear fine but no loading bar appears... The loading bar 'gif' is in the 'loading div id'. There is a 'display:none;' in the css on the loading div and the portfolios div. Any reason why the 'loading' div doesn't display but the portfolios does? I want the loading gif to show whilst the 'portfolios' is loading basically when the user hits the bottom of the page. Any help would be appreciated! Thank you! Can someone please show me a working example of how to load a WebPage from an existing WebPage using Javascript! I have tried googling the syntax and not having any luck. Thanks, Blake I have nearly successfully implemented a gallery using Backbox: http://www.javascriptkit.com/script/...ox/index.shtml However, when I test it in IE (7 & 8), it looks like it's invoking the javascripts and loading the large image from the thumbnail link, but then it just hangs up on the loading waiting to get the image. Does anyone know how to fix this? Thanks. hello, I'm trying to load the ads on my site dynamically and have ran into an issue and was hoping for some help. First - I can get the ads to load using vanilla javascript with the code below. Code: var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", OAS_url + "adstream_sx.ads/" +sitePage + "/" + uniqid() + "@" + pos);
var ifrmId = "ifrm_" + uniqid();
ifrm.setAttribute("id", ifrmId);
ifrm.setAttribute("marginwidth", 0);
ifrm.setAttribute("marginheight", 0);
ifrm.setAttribute("frameborder", 0);
ifrm.setAttribute("scrolling", 0);
ifrm.setAttribute("height", container.scrollHeight + (container.offsetHeight - container.clientHeight));
ifrm.setAttribute("width", container.scrollWidth + (container.offsetWidth - container.clientWidth));
container.appendChild(ifrm);
But since the site is using jquery I wanted to develop it out that way. So I have the following code, Code: iRandom = oas.uniqid();
sAdURL = opt.url + 'adstream_mjx.ads/' + opt.sitepage + '/1' + iRandom + '@' + sPos + '?' + opt.query;
$('<iframe />', {
src: sAdURL,
id: sPos
}).appendTo(thisAd);
I figured the reason this isn't working is the difference between appendChild and appendTo and the fact that things are jquery objects. So again the top code block renders the ads and the lower code block just shows the javascript code from the ad provider. Any help to get this to work in jquery would be grateful. Thanks I'm not sure where to put this question. I'mworking with something called OSClass which is a classified section php program. It has a plugin to make payments to paypal. but I need it to work in a new window, and the link won't do so. Don't suppose anybody sees an issue here? It seems to me that just adding target=_new to this would work. but it doesn't. Still opens the page in the same window. Code: <div class="buttons">
<div class="right"><a id="button-confirm" class="button" onclick="$('#payment_<?php echo $r; ?>').submit();" target="_new"><span><img src='<?php echo paypal_path(); ?>paypal.gif' border='0' /></span></a></div>
</div>
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. Hi I am currently doing a photography site. I would like to do a 'portfolio' page, but would like to pre-load the images so that they appear on-screen faster. Do I need to connect code to <body onload>? is there a way to after thye page load add an image. So maby loading it in the background and just showing it when you click a button?
Is there a way to tell Javascript to load data or a php file the re-direct to that page? Right now i have a script that will re-direct when a user comes to the page. It waits about 5 seconds to give it time. I wanted to know if there was a way to load it with JS or AJAX. Thanks for any help. for some reason I can't get this code to load... Code: <script type="text/javascript">
alert("test");
windowBody = document.getElementById("windowBody");
windowBody.style.height = (frameHeight - 250) + "px";
</script>
that should load when it loads the file foot.php foot.php should be included onto the bottom of all of my labs (and it is) my labs are opened up with Ajax... but the script its not loading at all... someone help =[ the web site is http://opentech.durhamcollege.ca/~in...rittains/labs/ sorry for the poor description I'm having a hard time describing this error lol Is there a way to load up an external JS file outside of the head tag? I've got an "AJAX" web app that's loading several pages simply by changing the innerHTML property of a single div. The JS source is getting to be rather large, so I'd like to split it up into manageable, organized portions. Is there some way to, using javascript or PHP, load another javascript into the browser dynamically?
Hey guys, I currently have a flash header .swf file as the header in my webpage. Problem is, it's 300 KB so it loads after everything else has already loaded, leaving a huge blank space where the .swf is suppossed to be until it finishes downloading. Is there a way I can tell my page to pre-load the .swf before everything else so that all elements in my page look like they load at the same? For example, with images I can do something like this: function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } then: <body onload="MM_preloadImages('images/search.jpg','images/contact.jpg','images/home.jpg')"> Is there something like this for .swf? I have an entirely javascript page that once it is done it still looks like it is loading. This is more of an annoyance than anything harmful. The page can be viewed at http://mikedombrowski.com/mRNA.html Thank you for your help in advance. So I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes. What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading). Could I stop the canvas from reloading the image each time the page is reloaded and if so then how? Can I make the canvas only load a part of the image, if so then how? If neither is possible any tips, solutions how to solve the performance issues? Hello, Is there any way that I can add a limit for the amount of time that a javascript loader bar stays on screen? The specific loading screen I am using is http://www.fliesen-info-spanien.net/loadbox.php. This loading box actually activates once the page is loaded apparently, but in my instance, it is loading then disappearing in the matter of a second, but I wouldnt mind leaving it up for a couple of seconds, say 3-5. Is there any line of code I can add to do this? Andy 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 -->
|
|||||||