Reference to part of the site using existing JavaScript animation - javascript

I am trying to design a website. I decided to work with this template from templatemo.
I am currently trying to add a reference to a specific part of the website (e.g. Contact) in the "normal text area". I tried to just add a href in the text, like this:
Contact me via the <a href="#contact_form" >Contact Form</a>
This does not work properly. If I click on the reference, the whole layout is somehow messed up. I assume this is because the click on the link does not trigger the javascript function for the "changing the slide" properly.
My question is now:
How can I trigger the javascript functions, for "changing the slide" to a specific part of the page in regular text areas?
This animation is already implemented and works properly (e.g. it is triggered when clicking on the buttons in the navigation bar). However, I have no clue how to use the same animation for jumping to a part of the page outside of the navigation bar.
I hope you understand my problem.
Thank you in advance for your support!

Ideally, you would have to modify the page contents in the respective location in the HTML file. The way this file is constructed is that you have a ul list with li elements that indicate each page, and each li element is given a numerical value that represents its position in the list (e.g. 1, 2, 3, ...). Make sure to edit and add any new pages in this part of the markup. If you want to adjust or trigger any page transitions, edit the data-no value in the <a> tag in #tmNavbar to the position of the page in the list.
If you want to trigger the transition from elsewhere in the website, I would recommend just clicking on the respective nav-item using Javascript. For example,
$('.nav-item').get(i).click() /* i is the data-no value` */

Related

One Page Scroll Dots Navigation in Javascript and jQuery based url with smooth transition

So far I managed to create a One Page Scroll Dots Navigation that does the following:
Adds the "current" class on the link you click and takes you to that link.
This is what happens in html when you click the link Team, it adds the class="current".
<li class="current">Team</li>
I would need help to make the transition smoothly when clicking a specific link instead of taking me directly there, like it's happening.
Also I would need to update the class="current" based on the section id I am currently at when scrolling.
Here is my current code: https://jsfiddle.net/tqhykbbn/10/
Looks like Javascript is not working here but it should as on my local computer is working and I uploaded jQuery in jsfiddle.
The reason your links to page anchors aren't working is because you've put a hash symbol when assigning an id, which is incorrect syntax. This is correct <div id="firstproject-about"> without the #.
For a smooth transition there's a few solutions. Check out, https://css-tricks.com/snippets/jquery/smooth-scrolling/

Using anchors in Wordpress menu creates selection box around content

Working with WordPress, I have created a one page site that uses anchors in a custom menu to jump to specific parts of the page.
It jumps to the section of the page that I have specified, as intended. However, it is creating a very visible, blue selection box around the content that it is jumping to. I have not included code in the CSS file or any project files that should be adding a selection box. So my assumption is that it is being caused by Wordpress?
Is there a way to disable a selection box around the content that is being jumped to?
What is happening is you are getting the outline property add around your selection this happens on chrome alot when you click buttons or focus on something. Try adding a class similar to this
SELECTION:focus {outline:0;}
to the object that is being highlighted or anchortag without seeing the code and what it is doing its hard to pinpoint the exact class

Is it possible to hide link address on hover?

I have set up a chart with a lot of links and it really bugs me when it shows where the link goes in the bottom left hand side of the browser whenever you hover on a link, like so:
Is it possible to remove this? any method will do as long as I can hide/remove it (HTML, CSS, JS etc..)
The status bar highlighting happens only when you use an <a> element with a set href.
If you use pure JavaScript to open your link, and don't assign a href attribute, nothing will turn up in the status bar.
I don't know how much control you have over the chart html, but if it renders <a> tags there's not much you can do.
You could try running javascript after the chart is renderred to attach onclick event handlers manually to all <a> tags and set href = '#'.
I had a similar problem that led me to this thread. I figured I'd post my solution here rather than start a new thread about it.
I have a WordPress site with complex menus, and those menus had subheadings which the theme rendered as <a> links with empty href values. The site manager didn't want the bottom corner to display as a link if those were hovered over, since they didn't work has a link anyway.
<a href="#" class=" no_link" style="cursor: default;" onclick="Javascript: return false;">
I tried removing the "#" under href but it still showed the site's root url on hover.
Since the anchor tag's class list already included no_link as a class, I simply added the following jQuery to the global JavaScript file:
$("a.no_link").removeAttr("href");
Note that the intention was to simply remove a link's address on hover if it wasn't supposed to be a functional link anyway.
Refer this link here :
http://www.experts-exchange.com/Web_Development/Miscellaneous/Q_21278295.html
However , if the chart is not under your control, then this may not nbe the way
As suggested in the link :
Pink Floyd
You can also use jQuery to bind the mouseover event on these anchor links without editing individual <a>

Place pointer on div or other page element in javascript

I'd like to help the site visitor navigate a page on my site. For this I'd like to have a javascript auto navigation that will place the pointer on different page elements. Is there a way in javascript to place the pointer on the desired page elements: div, button, span...?
Similar question asked here : Move Mouse Cursor Javascript
Basically your options are using the method in the linked post, or using libraries like http://amberjack2.org/ to visually guide your users around the page / site.
you can not move the pointer using javascript. you can only set the focus to an element of your choice.

Highlighting active panel in CSS without JavaScript

I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.
It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.
What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.

Categories