How to expand div / show hidden content - javascript

My goal is to expand the .sort width and show all content in the .sort-expand div. This is expanding to the right with the .sort expanding from 200px when "more" is clicked to 400px. And, when clicked again, to shrink.
<div class="sort">
<div class="mainimg"></div>
<div class="infoarea">
<h3>Main Name</h3>
<p>Title of position</p>
<p><span class="floatl">Tag01, Tag02</span><span class="floatr">more</span></p>
</div>
<div class="sort-expand">
<div class="votes"></div>
<div class="full-info"></div>
<div class="other"></div>
</div>
</div>
This also needs to push all the other .sort areas so it doesn't overlap them. Any ideas? I will post what I've started with but having a hard time. Thanks so much.

You should be able to use jQuery's .slideDown(). .slideDown() will push the other elements as it animates downwards and shows the content of the div. Call it on the div you want: $("#myDiv").slideDown() If you want it to shrink when clicked again, use .slideToggle()

Related

CSS Fade effecting other elements

I'm using javascript and CSS to fade an image behind a menu, but the menu should stay visible. For some reason the menu fades also. It shouldn't since I'm not targeting those elements. Here is an example.
Based on your link, if you add a z-index value of 1 or greater to your menu class, then the menubar will not fade.
<div class="header-wrapper">
<div class="menu" style="z-index: 1;">
<span>Schedule</span>
<span class="spacer">|</span>
<span>Sponsors</span>
<span class="spacer">|</span>
<span>Bio</span><a name="bio"></a>
</div>
</div>

Make div pop out like a modal

I currently have a layout made of multiple rows, with 4 columns each. Each column contains a "card" displaying some basic information.
When the user clicks on one of the cards, I want it to make a flip effect to show its back, which contains more detailed information, as well as animate the div to go above everything else, centered, and bigger so I can display a lot more text, and everything without breaking the layout (as a Bootstrap modal would display).
The flip effect is working, but I am now struggling with making the div kind of converting itself into a modal, a.k.a centering itself and zooming in, without scaling the text so I can fit in there more information.
Here is my HTML code:
<div class="row">
<div class="col s12 m3 center-align flip-container">
<div class="flipper">
<div class="front">
<div class="card-panel teal" style="position:relative;">
FRONT CARD TEXT
</div>
</div>
<div class="back">
BACK OF THE CARD WITH A LOT MORE TEXT, IMAGES AND STUFF
</div>
</div>
</div>
</div>
Any help is greatly appreciated !
Maybe you want check bootstrap, have modals. Else, you need a CSS that make look like modal and with jQuery only add or remove a class.

Can I fix two divs next to each other if other elements are added dynamically to the page?

This is conceptual right now, but I want to do something that feels complicated: place an element (like a <p> so that it is fixed next to another <p>) but still make it responsive if other elements are added to the page.
Here's what I mean. For reference, I am using Bootstrap 4's grid to create two columns. Let's say my HTML was:
<div class="col-md-9">
<h1>Header</h1>
<h3>Ipsum Industries Subheader</h3>
<p>This is the left column text</p>
</div>
<div class="col-md-3">
<p>This is where I want the text to constantly be next to the <p> element in the left column</p>
</div>
Is there any way that I can "nest" this second <p> element to directly next to the left column <p> regardless of other content?
Possible Questions
Why not just use absolute positioning? This is answered a lot, like here, on how to place two divs together. This is different - the reason I am thinking about this is that I am building an application in which Javascript will add elements into that first div. If I use a fixed/absolute location for this second element, it will look jumbled after, say, an <h4> is appended before it.
In short, I want to know if it's possible to create a relationship between elements like this that will work in a dynamic way?
Do you need to use the grid? No, I am using the Bootstrap grid as a starting point, but then I realized this issue with how the positioning will break when a new element is added ahead of the <p>. I can ditch the grid if necessary.
Two suggestions, assuming I am understanding your question correctly.
Option A)
<h1>Header</h1>
<h3>Ipsum Industries Subheader</h3>
<div class="row">
<div class="col-md-9">
<p>This is the left column text</p>
</div>
<div class="col-md-3">
<p>This is where I want the text to constantly be next to the <p> element in the left column</p>
</div>
</div>
Option B)
<div class="col-md-9">
<h1>Header</h1>
<h3>Ipsum Industries Subheader</h3>
<p>This is the left column text</p>
</div>
<div class="col-md-3">
<h1> </h1>
<h3> </h3>
<p>This is where I want the text to constantly be next to the <p> element in the left column</p>
</div>

