Page flickers on load - hide/show javascript - Total Newbie - javascript

Ok so here goes.. I'm totally new to Javascript. I only started on html&css about a month ago. All my htl and css is probably pretty backward and i've got a stack to learn. I'm using two pieces of javascript - one piece loads the nivo slider and the other the hide and show easy tabs:
http://www.kollermedia.at/archive/2007/07/04/easy-tabs-11-free-tab-menu/
Both were fine when I hacked them to hell trying to get them to look the way I wanted. Since i've put them together all hell has broken loose (bit of an exageration) but it may as well have because although they are both working, the page flickers badly on load. I have been researching this and I hear it's called DOM flicker. I know it's due to the hidden divs showing before the script kicks in. I also notice that the increased page height, for the split second (sometimes longer) it takes the content to hide activates the scroll bars and i know this could have an affect. I'm also using background images within the links on mouse over commands.... i didn't know what else to do.
I've read you can add script to only show the content once the script has loaded but I know zero javascript : ) ... yet!
Can somebody please help me fix this? I've read lots of posts around the net but they all put the code with gaps where your supposed to fill in and where it's put is expected to be known. I'm sorry to be such a mong but could someone literally copy and paste my javascript and edit that to show me?
I know it's a lot too ask but i've been trying to fix this all day.
Here's a link showing the problem (when selecting the portfolio links the delay / flicker lasts ages!)
link to the site: http://www.adam-ashton.co.uk/homepage.html
(sorry to be so long winded)
Thanks,
David

Page Flicker can be handled with the help of some css
.hideME {
visibility:hidden;
}
Add this class to the Top Most Element (Mostly a div ) of you html page
And inside the script tag ,
write a window.load function
$(window).load(function() {
$(selector).removeClass('hideMe');
});
this should do the magic :)

Add this one line code at 46th line .. Means first line of window.load
$('.container').removeClass('hideMe');

Related

Removing Preload Div and JS breaks website

I created a site with a preloader and when I was done decided I no longer want it, but when I remove the code for it, it won't load past it any longer. It just displays a grey box when attempting to access the website.
There's quite a lot of code to show, but I was just hoping someone may be able to steer me in the right direction by telling me what Div is causing this via inspect element.
If there's any snippets of code I can provide please let me know.
The #main id on the upper most div is causing the problem. Consider using semantic elements like main over generic divs.

(JS) SPA-like website behavior with background videos

Forgive me if another thread like this exists - I couldn't find the answer to that specific problem.
I'll soon be developing the frontend for a vanilla JS AJAX loaded website, with SPA-like behavior similar to the home slider in this one:
- http://clapat.ro/themes/grenada-wordpress
The methodology I will probably utilize is loading the innerHTML of a container from the targeted sub-template, then pushing the state to the history - pretty standard approach to this, I believe.
Now, the slides containing image background are pretty obvious - all it should take is placing the same image in the target subpage hero section, then animating in on load. The problem might be with the video slides - how to make them continue playing seamlessly during and after the reload? Will such approach force them to start all over from the beginning, as soon as the target page is loaded and placed in the view?
I haven't tried it yet, I thought I'd ask in advance, in order not to get myself stuck up all the way into the incorrect approach :)
Thank You in advance,
Peter
Researching the reference templates for the 100th time, I think I came up with some kind of a solution myself:
if both the homepage and target page had structure like:
<body>
<main-container>
<slider-or-hero-container>
...
</slider...>
<content-container>
...
</content...>
</main-container>
</body>
Then, maybe I could replace the whole "main-container" on normal links, but replace only "content-container" clicking the links within the slider? The slider section would basically just stay, and the script would simply modify its appearance (disabling arrows and slide change, perform the transition animations etc)...
If you had any suggestions at this point, I'll really appreciate that :) Otherwise, I will post an update when I'm done coding it - if it works, it may be helpful for someone in the future :)

how to use jQuery on multiple pages

