Related questions

How can I do a toggle visibility version of a read more function?

2017-06-17 19:48 TheUnnamed imported from Stackoverflow

I am trying to do a toggle(hide and show) version of read more function. For now I can only show the rest of the text, not not hide it.

Any suggestions? 

$(document).ready(function(){
    var toggleReadMore = function() {
        $('#read-more').click(function(e) {
            var prev = $(this).prev();
            $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px');
            $(this).hide();
            $('#read-less').show();
        });
    };
    toggleReadMore();
}());
#p {
  height: 50px;
  overflow: hidden;
}
#read-less {
 display: none;
}
#read-more,
#read-less {
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
  color: blue;
  cursor: pointer;
  position: absolute;
  bottom: -20px;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
  <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p>
  <div id='read-more'>
    READ MORE
  </div>
   <div id='read-less'>
    READ LESS
  </div> 
</div>

1 answer

  • answered 2017-06-17 19:48 James Douglas

    Update your function to this:

    $(document).ready(function() {
  $('#read-more').click(function(e) {
    $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px');
    $(this).hide();
    $(this).next('#read-less').show();
  });
  $('#read-less').click(function(e) {
    $(this).prev().prev().css('height', '50px');
    $(this).hide();
    $(this).prev('#read-more').show();
  });
});

    You don't really need to shouldn't have the function inside a variable.

    You should also use the latest version of jQuery, which is 3.2.1 and not 2.1.1

    $(document).ready(function() {
  $('#read-more').click(function(e) {
    $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px');
    $(this).hide();
    $(this).next('#read-less').show();
  });
  $('#read-less').click(function(e) {
    $(this).prev().prev().css('height', '50px');
    $(this).hide();
    $(this).prev('#read-more').show();
  });
});
    #p {
  height: 50px;
  overflow: hidden;
}

#read-less {
  display: none;
}

#read-more,
#read-less {
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 255, 255, 1));
  color: blue;
  cursor: pointer;
  position: absolute;
  bottom: -40px;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 400px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id='wrapper'>
  <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua
    put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p>
  <div id='read-more'>
    READ MORE
  </div>
  <div id='read-less'>
    HIDE MORE
  </div>
</div>

See also questions close to this topic

  • How to get text from selected value in a dropdownlist which is js based

    Hello i have trouble getting the value out of a dropdownlist created with the plugin FacetWP. I have searched A LOT and tried a lot of different methods to get the text value out of that list but with no success. my latest try was:

    var messagepop = $(".facetwp-filter .facetwp-facet-perioxeskalipsis > .fs-label-wrap > .fs-label").text();
            alert (messagepop);

    I have no idea what else to try.. i tried siblings() find() and everything other but i was getting a blank box in the alert..any help would be appreciated!

    UPDATED: problem was due to an ajax request taking place at the time. Had to place the code a few lines further down!

    Code

  • window is not defined angular universal third library

    I am working with the library ng2-mqtt and I used it im my component like this:

     import 'ng2-mqtt/mqttws31.js';
declare var Paho: any;

    Now I am getting following error:

    ReferenceError: window is not defined
    at Object.<anonymous> (/Users/Picchu/Documents/em3/node_modules/ng2-mqtt/mqttws31.js:2143:4)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/Picchu/Documents/em3/dist/server.js:18707:18)

    How can I fix this issue?

  • Validate Form with JavaScript (valid option selected from cbx)

    HTML - this a simple html form, which I have to validate with js, please if some could help me...

    <form>
<label class="ancho">Nombre</label>
<input id="name" class="bloque" type="text" placeholder="Nicolas">
<label class="ancho">Apellido</label>
<input id="surename" class="bloque" type="text" placeholder="Oyarzun">
<label class="ancho">Edad</label>
<input id="age" class="bloque" type="number" placeholder="27" min="1" max="110">
<label class="ancho">Carrera</label>
    <select id="cbxCarrera" class="bloque">
        <option id="op0">-- Seleccione una Carrera --</option>
        <option id="op1">Programacion</option>
    </select>
    <button class="bloque boton" onclick="formulario()">Enviar</button
</form>

    JavaScript

    <script>
    var nombre = document.getElementById("name");
    var apellido = document.getElementById("surename");
    var edad = document.getElementById("age");
    var carrera = document.getElementById("cbxCarrera");
    var opcion0 = document.getElementById("op0");
    var opcion1 = document.getElementById("op1");

    function formulario() {
        while (nombre != null || apellido != null || edad > 0) {
            if (document.getElementById("cbxCarrera").value != "0") {
                // just checking if displays
                alert("nombre: " + nombre\ "apellido: " + apellido\ "edad: " + edad\ "carrera: "
                    document.getElementById(id).optSelected);
            }
        } else {
            alert("Porfavor ingrese valores validos en los campos anteriores.");
        }
    }
