Unable to Scroll to Div using <a href="#"> [React,react-scrollspy] - javascript

I'm using this library https://github.com/makotot/react-scrollspy to get the scroll to div effect.However after following the documentation ,I don't seem to get it working.Code :
<RewardContainer>
<div className="pageWrapper">
<div className="rewardInfoWrapper">
<div className="tabsContainer">
<div>
<Scrollspy
items={[
"section-1",
"section-2",
"section-3"
]}
currentClassName="is-current"
>
<li>
<a
href="#section-1"
className="c-side-nav__link"
>
Streak
</a>
</li>
<li>
<a
href="#section-2"
className="c-side-nav__link"
>
Gems
</a>
</li>
<li>
<a
href="#section-3"
className="c-side-nav__link"
>
Xp Points
</a>
</li>
</Scrollspy>
</div>
</div>
<div className="columnContainer">
<div className="tabInfo">
<div>
<div id="section-1">
<p>
This is Section 1
</p>
</div>
<div id="section-2">
<p>
This is Section 2
</p>
</div>
<div id="section-3">
<p>
This is Section 3
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</RewardContainer>
The issue is ,my a href="#id" tag reloads the browser and treats id as a route instead of scrolling to that div's id.For instance,clicking on the third li element reloads the browser with http://localhost:7000/#section-3 in the url.

Related

Creating a new href attribute using getAttribute & innerText with Javascript

I've got a list of products and what i want to do is to make the price of the product clickable just like the product title linking to the same product URL.
I've created a for loop to try and do this, but the issue i have is each href link for each product is being created per product where i only need the one price with the corresponding href link. How do i correct this?
Note: I don't have access to change the original html which is why i'm trying to make these changes in javascript
var getAllLinks = document.querySelectorAll('.productTitle').forEach(function(el){
var createNewLinks = document.querySelectorAll('.productPrice').forEach(function (elem){
elem.insertAdjacentHTML("afterend", ""+ elem.innerText +"");
})
});
.container {padding-bottom: 20px;}
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 5,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="05395">
<div class="productContent">
<a class="productTitle" href="#product2">Product 2</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 145,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="263743">
<div class="productContent">
<a class="productTitle" href="#product3">Product 3</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 35,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="60493">
<div class="productContent">
<a class="productTitle" href="#product4">Product 4</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 125,90</span>
</div>
</div>
</div>
</article>
I'm not quite sure about your problem but I think maybe this is what you want.
Please let me know if I got it wrong :)
var getLink = document.querySelectorAll('.productTitle');
var newLink = document.querySelectorAll('.productPrice');
getLink.forEach((link, i) => {
newLink[i].insertAdjacentHTML("afterend", "" + newLink[i].innerText + "");
newLink[i].remove();
});
.container {padding-bottom: 20px;}
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 5,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="05395">
<div class="productContent">
<a class="productTitle" href="#product2">Product 2</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 145,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="263743">
<div class="productContent">
<a class="productTitle" href="#product3">Product 3</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 35,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="60493">
<div class="productContent">
<a class="productTitle" href="#product4">Product 4</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 125,90</span>
</div>
</div>
</div>
</article>
Why don't you just include the price within the a tag and forget about JavaScript all together?
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1
<span class="productPriceContainer">
<span class="productPrimary">
<span class="productPrice">€ 5,90</span>
</span>
</span>
</a>
</div>
</article>
You'd need to change the inner divs to spans to be semantic HTML, and potentially some CSS changes to get the styling just right, but this seems like a way better solution.

Using Javascript to change image to link

