Expanding OnClick a single div with rearranging the rest - javascript

everyone !
So what I have in mind is to have a div class= container with 2 rows of 3 cards within it .
I am using bootstrap 4 as my grid and layout.
Card examples: https://getbootstrap.com/docs/4.0/components/card/
<div class="container>
<div class="row>
<card-element />
<card-element />
<card-element />
<card-element />
</div>
</div>
Basically these 4 elements again are divs with other divs in them to distribute the content f.x at the top with a and for description.
The functionality I'm trying to achieve is that when I click on any of these s the one that I have clicked should go ahead and expand in the middle when the others are done moving to either the left or right side of the container element and resizing to a smaller size (like a thumbnail but very small).
So far I've tried using transform and translate for expansion, however I cannot figure out how to mix and match the two of the functionalities.
I have thought of having a couple of JQuery functions within these steps :
1.Onclick- The selected element expands while all other elements are .remove() by JQuery.
2.Once it expands the other elements get appended to 2 sides - let's say 2 divs within the container positioned to be on the left and right end of it. Of course the appending is done exact to either side div.
3. The transition that supposedly happens is the other card-element thumbnails dissapear eased-in/out and appear once the .append function is done.
Any ideas would help or any reference to a similair problem/task would be of great help.

You can use Jquery-UI, there are a component called accordion, it works like:
$(function () {
$("#accordion").accordion();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="accordion">
<h3>Card 1</h3>
<div>
<p>
Text of card 1...
</p>
</div>
<h3>Card 2</h3>
<div>
<p>
Text of card 2...
</p>
</div>
</div>

You can use the Bootstrap Collapse component and jQuery to toggle the CSS classes. For example...
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.show').not(this).collapse("hide");
$(this).parents('.col-sm').toggleClass("col-sm-6 col-sm");
$(this).parents('.card-body').find('.col-12').toggleClass("col col-12");
});
$('.collapse').on('hide.bs.collapse', function () {
$(this).parents('.col-sm-6').toggleClass("col-sm col-sm-6");
$(this).parents('.card-body').find('.col').toggleClass("col-12 col");
});
And then add some CSS transformations as the classes change...
.row > [class*="col"], img{
transition: all .3s ease;
}
Demo: https://www.codeply.com/go/emFWdeJQgS
Of course you'll have to make some mods to get it exactly as desired.

Related

How to auto re-size the bootstrap column width based on data inside

Hi I have 3 divs inside my row class.
<div class="row">
<div class="col-3">some content</div>
<div class="col-9">
<div class="col-4">
<div class="col-12">
<div class="col-6">conetnt</div>
<div class="col-6">conetnt</div>
</div>
</div>
<div class="col-8"> content </div>
</div>
</div>
How can I modify this HTML so that, all the content inside floats right and auto adjust its width based on the content? Now the width is fixed, so even if the data in my 3rd div very little it still consumes loads of space. Any idea guys? bit newbie to CSS
Solution :
If your content is occupying space less than width of your bootstrap column. You better put it without bootstrap column classes and give it simply float:left to your content inside the simple div.
It will automatically be resized according to your content. You may need to give display:inline to your div to display that div inline.
Update :
You can use flexbox. display: flex to container and can use flex-direction attribute according to your need.
Reference :
First you need to study the behavior of bootstrap grid systems. This official bootstrap documentation is all about grid system of bootstrap (Latest version).
https://getbootstrap.com/docs/4.0/layout/grid/
It will help you to understand content management inside bootstrap rows and columns.
You can use float: right to move content on right and try using display: table
Have a look here: https://v4-alpha.getbootstrap.com/layout/grid/

Replace div on hover (div rollover)

I have two div with different data. I want to replace div with other on hover.
I can do this in CSS but my data have images and links. so i use image in css i can not put
on for image.
also i have 4 different images in a dive.
so i want that when use hover that area my first div should be replaced with 2nd div.
Thank you
No example given so i'm assuming.
HTML
<div id="div1">Some data</div>
<div id="div2" style="display:none;">Some other data</div>
Javascript (with jQuery)
$("#div1").on('mouseover', function() {
$("#div2").show();
$(this).hide();
});
This is not tested so try it out an see if it does what you want.
If you don't want to use javacript you can do it like this.
You can change the content of the divs.
.child-one{
display : block;
}
.child-two{
display : none;
}
.parent:hover .child-one{
display : none
}
<div class="parent">
<div class="child-one">
text of child one
</div>
<div class="child-two">
text of child two
</div>
</div>

Single page website with jQuery - Content in JS or HTML

