Tag: Jquery

Posted on by — Leave a comment

How to display a page in a modal window popup

Jquery

In this post we will tell you about method of using Modal box to display a complete .HTML file in Modal box rather opening it in new window or tab.

There are a few different ways to do this, but the best way is to use an AJAX request to the page using.

Jquery:

$.post("ajax.html", function(data){

    $("#myModalDiv").html(data).fadeIn();

});

Then to bind this to your anchor, assign it an ID and do this in your $(document).ready():

$(document).ready(function(){

    $("a#someId").on("click", function(){

        //Put the code from above here.

    });

});

Note that this will only work for files on the same domain.

If you want to use files on a different domain, you will have to use an iframe.

Posted on by — 4 Comments

Scaling Images With Jquery (Resize Image on Hover)

Jquery

Using only JQuery you can use the hover() listener for mouseenter and mouseleave events and manage the CSS properties also with JQuery using css() method. For scaling an element you can use the CSS transition in conjunction with transform: scale(<some_number>) properties. Check next example for better understanding:

HTML :

<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="col-lg-6 order-lg-2">
   <div class="img-wrapper p-5 text-center bg-info">
     <img class="img-fluid rounded-circle" src="https://picsum.photos/200/300/?random" alt="Askbootstrap.com">
   </div>
</div>

Javascript/Jquery:

$(document).ready(function()
{
    $(".img-wrapper").find("img").css("transition", "transform 500ms ease-in-out");

    $(".img-wrapper").hover(    
        // Handler for mouseenter
        function()
        {
            $(this).find("img").css("transform", "scale(1.2)");
        },
        // Handler for mouseleave
        function()
        {
            $(this).find("img").css("transform", "scale(1)");
        }
    );
});

Output: