logo
down
shadow

Scroll body to first item in array from A-Z toggle


Scroll body to first item in array from A-Z toggle

By : user2955188
Date : November 22 2020, 10:38 AM
will help you It looks like your problem has to do with what you are doing inside the for loop.
Here is a fiddle that works: http://jsfiddle.net/7w6yujaw/1/
code :
var foo = ['Afoo', 'amoar', 'apoo'];

$('a').on('click', function () {

    var alpha = $(this).text();
    var res = [];

    for (var i=0, len=foo.length; i<len; i++) {

        if (foo[i].indexOf(alpha) === 0) {
            res.push(foo[i]);
            break;
        }
    }

    $('body').animate({scrollTop: $("#" + res[0] + "").position().top + 24}, 650);
});
var foo = ['Afoo', 'amoar', 'apoo'];

$('a').on('click', function () {

    var alpha = $(this).text();

    for (var i=0, len=foo.length; i<len; i++) {

        if (foo[i].indexOf(alpha) === 0) {

            $('body').animate({scrollTop: $("#" + foo[i] + "").position().top + 24}, 650);

            break;

        }
    }

});


Share : facebook icon twitter icon
css, fixed item not causing body to scroll (getting cut off)

css, fixed item not causing body to scroll (getting cut off)


By : user2903114
Date : March 29 2020, 07:55 AM
it fixes the issue Fixed items are taken out of the document flow, so even if its dimensions exceed those of the viewport, the containing element (be it or any other descendants) will not accommodate it with scrollbars.
To put it in another way, the element would have no access to the dimensions of the position: fixed element, and therefore assigning overflow property on the body will not have any effect of allowing users to access hidden content of said element.
code :
.globalMenu
overflow-y: auto;
position: fixed
top: 75px
left: 50%
width: 350px
margin-left: -175px
height: auto
padding: 5px
z-index: 1001
background-color: #28282e
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
@media screen and (max-width: 600px)
    width: 100%
    margin-left: 0
    left: 0
How to toggle overlay with no body scroll using the same button / div

How to toggle overlay with no body scroll using the same button / div


By : gorbin
Date : March 29 2020, 07:55 AM
wish help you to fix your issue One solution is to not have the overlay take up the entire page in the front. You could achieve this by onclick, setting the body background color to be the desired border color, removing the border from the pop up, and replacing the border dimensions with margin dimensions.
Store scroll position before body fadeOut, then return scroll position after body fadeIn?

Store scroll position before body fadeOut, then return scroll position after body fadeIn?


By : theninthbit
Date : March 29 2020, 07:55 AM
To fix this issue I have updated your fiddle. Please check this
code :
    var oldScrollposition = 0;
$('#open-menu').click(function() {

  if($('.site-wrapper').is(":visible")){
    oldScrollposition = $(document).scrollTop();
  }

    $('.site-wrapper').fadeToggle('fast');
    $('.mob-menu').fadeToggle('fast');

  $(document).scrollTop(oldScrollposition);
});
How to disable scroll of body while scrolling on a fixed div without hiding scroll bar of body?

How to disable scroll of body while scrolling on a fixed div without hiding scroll bar of body?


By : JyOti Tyagi
Date : March 29 2020, 07:55 AM
Hope this helps How can I prevent scrolling of body when i scroll on a fixed div. I tried overflow:hidden of body, it works perfectly except that the page is shaking when the scroll bar is removed. is there a way to keep scroll bar and prevent scrolling? , I solved it with this code:
code :
<script>
    $(document).ready(function(){

    $(document).on('mousewheel',".dropdown-menu-rightt", function(e){
        e.stopPropagation();
       $(this).scrollTop($(this).scrollTop()-e.originalEvent.wheelDeltaY);
      //prevent page fom scrollin
      return false;
   });
   });
   </script>
Not able to scroll through body after closing toggle

Not able to scroll through body after closing toggle


By : user3299435
Date : March 29 2020, 07:55 AM
With these it helps I prevented the user to scroll through the HTML body once they open the toggle using jQuery. However, I am struggling in enabling the scrolling back once the toggle is closed. I think I should use two jQuery classes in , You can also use :
code :
$("body").toggleClass("hidden");
.hidden {
  overflow: hidden;
}
Related Posts Related Posts :
  • How to debug Vue application with google chrome
  • html 5 web app cache download complete javascript alert?
  • Ember.js setupController fired only once
  • How to validate a currency input
  • How to convert my Array of data to key & value pair
  • Statistics circles in CSS
  • So I wanted to make a trig solver in javascript?
  • Showing HighCharts series name on x-axis and in legend
  • In Rails, how can we pass parameters in script?
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • How to animate the width of a div slowly with jquery
  • JavaScript + RegEx Complications- Searching Strings Not Containing SubString
  • SignalR - Unable to get property 'client' of undefined or null reference
  • full calendar not displaying when loaded (with backbone)
  • Angular: Update service and share data between controllers
  • ReplaceAll Google script
  • Search for matching LI items in separate UL
  • Access arguments of an... argument
  • Customizing Google custom search jsapi (query strings)
  • React | Can´t load Images > Module not found
  • Dynamically creating buttons in DOJO
  • 404 Not Found in AJAX post call
  • How do I find out, using javascript, what software opened and running my application?
  • Javascript to check the status of wireless connection
  • StarDict support for JavaScript and a Firefox OS App
  • Phonegap event Resume
  • call javascript function on ENTER key press?
  • When is the best time to remove no-js classes from the html tag
  • Recommended email sending languages
  • setInterval not working properly with chrome
  • Does IE create new scope for each script tag?
  • Uncaught SyntaxError: Unexpected token < Underscore and parse issues
  • How to pass captured URL to Email Body in HTML
  • How to structure default nested resources?
  • Store all the keys of a JSON object in a variable
  • Need an efficient way to group the Array of object in javascript
  • a sensible approach to highcharts x-axis labels
  • IDE autocompletion for javascript AMD loading style
  • Bootstrap menu disappears after first click setting the ul style to none
  • split ajax json response errors in each field
  • how to add javascript in head in cmsms
  • REGEX: Finding the correct occurrence order of some given special characters in a string
  • How do you preserve a JavaScript date's time zone from browser to server, and back?
  • Return binary result from phantomjs webserver
  • must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
  • Replacing a substring of an element's text with another string
  • How do I filter marks greater than or equal to 90 in this array?
  • Modify the text of my radio input button?
  • Clicking on status bar does not scroll to top of app (Trigger.io)
  • Mocha JS: How to highlight specific assertion failure?
  • $.getJSON jquery parsing to HTML
  • Find items of a certain class (a) that are also in other classes (b,c,d)
  • Setting different images for D3 force-directed layout nodes
  • Integrating Dropzone.js with angular
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org