I'm just picking up JS & jQuery and consider myself quite capable with HTML/CSS. I'm in the middle of building a single page front-end only website. I've got the layout nailed down with Bootstrap and now I'm just trying to figure out some of the functionality. My scenario is as follows:
There are 4 <div>s with text and an image in each of the 4 <div>s; and there is a <div> with class #content below it. There is a .on('click') listener for each of the #c1-4 divs and when the user clicks on a particular div, the #content div will change accordingly.
<div id="#c1" class="active-div">
<p>Text Here</p>
<img src="image.jpg">
</div>
<div id="#c2">
<p>Text 2 Here</p>
<img src="image2.jpg">
</div>
<div id="#c3">
<p>Text 3 Here</p>
<img src="image3.jpg">
</div>
<div id="#c4">
<p>Text 4 Here</p>
<img src="image4.jpg">
</div>
<div id="#content">
<!-- Content of the selected div goes here -->
</div>
By default, #c1 <div> is selected. The content that goes in to #content is mostly text but some icons and images too, with appropriate styling.
The Question: What is the best way to store & load content into the #content div? Based on my knowledge so far I believe the options are:
Hard-coding it into the JS and using .html() to set the content; although this would add quite a bit of HTML to the JS.
Hard-coding 4 different divs related to each of the 4 #c IDs and using .show() and .hide() accordingly.
Using .load() to load the content from another HTML document. However, I'm not sure how styling would be handled and how this will affect the display of the #content div.
I would also like to know the pros and cons of each of the above approaches and which one would be more suitable for future maintenance (e.g. adding a fifth, sixth #c numbered div to select & load content for).
In real world developers consider backend data to replace / append content based on user's clicks and it is just second thing how exactly you append / prepend / html or load your content to your div element. Not sure how you are going to hardcode different content according to the clicked button, I think in your case #2 & #3 should do the trick.
There is append / prepend actions you can use (they are self-explanatory I guess, but might be useful in some cases).
As I mentioned initially in ideal work you will do queries to your backend endpoints (databases, API etc..) and fetch content from there. Once done, you just style it accordingly using those divs and css (either inline or CSS table) things. Focus on overall construction!
There are a lot of ways to do this and a lot of JS frameworks out there that do it differently, but all of your options are appropriate in my opinion, especially given that you're using jQuery. I'll just talk a bit about your three options:
You can hard-code it into your JS, but you can also place the content in your HTML in a <script> tag and load it as a JavaScript string in jQuery, like they do for Underscore templates.
<script type="text/template" id="div-1">
<span>Hey, this is some content</span>
</script>
Then later in your JavaScript, just do $('#div-1').html() to get the contents of it, and you can stick that in your content div.
This option is also perfectly acceptable.
As long as you have all your css already applied to the document, dynamically changing the DOM won't affect its ability to apply styles. Just make sure you have all the rules in a stylesheet that is already loaded.
Expanding on my comment, here is how you could do it with hidden content divs and replacing html using .html()
$(function() {
var content = $('.active-div .content').html();
$('#content').html(content);
$('.item').click(function() {
$('.item').removeClass('active-div');
$(this).addClass('active-div');
content = $('.active-div .content').html();
$('#content').html(content);
});
});
.item {
cursor: pointer;
display:inline-block;
padding-right:10px;
}
.content {
display: none;
}
#content {
background: #000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active-div" id="#c1">
<p>Text Here</p>
<img src="image.jpg">
<div class="content">Sample content 1</div>
</div>
<div class="item" id="#c2">
<p>Text 2 Here</p>
<img src="image2.jpg">
<div class="content">Sample content 2</div>
</div>
<div class="item" id="#c3">
<p>Text 3 Here</p>
<img src="image3.jpg">
<div class="content">Sample content 3</div>
</div>
<div class="item" id="#c4">
<p>Text 4 Here</p>
<img src="image4.jpg">
<div class="content">Sample content 4</div>
</div>
<div id="content">
<!-- Content of the selected div goes here -->
</div>

CSS hidden text illegal for Search Engines? [duplicate]

This question already has answers here:
Is h1 tag that's hidden using display:none given prominence by search engines?
(10 answers)
Closed 9 years ago.
Here are basic example boxes, CSS and JS I created for jQuery Modal Box.
<!-- hidden boxes // -->
<div id="content_1" class="box">
<h1>First Box</h1>
<p>Content goes here...</p>
</div>
<div id="content_2" class="box">
<h1>Second Box</h1>
<p>Content goes here...</p>
</div>
.....
<!-- links for boxes // -->
Show First Box
Show Second Box
<!-- css // -->
<style>
.box {
display: none;
}
</style>
<!-- javascript // -->
<script type="text/javascript">
$(document).ready( function() {
$('.link').click( function() {
// process modal
});
});
</script>
So when User click on First/Second Box link, the jQuery modal popup with content. My Purpose is not to hide the text. I heard and read in some blogs, Google will take action with hidden text. Is my way illegal/bad for SEO? OR are there better way to do this without display:none?
You will find Google themselves actually use display:none; on their homepage - and considering the popularity of jQuery and other JavaScript libraries using these kinds of effects, I can't see how it will negatively impact your SEO if you use it in necessary circumstances.
I use following snippet to hide sub-menus on css3 navigation menus with some cool ease-in, ease-in-out transitions . And afaik this is valid css to hide elements when it comes to SEO.
opacity: 0;
visibility: hidden;
Already discussed at
Is there an alternative to conditional display:none
Instead of using display:none; you can use left: -9999px;position:absolute; it will still display the content for the search engine but it will be displayed somewhere not for the users.
http://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/

creating an expandable area in a web page

I am new to CSS and Javascript. I want to create a specific area (I use the div tag) in the page where once a link is clicked within, the area will expand and an additional content would be displayed. I managed to create a code which does the job only partially: the new content is displayed after the click but this content is not displayed within the area border. In few words the area is not expanded, only a new content is displayed...any suggestion?
I really like this jQuery accordion method:
Live Demo: http://jsfiddle.net/kbZDv/1/
It's easy to use, style and looks good.
All you need to do is include the latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
Here is the HTML markup:
<p class="trigger">Click here to expand and reveal more information</p>
<div class="toggle_container">
<div class="block">
<p>Content goes here.</p>
</div>
</div>
The basic (yet to be styled) CSS:
p.trigger{
margin-bottom:7px;
margin-top:-5px;
}
.toggle_container{
margin-bottom:10px;
}
.toggle_container p{
margin:0px;
}
.toggle_container{
background:#f0f0f0;
clear: both;
font-size:100%;
}
And the all important jQuery to make it work:
$(".toggle_container").hide();
$("p.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
});
You could use a jquery plugin like div expand?
http://plugins.jquery.com/plugin-tags/div-expand
or perhaps a jquery exander plugin
http://plugins.learningjquery.com/expander/demo/index.html

Categories

Resources