Page layout changes slightly, no style changes - javascript

I am redesigning my personal / development website, and trying to make it as user friendly as possible.
I wanted to load new pages with AJAX and slide them in, and that's what's currently happening.
Everything works in all current browsers (except IE, but I'll work on that in the future).
However, there's a strange spacing jump in my navigation menu on the first (and only first) page change. After the page changes once, the navigation spacing stays the same.
On page load
After a link is clicked
When a link is clicked, the navigation section from the new page is set to replace the current navigation, because each link has a data-offset attribute that's calculated by the server backend so that the javascript knows which direction and how far to slide the elements when they are clicked.
The way I'm currently doing it, it's either [the content width] or -[the content width].
However, the structure of the menu never changes, and the stylesheet is completely static. I have inspected all of these elements in Firebug, and nothing changes across page loads.
I linked the site, http://next.randolphwebdevelopment.com above, but I'll copy some of the pertinent Javascript here to give an idea of what's happening.
Pulls the entire page down that the link would redirect to (unless specified, all future code blocks are also inside this callback):
$.get( loc, function( data ){
//delete the doctype declaration
data = data.split("\n").slice(1).join("\n");
next_page = $(data.replace(/(\r\n|\n|\r)/gm,"").replace(/>\s*</gm,'><'));
Replaces the navigation with the new navigation from the target page (all that really changes is the data-offset attribute on each link):
//insert the new navigation
$('#header-content nav').html(next_page.find('#header-content nav').html());
$('#header-content nav a').click( navigation_clickHandler );
That's really it. There's a bunch of code to insert the new content and slide it in, as well as changing the page title, setting history states, etc., but this is the only code that touches the navigation menu, and there's no code that touches any stylesheets.
I'm open to any suggestions that fix the problem and/or improve the code design.

At first load nav is got from the server w/o php. I bet you wrote this html manually with intendation and so on.
After any click js recreates nav, but now w/o empty text nodes. Just <a>link1</a><a>link2</a>.
Add spaces or remove them from source html.

Related

Hyperlinks don't work with ajax / jquery?

So I'm constructing a induction-type webpage, I'm using a template which someone has already previously built in order to see how it fits my needs
Essentially, it includes a dynamic page switcher that uses previous and next buttons to swap out the body content without having to load another entire page.
EXAMPLE: https://css-tricks.com/examples/DynamicPage/
Upon clicking a hyperlink inside the main content, the body will show the correct content from the external pages. However, if I click either of the navigation links up top ("Home >> Inductions >>") the link is not opened as a new page, but instead I think ajax attempts to load that page inside the ajax-body section.
Specifically in the codepen, this is the navbar I'm mentioning which I do NOT want ajax to work on. I've tried multiple fixes but finally throwing my hands in the air.
<nav id="location">Home >> Inductions >> Vehicle 1</nav>
What I am aiming to build is attempt something like this: https://css-tricks.com/examples/DynamicPage/
This is the creator showing how its made, if I am unable to describe it as well as I should: https://css-tricks.com/dynamic-page-replacing-content/
I made a codepen the best I could, without being able to upload the other 2 pages which ajax will load the bodies from - https://codepen.io/dylan-mclean-the-vuer/pen/XWbONyP
Just imagine that clicking the 'prev' or 'next' will load a body inside the contained from external HTML docs. I couldn't figure out how to use multiple HTML files. I still need to make a proper prev/next in JS somehow still, just will take some time! Currently, prev just links to one HTML doc and next links to another.
Keep in mind I'm still at the diploma-grad coding level, so I'm sorry if I'm missing an obvious solution, or if its too messy to understand!

Choosing second page in domain with same path for local overrides

I wish to use Chrome devtools' "local overrides" for a test project. I wish to only change a single character on this page, and save it to my computer. On the webpage I have chosen, there is a page I wish to change. This page is only accessible via clicking a button on the previous page. Both the previous page and the page I wish to change have the exact same URL, like so:
https://stackoverflow.com/questions/ask?guided=false (page 1 with button)
https://stackoverflow.com/questions/ask?guided=false (page 2 reached from page 1)
The pages hold some similar elements that do not change, but a large portion of the page switches from one table to another.
All elements in the table are text with hyperlinks, and in regular inspect element it is trivial to find and replace the character on the second page, but within local overrides' 'Network,' and 'Page' tabs, II can only ever find reference and elements of the first page. Is what I am attempting even possible? Please excuse any ignorance on my part, I am simply trying to better understand local overrides, and how it would work here.

Reacting differently to links leading to the same page with vanilla JS

I have two html pages, linking to each other with tags. However, the behavior of the opened page needs to be different, based on which link is clicked to get there.
Example: One of the links is in a drop down header menu, and the new window should start with this menu open and then retract it.
The other link is in a blurb on the front page, and the opened page should therefore not start with the header dropdown opened and then retract it.
Is there a way to modify behaviour of the opened page, based on which link is used to get there?
Cheers.
Pass data to another page as href value. Grab this data using PHP and change the behaviour of new page depending upon different values of this data.
Some reference : Passing values to another php page using anchor tag

Livecycle remove first page

I have a LiveCycle form in Designer that has a flowable menu page with checkboxes. When a checkbox is checked, certain pages are 'shown' in the document. The pages are subforms containing an image.
This functionality works fine. What I want to do is add a button to the front page that will remove the front page, open a 'saveas' window and then close. I can get the saveas and the close function to work but the front page gets cleared and is left blank in the document. If there is nothing on the page then surely it should realise it is not required as per the workflow?
Any workarounds would be greatly appreciated, this has been doing my head in for weeks! I know I can't delete the page using the acrobat model as there aren't the correct permissions. I'm hoping a bit of javascript on the button will do the trick.
At the moment I have:
this.resolveNode ("indexSub").presence = "hidden"; //indexSub is the subform
app.execMenuItem("SaveAs");
app.execMenuItem("Close");
I will look at forcing a filename at save another time!
Thanks
It is quite strange behaviour. I've checked that you can set presence either to invisible or inactive and it works fine then.
this.resolveNode ("indexSub").presence = "invisible"; // or "inactive"
Differences between invisible and inactive you can fnd here: http://blogs.adobe.com/formfeed/2009/03/xfa_30_presenceinactive.html
Actually "inactive" did play a part in the solution, not entirely sure if it was intentional!
The main change was to alter the first page from flowable to positioned. When the button was pressed, the page cleared, the SaveAs dialogue opened and then the document closed. When the saved document was reopened the menu page had disappeared as required. I'll add a comment to this if anything changes. Thanks all.

Toggle menu issue

I've got a toggle menu, please see http://jsfiddle.net/Wp2em/41/ for code and functions.
On the real site which is using the same code, everytime when you click on h3 (Category 1, 2 & 3 which is an a tag at the moment), it toggles its submenu down a bit, then the page changes to a new h3 linking page, and the submenu collapses together on the new page.
I'm just wondering is there any way I can tell the submenu to be open when its parent page/the new h3 linking page is opened? Please see this bank site which has the side bar effect I'd like my toggle menu to be.
Thank you in advance!
Here is my fiddle
all you will need to do is put the class "currentPage" on the li that you are currently on and the menu should be open after the page loads. I also moved some of your css around so it should move a little smoother now.
** Updated fiddle code. It will now look at your current URL and set the link that matches with it to the currentPage. Also I added that if another menu is open it will close itself if you click on another parent menu
** Updated fiddle code. Ok now if you click on the arrow the menu will expand and not go to the link(like the bank site). Also I changed it where you will have to put the anchor tag in all parent H3s.
This is not too simple. I've had a very similar problem, although I was posting the page back to the same url so I used a hidden field to store a list of the id's of the H3's which were open.
You I think will have to use a cookie to do this as you're navigating straight to the new page. The idea is you create a cookie and set a value on it every time you open an H3 and remove it every time you close it. You can use this plugin to do this. Then when you open the other page, the script reads the H3's which should be open out of the cookie and opens them.
Another route would be to use Ajax to post the open/closed H3 information back to the server which would store it in session data and use it to build the HTML of the new page so the right H3's were open.
If the page loads and the submenu (ul.second_level) is generated (i.e. from php), parse an active css class on the submenu that must be visible.
ul.active {
display: block
}
ul.second_level {
display: none
}
This is in addition to your click function. Do not trigger the click event since it starts the animation (which I presume you don't want).
Update:
It is quite basic stuff, but I do not know how the HTML code for your menu is created. If you are using php and a database (for example) to create the menu, check every submenu item with the page you are on. If the page is one of the pages in the submenu, set the class 'active' on that submenu. The CSS does the rest (displaying this submenu and hide other submenus).
If you have a static page, use javascript to check on which page you are with window.location.href for example. The rest is the same.

Categories

Resources