I am trying to implement Bootstrap 4 scrollSpy feature on my site. I have given the body position relative:
body {
overflow-x: hidden;
position: relative;
}
And I have made nav-links underneath the navbar:
<div class="container-fluid page-nav">
<div class="container">
<div class="row">
<div class="col-md-9 offset-md-3">
<nav id="page-nav" class="nav section-links">
<a class="nav-link" href="#info">Info</a>
<a class="nav-link" href="#videos">Videos</a>
<a class="nav-link" href="#stats">Statistics</a>
</nav>
</div>
</div>
</div>
</div>
I am making the nav links fixed once I scroll to them:
$('body').scrollspy({ target: '#page-nav' });
let pageNav = document.querySelector('.page-nav');
let fixClass = 'is-fixed';
function stickyScroll() {
if( window.pageYOffset > 56 ) {
pageNav.classList.add(fixClass);
}
if( window.pageYOffset < 56 ) {
pageNav.classList.remove(fixClass);
}
}
$(window).scroll(stickyScroll);
I add the is-fixed class to make them fixed:
.is-fixed {
position: fixed;
left: 0;
right: 0;
z-index: 10;
top: 0;
}
But, scrollSpy is not working, what am I doing wrong and how can I fix this?
Related
Help guys...everything works until website goes to tablet/mobile widht...than JS start to act crazy. I understand that its because there is two actions under one funciton, but is there any way to separate this and/or to limit add/remove class .currentline to specified screen width.
When its in tablet/mobile size i have dropdown menu so i dont need animated lines from .lineparent
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#albmenu').addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
document.querySelector('.current').classList.remove('current');
document.querySelector('.currentline').classList.remove('currentline');
let galleryName = event.target.getAttribute('data-gallery');
let lineName = event.target.getAttribute('data-line');
document.querySelector(`.${galleryName}`).classList.add('current');
document.querySelector(`.${lineName}`).classList.add('currentline');
}
});
});
.lineparent {
width: 35%;
height: 2px;
}
.line,
.line2,
.line3,
.line4,
.line5,
.line6 {
width: 100%;
height: 2px;
background-color: var(--textcol);
opacity: 0;
}
.currentline {
opacity: 1;
animation: linewidth 0.5s;
}
#keyframes linewidth {
from {
width: 0;
}
to {
width: 100%;
}
}
<div class="albmenu"id="albmenu">
<ul id="gallery-links">
<li><div class="lineparent"><div class="line currentline"></div></div>
All</li>
<li><div class="lineparent"><div class="line2"></div></div>
Weddings</li>
<li><div class="lineparent"><div class="line3"></div></div>
Business</li>
<li><div class="lineparent"><div class="line4"></div></div>
Sports</li>
</ul>
<div class="dropdown" id="dropdown">
<button onclick="myFunction()" class="dropbtn">Category</button>
<div id="myDropdown" class="dropdown-content">
<a value="Family" href="#gallery" data-gallery="grid">All</a>
<a value= "" href="#gallery" data-gallery="grid2">Weddings</a>
<a value= "" href="#gallery" data-gallery="grid3">Business</a>
<a value= "" href="#gallery" data-gallery="grid4">Sports</a>
</div>
</div>
</div>
If it is styling then you can use CSS media queries to handle that, and if it is some JavaScript then you can use the DOM APIs to detect the width of your viewport and have code executes or not based on the width.
I solved it myself with an innerWidth. I changed the code to this:
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#albmenu').addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
document.querySelector('.current').classList.remove('current');
if ((window.innerWidth > 1024)) {document.querySelector('.currentline').classList.remove('currentline');
}
let galleryName = event.target.getAttribute('data-gallery');
let lineName = event.target.getAttribute('data-line');
document.querySelector(`.${galleryName}`).classList.add('current');
if ((window.innerWidth > 1024)) { document.querySelector(`.${lineName}`).classList.add('currentline');}
}
});
});
I want to show an horizontal scroll indicator for a scrollable DIV container.
After some testing I'm pretty sure that it's not possible wit pure CSS.
I found a snippet in an answer for a similar question.
Unfortunately I couldn't figure out how to change the script to my needs.
I'm using a simple DIV container with some elements in it.
Here's my code:
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-container">
<ul class="list-inline text-white text-center">
<li class="list-inline-item" style="width: 200px;">
<div class="py-5 bg-dark"><h1 class="py-5">1</h1></div>
</li>
<li class="list-inline-item" style="width: 400px;">
<div class="py-5 bg-dark"><h1 class="py-5">2</h1></div>
</li>
[....]
</ul>
</div>
</div>
<div class="scroll-indicator">
<div class="scroll-indicator-bar"></div>
</div>
<div class="d-flex justify-content-between">
<button>Prev</button>
<button>Next</button>
</div>
</div>
And the CSS:
.scroll-wrapper {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
white-space: nowrap;
}
.scroll-indicator {height: 4px; width: 100%; background-color: #ddd; margin-bottom: 2rem;}
.scroll-indicator-bar {height: 4px; width: 20%; background-color: #000;}
Working example
Is there any way to animate the scrollbar indicator with CSS and/or jQuery?
EDIT: I found another good example here: https://codepen.io/mahish/pen/RajmQw
I tried to use the code in my example but the prev/next buttons doesn't work. And I also don't know how to use the scroll position to show and move a scroll indicator.
Here's the JS code from the example (change to my class names):
// duration of scroll animation
var scrollDuration = 300;
// paddles
var leftPaddle = document.getElementsByClassName('left-paddle');
var rightPaddle = document.getElementsByClassName('right-paddle');
// get items dimensions
var itemsLength = $('.item').length;
var itemSize = $('.item').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 20;
// get wrapper width
var getMenuWrapperSize = function() {
return $('.scroll-wrapper').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size
var menuVisibleSize = menuWrapperSize;
// get total width of all menu items
var getMenuSize = function() {
return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled to the left
var getMenuPosition = function() {
return $('.scroll-container').scrollLeft();
};
// finally, what happens when we are actually scrolling the menu
$('.scroll-container').on('scroll', function() {
// get how much of menu is invisible
menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled so far
var menuPosition = getMenuPosition();
var menuEndOffset = menuInvisibleSize - paddleMargin;
// show & hide the paddles
// depending on scroll position
if (menuPosition <= paddleMargin) {
$(leftPaddle).addClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition < menuEndOffset) {
// show both paddles in the middle
$(leftPaddle).removeClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition >= menuEndOffset) {
$(leftPaddle).removeClass('hidden');
$(rightPaddle).addClass('hidden');
}
// print important values
$('#print-wrapper-size span').text(menuWrapperSize);
$('#print-menu-size span').text(menuSize);
$('#print-menu-invisible-size span').text(menuInvisibleSize);
$('#print-menu-position span').text(menuPosition);
});
// scroll to left
$(rightPaddle).on('click', function() {
$('.scroll-container').animate( { scrollLeft: menuInvisibleSize}, scrollDuration);
});
// scroll to right
$(leftPaddle).on('click', function() {
$('.scroll-container').animate( { scrollLeft: '0' }, scrollDuration);
});
You can have your own custom horizontal scroll behavior with vanilla js, you just need to handle mousedown, mouseup and mousemove events, calculate the needed scroll value and move your elements using transform: translateX() style, and to keep track with these values,
I did some changes and added some js code, check the snippet bellow:
const scrollBar = document.getElementById('myBar');
const scrollBarWrapper = document.getElementById('barWrapper');
const scrollContent = document.getElementById('scroll-container');
scrollBar.style.width = ((scrollContent.offsetWidth * scrollBarWrapper.offsetWidth) / scrollContent.scrollWidth) + 'px';
let isScrolling = false;
let cursorX = 0;
let translateXValue = 0;
scrollBar.addEventListener('mousedown', function(e) {
e.preventDefault();
isScrolling = true;
cursorX = e.clientX;
});
document.addEventListener('mouseup', function(e) {
if (isScrolling) {
e.preventDefault();
isScrolling = false;
translateXValue += (e.clientX - cursorX);
}
});
document.addEventListener('mousemove', function(e) {
if (isScrolling && cursorX !== e.clientX) {
e.preventDefault();
const translateAmount = (translateXValue + (e.clientX - cursorX));
const scrollLength = (barWrapper.offsetWidth - scrollBar.offsetWidth);
const barScroll = Math.min(Math.max(0, translateAmount), scrollLength);
const contentTranslateRatio = (barScroll * scrollContent.scrollWidth) / scrollContent.offsetWidth;
scrollBar.style.transform = 'translateX(' + barScroll + 'px)';
scrollContent.style.transform = 'translateX(' + -contentTranslateRatio + 'px)';
}
});
.scroll-wrapper {
width: 100%;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.scroll-indicator {height: 6px; width: 100%; background-color: #ddd; margin-bottom: 2rem;}
.scroll-indicator-bar {height: 6px; width: 20%; background-color: #000;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="container">
<div class="scroll-wrapper">
<div class="scroll-container" id="scroll-container">
<ul class="list-inline text-white text-center">
<li class="list-inline-item" style="width: 200px;">
<div class="py-5 bg-dark"><h1 class="py-5">1</h1></div>
</li>
<li class="list-inline-item" style="width: 400px;">
<div class="py-5 bg-dark"><h1 class="py-5">2</h1></div>
</li>
<li class="list-inline-item" style="width: 300px;">
<div class="py-5 bg-dark"><h1 class="py-5">3</h1></div>
</li>
<li class="list-inline-item" style="width: 150px;">
<div class="py-5 bg-dark"><h1 class="py-5">4</h1></div>
</li>
<li class="list-inline-item" style="width: 250px;">
<div class="py-5 bg-dark"><h1 class="py-5">5</h1></div>
</li>
<li class="list-inline-item" style="width: 300px;">
<div class="py-5 bg-dark"><h1 class="py-5">6</h1></div>
</li>
<li class="list-inline-item" style="width: 200px;">
<div class="py-5 bg-dark"><h1 class="py-5">7</h1></div>
</li>
<li class="list-inline-item" style="width: 400px;">
<div class="py-5 bg-dark"><h1 class="py-5">8</h1></div>
</li>
<li class="list-inline-item" style="width: 300px;">
<div class="py-5 bg-dark"><h1 class="py-5">9</h1></div>
</li>
</ul>
</div>
</div>
<div class="scroll-indicator" id="barWrapper">
<div class="scroll-indicator-bar" id="myBar"></div>
</div>
<div class="d-flex justify-content-between">
<button>Prev</button>
<button>Next</button>
</div>
</div>
by this code you have a dynamic scrollbar width dynamic width based on the content, and you can manage your own scroll behavior,
then, you can add custom next() and previous() functions to add translate for both scrollbar and content, as implemented in mousemove handler
I found a solution by using SimpleBar: https://github.com/Grsmto/simplebar/tree/master/packages/simplebar
I have a menu that opens when the user clicks the icon. I want the menu to close when the user clicks anywhere else on the page, but I'm having trouble finishing the function. Below is my html and functions:
<div id="header">
<div id="menu">
<div class="menu-container" id="myLinks">
<?php wp_nav_menu(array('container_class' => 'hike-menu', 'theme_location' => 'home-top')); ?>
<?php wp_nav_menu(array('container_class' => 'hike-menu', 'theme_location' => 'hike')); ?>
<?php wp_nav_menu(array('container_class' => 'primary-menu', 'theme_location' => 'primary')); ?>
</div>
<a href="javascript:void(0);" class="icon" onclick="myToggleFunction()" id="toggle-menu">
<span></span>
</a>
</div>
</div>
function myToggleFunction() {
var element = document.getElementById("toggle-menu");
element.classList.add("active");
var x = document.getElementById("myLinks");
if (x.style.width === "290px") {
x.style.width = "0px";
element.classList.remove("active");
} else {
x.style.width = "290px";
}
}
jQuery(document.body).click(function(e) {
if (jQuery("#toggle-menu").hasClass("active") && jQuery("#myLinks").css("width", "290px")) {
jQuery("#myLinks").css("width", "0px");
jQuery("#toggle-menu").removeClass("active");
}
});
When the user clicks on "toggle-menu", the menu opens. The myToggleFunction() works great, but it's getting the menu to close when I click anywhere outside of it that's the problem. Does anyone know how I can rework my function to achieve this?
Check the event.target to determine whether the menu should be closed or not.
$(function() {
$("html").on("click", function(e) {
let $t = $(e.target),
$myLinks = $("#myLinks"),
$toggleMenu = $("#toggle-menu");
if ($t.is($myLinks) || $myLinks.has($t).length) {
//clicked in the menu. do nothing
} else if ($t.is($toggleMenu) || $toggleMenu.has($t).length) {
$myLinks.toggleClass("open");
} else {
$myLinks.removeClass("open");
}
})
});
html,
body {
margin: 0;
min-height: 100%;
background: #eee;
}
#myLinks {
background: #ccc;
max-height: 0px;
height:auto;
overflow: hidden;
transition: max-height 0.4s;
}
#myLinks.open {
max-height: 200px;
}
#myLinks a {
display: block;
margin: 10px;
}
#toggle-menu {
background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="menu">
<div class="menu-container" id="myLinks">
menu
items
here
</div>
<a href="#" class="icon" id="toggle-menu">
<span>toggle menu</span>
</a>
</div>
</div>
you can set the your close menu function on body and set e.stopPropagation() on menu itself
I'm trying to make a menu slider for a restaurant with two clickable menus, the lunch menu and the dinner menu. I don't want the menus opening in a new window, just a clean click and the wanted menu opens.
Here is the code I have so far, I know it needs a lot of work, I'm new to the javascript/jQuery world. Pure javascript would be cool but anything jQuery would work too.
If someone can help me and please explain what needs to be fixed so i can understand this more I would greatly appreciate it. Thank You. On codepen
let lunchContainer = document.querySelectorAll('div.lunchmenu');
dinnerContainer = document.querySelectorAll('div.dinnermenu');
function reset() {
for(let i = 0; i < lunchContainer.length; i++) {
lunchContainer[i].style.display = 'none';
dinnerContainer[i].style.display = 'none';
}
};
$('.lunch').click(function(event) {
reset();
$('.lunchmenu').addClass('active');
lunchContainer.style.display = 'block';
});
$('.dinner').click(function() {
reset();
$('.lunchmenu').removeClass('active');
});
$('.dinner').click(function(event) {
reset();
$('.dinnermenu').addClass('active');
// dinnerContainer.style.display = 'block';
});
$('.lunch').click(function() {
reset();
$('.dinnermenu').removeClass('active');
// dinnerContainer.style.display = 'block';
});
<div class="page">
<div class="header">
<div class="logoHeader">
<a href="index.html" >
<img class="crab" src="http://images.all-free-download.com/images/graphicthumb/vivid_hand_drawn_crab_decoration_pattern_vector_551463.jpg " alt="KingChef Krab logo">
</a>
<h1 id="titleHeader">
King Chef
</h1>
</div>
<nav class="menuHeader">
<a class="specMenu" href="about.html">about</a></li>
<a class="specMenu" href="team.html">team</a></li>
<a class="specMenu" href="menus/dinner.html">menu</a></li>
<a class="specMenu" href="#">news</a></li>
<a class="specMenu" href="#">hours</a></li>
<a class="lastMenu" href="#">reservations</a></li>
</nav>
</div>
<nav id="menuCategory">
<a class="menuStyles lunch" href="#lunch">lunch</a>
<a class="menuStyles dinner" href="#dinner">dinner</a>
</nav>
<div class="container">
<div class="lunchmenu">
<p>hehehfdsafhkalfj</p>
</div>
<div class="dinnermenu">
<p>hdhfsahf</p>
</div>
</div>
</div>
.lunchmenu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.active {
display: block;
}
}
.dinnermenu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.active {
display: block;
}
}
Notice how much code I removed! You don't need to set display if you're going to use an 'active' class to do that job and you don't need to define the behavior of a click on your buttons twice.
Also, if each menu has a container, you don't need to iterate over all the items inside of them to set their display to none, setting the parent container to none will suffice.
Hope that helps!
let lunchContainer = document.querySelectorAll('.lunchmenu'), // notice ',' instead of ';'
dinnerContainer = document.querySelectorAll('.dinnermenu');
$('.lunch').click(function(event) {
$('.dinnermenu').removeClass('active');
$('.lunchmenu').addClass('active');
});
$('.dinner').click(function() {
$('.lunchmenu').removeClass('active');
$('.dinnermenu').addClass('active');
});
.lunchmenu, .dinnermenu {
display:none;
}
.active {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="lunch">lunch</button>
<button class="dinner">dinner</button>
<div class="lunchmenu">
<h5>lunch menu yayyy</h5>
<p>item lunch 1</p>
<p>item lunch 2</p>
</div>
<div class="dinnermenu">
<h5>Dinner menu yayyy</h5>
<p>itemdinner 1</p>
<p>item dinner 2</p>
</div>
I have a website : my website
i have built a jQuery counter to count up to a target number for the points in the team.Plz click on team tab.
problem :
when I load the page,the jquery point count works fine.Lets say when you go to team section and refresh the page.But when I scroll to through the various sections and reach team section,the effect doesnot show up.It looks like normal numbers.Can it be made possible,when the user scrolls to the "team" section the number count with the effect shows up.
The code for that part :
(function ($) {
$.fn.countTo = function (options) {
options = options || {};
return $(this).each(function () {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
}(jQuery));
jQuery(function ($) {
// custom formatting example
$('#count-number').data('countToOptions', {
formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
body {
font-family: Arial;
padding: 25px;
background-color: #f5f5f5;
color: #808080;
text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */
.team-leader-box {
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
position: relative;
display:inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */
.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #808080; padding: 10px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }
}
.counter.col_fourth {
background-color: #fff ;
border-radius: 10px;
}
<section class="main-section team" id="team"><!--main-section team-start-->
<div class="container">
<h2>team</h2>
<h6>Take a closer look into our amazing team. We won’t bite.</h6>
<div class="team-leader-block clearfix">
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-03s">
<div class="team-leader-shadow"></div>
<img src="img/team-leader-pic1.jpg" alt="">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="50" data-speed="1500"></h2>
<p class="count-text ">points</p>
<p1>click to know</p1>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow"></div>
<img src="img/team-leader-pic2.jpg" alt="">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="30" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-09s">
<div class="team-leader-shadow"></div>
<img src="img/team-leader-pic3.jpg" alt="">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="10" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
</div>
</div>
<div class="popup" id="popup">
<div class="popup__inner">
<header class="popup__header">
<a onclick="$('#popup').fadeOut()" id="popup-exit">esc</a>
</header>
<img src="http://www.fillmurray.com/124/124" alt="Bart Veneman" width="200" height="200" class="profile__image" /><!--
--><section class="profile__details">
<ul class="profile__stats">
<li>
<h3 class="profile_stat__heading">Gold</h3>
<div class="profile_stat__number">17</div>
</li><!--
--><li>
<h3 class="profile_stat__heading">Silver</h3>
<div class="profile_stat__number">8</div>
</li><!--
--><li>
<h3 class="profile_stat__heading">Bronze</h3>
<div class="profile_stat__number">21</div>
</li>
</ul>
<h2 class="profile__name" id="popup-name"></h2>
<h2 class="profile__name">Designation: </h2>
<h2 class="profile__name">Reporting Manager: </h2>
<h2 class="profile__name">Email: </h2>
<h2 class="profile__name">Date of Join: </h2>
<h2 class="profile__name" id="popup-score"></h2>
<h2 class="profile__name">Latest Week Points: </h2>
<h2 class="profile__name">Overall Points: </h2>
<h2 class="profile__name">Medals Rewarded:</h2>
<ul class="social">
<li><i class="fa fa-github"></i></li><!--
--><li><i class="fa fa-instagram"></i></li><!--
--><li><i class="fa fa-twitter"></i></li><!--
--><li><i class="fa fa-bitbucket"></i></li><!--
--><li class="location"><i class="fa fa-map-marker"></i><span>Bangalore, IN</span></li>
</ul>
</section>
</div>
</div>
</section>
problem 2:
I am trying to make a pop-up such that when the user clicks at the points box,where the number box is,the popup is displayed.Right now it appears at the bottom of the points box.
javascript for the popup .The html is in the above codes :
< script type = "text/javascript" >
$(document).ready(function() {
$('.tab a').on('click', function(e) {
e.preventDefault();
var _this = $(this);
var block = _this.attr('href');
$(".tab").removeClass("active");
_this.parent().addClass("active");
$(".counter col_fourth").hide();
$(block).fadeIn();
});
/**
* Fade in the Popup
*/
$('.counter col_fourth').on('click', function() {
$('#popup').fadeIn();
});
}); < /script>
please help me if anyone out here can.