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!
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.
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.
I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.
This is in the header (set in the header for that particular blog):
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>
Then I think I need to call this function at the end of the page - I've put it in the footer:
scratchblocks.renderMatching('pre.blocks');
NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.
Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.]
[http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2
Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it.
https://codeclubprojects.org/en-GB/scratch/memory/
I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.
Any help would be greatly appreciated.
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:
window.addEventListener("mercury:load", function(){
// do stuff
});
In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.
it's not the first time that I'm restyilin' my website and there's always this problem: when I analyze the page with the Google PageSpeed, it suggests me to put the Jquery and a few other .js codes at the bottom of the page to increase the loading speed.
The problem is that most of the time when I do that the slider, in this specific case, do not work.
Is there an easy solution for this?
I already minified and included the jquery on my wesbite as (jqu.js)
It's not always the case that jQuery can be loaded in the footer of the page. PageSpeed Insights does not catch the cases when this occurs, and thus will always give you a penalty. I'm familiar with this happening with various Carousel-type Javascript UI elements; it sounds like your slider is affected too.
When we had done security audit of our project, we got broken Link "/a" vulnerability.
After searching for link throughout project we found link in JQuery-1.9.js java-script file that we are using in our project.
small part of code in that JQuery-1.9.js -
// Make sure that URLs aren't manipulated
// (IE normalizes it by default)
hrefNormalized: a.getAttribute("href") === "/a",
As per my understanding this code part helps for making it(JQuery) compatible with IE 6/7/8.
hrefNormalized is used to check that anchor tag is giving href value as full URL or exact href , which is issue in IE version.
The better explanation of this part is given in
https://www.inkling.com/read/jquery-cookbook-cody-lindley-1st/chapter-4/recipe-4-1
I want to remove this vulnerability but i don't want to remove or change code in JQuery js file.
So, My question is why did not JQuery designers used "/#" instead of "/a" .What is the problem of using "/#" in that code.
Earlier same question is asked by someone to JQuery Team,but they told that it not the problem from Jquery.
For reference of that ticket
http://bugs.jquery.com/ticket/10149
Help me to solve Or Is there another solution?
Thank you
This is not a vulnerability but a false positive. The security scanner interprets the "/a" string as a link, which it is not.
Even if jQuery creates the link in the DOM, it's not clickable or visible to the user. Your website does not actually have a real link to /a anywhere.
I would ignore the problem without changing anything.
Maybe, if you want this hrefNormalized: a.getAttribute("href") === "/a", to be transformed into this hrefNormalized: a.getAttribute("href") === "/#", but you don't want to touch the jQuery file.
Put that second one in a script in a an order so that the browser reads your script after reading the jQuery file, so it mashes.
Anyway, I never had issues with jQuery before, check your code first.
If you don't want to have your views with scripts, put it in a js file and link this file to your view after the jQuery file.
Hope it helped you, or at least gave you some ideas to solve your problem. Good luck, let us know how it goes! ;)
EDIT:
<script src="~/JQuery/jquery-2.0.3.js"></script>
<script src="~/Scripts/Fix.js"></script>
If you do something like this, the browser reads first the jQuery, then it reads the Fix.js. Inside the Fix.js, you put the function or paramater you want to change from the jQuery.
So the Browser will get the latest one it reads if they are equal.
For example:
function whatever (){ //This in jQuery file
//things #1
}
function whatever (){ //This in Fix file
//Different things #2
}
This way the browser chooses the Fix.js one, because was the last he read.