how to use jQuery on multiple pages - javascript

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 :)

Related

ChessboardJs: Javascript Boards Work Only The First Time

Edit: The page code can be found on my page URL. I don't know where the fault might be. Please help.
Problem:
When we click to the chess puzzles page for the first time, they work. However, the boards vanish when we re-click to them from the homepage.
Demo:
This is the home page.
You click on a player's picture and you are taken to this page. Please note that the boards appear in this one.
But you see that link to go back to the puzzle list. You click on that and you land on the home page again.
Now, if you click on any of the players' photo (or even the same player's photo), this is what you get.
From now on, none of the puzzle links would work.
You can check it yourself at chess-puzzle.com.
Few information:
The site used Cloudfare. I tested with Cloudfare (inactive) a few minutes back yet the problem is not resolved.
I validated JS and it seems to be okay.
I have only one CSS file on my own (mycss.css). Other external files came with the piece of software.
I don't know which code to share because I don't know why this might happen. Though I can share any code by editing this question if asked for.
Can anybody please provide an answer to this.
The problem is that you have the attribute async in the scripts (jquery, chessboard) and that means that they do not load in any particular order.
But, the chessboard uses jquery at some points so if the chessboard script loads/runs first it will crash because it does not find jquery.
The script at the bottom will also fail as it might run before jQuery is loaded.
Finally you have included the chessboard script twice in the `head.
The best solution for your case would be to move the scripts at the bottom of the body, right above your inline script and remove the async attribute from them.

Not getting slider images after reloading the html page

This is the screenshot of my html page. this commented area is my issue.
Your problem starts with a couple of error's :)
Your Javascript crashes because it looks for a function that doesn't exist "$(...).fancybox()". This means that either you didn't include the fancybox library or that the file where you call in the function fancybox is loaded before the fancybox library is loaded in.
Next problem is that the images that are used in your slider (I assume). Do no longer exist. Try clicking them in the console to see if you can access them in the browser.
Last but not least. You tagged your question as "java". Javascript and java are not the same thing. Your problem involves javascript. Might want to change that tag next time so you can get anwsered faster.
I Hope this helped a bit :)
Good luck!

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

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');

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.

How to debug DOM manipulation by jQuery?

I'm working on an website with some dynamic jQuery content.
If the user pushed a button ("show menu") on the page, an javascript function runs. Let this function call loadMenu().
The loadMenu() function loads a menu (web conent) from server using ajax. Part of this loaded code is javascript/jquery. 2 functions of this code make some elements on the page draggable, 2 other functions make some elements on the webpage droppable. These functions are all started at $.ready-Time (if the DOM is ready).
All this works fine.
Now i added an "MenuAlwaysVisible" feature. This means: if the web-page is loading and finished (ready) the user doesn't need to press the button "show menu", because the javascript loadMenu() now fires automatically, if the page is ready
The problem now is, it looks like, the draggable handler are attached and worked as defined, but droppable does not work.
I'm not sure, but probably the droppable function runs on a time, where the DOM elements doesn't like to be droppable? Ore maybe some other jQuery codes overrides this? (but there are no other droppable elements on the page)?
So the question is: how to analyze that problem: how to debug DOM manipulation, using Windows and Firefox/Firebug or Safari, Chrome .. whatever...
Thank you!
One debugging trick I have found endlessly useful for dealing with JQuery is the insert obvious code trick. Slap in a .hide() command on some obvious, identifiable part of the page, and see if the code ever runs. Lets you track which code pieces are not behaving as intended, and which are simply never being used in the first place.
To answer my own question: i did not found any alternatives way than using firebug and console.info() or console.warn() to debug the code.
Thanks # all for the comments

Categories