I'm new when using reactjs, I quite confused as why the image doesn't show up in my code. I'm using background: url() so it easier for me to process. I can succesfully add the image since there is no error in console but nothing show up. can someone help me to solve this?
this is my component code:
import React from "react";
// CSS
import './klien.css'
const Klien = () => {
return (
<div className="klien">
<div className="klien-container">
<p className="section-title">Klien Kita</p>
<div id="klien" className="carousel slide" data-ride="carousel">
<div className="carousel-item active">
<div className="row text-center mr-auto ml-auto">
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size-1"></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"../../../assets/background/slide-4.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://upload.wikimedia.org/wikipedia/en/thumb/1/12/Grab_%28application%29_logo.svg/800px-Grab_%28application%29_logo.svg.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://upload.wikimedia.org/wikipedia/en/thumb/1/12/Grab_%28application%29_logo.svg/800px-Grab_%28application%29_logo.svg.png"})`}}></div>
</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="row text-center">
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Klien;
this is my css:
.klien{
background-color: #f6f7fd;
min-height: 50vh;
max-height: 70vh;
overflow: hidden;
}
.klien .klien-container{
/* overflow: hidden; */
padding-top: 10vh;
}
.klien .section-title{
color: #1c2331;
font-size: 3em;
font-weight: 500;
text-align: center;
}
.klien .card-center{
margin: 0% auto;
}
.klien .text-center{
text-align: center;
width: 100vw;
}
.klien .card-size{
max-height: 20vh;
}
.klien .mask{
background-color: rgba(246, 247, 253, 0.5);
}
.klien .img-size{
width: 10vw;
height: 10vh;
margin: 0 auto;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.klien .img-size-1{
background: url(../../../assets/client/al-bayan.png);
width: 100px;
height: auto;
}
.design-pakaian .btn-center{
margin-left: auto;
margin-right: auto;
}
you can see that in my code there is 2 ways to call the image first I'm using inline as you can see, I successfully call the image when using external resource url but I'm failed when tried to call it from my assets folder, can someone help me to solve this?
this is what I got right now:
You can try this
<div className="img-size" style={{ backgroundImage: `url(${"/assets/background/slide-4.png"})`}}></div>
or using process.env.PUBLIC_URL as in this doc mention
<div className="img-size" style={{ backgroundImage: `url(${"process.env.PUBLIC_URL/assets/background/slide-4.png"})`}}></div>
I think the most likely cause is that the image isn't available at that path once your app gets bundled. If you used CRA (Create React App) to start your project place the image file in your public/assets/client/al-bayan.png folder and update the path to url(/assets/client/al-bayan.png);
Related
I am using a background image and an overlay in my div. But the overlay doesn't overlap properly. It is leaving some margins at both the sides for reasons. I tried setting margins so that it overlaps completely but then it disturbs my layout.
How can i correct it?
/*numscroller*/
.image{
height:auto;
width:100%;
background:#FFCC99;
}
.over2{
height:auto;
width:100%;
background-color:rgba(0,0,0, 0.7);
}
.num{
margin:auto;
padding:6rem 0rem;
float:left;
}
<script src="https://raw.githubusercontent.com/tinywall/numscroller/master/numscroller-1.0.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row " >
<div class="col-12 image">
<div class="over2">
<div class="row justify-content-around">
<div class=" num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<center>
<h3><b>Slums covered</b></h3>
<h3 class='numscroller' data-min='1' data-max='7' data-delay='1' data-increment='1'><b>7</b></h3>
</center>
</div><!--num col-10 ends-->
<div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
<center>
<h3><b>Lives changed</b></h3>
<h3 class='numscroller' data-min='1' data-max='400' data-delay='1' data-increment='3'><b>400</b></h3>
</center>
</div><!--num col-10 ends-->
<div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
<center>
<h3><b>Our supporters</b></h3>
<h3 class='numscroller' data-min='1' data-max='30' data-delay='1' data-increment='1'><b>30</b></h3>
</center>
</div><!--num col-10 ends-->
</div><!--row justify ends-->
</div><!--over ends-->
</div><!--col-12 ends-->
</div><!--row ends-->
</div>
you can position the image container relatively, and the overlay should be position absolutely.
.image {
position: relative;
height: 100px;
width: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,.3);
display: flex;
justify-content: center;
align-items: center;
}
<div class="image">
<span>I am the image </span>
<div class="overlay">
I am the overlay
</div>
</div>
There are 4 texts. When I hover on each of them I can see a certain picture which belongs to certain text.
The question is that, I need a slider consist of images. I mean when I hover on text1 I need to see my image and after one second this image has to disappear.
So, I need to do it with all texts, but in my code I just can see one image, apart from it is not a slider. Can you help me in this question?
This is the code:
.pic {
background-image: url(img/scr-img/1.png);
width: 236px;
height: 420px;
transition: 1s;
background-size: cover;
}
p1:hover~.pic {
background-image: url(img/scr-img/8.png);
}
p2:hover~.pic {
background-image: url(img/scr-img/9.png);
}
p3:hover~.pic {
background-image: url(img/scr-img/11.png);
}
p4:hover~.pic {
background-image: url(img/scr-img/5.png);
}
<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text1</p>
</div>
</div>
</p1>
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text2</p><br><br><br>
</div>
</div>
</p2>
<div class="pic" style="border-radius: 20px;"></div>
<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text3</p>
</div>
</div>
</p3>
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text4</p>
</div>
</div>
</p4>
This would not be like a slider but inside of pic div we can change images when Texts are hovered.
I assume that we have all the required images in folder img/src-img and img folder is in the same directory where the html page exists.
Below code is working fine in Chrome
.pic {
background-image: url(img/scr-img/1.png);
width: 236px;
height: 420px;
transition: 1s;
background-size: cover;
}
p1:hover~.pic {
background-image: url(img/scr-img/8.png);
}
p2:hover~.pic {
background-image: url(img/scr-img/9.png);
}
p3:hover~.pic {
background-image: url(img/scr-img/11.png);
}
p4:hover~.pic {
background-image: url(img/scr-img/5.png);
}
<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text1</p>
</div>
</div>
</p1>
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text2</p><br><br><br>
</div>
</div>
</p2>
<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text3</p>
</div>
</div>
</p3>
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text4</p>
</div>
</div>
</p4>
<div class="pic" style="border-radius: 20px;"></div>
I am trying to make expanding image preview similar to this but as I move from left to right clicking on the circular div, the tab shifts down from the pointer. I don't understand why this is happening.
Please refer my fiddle link.
Please help me with this. I am unable to figure out where I am going wrong.
And is there any way to change the pointer color dynamically based on the color of the circular div?
Thankyou.
jQuery(document).ready(function() {
$(".mn").click(function() {
var activeTab = $(this).attr("href"); //Find the target via the href
if ($(activeTab).is(':visible')) {
$(activeTab).slideUp();
$(this).removeClass("active");
} else {
$(".mn").removeClass("active"); //Remove any "active" class
$(this).addClass("active")
$('.tab').hide();
$(activeTab).fadeIn();
}
return false;
});
});
.wrap {
max-width: 100%;
margin: auto;
}
.full-width-div {
position: relative;
width: 100%;
left: 0;
}
.mn.active:after {
content: "";
position: absolute;
left: 50%;
bottom: auto;
margin: 0 0 0 -12px;
/*width: 0;*/
/*height: 0;*/
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid red;
}
.img-circle {
border-radius: 50%;
}
.img-circle {
border-radius: 0;
}
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.mn.active,
.mn:focus {
background: #f9f9f9;
outline: none
}
.tab {
display: none;
clear: both;
margin: 12px 2% 10px 0;
background: red;
min-height: 100px;
width: 100%;
padding: 5px;
}
.col-custom-eight {
position: relative;
float: left;
width: 12.5%;
min-height: 1px;
padding-left: 5px;
padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="full-width-div container">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<div class="row">
<div class="col-custom-eight col-sm-2">
<a href="#tab1" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">1</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab2" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center caption">2</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab3" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #795548;"></div>
<div class="text-center caption">3</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab4" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FF9800;"></div>
<div class="text-center caption">4</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab5" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">5</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab6" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">6</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab7" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">7</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab8" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">8</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab1" class="tab" style="background-color: #00BCD4">Tab 1
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab2" class="tab" style="background-color: #FFC107">Tab 2
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab3" class="tab" style="background-color: #795548">Tab 3
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab4" class="tab" style="background-color: #FF9800">Tab 4
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab5" class="tab" style="background-color: #00BCD4">Tab 5
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab6" class="tab" style="background-color: #8BC34A">Tab 6
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab7" class="tab" style="background-color: #00BCD4">Tab 7
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab8" class="tab" style="background-color: #8BC34A">Tab 8
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Your rows have 1px height which results in the pointer dropping down 1px for every circle. I fixed your fiddle, see here.
You can set the color of the pointer with just CSS, like for instance:
a[href="#tab1"]:after {
border-bottom-color: rgb(0, 188, 212) !important;
}
a[href="#tab8"]:after {
border-bottom-color: #8BC34A !important;
}
I am having a issue with Bootstrap in Firefox. My columns are set correctly in Chrome, Opera and Safari, but not in Firefox.
I created ten boxes distributed in two rows. Five in each row. These boxes has classes .col-sm-2 and .col-xs-10, besides a class called .categoria.
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/corneta.png" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/contribua.png" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/nota.png" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/parceiros.png" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/projetos.png" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/historico.png" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/objetivos.png" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/relatorios.png" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/diretoria.png" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/estatuto.png" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
In Chrome, Opera and Safari, they appear correctly:
Screenshoot from Chrome
But in Firefox, it is completely irregular.
Screeshoot from Firefox
Note that I am using JQuery to set these boxes max-height so they will never have the height bigger than the width. I using the following code:
$(document).ready( function(){
var columnWidth = $('.categoria').innerWidth();
$('.categoria').css('max-height', columnWidth);
});
And here is the css:
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: table;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
#media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
To be honest, I am not even sure if it is a problem with Bootstrap. But I don't know what else could be.
Ok so you should change display to table only when you don't want to show image :) that seems to resolve issue with uneven heights
CSS:
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: block;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
#media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
display:table;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
HTML :
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
Fiddle
Try to use a constant value instead of a variable and intead of max-height property use height.
$(document).ready( function(){
// This value v
var columnWidth = $('.categoria').innerWidth();
columnWith = constant;
// This also change
$('.categoria').css('height', columnWidth);
});
If this doesn't change anything check all your tags matches. I can't tell you how many times it has happened to me when I don't close tags.
Hope I help.
Guys basically there will be a bootstrap container div, and inside there will be 4 card style divs with toggle expand/retract button. When you click on one card's button, the div will expand all the way to the container's width. Please check the image. I'm a newbie to jQuery and with the script I've, i'm not able to achieve the full width. If someone can help me out it'll be great. Here's the code below -
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() == 600 ? "200px" : "600px";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>
Is this what you're looking for?
I suggest taking a look at MDN to get deeper insights about CSS props: https://developer.mozilla.org/en-US/docs/Web/CSS/width
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() > 0 ? "0%" : "100%";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>