Before anything, I wish to clarify my coming question by saying that I have just been out of a "function not defined" problem, which was solved by moving the desired function to "head". (I still find it strange the onclick couldn't see the function in its own file...)
I am 1/2 day old to jQuery. I have a CSS'd list(A), the html that builds the list (B) and a jQuery function (C) that processes the collapsing/expanding of the list. All borrowed from here:
jsfiddle.net/jhfrench/GpdgF/
When all this is in one file, it works fine. But when this file is read into a div, it doesn't work anymore. I've been trying moving A and C around a while now, because I think it is something I don't know about the scope (or related issues) of something here:) and needless to say, the collapsing/expanding/hovering is not yet happening. If I MUST have the html code (B) in a yet-to-be-loaded file, do I keep the A and B parts in this file, or do I place them in the of my main page (that contains the div which will eventually hold B), or something else?
Thank you in advance.
Right... I had found the downvotes strange... you guys almost gave me a sad birthday :P turns out the issue wasn't understandable till you fall in the trap. Found the solution in one of these obscure web places ;)
Here you go:
Somehow pages loaded into other pages through certain methods (ajax being one?) get stripped of their "calling the javascript" capabilities. I had:
main page --> | div 1 on left | div 2 on right|
Stuff gets loaded into div 2 depending on actions taken on div 1 or div 2 itself. This means in my case that whatever is loaded into div 2 ALSO needs javascript capabilities for the decision taking.
a random page X.htm---> |html+css+js|
(this one being one of various "pages" that could be loaded in DIV 2 in main page)
html works ok, css works ok, js doesn't work AT ALL, never ever. Not even SEEN by anyone? Dunno why...
SOLUTION:
1) put the JS relevant to your child pages in of main page!
2) put the following at end of any page loaded into DIV 2, like "page X" above
<img src="oneTransparentPixel.png" onload="theFunctionWeNeedInPageX()" />
Where you create a 1 pixel transparent image to be loaded (!). The hack here is that the loading of the image allows for the calling of the function we need...
I don't know if the JS code is unseen if in the child page, or not executed, or the page isn't yet ready to execute it. Whatever the case, this "solution" allows for
1) code is now seen
2) it is executed once the page is ready to let the function do the stuff it should. In my case the function stylizes the mouse over/collapsing/etc of a list in the child page X. So it might have been that the code was not yet ready to be applied on the list because the list didn't yet exist - was not rendered by the browser, or because the code was not being seen by anyone. Could someone clarify what was happening, or point us to what to read so we know?
Thank you for your time :)

z-index for jquery object issue

First off, I am sorry in advance- anyone who reads this is going to hate me.
So, I am currently finishing a webpage for a client. Things are going decently, except I'm having a bit of an issue with the positioning of an element. There is a little contact box that is supposed to slide in from the side when you click on it. The issue is that I basically have had my hands tied, and I have to use wordpress for this page, and this contact box is a plugin that the original author of this page chose. For some reason- this contact box always ends up behind other elements. I tried setting the z-index in the source code of the plugin by finding the name of the variable that is supposed to hold the instance of the slider- and I could not get anything to work (partially because I havent used jquery in a while, and, this isn't my plugin). I tried using the .zIndex function, but, it kept throwing errors. So, I went to CSS. I got the IDs of the wrapper and the actual box itself, and set their z-index to 100. This did nothing, which has left me stumped. Unfortunately, I can only provide links to the site, and a pastebin of the plugin's code- since the source code for the website is huge... and I also dont actually have access to the server- only the WordPress admin page (which doesnt allow me to edit the source of pages)
http://pastebin.com/NX8AnB16 - pastebin of the plugin source
http://buyinghouseinusa.com/ - the site i am currently trying to finish
If anyone could help me figure out what I need to apply the z-index to to make the stupid contact form stay on top, I would be very greatful. I apologize for the inconvenience of not having the actual code offhand (with the exception of what the browser can show me)
z-index only applies to positioned elements.
Then, in order to make div.dwp-contact-wrapper{z-index: 2000} work, you need
div.dwp-contact-wrapper {
position: relative;
}

javascript Accordion Customisation

I am using a Javascript accordion function which I found on the internet, however my Javascript skills are at a novice level ( Hence why I sourced a completed version to begin with).
What I have noticed is that when you load the page the accordion shows half initiated ( See Jsfiddle), what I would like to happen is that the accordion appears completely closed when the page is loaded.
I have put the accordion up on jsfiddle http://jsfiddle.net/richlewis14/uPvwL/, unfortunately the level of javascript used is beyond my capabilities and would appreciate any help in modifying it to my requirements, also if anyone could explain what is actually happening in the code I would appreciate that also, I would like to learn rather than jsut get the answer
Thanks
The script takes an argument to specify which element to open by default.
Change parentAccordion.init("acc","h3",0,0); to parentAccordion.init("acc","h3",0); and you're good to go :)
See http://jsfiddle.net/uPvwL/2/ for a working example.

Categories