Trying to call scroll event after append item but it is not working. what I do wrong?
Please help me Thank you.
you can check the code here
https://jsfiddle.net/4uk92cxe/1/
$(document).ready(function () {
$('#myDiv2').append(
"<table class='scroll-item'><tr><td> YYYYYYYYYYYYYY</td></tr></table>"
);
$('.scroll-item').on('scroll', function () {
console.log('scrolling');
});
$(document).on('scroll', "table[class='scroll-item']", function () {
console.log('scrolling');
});
$('.scroll-item').scroll(function () {
console.log('scrolling');
});
$(document).on('scroll', '.scroll-item', function () {
console.log('scrolling');
});
});
.wrapper {
width:100px;
overflow-x: scroll;
overflow-y: hidden;
}
table {
width: 300px;
}
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="wrapper">
<table class="scroll-item">
<tr>
<td> XXXXXXXXXXXXXXXXXX</td>
</tr>
</table>
</div>
<div id="myDiv2" class="wrapper"></div>
Try change the class scroll-item in the table. Rmove it from table, and put it in the div content .wrapper that is holding the scrollbar.
Example
$(document).ready(function () {
$("#myDiv2").addClass("scroll-item");
$('#myDiv2').append(
"<table ><tr><td> YYYYYYYYYYYYYY</td></tr></table>"
);
$('.scroll-item').on('scroll', function () {
console.log('scrolling');
});
});
.wrapper {
width: 100px;
overflow-x: scroll;
overflow-y: hidden;
}
table {
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="scroll-item wrapper">
<table>
<tr>
<td> XXXXXXXXXXXXXXXXXX</td>
</tr>
</table>
</div>
<div id="myDiv2" class="wrapper"></div>
Just add the class in the div: $("#myDiv2").addClass("scroll-item"); and also, replace this class here <div class="scroll-item wrapper">.
You can also remove this: $("#myDiv2").addClass("scroll-item"); and add the class directly in the HTML to avoid more work with Jquery.
The answer to your question what I do wrong? is, you are calling on scroll on .scroll-item but the scroller is in the .wrapper.
use this instead,
$('.wrapper').on('scroll', function(){
console.log('scrolling');
});
Related
The below code is working fine, but i want merge checked and click functions in single function. Is it possible?
$(function () {
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
$(function () {
$("#enablepromo0").click(function () {
if ($(this).is(":checked")) {
$("#PromoPanel").show(300);
} else {
$("#PromoPanel").hide(300);
}
});
});
Use the change event and trigger it, it can then detect the current state of the checkbox. I altered the code to toggle a class instead to avoid a "flash" initially.
$(function() {
$("#enablepromo0").on('change', function() {
let isChecked = !this.checked;
$("#PromoPanel").toggleClass("hidden", isChecked, {
duration: 300
});
}).trigger('change');
});
.panel {
border: solid lime 1px;
background: #ddffdd;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
Check to show: <input type="checkbox" id='enablepromo0' />
<div class="container">
<div id="PromoPanel" class="panel hidden">
<h2>Hi There</h2>Get stoked</div>
</div>
both function do the same job so i changed something to show an alert:
$(function () {
$("#enablepromo0").click(function () {
alert("dddddd")
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="checkbox" id='enablepromo0'/>
<div id="PromoPanel" style="border: 1px solid red; width:50px; heigth:50px; display:none;">uuu</div>
Move the code to its own function and call as required:
function showHide() {
if ($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
}
$(function () {
showHide();
$("#enablepromo0").click(function () {
showHide();
});
});
How i can write if #menu-drop display:block, add class to #header. else remove class from #header and follow other codes.
Thanks.
in CSS file #menu-drop {display:none}; and follow my jQuery codes it will show with slideDown event.
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document).on("click","#menu-oc",function() {
jQuery("#menu-drop").slideToggle("slow");
});
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 0) {
jQuery("#header").addClass("fixed");
jQuery("#header").addClass("goblack");
} else {
jQuery("#header").removeClass("fixed");
jQuery("#header").removeClass("goblack");
}
});
jQuery("#introcenter").animate({width: "0"},600,function (){
jQuery(".intro").animate({height : "0"},600,function () {
jQuery("#main").animate({opacity : "1"},500);
});
});
});
</script>
<body>
<div id="header">
<button id="menu-oc">HELLO</button>
</div>
<div id="menu-drop">
<div id="menu">
<jdoc:include type="modules" name="menu" style="html" />
</div>
</div>
<body>
change your JS code like this -
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 0 && (jQuery('#menu-drop').css('display') == 'none')) {
jQuery("#header").addClass("fixed");
jQuery("#header").addClass("goblack");
} else {
jQuery("#header").removeClass("fixed");
jQuery("#header").removeClass("goblack");
}
});
and then add inline style to your #menu-drop
display: none;
check this fiddle you will see the #menu-drop is displaying and the #header is not going border-color: black;
now check this fiddle, here you will see I have added an inline style display: none to #menu-drop and in this case the #header is going black!!
I think what you are looking for are jquery is-function and :visible-selector.
For example:
var $header = $("#header");
if ($("#menu-drop").is(":visible")) {
$header.addClass("myClass");
}
else
{
$header.removeClass("myClass");
}
JavaScript:
$( document ).ready(function() {
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
});
And HTML:
<table>
<tr>
<td id="one">
<div class="content" onMouseOver="show('text')" onMouseOut="hide('text')">
<h1>Heading</h1>
<p id="text">Lorem ipsum</p>
</div>
</div>
</td>
</table>
Lorem ipsum is supposed to show when the mouse hovers over the content div, but it doesn't work. It is encased in a table because there are three other content divs that make a 2 by 2 grid.
show is not on the global object, it's in a closure, so when your HTML event handlers tries to call it, it doesn't exist.
Use CSS instead
#text {
visibility: hidden;
}
.content:hover #text {
visibility: visible;
}
Your functions need to be in global scope, outside of document.ready:
$( document ).ready(function() {
//...
});
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
You need to define your two JavaScript functions outside of the jQuery environment/scope.
See below.
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
.content {
border: 1px dotted blue;
}
#text {
visibility: hidden;
}
<table>
<tr>
<td id="one">
<div class="content" onMouseOver="show('text');" onMouseOut="hide('text')">
<h1>Heading</h1>
<p id="text">Lorem ipsum</p>
</div>
</div>
</td>
</table>
It's convenient to use jQuery. Also, try not to put JavaScript directly in the HTML tags. The problem here was a scope issue.
$(".content").hover(function() {
$("#text").show();
}, function() {
$("#text").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td id="one">
<div class="content">
<h1>Heading</h1>
<p id="text">Lorem ipsum</p>
</div>
</div>
</td>
</table>
Just define the functions outside the jQuery scope.
<script>
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
I have a problem:
When I click on my '.glass' div it opens multiple '.permalinks' divs, but I just want to open the one I click.
This is my code:
<script type="text/javascript">
$(window).ready(function() {
$('.glass').click(function() {
$('.permalinks').slideToggle(function() {
});
});
});
</script>
This is the CSS:
.permalinks {
display:none;
position:absolute;top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
}
.reblog, .link, .like {
display:inline-block;
margin:2%;
margin-top:45%;
padding:7% 7% 4% 7%;
}
.reblog, .link, .like {
width:10%;
}
.reblog {
background:#317FD4;
}
.link {
background:#38C264;
}
.like {
background:#ED4A4A;
}
.glass {
position:absolute;
top:0;
left:0;
background:#f3f3f3;
}
And this the html:
<div class="permalinks">
<div class="reblog"><center><img src=""></center></div>
<div class="link"><center><img src=""></center></div>
<div class="like"><center><img src=""></center></div>
</div>
<img class="glass" src="" width="5%">
If you could tell me what I've done wrong, please.
assign the click handler to .permalinks and use $(this).slideToggle()
$(window).ready(function() {
$('.permalinks').click(function() {
$(this).slideToggle();
});
});
http://jsfiddle.net/yRFSV/
If .permalinks is a child of .glass, then it's easy:
$(window).ready(function() {
$('.glass').click(function() {
$(this).find('.permalinks').slideToggle(function() {
});
});
});
If .permalinks is a child of .glass, then you can select it directly upon click.
$('.glass').on('click', function() {
$(this).find('.permalinks').slideToggle();
});
you probably want
<script type="text/javascript">
$(window).ready(function() {
$('.glass').click(function() {
$(this).children('.permalinks').slideToggle(function() {
});
});
});
</script>
Two options:
.permalinks is after .glass in the DOM tree
Use $(this).next('.permalinks').slideToggle(function() {
.permalinks is before .glass in the DOM tree
Use $(this).prev('.permalinks').slideToggle(function() {
Jsfiddle
I trying to activate my current scroll while I am outside that scroll, specifically in #DivDet
here is what I tried:
$("div#DivDet").scroll(function () {
// I don't know what i should have here
// something like $("div#scrlDiv").scroll();
});
It sounds like you want to respond to a scroll on one div by scrolling another.
You've already determined how to hook the scroll event. To set the scroll position of an element (the other div), you set the element's scrollTop and scrollLeft values (which are in pixels). If you want two divs to scroll in near-unison, for instance, you'd assign the source div's scrollTop and scrollLeft to the target div.
Example: Live Copy | Source
Relevant JavaScript:
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
or alternately (source):
(function() {
var target = $("#target")[0]; // <== Getting raw element
$("#source").scroll(function() {
target.scrollTop = this.scrollTop;
target.scrollLeft = this.scrollLeft;
});
})();
Full page:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>Scroll Example</title>
<style>
.scroll-example {
display: inline-block;
width: 40%;
border: 1px solid black;
margin-right: 20px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<p>Scroll the left div, watch the right one.</p>
<div id="source" class="scroll-example">
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
</div>
<div id="target" class="scroll-example">
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
</div>
<script>
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
</script>
</body>
</html>
Solution with Vanilla JavaScript
const multiElementScroll = ( elem1, elem2 ) => {
elem1.onscroll = function() {
elem2.scrollTop = this.scrollTop;
};
}
multiElementScroll( div1, div2 )
section {
display: flex;
justify-content: space-between;
}
.scroll-box {
width: 200px;
height: 200px;
overflow-y: scroll;
border: 1px solid #d99;
}
.scroll-box h2 { margin-top: 50px; }
<section>
<div class="scroll-box" id="div1">
<h1>A</h1>
<h2>B</h2>
<h2>C</h2>
<h2>D</h2>
<h2>E</h2>
<h2>F</h2>
<h2>G</h2>
<h2>H</h2>
</div>
<div class="scroll-box" id="div2">
<h1>1</h1>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
</div>
<section>