I'm trying to expand a box (a div) with a header and a hidden div. The problem is that the height isn't affected in the expansion and the hidden text doesn't show up properly.
The main goal is to expand a small box as if it was a tab, to a form, without changing page and with an expansion animation. When expanded, the user can see the text and edit it. As if it was something like a pop-up filling almost the entire screen. All this is already done expect the "expansion part".
I've tried to adapt my code to many of online solutions, but most of them are simple divs. This is a simple example of what I'm trying to do: http://jsfiddle.net/xcWge/14/ (its only the blue box).
HTML
<div class="row">
<div class="col-md-3 col-sm-6 to-expand">
<div id="child" class="widget">
<div class="widget-body text-center">
<div class="big-icon m-b-md watermark"><i class="fa fa-5x fa-exclamation-circle"></i></div>
<h2 class="m-b-md">Tarif</h2>
<p class="text-muted m-b-lg">Some introduction.</p>
<div class="menu-separator"><hr></div>
<div id="hidden-box">
<p>This contains the text to be hidden, assume that it has a huge number of paragraphs</p>
</div>
Button
.row is the group of "expandable boxes"; .to-expand is the div that includes a single box and #child is the div that included all the content in the box.
CSS
<style>
.btn-primary-w {
border-color: #06285e;
border-width: 2px;
}
div.to-expand {
width: 100%;
max-height:-10%;
overflow: hidden;
transition: all .3s ease;
}
.to-expand.fullscreen {
z-index: 999;
max-height: 990px;
}
I saw a solution that was using a negative margin-top and then return it to 0 with overflow hidden to simulate the hidden text but that solution didn't work.
JS
function func() {
$('#to-expand').toggleClass('fullscreen');
$('#to-expand')[0].style.zIndex = "999";
}
Related
I have a div section with a background image with a gradient cover and some text on. I want to control changing this with a java script button. When its clicked it should remove the gradient and show a new div section with different background image no gradient and text. The JQuery underneath is supposed to check whether the first div is showing. and when clicked it should hide the original div and replace it with the new one. I cannot seem to get it working. any help would be appreciated.
/*
jQuery event that triggers when the button is pressed
# is an ID jQuery selector, usage:#anyElementId
*/
$('btnClick').on('click',function(){
/*
In CSS, you can check if an element is visible by checking if the property display value is different from none, because if it's value is none, it will not be visible
*/
if($('call-to-section').css('display')!='none'){
/*
So, if div call-to-section is visible, the condition will be true
*/
$('call-to-section2').show().siblings('div').hide();
}else if($('#call-to-section2').css('display')!='none'){
/*
Condition to check if call-to-section2 is visible
*/
$('call-to-section').show().siblings('div').hide();
/*
If it is, it will show call-to-section and right after that will search for it siblings and hide them with .siblings('div').hide();
*/
}
});
<!-- Call To Action Section
================================================== -->
<section id="call-to" class="call-to-section">
<div class="call-to-layer main-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="wow fadeIn animated">Global Reach & <span>Demographics.</span></h3>
<p class="wow fadeIn animated">With 3 billion searches per month, YouTubes search
volume is bigger than Bing, AOL, Yahoo and Ask.com combined. If YouTube's user base were a
country,
it would be the third largest in the world. It is the worlds largest site for traffic.
</p>
<button id="btnClick" class="btn btn-default wow fadeInRight hvr-sweep-to-right
button-gradient animated " >Have a look</button>
</div>
</div>
</div>
</section>
<section id="call-to" class="call-to-section2" style= "display:none;">
<div class="call-to-layer main-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="wow fadeIn animated">Test & <span>Testing</span></h3>
<p class="wow fadeIn animated">This is a new text and total differnt background
picture"
</p>
<button class="btn btn-default wow fadeInRight hvr-sweep-to-right button-gradient
` `animated " id="btnClick" >Have a look</button>
</div>
</div>
</div>
</section>
<!-- /.call-to-section -->
* 9. Call To Action Section
--------------------------------- */
.call-to-section {
height: auto;
width: 100%;
background: url(../images/low-poly.jpg) no-repeat;
background-size: cover;
text-align: center;
position: relative;
padding-top: 146px;
padding-bottom: 146px;
}
.call-to-section2 {
height: auto;
width: 100%;
background-color:#FFF
background-size: cover;
text-align: center;
position: relative;
padding-top: 146px;
padding-bottom: 146px;
I had corrected and obtained the desired result, There was following error in codes written.
1) Both Div element has the same id #call-to, which is actually not required if required for some other purpose please have a separate id for all Div.
2)both Button element also have the same ID #btnClick, change it as #btnClick and #btnClick1
I think id can not be the same for two elements. Read the MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
Complete Code is available in my Codepen https://codepen.io/sanjayism/full/ExVdKpv
$(document).ready(function () {
$("#btnClick").on("click", function () {
if ($(".call-to-section").css("display") == "block") {
$(".call-to-section").css("display", "none");
$(".call-to-section2").css("display", "block");
}
});
$("#btnClick1").on("click", function () {
if ($(".call-to-section2").css("display") == "block") {
$(".call-to-section").css("display", "block");
$(".call-to-section2").css("display", "none");
}
});
});
https://leiacarts.github.io/index.html
https://codepen.io/leiacarts/pen/PoqRxNZ
I'm trying to get images to show in the red portions and to stay within the content div, but any time I add images, the layout breaks. I would really appreciate some help with these two things I want to achieve and thank you in advance:
1.) keep images constrained to and auto resizable within the (red) content div
2.) hide the images when the section is "shut" onclick.
HTML:
<div class="section">
<div class="bookmark">↑ ten ↔ sion ↓</div>
<div class="content"><p></p>
<!-- <div class="space"></div> -->
<!-- <img class="fit" src="images/ziptiesmall.png">
<img class="fit" src="images/ziptiesmall2.png">
<img class="fit" src="images/ziptiesmall3.png"> -->
</div>
</div>
the JavaScript:
var sections = document.querySelectorAll(".section")
sections.forEach(function(section) {
section.addEventListener("click", expandSection);
})
function expandSection(event) {
let section = (event.target.classList.contains("section")) ? event.target : event.target.parentNode;
sections.forEach(function(section) {
section.classList.remove("open")
})
section.classList.add("open");
}
I just added this class to the rest of the divs which didnt have any images on them, hence the reason for them to show the red content div. Remove the 100%, the image text in between every column as well and create ids for every column and add background image to them and you are good to go :).
.content.bg.zip {
margin-left: 40px;
/* width: 100%; */
background-color: #000;
background-image: url(images/ziptiepattern.png);
background-repeat: repeat;
}
I am making a web app. I have created 25 divs.
I have Used jquery fadeIn() by which divs are gradually made and displayed one after another on screen.
But problem is that when 25 divs have been created, scroll is created due to which first 4 divs can be seen but the remaining can't be seen until user scroll the page.
I want that as one by one div is created, the page should automatically scroll to the div recently created and so on this process should be continued until the last div is created.
You can use
$('html,body').scrollTop($(".answer.visible:last").offset().top);
$(function() {
$(".answer").hide();
$('#demo').click(function(e) {
var _div = $('.answer[style*="display: none"]:first');
if (_div.length) {
_div.fadeIn();
$('html,body').animate({
scrollTop: _div.offset().top
},
'slow');
} else {
$(this).text('Done..!');
}
});
});
#demo {
position: fixed;
bottom: 0px;
left: 0px;
}
.answer {
width: 100%;
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Click here</button>
<div class="answer">1</div>
<div class="answer">2</div>
<div class="answer">3</div>
<div class="answer">4</div>
<div class="answer">5</div>
<div class="answer">6</div>
<div class="answer">7</div>
<div class="answer">8</div>
<div class="answer">9</div>
<div class="answer">10</div>
<div class="answer">11</div>
<div class="answer">12</div>
<div class="answer">13</div>
<div class="answer">14</div>
<div class="answer">15</div>
<div class="answer">16</div>
<div class="answer">17</div>
<div class="answer">18</div>
<div class="answer">19</div>
<div class="answer">20</div>
<div class="answer">21</div>
<div class="answer">22</div>
<div class="answer">23</div>
<div class="answer">24</div>
<div class="answer">25</div>
I think this looks pretty cool when we use slideDown+scrollTop. Check fiddle
Documentations
To get the coordinates
http://api.jquery.com/offset/
Set vertical position of the scroll bar
https://api.jquery.com/scrollTop/
Set horizontal position of the scroll bar
https://api.jquery.com/scrollleft/
I found this link here
smooth auto scroll by using javascript
Using this you could create something like this here:
http://jsfiddle.net/mrc0sp5j/
The main point is, that you create a scrolling-function using
window.scrollBy or window.scrollTo
http://www.w3schools.com/jsref/met_win_scrollto.asp
With jQuery .last or .eq you can specify which element you want to scroll to
$(".mydivobjects").eq(x).position().top
Hope this helps
cheers
i'm facing to css problem.basically i have main div tag and 3 div s class named pic_con,body_con and msg_con .
div msg_con length and height depend on the text of it.if text is too long it should have morethan one line to display all.look at the picture.first one with small text,second one with big text ..div msg_con have minimem width and maximum width.
i want to position this 3 div look like in the picture.
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hey this is multiline text</div>
</div>
</div>
my css
.pic_con {
float:left;
background-color:#096;
}
.back_con {
float:left;
background-color:#3CC;
border:5px solid red;
width:150;
}
.body_con {
/*float:left;*/
margin:0 auto 0 auto;
background-color:#C39;
border:5px solid red;
}
i set flote left but it's not work.
As far as I understood you want to align them one after another.
You can manage this, as you tried, by using float: left. Furthermore, you should set the parent div to clear: both.
Another thing that I saw is that you didn't close the pic-con DIVs. Try with this:
HTML
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">pic</div>
<div class="body_con">small icon</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con"></div>
<div class="body_con">small icon"</div>
<div class="msg_con"> hey this is multiline text</div>
</div>
</div>
CSS
.msg_w_1 {
clear: both;
}
.msg_w_1 div {
float: left;
}
Edit: I didn't see the updated post containing CSS when I posted this. Try removing the float: left and width from your CSS classes before trying this
use display:table style.
.msg_con {
display : table
}
this makes .msg_con behave like a table element, it will re-size according to its content's length ( both height and width ).
This is on my plugin page on Git and I have two interactive demo in the web page. In one of the demo page, I have a small dialog that opens when you click on a div.
The weird issue is that this dialog is getting opened when I click on the top title that says attrchange beta . This happens only if the first click is on the title attrchange beta, clicking any other element in page fixes this issue.
The plugin page http://meetselva.github.io/attrchange/ [Fixed, use the below URL to see the problem]
http://meetselva.github.io/attrchange/index_so_issue.html
Below is the code,
<!-- The title -->
<h1 id="project_title">attrchange <span class="beta" style="text-decoration: line-through;" title="Almost there...">beta</span></h1>
<!-- Main dialog that has link to the sub-dialog -->
<div id="attributeChanger">
<h4 class="title">Attribute Changer</h4>
<p>Listed below are the attributes of the div:</p>
<div class="attrList"></div>
<div class="addAttribute text-right">add new attribute</div>
</div>
<!-- Sub-dialog -->
<div id="addOrmodifyAttr" title="Add/Modify Attribute">
<h4 class="title">Add/Modify Attribute</h4>
<p><b>Attr Name</b> <input type="text" class="float-right attrName"></p>
<p><b>Attr Value</b> <input type="text" class="float-right attrValue"/></p>
<div class="clear"> </div>
<button type="button" class="float-right close">Close</button>
<button type="button" class="float-right update">Update</button>
<div class="clear"></div>
</div>
JS:
var $attributeChanger = $('#attributeChanger');
var $attrName = $('.attrName', '#addOrmodifyAttr'),
$attrValue = $('.attrValue', '#addOrmodifyAttr'),
$attrAMUpdate = $('.update', '#addOrmodifyAttr');
//Handler to open the sub-dialog
$attributeChanger.on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
});
The problem is the CSS applied to your #attributeChanger div.
If you look at the CSS applied to it:
#attributeChanger {
background-color: #FEFFFF;
border: 1px solid #4169E1;
color: #574353;
font-size: 0.9em;
margin: 10px;
min-height: 50px;
min-width: 150px;
opacity: 0;
padding: 2px;
position: absolute;
top: -200px;
z-index: 1;
}
You'll notice that the position is absolute, and it's positioned over your logo. So what you're clicking is actually your #attributeChanger div.
To fix it, you can hide #attributeChanger using display: none;, then use $('#attributeChanger').show(); in jQuery when it comes into actual view.
The pop up is showing because this code is running:
}).on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
This is because the DIV with the class addAttribute is over the title DIV.
You can either move the 'addAttribute' DIV, or remove the last line of that onclick function.
That is because you element is hover your title and detect the click on himself and open(i don't know why it open, i didnt examine your entire code). But when you click anywhere else, your code is changing his position so it is not over the title.
The easiest fix is to change you #attributeChanger CSS top to -100px (that's the value when you click on the document) OR add a display : none.
EDIT : Axel answer show what I mean by "element is hover your title".