Horizontally Collapse/Extend divs ?

jdunne08

I have 2 images in a container both taking up 50% of the viewers screen. I want to have a collapsible div that extends horizontally from the left image over/on top of the right image when the left image is clicked, is that possible?


Heres a graphic of what I mean:


When Image A is clicked I want a div (B) to extend horizontally over image C, and then collapse once again back under Image A


A & B



I have tried to collapse the image the normal-vertical way so far but I cant even get that to function. Here is a Jsfiddle of my progress: http://jsfiddle.net/Dunne08/tfwyxksL/6/

Berserker

jdunne08 wrote: »

When Image A is clicked I want a div (B) to extend horizontally over image C, and then collapse once again back under Image A

Can you just clarify what you mean by this? Does the user have to click on Image A again to hide Image C? Is Image B shown again at that point?

jdunne08

Berserker wrote: »

Can you just clarify what you mean by this? Does the user have to click on Image A again to hide Image C? Is Image B shown again at that point?

Clicking on Image A again would collapse Image B, re-revealing Image C. And/or having a clickable "X" on the expanded Image B would also collapse it.

Also, I aim to have it so when clicking on Image C, an expandable image (Image D) would expand horizontally over Image A, and collapse back to C when closed.


Edit:
So I got a good example of what I mean going for it: https://jsfiddle.net/Dunne08/12mdbf50/2/


That fiddle only has functionality on Image A, I need it on Image C too and be able to duplicate it multiple times. Do you know how I could do so?

Berserker

Do you understand what the css and jquery in that fiddle does?

jdunne08

Berserker wrote: »

Do you understand what the css and jquery in that fiddle does?

The CSS, Yes. The Jquery, not so much. Was hoping someone would help in that area.

Berserker

jdunne08 wrote: »

The CSS, Yes. The Jquery, not so much. Was hoping someone would help in that area.

When you click on the image which has the css class leftA (your 'A' image) then the css class 'test' is toggled on the image with the class leftB. That is what the jquery does.

jdunne08

Berserker wrote: »

When you click on the image which has the css class leftA (your 'A' image) then the css class 'test' is toggled on the image with the class leftB. That is what the jquery does.

Sorry, I meant that I was hoping for some help in applying the proper Jquery to make the items expand as needed. Image A expands, but Image C doesnt.

Berserker

The code below will capture the click event on image 'C'. If you add a new image and mirror the css for the image with the class 'leftB', that will show/hide the image on clicking 'C'.

        $(".rightimage").click(function(){
        	alert("Image C clicked");
        });

counterpointaud

If I understand you correctly, here is one way to achieve it: http://jsfiddle.net/xpvt214o/542655/

jdunne08

counterpointaud wrote: »

If I understand you correctly, here is one way to achieve it: http://jsfiddle.net/xpvt214o/542655/

Yes, that is exactly the functionality that I want. Using your method, is it even possible to reveal a div that holds a video player and a text area? Or only an object filled with background color made with CSS?

counterpointaud

jdunne08 wrote: »

Yes, that is exactly the functionality that I want. Using your method, is it even possible to reveal a div that holds a video player and a text area? Or only an object filled with background color made with CSS?

You are not restricted as to what you can put in there. Just be aware that some third-party video player libraries, or embedded players may make some assumptions that you will have to override. Like expecting not to be covered by other elements for example.

jdunne08

counterpointaud wrote: »

You are not restricted as to what you can put in there. Just be aware that some third-party video player libraries, or embedded players may make some assumptions that you will have to override. Like expecting not to be covered by other elements for example.

Ok, so I just tried to put images into your method but it seems to not function anymore. I put the images through html as apposed to a background image with CSS. Here is the Jsfiddle: https://jsfiddle.net/Dunne08/xpvt214o/545201/

counterpointaud

jdunne08 wrote: »

