One page website and linking - html

Ok guys, what I can't seem to grasp is how, on a one page website, you link to certain pages/divs while using the scrollto function.
if you look at Ultranoir.com
You can see the site is built with the one page format but if you watch the url field, it navigates to subfolders etc, but is still loading all content dynamically. How do they achieve this effect while still keeping it so clean and ordered? on my current site it all stays at www.url.com/index.html even when I navigate pages. any help? thanks!

They are using hash tags to load different parts of their pages dynamically. if u add i.e. index.html#!/blog or index.html#!/about
you can parse the url client-side using javascript and load the correct content through ajax based on the url.
Check out this page to see an example implementation of this functionality using php and JQuery: http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

They do it by abusing the fragment identifier. A modern approach would make use of pushState

Related

How can a website have the same source code for every page?

How is it possible for a web application/website to have the same identical source code behind every page on the site with no change at all. I was looking at the crypto - fiat currency exchange website: (Remitano.com) and for each page on the site the code is the same. How could this be possible?
The site is most likely a single page application (SPA). This means that it dynamically adds and removes elements with JavaScript. This is why sites made with React, Vue, and Angular don't work without JavaScript enabled.
For example, if you look at the code of a Vue app, you'll see something like <noscript><strong>We're sorry but myvueapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>. The content inside noscript only displays if the user has JS disabled in their browser.

Change icon based on posts from another page

Apologies if this has been asked before. I searched and couldn't find anything.
I have a basic landing page website that has an icon that links to "Hot Alerts", ie notifications of system outages. What I'm wondering is if there's a way to either change the icon or add a notification bubble (similar to Facebook notifications) if content on a Sharepoint blog has been updated in the past "X" hours.
Here's the icon I'm referring to:
Hot Alerts Icon
I've found examples of how to style the icon with CSS, but those all require manually entering the number of new notifications.
What I need is a way for the icon to "check" the sharepoint page for its most recent post when the landing page is loaded.
Most of my colleagues use Internet Explorer, but Chrome is creeping into the workflow.
What you need to use it the Javascript Object Model (JSOM). You will be able to read lists (for new posts) upon page loading and then showing or hiding the icon. A lot of example code to read lists can be found on SO.
If you want to use a 'bubble', take a look at sp.ui.notify (https://msdn.microsoft.com/en-us/library/office/ee550701%28v=office.14%29.aspx) methods to show an overlay notification popup on the page.
It's very unlikely this can be done with pure CSS. Any of the following languages will provide suitable solutions: JQuery, JS, PHP.
In PHP, you could use $_GET to place the variable in the URL. So one page would use $_GET to post the variable to the URL and the PHP file loading the page would use it to retrieve the variable from the URL.

Obtaining the URL for a Particular Page in DotNetNuke 7

I have created a page in DNN 7 and added the standard feedback module available at Codeplex to it. Now I want to link to this page using a hyperlink in the middle of another page (not from a menu).
I am able to see the URL for the feedback page via the admin pages and it seems to be consistent. So the obvious way would be to use the HTML module and simply hardcode the URL. But something feels wrong about that. I thought of creating a simple module, encapsulate the hyperlink and surrounding text in a control and use NavigateURL to obtain the URL for the feedback page. Unfortunately, I have not been able to figure out how to do that. I have seen a lot of information about getting the URL for other controls within the same module and even using ModuleID but nothing that would help me implement the code for getting the URL for a particular page at my level of experience.
Sorry about the long intro but I was wondering if it is good practice to hardcode the URL and if not how to programmatically obtain the URL for the feedback page.
TIA
The first argument to NavigateURL is TabId (pages are called tabs in the DNN API). To get the ID of the Feedback tab/page, you'll want to call a method off of the DotNetNuke.Entities.Tabs.TabController class; I'd suggest the static method TabController.GetTabByTabPath(portalId, tabPath, cultureCode), so something like this:
Globals.NavigateURL(TabController.GetTabByTabPath(this.PortalId, "//Feedback", string.Empty))
You're still hard-coding the path to the page here; you could have a setting, which would let you pick the page, but that seems like a bit of overkill for a simple link. The main benefit that you would get by hard-coding the path, but still using NavigateURL is that any changes you make to how URLs are generated (e.g. upgrading to the Advanced URL Provider that comes in DNN 7.1) will happen automatically.
Most folks don't worry much about programatically generating links in HTML content.

jQuery mobile single page template loading content via ajax

I'm creating mobile app with phonegap, google maps and jquery mobile. I would like to have more then one single html templates files (navigation for pages) and load just the content of the page via ajax to javascript overlay.
Also i want to keep the history and hashes to be able to go back to previous page etc. I tried using $.mobile.loadPage and changePage but this is changing the whole pages and i would like to change just the content.
Is there any solution?
You will find this framework the exact one you are looking for.

refreshing a page in rails without using ajax

I have been trying to figure out how I can render a page in rails without refreshing the application.html.erb. I only want to refresh a the part that goes in the <=% yeald %> part and no other.
I did this using ajax but I am using latex code on my pages(mathjax) that will not compile unless the page is refreshed, so ajax does not work in my case.
I have searched for tutorials but have not found a clear way to do this.
So is this possible, render a page as partial without using ajax?
Thanks.
If you want to reload part of a web page you only have two options - use Javascript (AJAX), or use an iframe.
If you use Javascript to update parts of the page you need to tell MathJax to reparse the page after you have changed it.
To do that see this related question here:
How to recall or restart MathJax?