Over the past month I've been working on a new website which is based on a WordPress theme. The site is a pseudo one-page design, where the primary page serves as the main page for information. However, it also has a gallery where you can enter several individual portfolio projects - which effectively takes you to another page (and therefore the use of "pseudo"). So that's the design and layout of the site...
On the main page of the site I added anchor links to the various sections for ease of use, which will scroll/take the user to the desired section of choice, by simply clicking on the navigation menu. The links all work fine, but a problem arises when you've entered and returned from a portfolio project.
The problem:
After having clicked on an anchor link, a hashtag is then added to the URL "www.example.com/#anchor". If the user enters a different page and then returns the hashtag/anchor is then reactivated and scrolls to the linked section. This is a real pain and anything but user-friendly, since it is taking the user away from where it was.
I've been trying as many Javascript/JQuery codes I can find, many from this very site, but none has managed to solve the problem... I need to find a way to effectively remove the hashtag after use so the URL is left with only "www.example.com" again.
EDIT: Forgot to add that I also need to be able to click on the navigation menu whilst in a portfolio project and having the menu call to open the main page and take the user to the section of choice.
Does anyone have a solution? I am all out of ideas here.
Please also tell me where to add the piece of code if you are so kind to help.
Thank you!
Related
I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D
I am trying to implement "Anchor Jumping" functionality using JavaScript and Angular 2 in my application, Means user can jump across the section within a page.
As per the client requirement, User can jump(Navigate) the section using of pressing Ctrl+Shift+Left/Right Arrow key.
Here, I add one snap to clear out the question as below.
As an example, Suppose first time focus on Menu and user press the Ctrl+Shift+Right Arrow at that time focus should be go to next element item(i.e. Breadcrumb section or any section).
I am very confuse about, How to manage the dynamic loading content? (How can I count this dynamic content in my section?)
Please suggest any idea to achieve this functionality.
What you need is a focus manager. I wouldn't bother writing one from scratch, Angular Focus Manager is one example of how to solve this problem. It also incorporates Mousetrap.js, which adds shortcut directives.
Your dynamic content can always be wrapped in something (even a div) that has its focus managed.
I hope this helps!
I decided to learn AngularJS, but I got stuck on my first project :/
I want to make menu like in first example here: http://tutorialzine.com/2013/08/learn-angularjs-5-examples/ So there are a few options: "home", "projects" etc. and if I click on one I get other part of site without reloading whole page.
What I want to accomplish:
dynamic data loading, when I click on link, refreshes only one part of page not all. I want to make page like this (click on any link - the menu bar sands still and isn't reloaded)
all parts of site are in separate files (I don't want to keep all page data in one html file, I want to break it into pieces)
adress of page (in browsers adress bar) is changing when I click on link
I know I could use AJAX or something like this, but the problem is: I want to make Google-friendly site and - as in know - Google have some problems with AJAX based sites.
Can you tell me what way should I choose and if angularJS actually qualify to this job?
I am using this Social Sharing tool called "Sharethis".
I gives you some header J.S. links to add to your HTML header.
Then, you'll need to add some SPAN in your code to add the social buttons, like this:
<span class='st_fblike_hcount' displayText='Facebook Like'></span>
Then, on load, you'll see your buttons to click on and get some social activity feedback.
Look at my page, if you have no idea how it looks like: http://www.seoroger.com/seo_quotes_archive.php
Problem is, I make dynamic pages like: /seo_quotes_archive.php?page=2, page=3, etc.
And this widget considers each of these pages a separate one (which is true somehow), and keeps each page's statistics separately.
I think the right thing to do for this instance, is to have one account for all of these pages and if the user clicks on facebook button on /seo_quotes_archive.php?page=5, for example, it increments the general facebook count.
If you agree, and you know how this is feasible, please help!
Thanks in advance!
PS. This case is the opposite of Multiple Sharethis buttons per page. In Fact, it's looking for a way to have one Sharethis statistics for Multiple pages.
You can add a "st_url" Parameter to specify the shared url. Insert the current url without the page-parameter to share the same url across multiple pages.
<span class='st_fblike_hcount' st_url='http://www.example.com/seo_quotes_archive.php' displayText='Facebook Like'></span>
Source: http://support.sharethis.com/customer/portal/articles/475079-share-properties-and-sharing-custom-information#sthash.EoamLhNZ.dpbs
I want to show my first-time users different functions of my web-app. To do this, I want to make an in-page tutorial that will guide the users through different parts of the page.
I would like to use tooltip modals with instructional content. When the modal is showing, the page element in question will be exposed while the rest of the page is darkened. When the user presses "next" on the instructional modal, another set of instructions will show up and another part of the page will be exposed and the rest of the page will still be dimmed.
What's the best approach to take for this? Please advise. thanks!
jQuery Tools expose should take care of that nicely.