Ok, so I just tried to put images into your method but it seems to not function anymore. I put the images through html as apposed to a background image with CSS. Here is the Jsfiddle: https://jsfiddle.net/Dunne08/xpvt214o/545201/

You are not giving your images a height or width, so they are overflowing. Also you have duplicated code in the JS panel for some reason. See https://jsfiddle.net/n8boxjwe/

If you want multiple rows of this you will need to target the associated divs properly. Do you know ahead of time how many rows there will be, or will this be generated by some data?

jdunne08

Berserker wrote: »

The code below will capture the click event on image 'C'. If you add a new image and mirror the css for the image with the class 'leftB', that will show/hide the image on clicking 'C'.

        $(".rightimage").click(function(){
            alert("Image C clicked");
        });

What class do I give the new image? I gave it "Image-C-clicked" mirroring the CSS of "leftB" and it just gives me a pop up alert.


Fiddle: https://jsfiddle.net/Dunne08/12mdbf50/42/

jdunne08

counterpointaud wrote: »

You are not giving your images a height or width, so they are overflowing. Also you have duplicated code in the JS panel for some reason. See https://jsfiddle.net/n8boxjwe/

If you want multiple rows of this you will need to target the associated divs properly. Do you know ahead of time how many rows there will be, or will this be generated by some data?

I was messing around with the Jquery and forgot to take it out sorry. But you got the images going, thats great, thanks.

I do want multiple rows, 2 rows in the container and be able the duplicate the container and change out the images later in the site. Heres a graphic of the site to better understand:

counterpointaud

jdunne08 wrote: »

I was messing around with the Jquery and forgot to take it out sorry. But you got the images going, thats great, thanks.

I do want multiple rows, 2 rows in the container and be able the duplicate the container and change out the images later in the site.

Right, you have all the building blocks to do that, if you want more detailed advice from people here you will need to give more specifics. For the sake of discussion, lets call each set of 2 rows a Quadrant. Here are some questions you should ask yourself:

- Is the Quadrant container going to have a fixed width and height?
- Is the content of each Quadrant cell/div going to have the same aspect ratio (ratio of width to height)?
- Does each cell always have a video player with a text area underneath, or is that just the underneath cells?
- Is there a known amount of Quadrants that will exist on each page, or can they be added/removed by the user, or differ depending on some other data?
- Is this adding something to an existing site or a new project? In other words, is jQuery already in use here or not? May not be needed.
- Is every page loaded from a server or generated on client (single page app)?

I think there may be be some problems you haven't thought through here, but if each cell has a fixed aspect ratio, and there is a known amount of cells per page, it's should be simple enough.

jdunne08

counterpointaud wrote: »

Right, you have all the building blocks to do that, if you want more detailed advice from people here you will need to give more specifics. For the sake of discussion, lets call each set of 2 rows a Quadrant. Here are some questions you should ask yourself:

- Is the Quadrant container going to have a fixed width and height?
- Is the content of each Quadrant cell/div going to have the same aspect ratio (ratio of width to height)?
- Does each cell always have a video player with a text area underneath, or is that just the underneath cells?
- Is there a known amount of Quadrants that will exist on each page, or can they be added/removed by the user, or differ depending on some other data?
- Is this adding something to an existing site or a new project? In other words, is jQuery already in use here or not? May not be needed.
- Is every page loaded from a server or generated on client (single page app)?

I think there may be be some problems you haven't thought through here, but if each cell has a fixed aspect ratio, and there is a known amount of cells per page, it's should be simple enough.

You're right, giving more specifics would help readers here. Let me share what they are.


I like the 'quadrant' terminology but I'm going to change that to a Row and have 2 images in a container, as a Row of 2 images is what I want to fill the viewers full browser window at a time.



