Best approach to showing multiple html without reloading page - javascript

I have a "server" that serves up individual html pages for each associated item in the server. I've done a lot of looking around but I'm afraid I just don't know enough to ask the right question. How I'd like it to work is as follows:
Static Sidebar (boostrap simple-sidebar)
Ordered list of links to associated html docs
When the associated link is pressed to display that content in my main container field.
From what I've read some use iframe in the main html container and make the clicked link the active link.
Others use bootstrap modal, but modals no longer support remote content.
Any hints toward how to ask the right question would be great!

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!

Moving an HTML+javascript page to iFrame

I have an existing website composed of individual pages (each page is a different tool that requires some user input (ie forms), and each with it's own set of javascript functions to populate dropdown lists, etc on that page). Each of the tools is accessed from the main index.html.
Instead of each tool being its own "stand-alone" page that is invoked from index.html, I'd like each tool to be displayed in an iFrame instead on the main page. This way the main page remains static, while only updating the iframe with whatever tool the user selects. So say on the main index page, I have a 3 tools menu (collect logs, collect KPIs, collect status), along with an iFrame. If the user selects collect logs for example, the menu containing "collect logs" stays there, but the "collect logs" page is displayed in the iFrame.
My problem is that all the HTML content works fine, but none of the javascript code in the selected tool page works (ie none of the drop downs get populated since it's the javascript code in the page that does that by reading a file on the server).
Is there an easy way to port each tool page (html+javascript) to an iFrame without having to re-write tons of code (in my naivety I thought simply invoking the page inside an iFrame using target='' in the href would work)? Or is there a better method of accomplishing what I'm trying to do? Maybe iFrame isn't the solution.
Content in iframes remain autonomous from the wrapper app, so it makes sense that it's not working correctly. Other than building a listener for a click event associated with the div wrapped around the iframe, the iframe document isn't accessible if it points to a different origin. (See [same-origin policy]
(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))
To stay with simple html/css/js solution:
You can use a regular div to wrap each 'stand-alone' content and then just use whatever button/navigation target you have display that div and hide the previous by changing their css display style with the onClick event.
More invasive option:
You may want to consider using a more modular JS approach, like React JS, to build components vs pages and utilize React's structure to toggle components.
With react you can render each 'tool' when the user selects it . You would be able to utilize React component state as well to help in storing data and such for the life-cycle of the component.

how to show child ul under parent ul horizontally

i asked several times for my navigation here but didn't get my desire results so i thought one last time maybe someone help me to achieve like this!
as you can see in below code i have only 5 parent menus and each of them have at least 12 child or submenus. i want to show my 5 parent or main menus horizontally like as you can see above image where home video news world sport etc and display their related child menus right under of it also horizontally again you look at image and notice parent link news selected and their child links like politics investigations obits education etc shown below him horizontally. and also notice that parent link news and child link investigations both have active class at the same time and i also want this effect.
and if you please visit this link - the telegraph you can also see if you refresh the page both navigation's remain intact and also maintains their active state.
this is my attempt please check out this fiddle in this fiddle you notice that when page is refreshed child navigation disappears and also problem with active link state only one link remains active but as you now know i want parent link to remain active even when i am on any of his child links just like you seen on the telegraph site in above link.
notes
i used jquery ajax to load pages dynamically to a div and also used hash in my urls.
also used this jquery bbq html5 history api based jquery ajax plugin to load pages, browser history and browser back and forward buttons and everything working fine.
please feel free to use any jquery lib any hack or what ever you like but i need this badly. anyone who can help me to achieve this i really appreciate him with bottom of my heart and also mention him on credits section of my site. thanks
p.s: ask any time for any further details if needed.

Where does WordPress store custom post types?

I've downloaded a theme on WordPress, installed it and added a few pages etc. I'm wanting to add a bit of functionality to it so i've decided to add a sticky menu using jQuery. I've installed the relevant scripts and got the plugin working.
The theme I downloaded off themeforest allows end users to create a 'section', Which is basically a custom content type that can break parts of the page up. So on my homepage I've broken up parts of the page in to sections, but I want to add the sticky to a particular section, so when you scroll down to it, the section remains in view at all times.
To use the sticky plugin i either need to apply a class to the parent div or wrap the parent div in tags. So my question is, is there any way to actually edit the code of a custom content type? I know that WordPress works on a template basis, so every time you create a page, post etc. it's just stored in the database. But surely there must be a way to edit the code of a particular page.
I hope i've made sense. For anyone wanting to know what i'm on about heres the link -
www.gogoblondie.com
The website is still in development, but it's the black section with that i want to stick as the user scrolls.
Arran
Based on your markup structure and needs :
jQuery('nav').closest('.section').sticky({topSpacing:0});
Will work.

menus in html pages - separate navigation from content

When creating menus for html pages, there are a lot of libraries, frameworks and plugins (like mentioned here). However, having studied various options it seems to me that
the menu is a series of elements defined on one page which selectively are displayed/hidden
all content activated by menu items is contained on one and the same page - together with all menu definitions
This brings, in my opinion, two problems:
the (single) page tends towards "unmanageable" with growing size
a search on something contained on the "third page" will result in the "first page" to be opened, and for a user it may not be obvious that he/she has to click through the menu to find what he/she was looking for
So I am looking for something where menu and content is more separated, but still makes use of the styling features of a modern framework (jQuery(UI), dojo, whatever), maybe on the basis of a JSON definition that can be loaded into each separate page.
Making an answer as request. :)
The comments on your experience suggest that you ahve come across tab controls more than real navigation. Tab controls are designed to flip between content on the same page, hiding and showing content based on whcih tab is selected. This does have the drawbacks that you suggested of requiring all content to be on the same page (or to use ajax to load it).
Conversely a menu system will usually just be a way of formatting a bunch of links you give it, possibly with a hierarchical structure. Usually a menu system in the raw HTML will be an unordered list containing links and possibly other unordered lists. The exact format may vary depending on the menu system in use. The menu system will tell you to put classes on the top level or to run some javascript over a specific element.
In terms of generating this server side you are probably best off with either an include file or common server side code to generate the menus (to avoid having to maintain them individually in all the pages on your site).
Having said all that I have no specific reccomendations but I did come across http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/ whcih was the top google hit for "jquery navigation menus" and has plenty of options to look at. Additionally the one in the question you linked looks like it is a "proper" menu system.
Unless you have a huge menu option list, a tree structured ul won't be so heavy. You can have that menu on a different container, and the content in other, so it is not so unmanageable.
In the other hand, deploy the menu in a different HTTP call in order to get JSON data, and render it, could be more unmanageable than before. First, you need two HTTP calls, considering that the browser will issue only two HTTP calls to the same domain at the same time, to get the menu you are preventing the browser to get something else, or viceversa. You have to account the HTTP overhead, and that the menu query will be issued after the html and probably JS has been downloaded.
IMHO I think that the best performance is obtained keeping the html menu in the page code, and render it with CSS.
You can try to build it yourself. In the page's ready event, download a json menu data from the server with jQuery, build the html, apply the style you want and add it to the page.

Categories

Resources