Extend element on side of screen to bottom of screen?

I'm making an angular web-app with a sidebar view attached to the side of every page. I'm using twitter-bootstrap to handle grid/spacing on the page and ui-router to handle the different views.
My views are laid out like this:
index.html
<div ui-view="sidebar"></div>
<div ui-view="content"></div>
<div ui-view="content-2"></div>
The markup for my sidebar is as follows:
sidebar.html
<div class="col-sm-3 sidebar">
<!-- sidebar view content -->
</div>
and the markup for my content views:
content.html and content-2.html
<div class="col-sm-9 container-fluid">
<!-- content view content -->
</div>
the content views are stacked one on top of the other next to my sidebar.
The problem is that one of my pages includes a dynamically expanding component, which increases the height of the content views. This pushes the lower content view ('content-2') down the page, and when it goes below the bottom of the sidebar view, it slides left, underneath the sidebar, instead of staying on the right below the first content view.
I've tried adding style="padding-bottom:500px" and style="vh:100" to the sidebar div, which works for a bit because it extends that view down, but I'd prefer a solution that doesn't unnecessarily extend the page beyond what is currently necessary. Additionally, once the content-view2 reaches the bottom of the padding, it still slides over just like before.
Update:
I finally got my plunker up, so hopefully this will illustrate the problem and what I'm trying to do: http://plnkr.co/edit/EbGJAqxdjHRCMjjC6waA
The content.html view will dynamically increase/decrease when the user presses the button, illustrating the problem (make sure to scroll down to see what I'm talking about).
The simplest working solution without layout changes. The problem is the float:left of the 2nd content, so let's change it to right when the screen size is large enough - plunker:
<div class="content2 col-md-10 container-fluid">
<div class="container-fluid" style="background:#800000;color:white">
<h2>Content Frame Two</h2>
<p>Centered below Frame One at start, should still be centered after button press.</p>
</div>
</div>
#media (min-width: 992px) {
.content2 {
float: right;
}
}
A simpler working solution + plunker:
Remove this from sidebar - style="padding-bottom:100vh" - as we don't need it anymore.
Change your html markup, so that both content areas would be wrapped in one big float. In this way, the 2nd content, can slide left.
Index:
<div class="container">
<div ui-view="sidebar"></div>
<div class="col-md-10 container-fluid">
<div ui-view="content"></div>
<div ui-view="content-2"></div>
</div>
</div>
Content 1:
<div class="col-md-12 container-fluid" style="padding-bottom:20px">
<!-- the padding on the following container is to simulate the added space
that appears once the div dynamically increases in size -->
<div class="container-fluid" ng-style="vm.contentStyle">
<h2>Content Frame One</h2>
<button ng-click="vm.expand()" type="button" class="btn btn-default">{{ vm.change }} Size</button>
<p ng-show="vm.info">{{ vm.info }}</p>
</div>
</div>
Content 2:
<div class="col-md-12 container-fluid">
<div class="container-fluid" style="background:#800000;color:white">
<h2>Content Frame Two</h2>
<p>Centered below Frame One at start, should still be centered after button press.</p>
</div>
</div>
Previous non-working solution:
It's bit hard to hard to replicate the problem without a working plunker/fiddler, but I think that setting the height of the sidebar to 100vh or the padding to calc(100vh - height of sidebar) will solve your problem.
1vh is 1% of the view port height - ie the available browser display area, so setting it using vh will resize your sidebar or the padding dynamically according to screen height.
Note of caution - vh (and vw) are only supported by modern browsers (see caniuse).

Jquery scroller based on mouse position

So I have looked at jquery hover and this is all well and great but how can I use a list into this? The example that the previous user uses is all image backgrounds.
Im not sure if the is in the right place.
<div class="backdrop">
<ul id="year"></ul>
<div class="direction left"></div>
<div class="direction right"></div>
jsfiddle
Since I could not change background position on <ul><li> I decided to use margin here if my solution.

Categories