- 1 row's height is 100% of the browser window. 2 images in a row each having 50% width.
- Each row has the same ratio
- Each image, when clicked, will extend a container holding a video, logo and some text. This container is collapsible when the same image is clicked again. The container with the media will be different for every image.
- One page website.
- 4 rows in the site. There are 4 instead of 1 large one because other content (Image galleries, icons..etc) will be placed in between some rows, maybe all rows. So Rows will need to be capable of being duplicated.
- This is a new project, so its not being added to an existing site.
- Site will be loaded from a server.


To get a better idea of the purpose of site. Each image is a photo of a person and when clicked, a video biography, their logo and some bio text is the media that extends. So each person would need different media to be displayed.

Html, Styling the site and sizing the images/containers to work properly according to browser windows is what I will be doing. I do not know how to make the Jquery functions, so that is the part that I was looking for help with, and you are helping me a ton already so thank you for this.

counterpointaud

Starting to become clearer now. 2 more questions:

- what happens when the vertical browser height is more than the width (e.g. on mobile, or when the user has the browser window snapped to one side of the screen)
- you say it is a one page site, loaded from the server. So that page is the same amount of rows, with the same content, for all visitors? If so, how many rows are we talking?

jdunne08

counterpointaud wrote: »

Starting to become clearer now. 2 more questions:

- what happens when the vertical browser height is more than the width (e.g. on mobile, or when the user has the browser window snapped to one side of the screen)
- you say it is a one page site, loaded from the server. So that page is the same amount of rows, with the same content, for all visitors? If so, how many rows are we talking?

Good question. Right now I am just working for desktop, its only for public display so mobile is not being developed and saying that I can just run the code locally and no need for a server. But to answer the question, I would display the images in the rows not subject to the browser height, keep the aspect ratio and let the rows overflow but have it expand vertically instead of horizontally.



The amount of rows will be 4 so content can be placed in between rows. So:


Row
Other Content
Row
Other Content
Row
Other Content
Row

counterpointaud

jdunne08 wrote: »

Good question. Right now I am just working for desktop, its only for public display so mobile is not being developed and saying that I can just run the code locally and no need for a server. But to answer the question, I would display the images in the rows not subject to the browser height, keep the aspect ratio and let the rows overflow but have it expand vertically instead of horizontally.



The amount of rows will be 4 so content can be placed in between rows. So:


Row
Other Content
Row
Other Content
Row
Other Content
Row

You only need to make it work in one viewport size then? That simplifies things alright. This is beginning to sound a bit like a college project though, which I don't really like supplying code for. If that's the case, please at least spend the time to read and understand when is going there. One way to do what you want with jQuery is:

- Give each widget a unique id
- Loop over each widget and add the handlers to the children of that widget
- Each handler should change the stacking order and toggle a class
- That class has a translateY property associated in CSS with a transition on it

https://jsfiddle.net/nvsfz5ot/

var sliders = $('.slider');
var zIndexOrder = ['.under.right', '.over.right', '.under.left', '.over.left'];
var zIndexOrderFlipped = ['.under.left', '.over.left', '.under.right', '.over.right'];

function setStacking(parentId, order) {
  for (var i = 0; i < order.length; i++) {
    $(parentId + ' > .box' + order[i]).css('z-index', i);
  }
}

sliders.each(function(i, slider) {

  var sliderId = '#' + slider.id;
  var leftPanel = $(sliderId + ' > .box.over.left');
  var rightPanel = $(sliderId + ' > .box.over.right');

  leftPanel.on('click', function(ev) {
    setStacking(sliderId, zIndexOrder);
    $(sliderId + ' > .box.under.left').toggleClass('expanded');
  });

  rightPanel.on('click', function(ev) {
    setStacking(sliderId, zIndexOrderFlipped);
    $(sliderId + ' > .box.under.right').toggleClass('expanded');
  });
});

This is ES3 to ensure it runs in older browsers. If you are only using Chrome or Firefox you could change it to ES6 to make it a bit nicer.

- Use `const` instead of `var`
- Use arrow functions for the callbacks
- Use template strings instead of concatenating