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.
Related
I'm developing a web-page, basically from scratch. I have a .html file, .css file, and .js file that includes only JQuery. I am only running this locally on my own machine, and for some reason, now only some of my Javascript loads. For instance, I have some hidden s that when hovered over, they are displayed with JQuery calls. These seem to work fine as they always have. I have a scrolling sidebar that has hidden sub-menu items, and this usually loads fine as well. I have a hidden div that displays a definition list on a button click, and when you hover over the , the should slideDown. If I wait about 10-15 minutes this will start working. But obviously that is a problem.
Also, in Chrome's 'Developer Tools' I don't see any errors under the sources tab. I checked the 'Pause on caught exceptions' box, (this is where my knowledge ceases) and in jquery.min.js:formatted, it pauses and highlights e.querySelectorAll("*,:x"), and when I resume, it does the same thing here, c.call(e, "[s!='']:x"),
Hoping someone can not only answer my question, but explain what's going on here in the caught exceptions. By the way, I did not write jquery.min.js:formatted.
Thanks in advance!
I copy/pasted my link to fontawesome and the JQuery library is up to date. Someone said something about the possibility of an infinite loop, but I'm not keen on what that is, I'll look into it.
Showed some code above. Not sure how helpful it is.
My expected output would obviously be for my JQuery to work, but it is not.
No error messages in the Console.
I actually figured it out, sorry I can't post working examples bc it's proprietary.
I was missing a closing } bracket...
But the way I figured this out was through opening up Chrome's 'Developer Tools' and switching into the 'Sources' tab.
- From here, underneath the stop sign with a pause symbol, it displayed exceptions in the code where something breaks.
This was much easier than scanning the code with my eyes. Sorry if this was a basic answer, it really helped me a lot.
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!
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 :)
This is a little hard for me to explain as i am not much of a coder. So here we go.
I have script that is mostly encoded with ion cube. Not i have an addon that is also encoded. The addon is loading in a tab number 5. The problem is that every time i click on a function in the tab that complete page reloads, and you have to navigate back to tab 5 to see the results.
So this is what i am thinking. As i can't edit code and the make of the code doesn't know when they are adding tab support to their little piece of code. i figured that there are two options
1 Force the following variable to the end of the url #tab5 so that when people click a function they will not have to navigate back to the tab. How do i do this coding wise, javascript or something else and what would code be or where would i look to code something like that. I have looked everywhere but nothing really applies to my situation
2 I think it would also work if each function which is called just reloads that section of the page in an ajax field so that not the full page is being reloaded.
Who can help find the right solution.
thanks
I messed something up. In firebug I select the scipts tab, then click on inline and select the script I would like to step through with some break points. I am reasonably sure I have done this with the script before.
Now after removing and reinstalling firebug, clearing cache etc., scratching my head, when I select any of the scripts, the script briefly shows up and then immediately drops back to the HTML page that includes the script. If I'm quick, when I select the script I can scroll down and when I stop, it scrolls up, on it's own, line by line and when it reaches the top it goes back to the HTML page that has included the script
So from the screenshot, there are some js scripts below (cropped them out, didn't want to share the names). I've tried checking and un-checking inline with now result. I have a feeling it's related to my swiss cheese knowledge of js and web programming.
I hate to answer my own question, but I don't want to leave this post incomplete, so feel to improve on the answer. I don't plan to give myself the check unless there appears to be no further activity. I found a bug fix at issue #5134, and installed the 1.10.0a6 update found here and one last thing, the auto-scrolling stopped when I toggled the "Break on next" button pictured below. (the yellow pause button below the firebug.
Im not sure how can further can I assist without having to see the live site or some codes that may point to some explanation. However, here are some tricks that might help.
I use FirefoxAurora that comes with a tab called Changes. or maybe I install the Firebug extension somewhere. I forgot. But googling it up, this may be it Firediff.
The tab looks like the image attached and it will Diff the changes inside a page and then you might have a clue what's going on. It's detect element/attributes changes (not sure about inline script).
P/s: Somehow it doesn't work now, forgot how I've tested before. The url above have more explanation on this. But do check it out. Its been useful to me last time.