jquery code not working on window ready. Also i want to create a button to close the enlarge div

Question

I am working on an web app, with 4 boxes on each page, pages are loading from external html example file code.

$(document).ready(function(){                       
      // Load Home Content
       $('#content').load('pages/sample.html');

      //Load Content Using Menu Links
      $('.main-menu a').click(function(){
        var page = $(this).attr('href');
        $('#content').load('pages/' + page + '.html');
        return false;
      });
});

Now i have made 4 divs of equal size and height. On click of any div it enlarges and attain the height and width of the parent. Using the code. The clicked div will be enlarged and other divs will be hidden.

  $(window).load(function(){
    $(".box").click( function() {
    var width = $('.boxes').innerWidth() + 'px',
        height = $('.boxes').innerHeight() + 'px';
        console.log(width);
        console.log(height);
    $(this).animate(
    {
      "height": height,
      "width": width
    },500);

    $(this).find(".box-container").hide();
    $(this).find(".box-content").show();

    $(".box").not(this).hide();



});  

  });

But there are some problems.

The div enlarge code is not working on ready function, it works only one time and then it stop working.
Secondly i need help in creating a close button so i can reverse the above function.
Last is there way that i can navigate between these divs without closing from one enlarge div to another enlarge div content.

I have added 2nd code on the fiddle i need to help. But its not working there. https://jsfiddle.net/qxdhs2kv/ — CreativeDip, Jun 17 '16 at 18:08
For 1. it only work once because it set to run on window load and that event only occur once as you're loading other pages using AJAX. Make it a function and call it after each AJAX load instead of window load. — GillesC, Jun 17 '16 at 18:09

score 0 · Answer 1 · answered Jun 17 '16 at 18:34

Here is your answer: https://jsfiddle.net/sesn/vyap44z3/

$(window).load causes the problem.
I have added close button to remove enlarged on and show all the boxes.

For navigation, U can next and previous button and code it with logic. I have not coded it. U can use ur logic depending upon ur needs

$(function(){
$(".box").click( function() {
$(this).addClass('enlarged');
var width = $('.boxes').innerWidth() + 'px',
    height = $('.boxes').innerHeight() + 'px';
    console.log(width);
    console.log(height);
$(this).animate(
{
  "height": height,
  "width": width
},500);

$(this).find(".box-container").hide();
$(this).find(".box-content").show();

$(".box").not(this).hide();

});

$('.close').click(function(){ var hgt = $('.box:not(.enlarged)').height(); $('.enlarged').animate({ "height": hgt, "width": "200px" }); $('.enlarged .box-container').fadeIn(); $(".box").fadeIn(); });

});

Thanks a lot bro, I have fixed the load issue, thanks for the close button code, Much Appreciated. — CreativeDip, Jun 17 '16 at 18:39

score 0 · Accepted Answer · answered Jun 17 '16 at 19:02

0

Heres what i would do:

$(document).ready(function(){
     var $currentBox = false;
     var open = false;//this will help close the large div view
     var origHeight = $('.box').innerHeight() + 'px';
     var origWidth = $('.box').innerWidth() + 'px';

     $(".box").click( function() {
        if(open){
           $currentBox = false;
           $(this).animate({
               "height": origHeight,
               "width": origWidth
           },500);
           $(".box").show();
           $(".box-container").show();
           open = false;
        }else{
           $currentBox = $(this);
           var width = $('.boxes').innerWidth() + 'px',
           height = $('.boxes').innerHeight() + 'px';
           $(this).animate({
             "height": height,
             "width": width
           },500);

           $(this).find(".box-container").hide();
           $(this).find(".box-content").show();

           $(".box").not(this).hide();
           open=true;
        }
     });  
     //listen to left and right key events
     window.addEventListener( 'keydown', function( e ) { 
        if($currentBox!=false){//if full box view     
           if (e.keyCode == '39') {//key left
              //code to show prev box  
               e.preventDefault();
           }else if (e.keyCode == '37') {//key right
              //code to show next box  
              e.preventDefault(); 
           } 
        }
     });
 });

answered Jun 17 '16 at 19:02

Hozeis

1,542
15
36

Thanks for the great great help, can i replace button clicks instead of keypresses? But these keypresses not working for me. But i appreciate your kind help. You save my day. – CreativeDip Jun 17 '16 at 19:11
Do you mean at `window.addEventListener( 'keydown', function( e ) {` ? – Hozeis Jun 17 '16 at 19:12
yes, i want to place buttons for previous and next slide. That navigates between open divs. – CreativeDip Jun 17 '16 at 19:13
@user2111911 - Yeah, just do `$('#nextBtn').click(function(){ if.....` and the same for the back button. Did this answer your full question? – Hozeis Jun 17 '16 at 19:16
should i put this under window.addEventListener? or separately? Sorry for bothering i am bit new to jquery. – CreativeDip Jun 17 '16 at 19:21
You would remove the `window` line and add the new code – Hozeis Jun 17 '16 at 19:22
Thanks a lot that makes sense. – CreativeDip Jun 17 '16 at 19:42
Hi i am facing some issues regarding the code you provided, can you please take a look at it. Thanks a lot http://stackoverflow.com/questions/37948285/bind-unbind-then-rebind-click-function – CreativeDip Jun 21 '16 at 16:27

jquery code not working on window ready. Also i want to create a button to close the enlarge div

2 Answers2