I have developed a set of code that allows for content to be loaded in, without changing pages, however I've got a problem, I need the links to change as well, but they don't.
My code:
I don't really understand what's going on with it, but if you make any changes, would you mind commenting them on the code please?
Related
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.
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.
I have been trying to figure this out all day. I am using a theme that a client wanted to use. I have replaced every mentioning of 767px and 768px with 1359px and 1360px (those are when I want the menu to collapse). I have added custom CSS. I can get the button to show up at 1359px, but it will not toggle the navigation.
Basically, the navbar toggle button does not work until I hit 767px. I do not want to know specific code I can use to fix this problem. All I want to know is where this is being set as 767px. How does the website know to change it at 767px when I have changed every mentioning of this number to 1359px. I have gone through every php file, js file, and css file on the server. I am foaming at the mouth. I think I am going to explode. I have checked EVERY solution here and elsewhere on the internet.
Is this something I need to change in javascript, in css, or in php, or in all of them?
I am using WordPress. I am looking for a general solution NOT CODE. As in, where is this being defined. What file do I need to edit in this godforsaken theme to get the menu to toggle at 1359.
Please help before my brains start oozing out of my ears.
Okay well I feel like an idiot..
To anyone else having a similar issue,
CLEAR YOUR BROWSER CACHE.
Upon inspecting in developer tools I realized the site was loading an older version of my bootstrap.min.css file rather than the file I updated with the new breakpoints.
Cleared the cache and everything worked as expected.
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;
}
I've set up the CLeditor on a site I'm working on. Currently I'm setting it up so that as you type and edit within the editor, you can see a live preview of the results just above it, a lot like what you get when typing a StackOverflow question, though much more basic.
It works by simply copying the inner HTML of the iframe contents to another place on the page. However I've run into an annoying issue. When I use the alignment buttons (left, center, right), it adds the attribute align="right", for example, to the selected text. While it works in the editor, it does not work on the page itself, probably because that attribute is pretty much obsolete.
...
I actually figured out how to get around this issue while typing this question. Still, I'll post this question with my solution. Plus I have a relevant question to add to this.
Originally I tried applying the following CSS to the page:
div[align="right"] {
text-align:right!important;
}
This worked for initially loading the data onto the page, but while dynamically changing alignment in the editor, the live preview was not reflecting the changes. I thought at first that this was because the styles were applied at load time only.
Well, that was a brain fart because I know better than that. The real problem was that I was selecting a DIV element and the align attribute isn't necessarily applied to a DIV. Changing div[align="right"] to *[align="right"] works perfectly.
However, even though I found a workaround for this specific issue, I still can't figure out how the cleditor builds the HTML output for the iframe. Where does the align attribute come from in the code and how does it know to put it (and all of the other elements/attributes) into the HTML? If I had a way of manipulating this, I could simply tell it to use inline CSS for the alignment rather than the deprecated align HTML attribute. Please note that I do not wish to enable the cleditor's built-in "useCSS" feature.
Thanks for any information you can share, and please do not downvote this question just because I already solved the initial problem. I want this to be able to help others if they run into the same issue. (I'll also post my answer as an answer).
Applying the following CSS to the live-preview of the page works perfectly:
*[align="right"] {
text-align:right!important;
}
Don't forget to do the same for left and center as well.