I can't offset the jump point for anchor tags in my React app. No matter how much I adjust paddings, margins, and top; I get the same result. The last thing I tried is react-router-hash-link-offset and it behaves the exact same way with the exception of the scroll.
<li className="app-link"><Link to="#section1" smooth scrollOffset="100">Summary</Link></li>
<div className="app-section" id="section1">
<h3>Summary</h3>
</div>
I'm opened to any suggestions at this point.
Use this library to implement this feature.
react-router-hash-link
Live demo
Related
I'm developing a website where a Search box can return a lot of results in a dropdown list and each result has a clickable internal link to a webpage within the same site.
I initially followed Gatsby's advice and implemented these as <Link> elements, . However, this seems to be causing an issue when scrolling in the search results shortly after performing a new search - the scrollbar jumps back to the top of its own accord 3 or 4 times before then settling down afterwards. This is repeatable for the same search only after clearing the browser cache, which makes me suspect it is somehow related to Gatsby's pre-loading of pages.
If the links are changed to be HTML <a> tags instead, the problem goes away... but am concerned that this is going against Gatsby's advice and there may be other issues I don't know about yet (haven't seen anything so far...)
Could anyone advise whether it is advisable to use anchor tags for internal links in these circumstances?
Of course, you can always use the standard <a> tag for internal routing, however, you will be outside of React's scope (#reach/router's scope). In your case, since you are not creating internal navigation per se (meaning navigation through internal pages) I think that your workaround is the lightest and most native approach, without adding extra dependencies which will increase the bundle size, with a functionality that can be handled natively.
As you said, <Link> component is compiled into an <a> tag with some React's vitamins in the end so, to me, it's the best approach.
Gatsby <Link> Issue When Using Tailwind Elements offCanvas
I had a similar issue using Gatsby <Link> inside an offCanvas component causing the page scroll to completly freezeon all devices untill navigating away. Guess the element using an event that conflicts with how the triggers.
Replacing all <Link> tags that go to internal pages inside the component solve the problem. Refering to 'Ferren' answer, eventually tags with to attributes compiled into tags with href.
<div className={'offcanvas'} id={id} aria-labelledby={`#${id}Label`} tabIndex={-1}>
<div className={'offcanvas-header'}>
<a href={'/about'} className={'offcanvas-title'} id={'#offfcanvasLabel'}>
About Us
</a>
<button type={'button'} data-bs-dismiss={'offcanvas'} aria-label={'Close'} tabIndex={-1}></button>
</div>
...
I've been learning ReactJS for the past couple of days and have been trying to build a website using semantic-ui-react in ReactJS. I understand there are components that one can use now but I am stuck on what to do in a scenario such as the creation of a footer... typically, in my raw HTML, I would have the semantic.min.css file included and at the bottom:
<div class="ui inverted pink vertical footer segment">
<div class="ui center aligned container">
<h4 class="ui inverted header">© Copyright 2017 | All rights reserved | Blahhh</h4>
<i class="facebook square icon big"></i>
<i class="twitter square icon big"></i>
<i class="linkedin square icon big"></i>
</div>
</div>
Now I want to translate this into semantic-ui-react. Footer is a class not a component in react by default so there's no component for it... Which I assume means I have to make my own component and basically write the code above. My problem now is that I don't know how to make it render as if I was using regular old semantic.min.css. I read somewhere to download the css file and include it, but one, I don't know where to (MyCustomFooterComponent or index.html), and in doing that, am I not increasing by load times on my website. Would this mean that everywhere there's a footer, just for one small section of custom code, the entire CSS file is going to be loaded?
Also, after building, would there be a double-import scenario from my addition of the Semantic CSS and semantic-ui-react's CSS?
Sorry for the long question but I'm new to this and I like to find out what I can before making a terrible mistake.
If you are using react-semantic-ui then you already include 'the old semantic-ui.min.css' already. See here.
Hence, create a component and put those code in render(), change 'class' to 'className' and then use it.
I am building a mobile website that displays a grid-list of products.
In order to implement the grid list I am making use of md-grid-list directive of angular material.
This is the part of my code that implements the above functionality:
<div id="products-row" infinite-scroll="fetchNextPage(nextCategory,1)" infinite-scroll-disabled="busy">
<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="5px" md-row-height="2:1">
<md-grid-tile ng-repeat="p in productsOfCurrentCat">
<product data="p" id="product-item"></product>
</md-grid-tile>
<div ng-show="busy">Loading more products....</div>
</md-grid-list>
</div>
This works quite well on larger screen size. When I view the webpage on a smaller screen size using the toggle device mode of Google Chrome, I get the following error:
md-grid-list: md-cols attribute was not found, or contained a non-numeric value
And, it infinitely sends requests to the node server.
I tried to google it out, but not enough help is available. Any help on this forum would be appreciated.
Well, the error tells you that you are missing md-cols for the breakpoint that fits your chosen device.
If you look at the layout breakpoint introduction here and the grid-list demo here, you will find out, that you are missing the md-cols-xs="1" attribute. sm is not the smallest breakpoint.
I want to create generic feature that allows me to change background image of any section. After going through options provided I found these two approaches. Want to choose best approach to change image because on single page I want multiple times change background facility. It will be available to four to five sections.
Approach
Using Directive check this stack overflow link.
Also there is another approach of angular scope variables that we can updates at runtime.
<div ng-style="{'background-image': 'url(/images/' + backgroundImageUrl + ')'}"></div>
Required Usage ( With respect of Directive )
<body>
<section backgroundImage url="{{backgroundImageUrl1}}">
...
</section>
<section backgroundImage url="{{backgroundImageUrl2}}">
...
</section>
<section backgroundImage url="{{backgroundImageUrl3}}">
...
</section>
<section backgroundImage url="{{backgroundImageUrl4}}">
...
</section>
</body>
As shown above I am going to update background-image attribute for each section. If these property is set inside CSS file, it will reduce time to load images i.e. If we directly add inline css styling in HTML, all images will loaded on DOM load. It will make extra request to server to get images and load them in DOM. I wanted to follow strategy that will reduce loading time in my SPA(Single Page Application).
I think going with <div ng-style="{'background-image': 'url(/images/' + backgroundImageUrl + ')'}"></div> should be more effective.
You dont introduce another layer of complexity, directives create scopes, which are watched and digested, also directives must be compiled in the begining.
Using symple ng-style together with some specific url from controllers property shoudl only do request for that particular active image. Because of that i think it should be the optimal solution.
My page is divided into sections : #page-1 and #page-2
See Plnkr: http://plnkr.co/edit/RZJLmsWDfs63dC0QuDJi
<body>
<section id="page-1">
This is page 1. It takes the whole height of the browser. User has to scroll down to see page-2.
</section>
<section id="page-2">
<span class="animated bounce">This is page 2 </span>
</section>
</body>
Animation classes are being applied to different elements in #page-2.
However by the time the user scrolls down to these elements, the animation has already finished. Hence they just look like static objects.
Is there anyway I can detect when #page-2 is currently being viewed and then call a function to addClass('animated bounce') to certain elements ?
I would like to achieve this in angularjs if possible
I have found a angularjs directive that is probably helpfull for you in this case. Inview tries to solve this exact problem by reporting to you if a dom element is visible on the screen. Unfortunately I have been unable to test my solution because I couldn't find a minified js file of Inview but I assembled some code that should work:
<section id="page-2" in-view="{$inview ? isFocused=true;}">
<div ng-class="{'animated bounce': isFocused}">This is page 2 </div>
</section>
The $inview is supposed to be true whenever the element is in visible in the browser. This leads to the scope variable isFocused being set to true and therefor the animation class is added to your div.
This should work as you have intended in your question, if it does not work for some reason please let me know so I can improve my answer.