jQuery hover falling off from the screen

jQuery hover falling off from the screen - javascript

This is my code at the moment.
I need to prevent hover box 'falling down' on the bottom of the page while hovering on paragraphs. I managed to prevent that on the right on smaller screens but i cant on bottom.
$(function() {
var moveLeft = 20;
var moveDown = 10;
// var moveRight = 10;
$('.hoverKartX').hover(function(e) {
$('.hoverKart').show();
}, function() {
$('.hoverKart').hide();
});
$('.hoverKartX').mousemove(function(e) {
$('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
// preventing 'falling out to the right' on smaller screens
if ($('.hoverKart').position()['left'] + $('.hoverKart').width() > $(window).width()) {
$('.hoverKart').css("left", $(window).width() - $(".hoverKart").width());
};
});
});
.hoverKart {
position: absolute;
width: 400px;
height: 220px;
border-radius: 25px;
border: 1px solid #999;
z-index: 1;
display: none;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverKart"> <!-- hidden -->
<p>
TEST
</p>
</div>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>

You can use the e object from $('.hoverKartX').mousemove(function(e) { to calculate how far from the width of the window the mouse is. If distance is less than the height of your .hoverKart, then you can adjust its offset with the edge to make it stay within the window.

You already have the logic for off the right (left / width) so apply the same login to the bottom (pageY+height):
if ((e.pageY + moveDown + $(".hoverKart").height())
> ($(window).scrollTop() + $(window).height())) {
$('.hoverKart').css("top",
$(window).height() - $(".hoverKart").height() + $(window).scrollTop()
);
}
$(function() {
var moveLeft = 20;
var moveDown = 10;
// var moveRight = 10;
$('.hoverKartX').hover(function(e) {
$('.hoverKart').show();
}, function() {
$('.hoverKart').hide();
});
$('.hoverKartX').mousemove(function(e) {
$('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
$(".hoverKart>p").html($(this).html())
// preventing 'falling out to the right' on smaller screens
if ($('.hoverKart').position().left + $('.hoverKart').width() > $(window).width()) {
$('.hoverKart').css("left", $(window).width() - $(".hoverKart").width() - moveLeft);
};
if ((e.pageY + moveDown + $(".hoverKart").height()) > ($(window).scrollTop() + $(window).height())) {
$('.hoverKart').css("top", $(window).height() - $(".hoverKart").height() + $(window).scrollTop());
}
});
});
.hoverKart {
position: absolute;
width: 400px;
height: 120px;
border-radius: 25px;
border: 1px solid #999;
z-index: 1;
display: none;
background: #fff;
}
p.hoverKartX {
border:1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverKart"> <!-- hidden -->
<p>
TEST
</p>
</div>
<p class="hoverKartX">
test1
</p>
<p class="hoverKartX">
test2
</p>
<p class="hoverKartX">
test3
</p>
<p class="hoverKartX">
test4
</p>
<p class="hoverKartX">
test5
</p>
<p class="hoverKartX">
test6
</p>
<p class="hoverKartX">
test7
</p>
<p class="hoverKartX">
test8
</p>
<p class="hoverKartX">
test9
</p>
<p class="hoverKartX">
testa
</p>
<p class="hoverKartX">
testb
</p>
<p class="hoverKartX">
testc
</p>
<p class="hoverKartX">
testd
</p>
<p class="hoverKartX">
teste
</p>
<p class="hoverKartX">
testf
</p>
<p class="hoverKartX">
testg
</p>
<p class="hoverKartX">
testh
</p>
<p class="hoverKartX">
testi
</p>
<p class="hoverKartX">
testj
</p>
<p class="hoverKartX">
testk
</p>
<p class="hoverKartX">
testl
</p>
<p class="hoverKartX">
testm
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>

Here is solution
$(function() {
var moveLeft = 20;
var moveDown = 10;
// var moveRight = 10;
$('.hoverKartX').hover(function(e) {
$('.hoverKart').show();
}, function() {
$('.hoverKart').hide();
});
$('.hoverKartX').mousemove(function(e) {
var offset = $( this ).offset().top,
bodyOffset=$(document).scrollTop();
if($( this ).offset().top+$(".hoverKart").height()+moveDown<bodyOffset+$(window).height()){
$('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
}
else{
$('.hoverKart').css('top', bodyOffset+$(window).height()-$(".hoverKart").height())
.css('left', e.pageX + moveLeft);
}
// preventing 'falling out to the right' on smaller screens
if ($('.hoverKart').position()['left'] + $('.hoverKart').width() > $(window).width()) {
$('.hoverKart').css("left", $(window).width() - $(".hoverKart").width());
};
});
});
.hoverKart {
position: absolute;
width: 400px;
height: 220px;
border-radius: 25px;
border: 1px solid #999;
z-index: 1;
display: none;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverKart"> <!-- hidden -->
<p>
TEST
</p>
</div>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>

Related

function doesnt want to execute JS

I have problem with function called titleClickHandler which doesnt want to execute. This function should remove class "active" from all articles and links after clicking on each link and add class "active" to generated from js li a element which was clicked.
If you need some additional informations just ask.
This is the code:
"use strict";
const links = document.querySelectorAll(".titles a");
const optArticleSelector = ".art-post",
optTitleSelector = ".post-title",
optTitleListSelector = ".articles-list";
const titleClickHandler = function (event) {
event.preventDefault();
const articles = document.querySelectorAll(".posts .art-post");
for (let article of articles) {
article.classList.remove("active");
}
for (let link of links) {
link.classList.remove("active");
}
console.log("ok");
document
.querySelector(`a[href="${event.target.hash}"]`)
.classList.add("active");
document.querySelector(`${event.target.hash}`).classList.add("active");
};
function generateTitleLinks() {
const articles = document.querySelectorAll(".posts .art-post");
function clearMessages() {
document.querySelector(".articles-list").innerHTML = "";
}
clearMessages();
for (let article of articles) {
const articleId = article.getAttribute("id");
const titleList = document.querySelector(optTitleListSelector);
const articleTitle = article.querySelector(optTitleSelector).innerHTML;
const linkHTML = `<li class="titles">${articleTitle}</li>`;
titleList.innerHTML = titleList.innerHTML + linkHTML;
}
}
generateTitleLinks();
for (let link of links) {
link.addEventListener("click", titleClickHandler);
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<h1>My blog</h1>
<div class="inner-container">
<div class="container-col">
<h2>All Posts</h2>
<ul class="articles-list"></ul>
</div>
<section class="container-col posts">
<article class="art-post active" id="article-1">
<h3 class="post-title">Article 1</h3>
<p class="author">by Marek</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-2">
<h3 class="post-title">Article 2</h3>
<p class="author">by Darek</p>
<p class="post">
Lorem, ipsum
</p>
</article>
<article class="art-post" id="article-3">
<h3 class="post-title">Article 3</h3>
<p class="author">by Anna</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-4">
<h3 class="post-title">Article 4</h3>
<p class="author">by Mateusz</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-5">
<h3 class="post-title">Article 5</h3>
<p class="author">by Adrian</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-6">
<h3 class="post-title">Article 6</h3>
<p class="author">by Marek</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-7">
<h3 class="post-title">Article 7</h3>
<p class="author">by Stranger</p>
<p class="post">
Lorem, ipsum
</p>
</article>
<article class="art-post" id="article-8">
<h3 class="post-title">Article 8</h3>
<p class="author">by Stranger</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-9">
<h3 class="post-title">Article 9</h3>
<p class="author">by Stranger</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-10">
<h3 class="post-title">Article 10</h3>
<p class="author">by Stranger</p>
<p class="post">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
placeat.
</p>
</article>
</section>
<div class="container-col">
<h2 class="tags"></h2>
<h2 class="authors"></h2>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>

I added the constants that were specific to generateTitleLinks() inside the method.
I cleaned up the code a bit. Creating methods within methods always creates messy code. It's better to use variables to explain the code.
Always to try create variables outside loops, so you don't have to create new variables for each iteration.
Renamed .titles to .title.
I think it's easier (and less memory consuming) to only add a single click listener to the whole menu. By doing that, I can just select the target that triggers the listener, loop through all menu items to remove .active from all menu items.
const optTitleListSelector = ".articles-list";
const titleList = document.querySelector(optTitleListSelector);
function generateTitleLinks() {
const articles = document.querySelectorAll(".posts .art-post");
const optArticleSelector = ".art-post",
optTitleSelector = ".post-title";
let clearMessages = '';
document.querySelector(".articles-list").innerHTML = clearMessages;
let articleId, articleTitle, linkHTML;
for (let article of articles) {
articleId = article.getAttribute("id");
articleTitle = article.querySelector(optTitleSelector).innerHTML;
linkHTML = `<li class="title">${articleTitle}</li>`;
titleList.innerHTML += linkHTML;
}
}
generateTitleLinks();
function addActiveClassToClickedMenuItem(event) {
let clickedLiElement = event.target.parentElement;
let menuElements = titleList.querySelectorAll('li');
for (let liElement of menuElements) {
liElement.classList.remove('active');
}
clickedLiElement.classList.add('active');
}
titleList.addEventListener('click', addActiveClassToClickedMenuItem);
.title.active {
background-color: yellow;
}
<h1>My blog</h1>
<div class="inner-container">
<div class="container-col">
<h2>All Posts</h2>
<ul class="articles-list"></ul>
</div>
<section class="container-col posts">
<article class="art-post active" id="article-1">
<h3 class="post-title">Article 1</h3>
<p class="author">by Marek</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-2">
<h3 class="post-title">Article 2</h3>
<p class="author">by Darek</p>
<p class="post">
Lorem, ipsum
</p>
</article>
<article class="art-post" id="article-3">
<h3 class="post-title">Article 3</h3>
<p class="author">by Anna</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-4">
<h3 class="post-title">Article 4</h3>
<p class="author">by Mateusz</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-5">
<h3 class="post-title">Article 5</h3>
<p class="author">by Adrian</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-6">
<h3 class="post-title">Article 6</h3>
<p class="author">by Marek</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-7">
<h3 class="post-title">Article 7</h3>
<p class="author">by Stranger</p>
<p class="post">
Lorem, ipsum
</p>
</article>
<article class="art-post" id="article-8">
<h3 class="post-title">Article 8</h3>
<p class="author">by Stranger</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-9">
<h3 class="post-title">Article 9</h3>
<p class="author">by Stranger</p>
<p class="post">
Lorem ipsum
</p>
</article>
<article class="art-post" id="article-10">
<h3 class="post-title">Article 10</h3>
<p class="author">by Stranger</p>
<p class="post">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora placeat.
</p>
</article>
</section>

Sticky subheader is flikering on scroll

Hi please check my code pen, just at the time of hiding the subheader it is flickering. `Please help.
https://codepen.io/dassuvendu/pen/PoWJNxP.
window.onscroll=()=>{
const sub=document.querySelector('.subheader');
const off=window.pageYOffset;
console.log(off)
if(off>20){
sub.style.display='none';
}
else{
sub.style.display='block';
}
}
.header{
background:rgba(0,0,0,0.2);
padding:15px;
text-align:center;
}
.subheader{
background:rgba(0,0,0,0.08);
padding:5px;
text-align:center;
}
header{
position: sticky;
position: -webkit-sticky;
top: 0;
background:white;
}
.root{
/* padding-top:60px; */
}
<div>
<header>
<div class='header'>This is header</div>
<div class='subheader'>This is Sub Headerheader</div>
</header>
<div class='root'>
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<div>
</div>
Basically what I want is the subheader should disappear on scroll down, and appear at scroll to top. But at the very height when subheader starts disappearing, it's hiding because of my one code and again appearing because of my other code, which is making it like infinite loop.

I have slightly edited your code, if I get it right it produces the desired outcome. Concerning the detection of the window's scrolling direction, all the credits go to this answer
var lastScrollTop = 0;
window.onscroll=()=>{
const sub=document.querySelector('.subheader');
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
sub.style.display='none';
} else {
sub.style.display='block';
}
lastScrollTop = st <= 0 ? 0 : st;
}
.header{
background:rgba(0,0,0,0.2);
padding:15px;
text-align:center;
}
.subheader{
background:rgba(0,0,0,0.08);
padding:5px;
text-align:center;
}
header{
position: sticky;
position: -webkit-sticky;
top: 0;
background:white;
}
.root{
/* padding-top:60px; */
}
<div>
<header>
<div class='header'>This is header</div>
<div class='subheader'>This is Sub Headerheader</div>
</header>
<div class='root'>
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<p>This is para 1</p>
<br />
<div>
</div>

Show hide paragraphs depends on div count

I want to show is if div id="div1" then I need to hide all paragraphs except the paragraph that has an id of para1.
I can do it by CSS but the problem is I have more than 100 sets of divs. I want to know how can I do this via jQuery or any code.
<div class="divclass" id="div1">
<p id="para1" class="pclass">test</p>
<p id="para2" class="pclass">test</p>
<p id="para3" class="pclass">test</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div2">
<p id="para1" class="pclass">test</p>
<p id="para2" class="pclass">test</p>
<p id="para3" class="pclass">test</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div3">
<p id="para1" class="pclass">test</p>
<p id="para2" class="pclass">test</p>
<p id="para3" class="pclass">test</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>
.... up to 100+

As stated in above comment, you can not have multiple elements with same id. So you have to change id of your div's e.g.
<div class="divclass" id="div1">
<p id="div1-para1" class="pclass">test</p>
<p id="div1-para2" class="pclass">test</p>
<p id="div1-para3" class="pclass">test</p>
</div>
<div class="divclass" id="div2">
<p id="div2-para1" class="pclass">test</p>
<p id="div2-para2" class="pclass">test</p>
</div>
After that you can do something like
$('ul.divclass>li:not(:first-child)').hide();
For detail refer fiddle: http://jsfiddle.net/b7yrvk6z/12/

this will do it
$("#div1").children().each(function (){
if($(this).attr("id") !== "para1")
$(this).hide();
});

Instead of id attribute use the name attribute as id must be unique for better coding.
function showHideDiv(){
for(var a=0;a<document.getElementsByTagName('div').length;a++){
var b = document.getElementsByTagName('div')[a].getElementsByTagName("*");
for(var c=0;c<b.length;c++){
if(a==c){
b[c].style.display='block';
}else{
b[c].style.display='none';
}
}
}
}
<body onload="showHideDiv()">
<div class="divclass" id="div1">
<p name="para1" class="pclass">test</p>
<p name="para2" class="pclass">test</p>
<p name="para3" class="pclass">test</p>
<p name="para4" class="pclass">test</p>
<p name="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div2">
<p name="para1" class="pclass">test</p>
<p name="para2" class="pclass">test</p>
<p name="para3" class="pclass">test</p>
<p name="para4" class="pclass">test</p>
<p name="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div3">
<p name="para1" class="pclass">test</p>
<p name="para2" class="pclass">test</p>
<p name="para3" class="pclass">test</p>
<p name="para4" class="pclass">test</p>
<p name="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div4">
<p name="para1" class="pclass">test</p>
<p name="para2" class="pclass">test</p>
<p name="para3" class="pclass">test</p>
<p name="para4" class="pclass">test</p>
<p name="para5" class="pclass">test</p>
</div>

So set a css rule that hides all the paragraphs and loop over to show the ones that you want visible.
$(".divclass").each( function (i) {
$(this).find("p").eq(i).addClass("show");
});
.divclass > p {
display: none;
}
p.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divclass" id="div1">
<p data-id="para1" class="pclass">test 1-1</p>
<p data-id="para2" class="pclass">test 1-2</p>
<p data-id="para3" class="pclass">test 1-3</p>
<p data-id="para4" class="pclass">test 1-4</p>
<p data-id="para5" class="pclass">test 1-5</p>
</div>
<div class="divclass" id="div2">
<p data-id="para1" class="pclass">test 2-1</p>
<p data-id="para2" class="pclass">test 2-2</p>
<p data-id="para3" class="pclass">test 2-3</p>
<p data-id="para4" class="pclass">test 2-4</p>
<p data-id="para5" class="pclass">test 2-5</p>
</div>
<div class="divclass" id="div3">
<p data-id="para1" class="pclass">test 3-1</p>
<p data-id="para2" class="pclass">test 3-2</p>
<p data-id="para3" class="pclass">test 3-3</p>
<p data-id="para4" class="pclass">test 3-4</p>
<p data-id="para5" class="pclass">test 3-5</p>
</div>

Based on comments I think I understand what you're going for.
For your HTML I'd change the paragraphs to use data attributes instead of IDs (IDs should all be unique meaning you can't have the ID para1 set to multiple elements)
<div class="divclass" id="div1">
<p data-div="div1" class="pclass">Show Div 1</p>
<p data-div="div2" class="pclass">test</p>
<p data-div="div3" class="pclass">test</p>
<p data-div="div4" class="pclass">test</p>
<p data-div="div5" class="pclass">test</p>
</div>
<div class="divclass" id="div2">
<p data-div="div1" class="pclass">test</p>
<p data-div="div2" class="pclass">Show Div 2</p>
<p data-div="div3" class="pclass">test</p>
<p data-div="div4" class="pclass">test</p>
<p data-div="div5" class="pclass">test</p>
</div>
<div class="divclass" id="div3">
<p data-div="div1" class="pclass">test</p>
<p data-div="div2" class="pclass">test</p>
<p data-div="div3" class="pclass">Show Div 3</p>
<p data-div="div4" class="pclass">test</p>
<p data-div="div5" class="pclass">test</p>
</div>
Then grab your parent divs, and hide the ones that data does not match the parents ID
$("[id^=div]").each(function(){
let this_id = $(this).attr('id')
$(this).children('[data-div!="' + this_id + '"]').hide()
})
https://codepen.io/Nahana/pen/BOvrwG

It's my understanding that you want to show the number of paragraphs based on the integer in the id.
Based on your comments: I modified the snippet (commented out one if and replaced it). You actually want to show the indexed p associated with the id.
Note:
I left the id's on your paragraphs, technically this is incorrect and they are not necessary in the code sample below.
I left the inner loop alone but it could be replaced by;
$(elem).find("p").eq(count-1).show();
$("div.divclass").each(function(idx, elem) {
//get the count from the div's id
let count = $(elem).attr("id").replace(/div/, "");
$(elem).find("p").each(function(ii, iElem) {
//if (ii < count) $(iElem).show(); //show that many
if (ii == (count-1)) $(iElem).show(); //show that one
});
});
/*lets give the div's a border for clarity */
.divclass {
border: 1px solid black;
}
/*hide all the paragraphs, we'll show the right ones at runtime*/
.divclass > p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divclass" id="div1">
<p id="para1" class="pclass">this is number 1</p>
<p id="para2" class="pclass">test</p>
<p id="para3" class="pclass">test</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div2">
<p id="para1" class="pclass">test</p>
<p id="para2" class="pclass">this is number 2</p>
<p id="para3" class="pclass">test</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div3">
<p id="para1" class="pclass">test</p>
<p id="para2" class="pclass">test</p>
<p id="para3" class="pclass">this is number 3</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>

javascript for position fixed on scroll

I have this div which is just a title.
<div class="container-fluid DFOCpadding">
<div class="row">
<div class="col-lg-12">
<div class=" text-center ">
<span class="toptext">DANCE FOR OVARIAN CANCER</span>
</div>
</div>
</div>
and a nav bar under it which I'd like to position as fixed
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle glyphicon glyphicon-chevron-down" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Dance Dance</span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>HOME</li>
<li><a class="scroll" href="#register"><span class="register">REGISTER</span></a></li>
<li><a class="scroll" href="#faq">FAQ's</a></li>
<li><a class="scroll" href="#acts">ACTS</a></li>
<li><a class="scroll" href="#about">ABOUT</a></li>
<li><a class="scroll" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
and I need the page to just catch the navbar when you scroll past it like on this site: https://ovariancancer.net.au/
I have seen answers for this but they are very restricted to the OP's use case and so I can't get it to work for my page.
cheers

Her's the code similar to 'https://ovariancancer.net.au/'
hope this helps
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(".navbar").css({
'position': 'fixed',
'top': '0px',
'width': '100%',
'background': '#cfcfcf',
'z-index': '99'
});
} else {
$(".navbar").css({
'position': 'relative',
'background': '#FFFFFF',
'width': '100%'
})
}
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid DFOCpadding">
<div class="row">
<div class="col-lg-12">
<div class=" text-center ">
<span class="toptext">DANCE FOR OVARIAN CANCER</span>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle glyphicon glyphicon-chevron-down" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Dance Dance</span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>HOME
</li>
<li><a class="scroll" href="#register"><span class="register">REGISTER</span></a>
</li>
<li><a class="scroll" href="#faq">FAQ's</a>
</li>
<li><a class="scroll" href="#acts">ACTS</a>
</li>
<li><a class="scroll" href="#about">ABOUT</a>
</li>
<li><a class="scroll" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<P> </p>
<P> </p> <P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p> <P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p> <P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p> <P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p> <P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p> <P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p> <P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p> <P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p> <P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p> <P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>

Try this:
.navbarfixed {
position: fixed;
}
$(function() {
var nav = $(".navbar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
nav.addClass("navbarfixed");
} else {
nav.removeClass("navbarfixed");
}
});
});

scrollTo Jquery WILL NOT WORK, what am I missing?

I've used this plug in numerous times and I'm either being very dumb or having a brain fart because I just can't get it to work. I have 3 div's that I want to scroll within another div(a container div).
here's a link of the "non functioning setup" and heres the code...
$(document).ready(function() {
$("#sc").click(function() {
$('#main_hold').scrollTo('#m1');
});
$("#ac").click(function() {
$('#main_hold').scrollTo('#m2');
});
$("#cc").click(function() {
$('#main_hold').scrollTo('#m3');
});
});
and the HTML
*note the blank spaces are there for spacing without text...
<body>
<div id="container">
<header>
<div id = "navigation">
<ul>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
<div id = "main_hold" role="main">
<div id = "m1" class = "mhold">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id = "m2" class = "mhold">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id = "m3" class = "mhold">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div style="clear:both"></div>
</div>
<footer>
</footer>
</div>
</body>

Do you have a CSS style applied to your main_hold div with the rule overflow: scroll;? If not, you may want to scroll the window instead:
$.scrollTo('#m1');
Take a look at this jsfiddle: http://jsfiddle.net/Czkan/

Develop Reference

JavaScript is the programming language of the Web.

jQuery hover falling off from the screen - javascript

You can use the e object from $('.hoverKartX').mousemove(function(e) { to calculate how far from the width of the window the mouse is. If distance is less than the height of your .hoverKart, then you can adjust its offset with the edge to make it stay within the window.

Related

function doesnt want to execute JS

Sticky subheader is flikering on scroll

Show hide paragraphs depends on div count

javascript for position fixed on scroll

scrollTo Jquery WILL NOT WORK, what am I missing?

Categories

Resources