I am developing a simple single-page website with React.
On top of the page I have a menu bar, with links to certain parts of the page:
<li>About us</li>
<li>Services</li>
<li>Team</li>
The parts of my page (not necessarily components) have the corresponding ID attribute, eg:
...
<div id="about" className="rn-about-area ptb--120 bg_color--5">
... <CONTENT>
</div>
When a link in the menu bar gets clicked, the page should jump to the corresponding part of the page. The problem: The links are working in Chrome and Firefox, but not in Safari.
What I tried so far based on similar StackOverflow questions (that are over ten years old):
Omitting the / before the #anchor:
<li>About us</li>
Defining the absolute URL path to each anchor:
<li>About us</li>
Implementing methods like scrollTo() or scrollIntoView()
Wrapping the anchor-elements in React components
Checking for redirects that may cause problems using https://www.redirect-checker.org/index.php
but nothing works.
Is there any other way I could try? If not, my only idea is to destructure the page into seperate pages, so I can link them without using anchors.
EDIT: There might be an issue with React and the way the website is set up, because I checked a similar page, created without React, and there the first mentioned approach works, also in Safari.
It was in fact a React problem:
Using this package it finally works now!
Related
I'm brushing up my html basics and I'm using a template to practice, here's my question with regards to reveal (uses jquery) menu:
<ul>
<li class="home-link">Home</li>
<li>Alpha</li>
<li>Beta</li>
</ul>
When the page is loaded and I click on the links nothing happens, the only one that works is home. In the example they use these type of links instead and they all work properly:
<ul>
<li class="home-link">Home</li>
<li>Alpha</li>
<li>Beta</li>
</ul>
They seem to be pointing to a folder instead? I've tried everything, relative, absolute, but nothing. Did they change the htaccess file? When I make a link outside of the menu div they work absolutely fine.
Any pointers, tips, hints? Thanks.
Edit: I applied the style to the other links as suggested but it didn't work. What's weird is that if I right-click and open the links they work.
Guessing it's to do with styling as I see you have a class on Home and home seems to be the only one that is working.
Try adding that same class on the other links and see if it works.
Also, if you're using position: absolute on one of the links and it remains unclickable, try adding a higher z-index to it [Not recommended as a permanent fix but rather to find the root of the problem].
CSS-Tricks has an excellent guide to understanding position properties.
Edit:
To clarify, add class="home-link" to the other li tags
I'm using scrollspy bootstrap effect. Here is an example http://jsbin.com/huhavejipepi/1/edit?html,css,js
When the user is navigating the site at the top of the page, the scrollspy effect should be disabled . However as you can see from that example, even when the home section isn't showed the link at the top of the bar seems active. Maybe is it a bug? Any workaround is available?
I think there are two or three tricks you can do to avoid the non desired behavior. One of them could be for e.g:
<ul class="nav navbar-nav">
<li>Intro</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
As you can see, you can add a hidden link to the first paragraph. Check here demo to see a working example.
Hope it's useful!
I am working on admin dashboard with html, css and javascripts. This is my first time working on it. I used bootstrap for the responsive layout and some bootstrap js (tabs, collaps). I also use chartjs for pie chart and line chart and sidr responsive menu. But the problem is with bootstrap tab and collaps function. They didn't work properly.When i click on the tab menu tabs are working but don't showing chart content in it. I spent lot of time to fix this. But i can't. I need your help.
Here is the link for the admin dashboard: http://demo.devkinz.com/admindashboard/
You are including the JavaScript, but aren't targeting the tab elements with it. From the docs, you also need to add in a bit of JavaScript to specifically target those tabs.
Alternatively, you should be able to add data-toggle="tab" to each of your dashboard_menu li elements.
In your code you have:
<ul class="list-inline pull-right" role="tablist">
<li class="active">Usage</li>
<li>Monthly</li>
</ul>
But you have no .tab-pane's with the id's: id="ussgemonth" & id="coletsmonth"
Not only do you have 2 missing .tab-pane with these ids -- since these are nested you have to follow the same structure as the parent.
I build a menu view component with rappidjs which has a list of entries in it. I also have some modules.
I want the module to register their menu entry. I thought building a Manager or a collection but this seems way to heave to me. Is there a simple way?
Implementation can be found here.
http://try.rappidjs.com/project/52b0d1e13bce060342000013
Checkout the rappidjs.com website, it also uses a menu combined with the ModuleLoader.
In https://github.com/rappid/rappidjs.com/blob/master/public/app/Index.xml the menu is build with
<nav>
<ui:ItemsView items="{pages}" tagName="ul" class="nav">
<js:Template name="item">
<li selected="{isPageSelected(item)}">
${item.label}
</li>
</js:Template>
</ui:ItemsView>
</nav>
See https://github.com/rappid/rappidjs.com/blob/master/public/app/IndexClass.js for the implementation of isPageSelected.
For a reusable solution, you could a menu component that gets the ModuleLoader
as attribute and dynamically get all registered modules from the moduleLoader.$modules array.
We haven't built such a component, because a menu can contain more items than the registered ones in the ModuleLoader.
I am using jquery tabify, http://unwrongest.com/projects/tabify/, to create a tab like feature for my menu.
Demo: http://jsfiddle.net/janjarfalk/6Y6Pa/1/
I am creating a menu like this:
<ul id="menu">
<li class="active">Home</li>
<li>Guestbook</li>
<li>Links</li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>
The tabs will be added automatically as anchor link to my url, reading whatever that i have on my url. I need to have a url (for links tab only) such as {domain name}/{controller}/{method}/{articleId}#contentLinks-tab, examples:
http://www.test.com/site/shipping/5/#contentLinks-tab
http://www.test.com/site/delivery/3/#contentLinks-tab
while the rest will only be http://www.test.com/site#home-tab, etc. As you could see from the demo, the "{id}-tab" is auto generated based on the id. However, the problem arises if i am already on http://www.test.com/links/shipping/5/#contentLinks-tab of the links page, and if I were to go to other tabs like guestbook or home, the /shipping/5/#contentHome-tab will follow.
Can please advise how can I remove the /shipping/5/ even when I am on links tab, and hovering the rest of the tab? Sorry I was not able to provide much coding as I have no idea about doing it. Hence, really appreciate someone can shine some lights. Many thanks.
This is a tough one to answer, as jsFiddle is obviously missing the /shipping/5 part of the URL; And if understand correctly we're basically trying to change the functionality of the plugin.
At any rate, it's a little hacky, but you could try changing the href attribute of the Home and Guestbook links using javascript. So first give the Home and Guestbook links IDs:
Home
Guestbook
Then use jQuery to replace the URLs after Tabify has initialized:
$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');
Which would equate to http://www.test.com/site#contentHome-tab, etc., effectively getting rid of the undesired part of the URL.
Or if that doesn't work (hard to tell when using such a plugin on jsFiddle), you could get even more hacky and instead add onclick listeners to the Home and Guestbook tabs:
$('#home').click(function() {
window.location.href = "/site#contentHome-tab";
});
I normally would never do something like this, but when you're working with plugins sometimes you gotta get a little hacky to achieve the desired effect =P
Hope this helps.