Site Loading Delay (JS Accordion Effect Doesn't Load Right Away)
Jun 10, 2011
Ok i just created my portfolio site using a simple accordion effect i got from. [URL] Im very new to javascript and coding in general, so im sure my code is far from pretty. My question, is their a way to fix the delay on the way the accordion loads. if you go to my site [URL] you'll see that initially all the sections are visible and then they collapse after a few moments. is there anyway to make it so they are collapsed immediately.
This hides all divs except the first one (check the site) on load, then whenever I click a h3, it performs as an accordion, sliding the hidden div down and other visible divs back upI want to add another functionality. I want it to be like, if you click on a h3, and the next div is already open, it will hide that div. else, it performs this function. This would be a basic if/else then wouldn't it? I'm new to jq but I've done mIRC scripting in the past and I don't know how the selectors work yet
I created an accordion menu with rollover sub menus. My question is there a way to stop the rollover effect in the sub menus until the accordion animation is finished? When I click on a category link on the accordion the sub menu links flashes until the animation is done.
I'm having problems getting this bit of code to work. It works when the page is on my local drive, but when I publish it online it doesn't. The code is exactly the same when local or online. The online WIP (that doesn't work) is here:The .load code is meant to load the caption text for the video and also some social media buttons. Like I said, this works just as I want when I open the html page from my local drive.Here is the code
I need to delay a hover effect on a anchor tag, I need something that delays the hover effect when javascript is on and when it's off your still able to get the hover effect when you roll over the anchor tag.
I'm having trouble with the fadeTo() function. I'm doing it on rollover on a series of thumbnails that loads based on featured images of pages in a Wordpress site. I've got things working, but there seems to be some delay in the availability of the effect. The effect doesn't happen until a few seconds after the page is loaded, even in local testing. And even then, it seems to only seems to happen kind of one at a time, down the line of thumbnails. Here's the code I'm working with:
I've been experimenting with accordion nav in the bottom of the sidebar on this site. I got it from this work put up by Marco van Hylckama Vlieg, and I think he's done a good job. At a glance, it looks like my menu works, but as you click around, you will see it is not consistent at remembering which section of the menu to leave open - it should remember its state. It uses cookies, and I wonder if there is a problem with that, or a conflict with other scripts on the site (this is a Squarespace site). I'm hoping a js expert might see an obvious problem. I asked Marco, but he saw no problem. I've tried it on several machines and always had problems.
I've got a script that caches 52 card images and displays the appropriate card based on user input. It works fine, except when the page loads for the first time the results are unpredictable until a few seconds elapse. My guess is that it's taking time to cache the 52 images. Is there any way to delay the loading of the page until all 52 images are cached?
I am using DOM to swap between DIVs to give the effect of a tabbed display window. Each of the DIVs contains its own images. I don't want all of these images to load with the page but rather just to load when the relevant DIV is selected. (All but 1 DIVs are hidden initially.)
By default, is this the case? Or can I use a function to not allow the images to load until I tell them to?
I have an image that I want to delay the load of by 3 - 5 seconds. I've found tons of stuff on how to preload images, but nothing on how to delay the load of images.
I think this is something I can do with JavaScript and the setTimeout function. (If it's not, just direct me to the correct forum.) However, this is the image code and I just need to delay it loading:
I recently set up a JQuery script to show and hide a specific DIV on my site. Everything is working correctly except when the page is loading, the DIV is fully expanded and hides as it's supposed to a few seconds later. Ideally, I would like this DIV to remain hidden until the user actually clicks on it. This seems to be a performance issue, but honestly I am a JavaScript novice so I really don't know where to go from here.
The page in questions is here. And the specific areas that use this script are the "Change Log" and "Readme" boxes.
I have a button on my site, which when clicked calls an ajax function. What I want to do though, is append a loading graphic for just 2 seconds inside the button such that it looks as if the website is 'busy' saving when the button is clicked. This is obviously just for user feedback as the 'save' is done instantly - it's just for user feedback to make the user confident that the save button has worked. To do this, I'm trying to append a loading image to the save button, delay for 2 seconds, then remove the image, but it doesn't seem to work.
I have this HTML:
<p><a href="#" title="" class="save">Save</a></p> And this jQuery: $ (
I'm trying to nest 7 tab sets in an accordion representing each day of the week. I've tried all kinds of fixes, but no matter what I do, the results are inconsistent. It's easier to see than explain now: [URL]
I'm using LavaLamp [url] for the main navigation on a site I'm building, for a subtle animated effect.
The site itself is a single-page portfolio site with 3 sections organized vertically, "Home," "About," and "Work."
The problem I'm having is that the clicked navigation does not return to its original position on each panel if I double back on it.
For example, if I'm on the Home panel, and I want to get to About, I'll want to select "About." The LavaLamp animation will ease over to the "About" link on hover, and I'll click it, then the page will scroll to the About panel, where "About" in the navigation is being shown as selected (LavaLamp has a "current" class you can apply to whatever you want to start off as being selected)...
And that's great, BUT, say I want to get back to the Home panel. I click "Home" in the nav, and I'm transported back to the Home panel - but when I was there before, I'd selected "About", and since it's all on the same page, the link is focused on "About," even though I'm on the Home panel. Make sense?
I'm not good enough at JS or jQuery to figure out how to fix this. I think what I want to happen is for every link on each panel to STAY where it was originally assigned ("Home" link will stay on Home, "About" link will stay on About, etc.), but animate on hover only.
Is there a way to write something into the LavaLamp JS to make it so the animation works only on hover, and not on active, focus, or visited?
Here's the code, can't provide a demo page, I don't have anywhere to upload it at the moment...
index.htm with an example of what each panel looks like:
jquery.lavalamp.js:
And last but not least, the LavaLamp CSS:
Forgot to add the page js:
EDITED ALSO TO ADD: Could it have something to do with this:
If you scroll to the bottom, and click: "See what our users have to say" and you can see the sliders.
It's working in all browsers but Safari, the script just doesn't seem to be loading, I get the loading scroller bars but they don't fully load. What is the best way to debug JS - is that the right term?
I want to make a loading effect (similiar to lightbox but with loading animation gif) while loading an image and remove the loading effect after image has been sucessfully loaded.
I used DrDOS's solution from [URL]and modyfied it a bit so I have 2 images, first without and 2nd with a link to other page. It works just fine in FF but in Chrome and in IE it shows just 2nd image. On place where first image shall be it's just blank white space. I have javascript enabled in all browsers, btw.Here's a code in head:
<script type="text/javascript"> function loadImg() {
I want to have a website which will load content into a div after a delay. I want the site to load normally apart from one div. In this div i want to display a loading gif for 2-3 seconds and then have the content load. I want to be able to alter the content which loads into this div dynamically with buttons but have content which loads in without any buttons being pressed, simply on page load.
although you have to click the button to load the content, i figured if i moved the JS into the body tag and changed it to onload rather than onclick then it would begin the script when the body loads. Which is what I want. However I have not yet been successful in making this work and am now stuck.This is where I have got with the script.
Code:
<head> <script type="text/javascript"> function example_ajax_request() {
iv written this script and it works pretty well. What I am looking to do is amend it slightly. Its pretty simple what it does, however I would like it to display the loading gif when you click the link then display the content after the given time. At current it displays the loading gif on bopdy load as the gif is set to default content but it doesnt then revert back to the default while it is waiting for the new content to load.Here is my code:
I have a div that has 4 buttons and another div inside that the four buttons load pages into depending on which one is clicked. Picture an image gallery except for images its loading pages. All good, all works.What I want to do is trigger the buttons to activate every five few seconds and load the pages on their own without the button having to be clicked on.basically creating a rotating type banner ad system.Below is the code for one of the buttons.