I would like to change an image on my website into a link using Javascript so that when users click the image they are redirected to a website. My html code and Javascript code are as follows. I tried mimicking what was mentioned in this thread but was unsuccessful (how to add a link to an image using jquery?).
The image I am trying to create a link for is http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg
Thank you for your help.
My Javascript code
jQuery('.profile-avatar.open-photo-swipe').wrap($('<a>',{
href: link2;
}));
My HTML code
<div class="profile-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div v-pre>
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
style="background-image: url('http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-300x300.jpg')"
data-width="1024"
data-height="576"
>
</a>
</div>
<div class="profile-name" v-pre>
<h1 class="case27-primary-text">Offer 2</h1>
<h2>blag</h2>
</div>
<div class="cover-details" v-pre>
<ul></ul>
</div>
<div class="profile-menu">
<ul role="tablist">
<li class="active">
<a href="#_tab_1" aria-controls="_tab_1" data-section-id="_tab_1"
role="tab" class="tab-reveal-switch toggle-tab-type-main">
Profile </a>
</li><li class="">
<a href="#_tab_2" aria-controls="_tab_2" data-section-id="_tab_2"
role="tab" class="tab-reveal-switch toggle-tab-type-comments">
Comments
<span class="items-counter">0</span>
</a>
</li> <div id="border-bottom"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
jQuery('.profile-avatar.open-photo-swipe')
This element is a link, not image:
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
So use
jQuery('.profile-avatar.open-photo-swipe').prop('href', link2)

jQuery get attibutes and values from all elements inside a class

I'm scraping a website where it has the following HTML structure
<div id="list" class="book-list">
<div id="stream_1" class="stream collapsed">
<h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3>
<div class="volume last">
<h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922893" class="new">
<span>
<a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a>
</span>
<i>Yesterday 08:27 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
<div id="stream_5" class="stream">
<h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3>
<div class="volume last">
<h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922873" class="new">
<span>
<a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a>
</span>
<i>Yesterday 08:10 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
</div>
I want to use jQuery to get the links from the divs to get something like this
{
"vol.1 ch.1" : "link/1",
"ch.2" : "link/2"
}
As all the items i want has the class ch sts i wanted to get them with the selector, and trying to use each() but didn't work as it shows nodes...
Here's what how i'm trying:
$d('.ch').map(function(){
console.log('This: href',$(this).attr("href"));
}).get();
It is simpler than you thought. Since you've mentioned that you only want to parse links with ch sts classes, I changed the selector.
var map = {};
$(".ch.sts").each(function() {
map[$(this).text()] = $(this).attr("href");
});
console.log(map);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list" class="book-list">
<div id="stream_1" class="stream collapsed">
<h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3>
<div class="volume last">
<h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922893" class="new">
<span>
<a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a>
</span>
<i>Yesterday 08:27 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
<div id="stream_5" class="stream">
<h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3>
<div class="volume last">
<h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922873" class="new">
<span>
<a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a>
</span>
<i>Yesterday 08:10 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
</div>
Get all the Elements with class name.
Get the text value and "href" attribute.
x = document.getElementsByClassName("ch sts");
for(i =0; i<x.length; i++) {
console.log(x[i].text +" "+ x[i].getAttribute("href"));
}

Add a class in an anchor tag within a div with jquery

does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe
Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>

siblings() in jQuery is not working

I tried to achieve tabs using jQuery. Making the current tab class active is working, but to make its sibling's class null is not working.
jQuery(document).ready(function() {
jQuery('.container .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
console.log(currentAttrValue);
// jQuery(this).addClass('active').siblings.removeClass('active');
// Show/Hide Tabs
//jQuery(currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).addClass('active');
jQuery(this).siblings().find('a').removeClass('active');
jQuery('each_tab').not(currentAttrValue).css("display", "none");
jQuery(currentAttrValue).css("display", "block");
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li>
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>
The <a> elements in questions have no siblings. The containing <li> elements do.
Target those — and their descendant <a> tags — instead, with:
jQuery(this).parent().siblings('li').find('a').removeClass('active');
Your each_tab query can be replaced with:
jQuery('.tab-content > div').not(currentAttrValue).
hide().
addClass('tab--inactive').
removeClass('tab--active');
jQuery(currentAttrValue).
show().
addClass('tab--active').
removeClass('tab--inactive');
You're selecting the <a> tags, then calling jQuery(this).siblings(). But the <a> tags don't have any siblings; it's their parents (the <li> tags) that have siblings. You should be calling jQuery(this).parent().siblings(), instead.

Categories

Resources