</script>

    how can I validate the option selected in the combobox? thanks!

  • Add Html.BeginForm with jQuery in MVC view

    I have some info boxes that all are loaded in with Ajax calling a function in my controller and then building the HTML.

    I need some edit functionality for these info boxes which will simply replace the static text with a form. I know how I would go about doing this in regular HTML but I would like to use Html.BeginForm so that I may handle it in the controller.

    This is how I wanted to load in my form (it's almost the same code as the one for loading the static info boxes)

    $.ajax({
    url: '@Url.Action("GetCustomerInfoById/")' + id,
    type: 'post',
    traditional: true,
    dataType: 'json',
    success: function (result) {
        $.each(result.CustomerInfo, function (index, customerInfo) {
            $('#infoBox' + customerInfo.ID).html(/* html form goes here */);
        });
    }
})

    This is how I want to build my form

    @using (Html.BeginForm("Index", "Customer", FormMethod.Post, new { @class = "form-horizontal" }))
{
    @model CustomerInfo

    <div class="form-group">
        @Html.TextAreaFor(m => m.InfoText, new { @class = "form-control col-12-md", @style = "max-width: none", @rows = "5" })
    </div>
    <div class="form-group">
        @Html.DropDownListFor(m => m.InfoTypeId, new SelectList(InfoTypeList, "Value", "Text"), new { @class = "form-control", @style = "max-width: none" })
    </div>
    <input type="submit" value="Gem" class="btn btn-primary" />
}
  • Trying to implement Fittext.js

    I am trying to use jQuery on my big H1 tag so that the text in the H1 tag will stay the same when resizing my browser window.

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/text.js"></script>
</head>

<body>

<div class="main">
    <section class="page" id="page1">
        <div class="test">
            <h1>exampletext</h1>

    CSS:

    .test h1 {
    width:100%;
    text-align:center;
    font-size:250px;
    text-transform:uppercase;
    letter-spacing:5px;
}

    JS:

    $( document ).ready(function() {
    $("test h1").fitText(1, { minFontSize: '20px', maxFontSize: '250px' });
});

(function( $ ){

  $.fn.fitText = function( kompressor, options ) {

    // Setup options
    var compressor = kompressor || 1,
        settings = $.extend({
          'minFontSize' : Number.NEGATIVE_INFINITY,
          'maxFontSize' : Number.POSITIVE_INFINITY
        }, options);

    return this.each(function(){

      // Store the object
      var $this = $(this);

      // Resizer() resizes items based on the object width divided by the compressor * 10
      var resizer = function () {
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
      };

      // Call once to set.
      resizer();

      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize.fittext orientationchange.fittext', resizer);

    });

  };

})( jQuery );

    It does not seem to work when I resize my browser window, what could I be doing wrong?

  • Jquery Smooth Scroll Using Offset.top

    I'm attempting to create a smooth scrolling effect from a topNav to various sections on a webpage. In the code below, I've recreated the issue I'm having, which is simply I can't seem to have the scroll process animated. My links jump to the proper sections, and I've console.logged along the way to make sure the proper elements are being grabbed at the time of the 'click' but it is still not working.

    Can anyone assist? Initially I thought it might have to do with the fact that instead of giving the navlinks individual IDs, I grouped them with a class name. Could that be part of my problem?

    $(document).ready(function() {
	
	$('.slide').click(function() {
		
		var link = $(this).attr('href');
		
		$('html,body').animate({
			scrollTop: $(link).offset().top}, 1000);
		return false;
		
		
		
		
	});
	
	
	
});
    * {
	padding: 0;
	margin: 0;
}

nav {
	width: 100%;
	height: 120px;
}

div {
	width: 100%;
	height: 500px;
}
    <nav>
	<a href="#first" class="slide">Section 1</a>
	<a href="#second" class="slide">Section 2</a>
	<a href="#third" class="slide">Section 3</a>
	<a href="#fourth" class="slide">Section 4</a>
</nav>

<div>
	<a name="first">Section 1</a>
</div>

<div>
	<a name="second">Section 2</a>
</div>

<div>
	<a name="third">Section 3</a> 
</div>

<div>
	<a name="fourth">Section 4</a>
</div>

  • CSS select object between two <br>

    Very very new to CSS and HTML language, I might say a lot of non-sense. And I really can't find the answer that I'm look for. I think it's because I don't know how to search correctly... lacking of vocabulary...So please forgive me. So I'm doing some web scraping on R with rvest package. I want to select the line between two br lines as follow : 

    <div class="description">
   <a href= "blabla" title ="a wonderful apple cultivated by snow 
   white herself" data-position = "1">  
   <span class="origine"> snow white</span>    
   </a>
    <br>
    "a wonderful apple cultivated by snow white herself"
    <br>
    <span class="price">€5,000</span>
    <br class="clearboth">
    <span class="slug"> Exclusivité</span>
</div>

    So I'm basically trying to extract the line "a wonderful apple cultivated by snow white herself" not int the title but between the two lines of br... I tried to use the following code in R

    description_node_html <- html_nodes(page,"br *")
description_node_html <- html_nodes(page,"br~br")
description_node_html <- html_nodes(page,"div br")

    or even this one inspired by a research result

    description_node_html <- html_nodes(page,"('br').nextUntil('br')")

    Unfortunately non of them work. At the best I selected empty spaces... So would you please tell me how to select this line between two lines of br please ? Thanks a lot

  • Styleswitcher with jquery

    Hi I'm a coding newbie and have a few questions.

    I want to create a script to change the colors of my style that i created for phpBB with jQuery. There is one main color (orange) and what i want to do is to add a few buttons with other colors variants so when you clink on one it changes that orange color to let say green.

    I found this script:

    <a href="#">Link</a><br><br> <button>Change hover color with JavaScript</button>

    And it's working as intended but I would like to expand it by adding more buttons with different colors and cookie option so it saves the color option you picked. This is so you won't have to pick it every time you refresh the page.

    So my question is what i need to add to that script to make it work?

  • How to fix row to bottom of page in Bootstrap

    I have worked with bootstrap i want to give last row of the page is given to the bottom of the page and that row is fixed and also in responsive size.