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.
Related
I have a table structure which is made out of distinct blocks which cannot be brought into the same block, such as this - only much larger.
The structure of this ideally needs to stay the same.
<div class="dynamicList">
<div class="header">
<div class="item">col1</div>
<div class="item">col2</div>
</div>
<div class="row">
<div class="item">Learn JavaScript</div>
<div class="item">test message</div>
</div>
<div class="row">
<div class="item">Build something awesome</div>
<div class="item">medium message</div>
</div>
</div>
I want a way to be able to dynamically size the columns in the row to auto fit to the text so that the largest text column width is used for all the others of the same column. On the top is how it looks, at the bottom is how I want it to look.
I was hoping I could get away with just using CSS for this, however I feel I might need some JavaScript too. I am using React, so thought about using useRef hook, but didn't know how well this would perform with a really large table.
What is the best way to calculate this width and then use it across all columns of the same index?
Here is a JS fiddle showing the problem.
https://jsfiddle.net/og8kz3hp/65/
I used thumbnail section and view section in my project. So I divided parent div into two div, first is col-md-3(that is thumbnail div) and second is col-md-9(that is view section). Now I want to hide first div and change second div into col-md-12 for small device like mobile or ipad.
Is there any way to make it with media query?
Bootstrap col system for grid has this built in.
When you specify col-md-3 you are saying "at medium screen give this col 3 blocks".
You can also do, side by side col-sm-12 to give it the entire row when on large screen and col-sm-0 to hide it when on smaller screens.
Look here for a better explanation about bootstrap grid system:
https://getbootstrap.com/docs/4.1/layout/grid/
<div class="row">
<div class="col-md-3 d-none d-sm-none d-md-block">THUMBNAIL</div>
<div class="col-md-9">Some data</div>
</div>
This will solve your issue.
For extra small and small screen thumbnail will not appear.
I am having trouble with a little site I have been working on; I want a sort of "stream" container that holds "cards" of "content," where this "content" is some "text" as well as some "stats."
This is the HTML I currently have:
<div id="stream">
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
</div>
Eventually, I want users to be able to prepend "cards" to this "stream" as well.
Now, however, I am trying to implement some jQuery function to hide the "stats" of a card until it is clicked on. So after setting display to none in CSS of the stats, I made this in a javascript file:
$(document).ready(function(){
$("#stream, div.card").click(function() {
$(this).find($("div.stats")).show();
});
});
It sort of works; the stats of a card are hidden until I click on a card. When I click on a card, however, all the cards' stats divs are shown.
I was hoping to somehow make it that the specific card clicked is also the (only) one that gets shown. Obviously, the current way I am doing this opens all of them as jQuery I have selects all the cards at once; how can I remedy this?
Again, I apologize if this question has been asked; I could not seem to find something similar, and I really want this to work . . .
P.S. I tried to search for this particular instance; alot of suggestions were to just give divs ids, but this feels inconvenient when I eventually want users to prepend cards?
Your selector ->
"#stream, div.card"
was basically asking for all #stream and all div.card..
But what you really meant was, find all div.card inside #stream. and this would be, (aka without the ,).
"#stream div.card"
Also you jquery find doesn't require you to convert into a jquery object, so find("div.stats") will do the trick.
So I have created my website using Bootstrap. I want to add a facebook-like collapsible sidebar. I have tried to divide my website into two columns. One for the sidebar and other for the whole website using col-md-2 and col-md-10 but the problem that was occurring was the site was being overflown towards the right side. This is what I did:
<html>
<head></head>
<body>
<div class="container">
<div class="col-md-2">...Sidebar...</div>
<div class="col-md-10">...Rest of the website...</div>
</div>
</body>
</html>
But the site was overflowing towards the right side. I tried that with many other col-* but to no avail. I also added .clearfix class to the body but still could not fix the overflowing issue.
Q1. How can I fix the overflowing issue?
Secondly, I want to make the sidebar collapsible. I thought I would do that by hiding the col-md-2 and changing the class of the website holder div to col-md-12 and reversing the thing when the user un-collapses the sidebar but the problem I know that would be occurring is that I would not be having a smooth sliding effect.
Q2. How could I make a collapsible siderbar with a smooth slide effect?
Demo of what's happening.
Q1: Have you tried adding a row after the container?
<div class="contianer">
<div class="row">
<div class="col-md-2">...Sidebar...</div>
<div class="col-md-10">...Content...</div>
</div>
</div>
Q2: You can create you sider bar off the top of the screen and animate it in using jquery to slide it down to where you want it when the menu button is clicked.
I am developing a website in Zurb Foundation 4 and SASS.
My code looks like:
<div class="row">
<div class="large-6 columns redbg"> content goes here... </div>
<div class="large-6 columns greenbg"></div>
</div>
Both of inner divs has background. I have a column gutter of 30px.I want this gutter to be white. The possible solution for it to add parent divs for both of inner divs and apply columns and large-6 class to it and this way code will look like:
<div class="row">
<div class="large-6 columns">
<div class="redbg"> content goes here... </div>
</div>
<div class="large-6 columns">
<div class="greenbg"> content goes here... </div>
</div>
</div>
But by applying this solution I have to create two divs for only the sake of design. Can anyone please guide how to do it or a better approach.
Also I wonder how to collapse a column from just one side (left or right)?
It would be much easier to use CSS - by using the background-clip property, which as its name suggests, allows you to clip the painting area of an elements background.
Since the gutter width in foundation is within the padding box, you can use the content-box value.
Here is a simple example: http://jsfiddle.net/CA669/950/embedded/result/
Can you make the row have a white background? That way the gutter will be white.
The other way I can think of is how you are currently doing it. I've had to do similar solutions.