logo
down
shadow

slideDown() not working when css is set to display:none


slideDown() not working when css is set to display:none

By : user2953767
Date : November 21 2020, 01:01 AM
I wish this help you Well the issue is inline does not have a height so it is hard to animate an element that does not have a height. So instead of animating the content that you are showing, animate the parent
code :
var minimized_elements = $('p.minimize');

minimized_elements.each(function () {
    var t = $(this).text();
    if (t.length < 325) return;

    $(this).html(
    t.slice(0, 325) + '<span class="elip">... </span><a href="#" class="more">more</a>' +
        '<span class="overflow" style="display:none;">' + t.slice(325, t.length) + ' <a href="#" class="less">less</a></span>');

});

$('a.more', minimized_elements).click(function (event) {
    event.preventDefault();
    var anchor = $(this);
    var para = anchor.closest(".minimize");  //the parent wrapper
    
    para.find(".elip, .more").hide();
    para.find(".less").show();
  
    var currentHeight = para.height();
    para.data("height", currentHeight);
 
  
    para.height(para.height()).css("overflow","hidden");  //set the parent height and set overflow to hidden
    para.find(".overflow").css("display","inline");  //show the hidden text (really should have a class)
    para.animate({  //use animate instead of slide down, use the scrollHeight to know where to stop
        height : para[0].scrollHeight
    }, 500, "swing", function() {
        para.height("auto");  //reset height when done
    });
});

$('a.less', minimized_elements).click(function (event) {

    event.preventDefault();
    var anchor = $(this);
    var para = anchor.closest(".minimize");  //the parent wrapper
    
    para.find(".less").hide();

  
  
    para.animate({  //use animate instead of slide down, use the scrollHeight to know where to stop
        height : para.data("height"),
    }, 500, "swing", function() {
        para.find(".overflow").hide();
        para.find(".elip, .more").show();
        para.height("auto");  //reset height when done
    });

    
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="minimize">Lorem ipsum dolor sit amet, justo laoreet eu qui. Iudicabit torquatos cu sit, at prompta fastidii fabellas mei. Cum laudem meliore reformidans cu, quas verear fabellas sed at. Et wisi invidunt apeirian nec, te tota altera postulant mea, mel ne possim omnesque. Meis molestie patrioque sea in, vero gubergren sed eu, id vim modus electram. Mei aeque omittam instructior ei. Lorem ipsum dolor sit amet, justo laoreet eu qui. Iudicabit torquatos cu sit, at prompta fastidii fabellas mei. Cum laudem meliore reformidans cu, quas verear fabellas sed at. Et wisi invidunt apeirian nec, te tota altera postulant mea, mel ne possim omnesque. Meis molestie patrioque sea in, vero gubergren sed eu, id vim modus electram. Mei aeque omittam instructior ei.</p>


Share : facebook icon twitter icon
slideDown forces display:block

slideDown forces display:block


By : Supa
Date : March 29 2020, 07:55 AM
Does that help Try using the animate method instead of slideDown. You'll need to do a bit more manual definition of the effect you want, but it won't introduce the display:block that's giving you trouble.
Quoted from http://api.jquery.com/animate/:
display:none and jquery show/slideDown

display:none and jquery show/slideDown


By : user2814642
Date : March 29 2020, 07:55 AM
it fixes the issue The reason behind this is CSS classes will be specifying the display: none; in the first case, but jQuery thinks the element is visible. To handle this, the best way to do is to define a class .hidden, which equates to display: none; and then assign the class to the #example.
code :
.hidden {display: none;}
$(document).ready(function () {
    $(".hidden").hide().removeClass("hidden");
});
$(document).ready(function () {
  $("#trigger").click(function () {
    $("#theDiv").toggle();
    return false;
  });
});
#theDiv {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" id="trigger">Show / Hide</a>
<div id="theDiv">
  <p>Hello</p>
</div>
$(document).ready(function () {
  $(".hidden").hide().removeClass("hidden");
  $("#trigger").click(function () {
    $("#theDiv").toggle();
    return false;
  });
});
.hidden {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" id="trigger">Show / Hide</a>
<div id="theDiv" class="hidden">
  <p>Hello</p>
</div>
JQuery .hover slideDown slideUp working but ,click not working

JQuery .hover slideDown slideUp working but ,click not working


By : Samyak
Date : March 29 2020, 07:55 AM
around this issue The click() method takes only one parameter as its argument. You can use slideToggle() and toggleClass()
code :
$(document).ready(function () {
   $('.navbar-default .navbar-nav > li.dropdown').click(function () {
      $('ul.dropdown-menu', this).stop(true, true).slideToggle('fast');
      $(this).toggleClass('open');
   }); 
});
jQuery slideDown ($.slideDown) animated error: Uncaught TypeError: Cannot read property 'style' of undefined

jQuery slideDown ($.slideDown) animated error: Uncaught TypeError: Cannot read property 'style' of undefined


By : Julius Mateo
Date : March 29 2020, 07:55 AM
help you fix your problem Finally solved. It was not conflict with Angular, but with a loaded jQuery library (http://rocha.la/jQuery-slimScroll) When running $.slimScroll thebody tag was overwritten for the slim effect in the scroll and this caused window.document.body to be null. Removed library and everything working.
Is it possible for jQuery slideDown() function to apply display:flex property instead of display:block?

Is it possible for jQuery slideDown() function to apply display:flex property instead of display:block?


By : Blackfairy Mortal
Date : March 29 2020, 07:55 AM
hope this fix your issue I have this: , Please try the following start callback:
code :
$(".item").slideDown({
  start: function () {
    $(this).css({
      display: "flex"
    })
  }
});
Related Posts Related Posts :
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • store newline character with string in a variable
  • MP4 videos in Flowplayer does not play in Windows 7 Chrome
  • jquery focusin event not firing
  • 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?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org