CODEWITHSUNDEEP
phphtmlcssbuttonelement
Nathan
Nathan

Reputation: 1

Adding elements to a state changing button Html

/* css for button to change size on click */
.button:focus {
   width: 99%;
   height: 500px;
   }

//below is the script that handles the auto scroll to the button clicked on screen.
  $(document).ready(function () {
$('.button').click( function() {
    $('html,body').animate({ scrollTop: $(this).offset().top - (($(window).height()/1.5) - $(this).outerHeight(true) ) / 2  }, 2000);
    $(this).empty(); //empty title and author to prepare for recipe
        $(this).append("Recipe Instructions Below");

});
});

On a website I am building I pull the most recent information added to the database and display each row in a button that is clickable. My goal here is that the button starts off around 100px by 60px and when clicked "focused" will grow to the width of the screen.

Now when I click the button I want to empty out the button and replace it with more information from the database i.e. the instructions for the recipe clicked. When I then unfocus or click out of the button I would like for it to return to its original state where it just displays the recipe name and author.

The way I am looking at this is that the buttons are objects but I think that is very wrong. If possible can anyone give me any feedback on a smart and more effective way to go about this because my only issue is adding more elements to the button when clicked. I would really appreciate any feedback.

Here is a small demo https://jsfiddle.net/DxKoz/twj7m2sb/1/

Upvotes: 0

Views: 48

Answers (2)

Oen44
Oen44

Reputation: 3206

This should do the thing.

$(document).ready(function () {
    $('.button').click( function() {
    var btn = $(this);
    $('html,body').animate({
        scrollTop: $(this).offset().top - ( ($(window).height()/1.5) - $(this).outerHeight(true) ) / 2

    }, 2000,
    function() {
        btn.html("Recipe Instructions Below"); //html() so you don't have to use empty()
    });

});

If you have more buttons to add, then use for loop, name every button with id=loop number. For example:

for(var i=1; i<buttons.length; i++ ) {
    $('#buttons-list').append('<button id="' + i + '">' + Recipe Name + Author Name + '</button>');
}

$('button').click(function() {
    var button_nr = $(this).id;
    $('#'+button_nr).html("Recipe Instructions Bellow"); //html() so you don't have to use empty()
});

Using var button_nr = $(this).id you can get number of button, and then, for example, save Recipes in array and by using button_nr print it.

Upvotes: 1

Sterling
Sterling

Reputation: 36

I wouldn't use empty. Instead, have two DIVs within your button class and toggle their visibility based on the active state of your button, using the onclick and blur events. Since you're using jQuery, you can use children() to target the classes within the button (in case you have more than one on a page it won't trigger all of them.)

See https://jsfiddle.net/jzuegnkx/1/

HTML:

<body>
 <button class="button">
   <div class="title">
     Recipe name<br />
     By: Author
   </div>
   <div class="details">
     Recipe Details
   </div>
 </button>
</body>

CSS:

I only added one class, to default details to display: none.

.details {
  display: none;
}

Javascript:

$(document).ready(function () {
    $('.button').click( function() {
    $('html,body').animate({ scrollTop: $(this).offset().top - ( ($(window).height()/1.5) - $(this).outerHeight(true) ) / 2  }, 2000);
        //$(this).empty(); //empty title and author to prepare for recipe.
        //$(this).append("Recipe Instructions Below");
    $(this).children('.title').hide();
    $(this).children('.details').show();
   });
  $('.button').blur(function() {
    $(this).children('.details').hide();
    $(this).children('.title').show();
    });
});

Upvotes: 0

Related Questions