Good day, I'm trying to figure out how to do small thing.
I have several elements on page that needs to checked on height and if height is higher, for example > 100, then I need to call function for them.
So far I came up to this:
var filterHeight = $('div.class').height();
if (filterHeight > 100) {
$('div.class').css('height', '100px');
$('div.class').css('overflow-y', 'scroll');
}
Problem with that as you know is that it will add those params to all element because I strictly point to that.
I guess it I will need to do something with .each(), but...
Thank you for your suggestions and help.
Because I can't answer my own question I'm updating here.
I used your solution and change it a little bit, instead adding inline css I added class that fetch css.
So what I did is:
1) When page loads
$('div.class').each(function() {
if ($(this).height() > 200) {
$(this).addClass('scroller');
}
});
.scroller {
height: 200px;
overflow-y: scroll !important;
}
So it checked all blocks with height more than 200px and adds class.
2) After I'm calling for Ajax/JOSN and it gives me new data for those blocks I was in need to check for those elements heigh changes. So on .ajax complete I removed class and check again.
complete: function () {
$('.box.refine .middle ul').removeClass('scroller')
$('.box.refine .middle ul').each(function() {
if ($(this).height() > 200) {
$(this).addClass('scroller');
}
});
}
Thats all.
You need to look at jQuery .each()
Something like:
$('.check-these').each( function(){
if ($(this).height() > 100) {
$(this).css('height', '100px');
$(this).css('overflow-y', 'scroll');
}
});
This isn't tested but should put you on the right track.
$('div.class').each(function(){
if($(this).height() > 100)
{
$(this).css({height: "100px", overflow-y: "scroll"});
}
});
Loop through the elements and check each individually:
$('div.class').each(function() {
if ($(this).height() > 100) {
$(this).css('height', '100px').css('overflow-y', 'scroll');
}
});
But why not just put that in the css to begin with?
div.class {
height: 100px;
overflow-y: scroll;
}
Related
Im creating a fixed header where on load, the logo is flat white. On scroll, it changes to the full color logo.
However, when scrolling back to the top, it stays the same colored logo instead of going back to white.
Here's the code (and a pen)
$(function() {
$(window).scroll(function() {
var navlogo = $('.nav-logo-before');
var scroll = $(window).scrollTop();
if (scroll >= 1) {
navlogo.removeClass('.nav-logo-before').addClass('nav-logo-after');
} else {
navlogo.removeClass('.nav-logo-after').addClass('nav-logo-before');
}
});
});
http://codepen.io/bradpaulp/pen/gmXOjG
There's a couple of things here:
1) You start with a .nav-logo-before class but when the logo becomes black you remove that class and then try to get the same element using a class selector that doesn't exist anymore
2) removeClass('.nav-logo-before') is different than removeClass('nev-logo-before), notice the "." in the first selector.
3) You get the element using the $('.selector')in every scroll event, this can be a performance issue, it's better to cache them on page load and then use the element stored in memory
4) It's not a good practice to listen to scroll events as this can be too performance demanding, it's usually better to use the requestAnimationFrame and then check if the scroll position has changed. Using the scroll event it could happen that you scroll up really fast and the scroll event doesn't happen at 0, so your logo won't change. With requestAnimationFrame this can't happen
$(function() {
var navlogo = $('.nav-logo');
var $window = $(window);
var oldScroll = 0;
function loop() {
var scroll = $window.scrollTop();
if (oldScroll != scroll) {
oldScroll = scroll;
if (scroll >= 1) {
navlogo.removeClass('nav-logo-before').addClass('nav-logo-after');
} else {
navlogo.removeClass('nav-logo-after').addClass('nav-logo-before');
}
}
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
});
body {
background-color: rgba(0,0,0,.2);
}
.space {
padding: 300px;
}
.nav-logo-before {
content: url(https://image.ibb.co/kYANyv/logo_test_before.png)
}
.nav-logo-after {
content: url(https://image.ibb.co/jYzFJv/logo_test_after.png)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img class="nav-logo nav-logo-before">
</div>
<div class="space">
</div>
Dont need to add the dot . in front of the class name in removeClass and addClass:
Use this:
navlogo.removeClass('nav-logo-before')
Secondly, you are removing the class that you are using to get the element in the first place.
I have an updated codepen, see if this suits your needs: http://codepen.io/anon/pen/ZeaYRO
You are removing the class nav-logo-before, so the second time the function runs, it can't find any element with nav-logo-before.
Just give a second class to your navlogo element and use that on line 3.
Like this:
var navlogo = $('.second-class');
working example:
http://codepen.io/anon/pen/ryYajx
You are getting the navlogo variable using
var navlogo = $('.nav-logo-before');
but then you change the class to be 'nav-logo-after', so next time the function gets called you won't be able to select the logo using jquery as it won't have the '.nav-logo-before'class anymore.
You could add an id to the logo and use that to select it, for example.
Apart from that, removeClass('.nav-logo-before') should be removeClass('nav-logo-before') without the dot before the class name.
The problem is that you removes nav-logo-before and then you want to select element with such class but it doesn't exist.
I've rafactored you code to avert it.
Another problem is that you uses dot in removeClass('.before') while it should be removeClass('before') - without dot
$(function() {
var navlogo = $('.nav-logo');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
navlogo.removeClass('before').addClass('after');
} else {
navlogo.removeClass('after').addClass('before');
}
});
});
body {
background-color: rgba(0,0,0,.2);
}
.space {
padding: 300px;
}
.before {
content: url(https://image.ibb.co/kYANyv/logo_test_before.png)
}
.after {
content: url(https://image.ibb.co/jYzFJv/logo_test_after.png)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img class="nav-logo before">
</div>
<div class="space">
</div>
I want to add a class .custom-menu-bg to sticky menu .custom-menu on scroll, while having overflow: hidden on body. Here's my code :
<script type="text/javascript" src="css/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var _rys = jQuery.noConflict();
_rys("document").ready(function() {
_rys(window).scroll(function() {
if (_rys(this).scrollTop() > 1) {
_rys('.custom-menu').addClass("custom-menu-bg");
} else {
_rys('.custom-menu').removeClass("custom-menu-bg");
}
});
});
</script>
But this code doesn't work with overflow: hidden on body tag
so I tried :
$('html').on('DOMMouseScroll', function(e) {
var delta = e.originalEvent.detail;
if (delta < 0) {
if ($('body').hasClass('section-element-1'))
$('.custom-menu').addClass("custom-menu-bg");
} else if (delta > 0) {
$('.custom-menu').removeClass("custom-menu-bg");
}
});
But this code only works for Mozilla and it's not a solution even, it's just a temp fix or work-around.
What I want is when I scroll down $('.custom-menu').addClass("custom-menu-bg"); i.e. custom-menu-bg class gets added to custom-menu.
And when I scroll up to the top $('.custom-menu').removeClass("custom-menu-bg"); i.e. custom-menu-bg class gets removed from custom-menu.
The top of body,document,window etcetera is always 0.
And top of my div with class custom-menu also has top: 0 always.
I'm looking for a permanent solution which works on all browsers.
I've reproduced the same effect you wanted HERE.
The only change that I've brought in comparison to your code is that I've made a makeshift body div and applied overflow: hidden on it.
Then, using jQuery, you'll be checking for the scroll event triggered by a wrapper inside the body div - which is in charge of holding the content) - and not by itself (or even document).
$('.wrapper').scroll(function () {
if ($(this).scrollTop() > 0) {
$('.custom-menu').addClass("custom-menu-bg");
} else {
$('.custom-menu').removeClass("custom-menu-bg");
}
});
This is because the makeshift body div has an overflow property set to hidden, and therefore won't generate that particular scroll event (maybe it would if you had the handler registered using browser-specific scroll events). Whereas the inner wrapper div will always have it's height property determined by it's content and is therefore scrollable.
NOTE: jQuery's scroll() is cross-browser, and hence a permanent solution.
You can bind on any id or on class also . its on you for now demo i
am using window .
This single event works for both if you have scroll or not. i.e overflow:hidden or overflow:scroll
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
$('.custom-menu').removeClass("custom-menu-bg");
}
else {
// scroll down
$('.custom-menu').addClass("custom-menu-bg");
}
});
.custom-menu {
background-color: black;
height: 100px;
width: 100%
}
.custom-menu-bg{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-menu">
</div>
Or you can also use this jQuery mousewheel plugin https://github.com/brandonaaron/jquery-mousewheel.
//toggled is class when mobile menu is opened
let moveScroll = '';
window.onscroll = function (e) {
const navBar = document.getElementById('id-of-your-navigation-bar');
if (moveScroll > 0 && navBar.classList.contains('toggled')) {
navBar.classList.remove('toggled');
moveScroll = 0;
} else if (navBar.classList.contains('toggled')) {
moveScroll = 1;
}
};
I am trying in jQuery to click a link and the content within it then comes in to 0px from the right of the screen. Then when you click it again, It closes, a kind toggle effect.
My current jQuery is:
$('.bet-slip-outer').click(function() {
// Responsive Stuff...
var windowwidth = $(window).width();
$('.bet-slip').animate({
'right': '-240px'
});
}, function() {
$('.bet-slip').animate({
'right': '0px'
});
});
However when I click the .bet-slip the right:-240 just seems to take precedence.
What am I doing wrong?
Cheers
with conditional:
define right style.
<div class="bet-slip" style="right:0px;"></div>
jquery
$('button').click(function() {
if($('.bet-slip').css('right') === '0px' ){
$('.bet-slip').animate({'right':'-240px'});
} else {
$('.bet-slip').animate({'right':'0px'});
}
});
other
only style:
$('button').click(function(){
$('div').toggleClass('right');
});
div{
position:relative;
width:100px;
height:10px;
background:green;
right:-100px;
transition:1s;
}
.right{
right:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
<button>
f
</button>
Use a variable to check if the element has been clicked yet.
toggle = "on";
$('.bet-slip-outer').click(function() {
// Responsive Stuff...
var windowwidth = $(window).width();
if(toggle == "on"){
$('.bet-slip').animate({
'right': '0px'
});
toggle = "off";
}else{
$('.bet-slip').animate({
'right': '-240px'
});
}
});
According to the official documentation, the .click() method only accepts a single handler. You cannot declare two different handlers for that purpose. There are two solutions to that — one is to delegate the animation to CSS, and use .toggleClass() instead, or to use stateful code:
Store the toggle status of the element in its own jQuery data object
Read the data object. If it doesn't exist or is 0, do something (condition 1)
If it exists and is 1, do something else (condition 2)
You can of course modify the binary conditions 1 and 2 into the effect you want to achieve.
In addition, in order to prevent jerky animation due to rapid clicking/toggling, you should stop the animation before you more animations to the queue. This is done by chaining .stop(true, true) to the object.
$(function() {
$('.bet-slip-outer').click(function() {
// Check state
if(!$(this).data('toggle') || $(this).data('toggle') == 0) {
$(this).data('toggle', 1);
$('.bet-slip').stop(true, true).animate({
'right': '-240px'
});
} else {
$(this).data('toggle', 0);
$('.bet-slip').stop(true, true).animate({
'right': '0'
});
}
});
});
.bet-slip {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bet-slip-outer">
<div class="bet-slip">bet-slip</div>
</div>
QUITE HARDING-CODING STYLE VARIABLES IN JS!
You could do something like:
$( ".bet-slip-outer .bet-slip" ).toggleClass( "animation" );
Then in your CSS you would do:
.bet-slip-outer .bet-slip { right: 0px;}
.animation { right: -240px;}
Why to use this option over others?
Your not hard-coding STYLE variables in your java-script your leaving that to CSS (what it's made for). As the project grows if you keep hard-coding it will eventually make your JS code base 'smell.' IE: I pain to change down the road!
I'm trying to adapt this JSFiddle to make the menu button on my website hide when I'm at the top of the page and show when I start scrolling down.
I modified the JS to match the CSS on my site. Then I placed it in tags in the head of my page
var $scb = $('<div class="toggle-menu-wrap"></div>');
$('.top-header').append($scb);
var $ccol = $('.content');
$ccol.scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
However, it still doesn't work. Am I making a mistake in how I'm modifying the JS to fit my CSS?
You can include the toggle-menu-wrap element in your HTML from the start. There is no need to insert it using JS.
Write the one line of CSS you need, which is to hide the element from the beginning
.toggle-menu-wrap {
display: none;
}
Your version of jQuery uses 'jQuery' instead of '$' to reference itself. I would also re-write your JS like:
jQuery(document).ready(function() {
fadeMenuWrap();
jQuery(window).scroll(fadeMenuWrap);
});
function fadeMenuWrap() {
var scrollPos = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPos > 300) {
jQuery('.toggle-menu-wrap').fadeIn(300);
} else {
jQuery('.toggle-menu-wrap').fadeOut(300);
}
}
Like #murli2308 said in the comments above, you need to attach a scroll event listener to the window:
$(document).ready(function () {
var $scb = $('<div class="scroll-border"></div>');
$('.above').append($scb);
var $ccol = $('.content');
$(window).scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
})
Wrapping your code in $(document).ready() would also be a good idea.
The reason $ccol.scroll(function() { ... works in that fiddle is because of the CSS:
.content{
height: 200px;
width: 200px;
overflow: auto;
}
Notice overflow: auto;. This causes that specific div to be scrollable. However, on your website, you scroll the entire page, not $ccol. This means the event handler will never fire a scroll event (since $ccol will never scroll).
You might have forgotten to link Jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Link this inside your head tag incase.....
This should do the job:
$(window).scroll(function(e){
if ($(this).scrollTop() > 0) {
$(".your_element").css("display", "block");
} else {
$(".your_element").css("display", "none");
}
});
When user scroll and
navmenu
come to
margin-top 20px
, then the menu will stop and be fixed. How i can to that? navmenu is Div id of my menu. I try all ways and I can not figure out.
Here is code that i need ...
$("navmenu").scrollTop(function () {
var height = $("navmenu").scrollTop();
alert(height);
if (height > 20) {
/* need help here */
}
});
Sample Fiddle
This works on scrolling on the page itself, you may want to adjust if you're referring to scrolling specific element.
CSS
#navmenu {
width:100%;
height:20px;
background:grey;
position:relative;
}
jQuery
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 20) {
$('#navmenu').css('position', 'fixed');
} else {
$('#navmenu').css('position', 'relative');
}
});
navmenu is Div id of my menu
The selector navmenu will match <navmenu> elements (which do not exist in HTML).
You want #navmenu.