Guideline to create a dynamic sidebar nav like as Google Cloud Docs - javascript

Can you please give me a guildline to create a dynamic sidebar nav for the documents page like as Google Cloud Docs. I see many document pages do same things but I don't know how to do that.
I can make a static nav bar which link to hash or id of a items if all of them are in one html.
My goal is a fixed sidebar nav with get the nav items from a simple hierarchical tree list (extenal file) with each tittle and local html file href. And then when I click on the nav item, it will be get the content from target html specific content class (maybe same as devsite-content element on the Google site).
content part which will be get by using JS script
I don't want to code the content in same with main html (will be call from external html) because there are a lot of doc page. I will be very long page if in same one html.
Thank you so much!
P/S: Sorry about my poor English.

Related

Add HTML page to Wordpress keeping header and footer

Good morning, I'd like to add a HTML page containing a JS animation to my wordpress website but I also want to display wordpress header and footer in order to better "blend" it with the rest of the website, is it possible?
visually I'd like it to be like this:
WORDPRESS HEADER
HTML PAGE with JS ANIMATION
WORDPRESS FOOTER
I've tried simply adding the HTML code in a wordpress page content but I think the CSS of the HTML page is conflicting with the CSS of wordpress and it doesn't look good at all
Maybe I can simply add only the JS animation to a wordpress page? I'm not sure if it's possibile and how
any help would be appreciated
Thanks
Add a page with just page title. it will create a page with "page" prefix inside wp-content/themes/themename/page-test
you can write your own code there or you can add short code to a page. it will display header and footer:
https://www.smashingmagazine.com/2012/05/wordpress-shortcodes-complete-guide/

Linking paginated articles to sidebar

My google fu is currently letting me down so I thought I'd ask here for some help..
I have a page that has a single article on it (url.com/article/article-headline). When you scroll down the page using jQuery it loads the next article and changes the url (url.com/article/next-article-headline).
My issue is, I have a left hand sidebar which has a list of all the articles. What I'd like to happen is to have the current article highlighted. So when you scroll down the page and the next article loads the next sidebar article title is highlighted etc etc.
If you need an example of what I mean you can see it in action on time.com
http://time.com/4010146/smartphones-dinner/ (scroll down the page and watch the URL and sidebar)
I'm really struggling to find what it's called in order to do a proper search. I guess it's something similar to scrollspy but I'm not sure. Are there any plugins that exist for this?
You need to add data-attributes to your sidebar and the article section at the main content. With the help of which you could determine the article title.
Using jQuery then add a class named "active" which would determine the current article is active and style the "active" class later just for the sidebar.
Example: .sidebar-article.active { color: #f00; }
IF you need a solution you need to also provide appropriate HTML structure and jQuery code with the help of fiddle. So that rest of the code snippet we could provide and also not harm your current code base.

How to create an dynamic (auto updating) link list for static html site

I'm looking to make a small static html site with a top navigation menu for the dozen of static html pages that will be the core of the site, something very basic and easy to do...but I would like to add a static blog/news section that will be updated on a daily/weekly basis with several categories within the blog/news section like:
-http://example.com/blog/category1/page1.html
-http://example.com/blog/category2/page2.html
etc..
the blog posts would be simple static html pages uploaded to the server via ftp/sftp.
What I need is a dynamic (auto updating) link list of the blog section of the site to be placed on all the blog posts/pages similar to a Wordpress "latest posts" list and separated from the top navigation menu like:
Recent posts:
post1
post2
etc...
and
Categories:
category1
category2.
I have done this before with a small javascript snippet but it was some time ago and I can't find the script anymore :(
The script fetches all the pages and folders within the blog folder makes links of these pages and than displays them on either side of a blog page with different possible configurations like last ten pages uploaded, one list of links per category...there's jquery script out there, it's quiet old (2008) but shows somthing close to what I'm looking for: jQuery File Tree
Thanks in advance for your help and if anyone knows what script I referred to that would be great!

How can I create a Table of Contents automatically in a Sharepoint 2007 wiki page?

As our users get more familiar with the wiki functionality, and like it, we see that pages are getting longer and more difficult to navigate.
We would like to be able to generate table of contents on a per-wiki-page basis to allow easier navigation, i.e. the users create content whose hierarchy is represented by h2/h3/h4 elements and then the TOC is automatically generated at the top of the wiki page with each entry in the TOC being a link to the corresponding h2/h3/h4 element in the page.
We do not have access to Sharepoint Designer so any funny stuff will have to involve css/javascript inserted using a Content Editor Web Part.
Best regards,
Colm O'Gairbhith
In case this may be useful to anyone else, I ended up using the jquery tableofcontents plugin.
The tutorial Automatically Generate Table of Contents with jQuery explains how to use this.

Google "Sitelinks" for a website with almost only dynamic content?

I have a classifieds website, and the index.html is just going to be a simle form, which uses javascript alot to populate drop lists etc...
I have a menu also, put into a div container, but is this enough?
I mean, I have no content in index.html (almost), but a search form, which submits to a search results page, where all the content is.
So I am worried google might not find suitable sitelinks for my site?
Anybody know if I need to add something to the links in the index.html, which google might use for sitelinks? title tags etc...?
Thanks
Instead of changing your site around you can just create a good sitemap.xml file. That is of course if you're using GET for transferring data to your processing page. I would create a dynamic sitemap.xml page that is based on the form data that your processing page can read.
http://sitemaps.org/
http://www.smart-it-consulting.com/article.htm?node=133&page=37

Categories