I have inserted a jQuery event into my webpage which allows for a div in my page to expand to reveal more content. I'm having a problem with the surrounding divs not moving down to accommodate for the space needed to display the expanded div.
I initially tested this div in a separate document and found it to work successfully without too much fuss. I worked with other divs to be sure that they'd move upon clicking the event. Upon inserting the same code into my already developed web page however, the surrounding divs remain fixed and the expansion works behind those divs. Why might this be? Could it be that one of my divs beneath the expanded one is somehow fixed?
I researched the CSS property 'position' but can't make any link between these contributing to the problem.
Incase the problem relates to that of my expanded div (instead of the surrounding divs), I shall only post the code for the HTML, CSS & Javascript/jQuery that directly relates to that particular part of my webpage. Please request any further code if you feel it's necessary.
Thank you for taking time to read.
Here is my code:
HTML
<div id="showmorelocations-container"><p>More Locations</p>
<div class="toggler-expand">
</div>
</div>
CSS
#showmorelocations-container {
height: 100px;
line-height: 150px;
width: auto;
margin: auto;
margin-bottom: 50px;
}
#showmorelocations-container p {
text-align: center;
font-family: 'Hind', sans-serif;
font-size: 20px;
font-weight: bold;
text-decoration: none;
position: relative;
top: 50%;
transform: translateY(-50%);
line-height: 100px;
}
.toggler-expand {
height: 400px;
width: auto;
background-color: #FFBBBB;
display: none;
margin-top: -25px;
}
jQuery
$(function() {
$('#showmorelocations-container').click(function() {
$(this).find('.toggler-expand').slideToggle();
});
});
The issue is most likely related to the fact that you have set a fixed height for your parent container and try to expand the a child.
Change the following line:
#showmorelocations-container {
height: 100px; // change px to %
...
}
to
#showmorelocations-container {
height: 100%;
...
}
in order to allow the parent to expand if the child expands too.
Check the fiddle here: https://jsfiddle.net/n1dwz8v1/
Is this the behavior you are looking for?
$( document ).ready(function() {
$('#showmorelocations-container').click(function() {
$(this).find('.toggler-expand').slideToggle();
});
});
#showmorelocations-container {
height: 100px;
line-height: 150px;
width: auto;
margin: auto;
margin-bottom: 50px;
background-color:#ccc
}
#showmorelocations-container p {
text-align: center;
font-family: 'Hind', sans-serif;
font-size: 20px;
font-weight: bold;
text-decoration: none;
position: relative;
top: 50%;
transform: translateY(-50%);
line-height: 100px;
}
.toggler-expand {
height: 400px;
width: auto;
background-color: #FFBBBB;
display: none;
margin-top: -25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showmorelocations-container">
<p>More Locations</p>
<div class="toggler-expand">
<p>Content</p>
</div>
</div>
use this :
$(function() {
$('#showmorelocations-container p').click(function() {
$(this).parent().find('.toggler-expand').slideToggle();
});
});
Related
I have some web page to fetch the user related data and huge count of images. The problem is while load the page it took more time due to images , Images are rendered in separate div in the page. So i want loader spinner for that particular div.
Note: I know how to implement for page load. Just need for particular div.
Just look the below my implementation idea.
<body>
<div id="divUserContent">
</div>
<div id="divuserimages">
</div>
</body>
Just make sure the parent element to the loading element has a position set to relative. See this example below.
body {
margin: 0px;
font-size: 16px;
}
.container {
background: rgba(0,0,0,.2);
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
.loading-container {
padding: 10rem;
border: 1px solid #000;
position: relative; /* this keeps .loading-text inside it */
width: 5rem;
}
.loading-text {
position: absolute;
top: 50%;
left: 50%;
margin-top: -9px; /* take .loading-text height, divide by -2 */
margin-left: -35px; /* take .loading-text width, dividide by -2*/
}
<div class="container">
<div class="loading-container">
<div class="loading-text">Loading...</div>
</div>
</div>
I ask my question as someone who knows pretty much nothing (nothing at all) about coding. I am clearly very confused about how HTML, CSS, and JS interact.
I am creating a Squarespace website, and I found an FAQ form from Codepen.io that I would like to include on a specific page of the website. I want to know how to approach inserting the HTML, CSS, and JS into a Squarespace code block.
I am able to copy and paste the HTML part of the code into the Squarespace code block feature and the FAQ form shows up, but without all the colors/fonts/styles that the CSS and JS code apparently bring to it. That is about all I got to "work." Below I provided a link to the code I am referring to. I hope this is all making sense.
FAQ form in question: codepen.io/sarenz/pen/azGLRg
*I have added the CSS and JS codes for context
CSS:
{ /basic reset/
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* background: red; */
background: lightgray;
}
.faq-wrapper{
border-bottom: 1px solid rgba(0,0,0,0.5);
font-family: 'Lato';
line-height: 1.6;
padding: 40px 40px 17px 75px;
position: relative;
}
i {
display: block;
height: 50px;
width: 50px;
}
a{
cursor: pointer;
display: block;
height: 40px;
margin-right: 0;
position: absolute;
right: 75px;
top: 30px;
width: 40px;
}
a.hide-button{
z-index: -1;
}
p.faq__question, p.faq__answer{
margin-left: 30px;
margin-right: 100px;
max-width: 650px;
}
p.faq__question{
font-weight: 700;
padding-bottom: 20px;
}
.hidden-part {
height: 0;
}
.hidden-part *{
opacity: 0;
}
.faq__question:before, .faq__answer:before{
color: #3376b3;
font-weight: 900;
margin-left: -30px;
position: absolute;
}
.faq__question:before{
content: 'Q:';
}
.faq__answer:before{
content: 'A:';
}
JS:
$( function(){
'use strict';
var $showButton = $('.faq-wrapper .expand-button'),
$hideButton = $('.faq-wrapper .hide-button');
$showButton.click(function(){
var id = $(this).attr('data-id');
var height = $('.hidden-part[data-id="'+id+'"] >.faq__answer').height();
height = height+25;/Adds extra padding to the bottom/
$(this).velocity({opacity:0})
.css('z-index',1)
.next('.hide-button')
.velocity({opacity:1})
.css('z-index',2)
.next('.hidden-part')
.velocity({height:height});
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:1},{duration:400});
});
$hideButton.click(function(){
var id = $(this).attr('data-id');
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:0},{duration:200});
$(this).velocity({opacity:0})
.css('z-index',1)
.prev('.expand-button')
.velocity({opacity:1})
.css('z-index',2)
.next()
.next()
.velocity({height:0});
});
} );
Congrats on getting started in the coding world! Squarespace has a tutorial on adding custom HTML, CSS, and JS to your website: link
As far as understanding how HTML, CSS, and JS interact, there are plenty of tools available to help you learn depending on your preferred learning style: Google Results
Here's the basic run-down:
HTML: The content that you want on your website
CSS: The formatting of that content
JS: Logic to change the content and formatting based on conditions or events (ie user clicks a button)
Hello on my page i have 2 character images, that i have placed on both sides of a text and banner, heres a picture of it http://i.imgur.com/KwzphQP.jpg but heres the problem, when i rezise my browser the images follows with the browser, they do not stay in the same position, and i dont want this to happen because i have a fixed layout, heres the css code, i dont know how to post it good, but anyway
.support-text {
width: 600px;
margin-left: auto;
margin-right: auto;
line-height: -2px;
margin-bottom: 130px;
}
.support-text h1 {
font-size: 30px;
}
.support-text {
clear: left;
}
.support-text {
font-size: 23px;
}
.support-img {
margin-top: -80px;
margin-bottom: 80px;
z-index: 1;
}
.ct-pic {
position: absolute;
right: 10px;
bottom: 30px;
float: right;
}
.ct-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic {
position: absolute;
left: 40px;
bottom: 30px;
float: left;
}
heres the html
<section class="support-text">
<div class="ct-pic"> </div>
<div class="t-pic" width="867" height="569"></div>
<img src="img/support-us.png" class="support-img">
<p>Hello, if this site has helped you improve your gameplay, and learn useful stuff, feel free to support us, so we can keep this website up, so more people can learn. You can support through Steam or throught paypal. Keep in mind that you do not have to support, but if you do, we appreciate it alot. and we can continue to upload new content (Smokes, flashes, tactics) to the website. </p>
</section>
heres an example of how to position things next to each other without them moving away or changing positions when you resize the window (the divs can be img tags or whatever you want them to be). Just put them in a "container" with a fixed width, and then float them inside that container
<div id='container'>
<div id='image-1' class='image'></div>
<div id='image-2' class='image'></div>
<div id='image-3' class='image'></div>
</div>
#container {
width: 200px;
height: 100px;
background: black;
}
.image {
background: white;
width: 20px;
height: 20px;
float: left;
margin: 20px;
}
http://jsfiddle.net/7qytj718/1/
update
you have an issue with your css. You're setting child elements' positions to absolute, this makes them ignore their parent element and become positioned relative to the entire window. When this happens, the child elements start moving when the window is resized.
I have a following HTML:
<span class="day-number">{{day-number}}</span>
<div class="event-box">
<div class="event-container">
</div>
<div class="more-events">more ...</div>
</div>
Event-container is filled with an unknown number of .event elements like the following:
<div class="event">{{event-name}}</div>
I want to show or hide the .more element based on if the .event-container has a height of over 76px (equal to the height of four .event elements stacked).
The styling for the above elements:
.event {
text-align: left;
font-size: .85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: whitesmoke;
padding: 0 1px;
overflow: hidden;
margin-bottom: 2px;
cursor: pointer;
}
.event-box {
max-height: 76px;
overflow: hidden;
position:relative;
}
.event-box .more-events {
height: 10px;
position: absolute;
right: 0;
bottom: 10px;
display: none;
z-index: 5;
}
No styling for .event-container
I can do what I want with Javascript (jQuery):
$(".event-box").each(function(){
var $this = $(this);
if($this.children(".event-container").height() > 76){
$this.children(".more-events").css("display", "block");
} else {
$this.children(".more-events").css("display", "");
}
});
And run that every time a make a change, but I'd rather do it with CSS.
Is this possible? Maybe with pseudo elements or media queries or something?
JSFIDDLE: http://jsfiddle.net/pitaj/LjLxuhx2/
If changing the markup is acceptable there is a possibility to achieve a somewhat similarly looking page without using JavaScript to show or hide, here is the Fiddle
I have removed <div class="more-events">more ...</div> line and made elements of event class to get hide when it is necessary I also made them to appear when hovering over more ... .
The CSS I have added:
.event:nth-child(n){
display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
display: block;
}
.event:nth-child(5){
text-indent: -9999px;
position: relative;
display: block;
color: black;
border: none;
background-color: #FFF;
}
.event:nth-child(5)::before{
position: absolute;
text-indent: 0px;
content: "more ...";
display: block;
}
.event:nth-child(5):hover{
position: static;
text-indent: 0;
border: 1px solid #3a87ad;
background-color: #3a87ad;
color: whitesmoke;
}
.event:nth-child(5):hover::before{
display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
display: block;
}
And for .event-box class I have commented out max-height: 76px; because in my browser 76px was not equal to the height of four .event elements stacked. Also removed update function.
I dont think it's possible using css only. but for better approach in what you are trying to do.instead of using max-height for .event-box I use this css which is add display:none to +4.event on your event container:
.event-box .event-container .event:nth-child(n+5){
display: none;
}
and now when it's more than 4 .event your more text appears. FIDDLE
UPDATE:
HERE I make little change in you js as well and make it more professional,
while you are using template to render the page, maybe you can do it as follow
<div class="event-container">
{{#each events}}
<div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}
and
function canshowmore() {
return events.length >= 4;
}
Relative newbie here. I have two different mouseover/hover functions I can get to work just fine: one, an inline mouseover that 'darkens' an image/box by making it lose opacity; and the second, text that appears over this image/box on hover (jumping up from a hidden position).
The problem is, I want to get them working together without this text losing opacity, which it does when part of the same div class as the image/box. But when I try two separate div classes and position them on top of each other (using z-index), whichever one I put on top seems to block the other one. Is there any way to have it so the image/box loses opacity, but the text that appears doesn't, all in the same mouseover/hover action?
These are the relevant bits in my stylesheet, mostly covering the text part:
.rightbox {
background: rgb(140, 183, 98);
width: 290px;
height: 160px;
margin-bottom: 18px;
padding: 2px;}
.rightboxtext {
display: table-cell;
height: 160px;
width: 290px;
vertical-align: bottom;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #8CB762;
}
.rightboxtext span {
display: block;
height: 0px;
overflow: hidden;
}
.rightboxtext:hover span {
height: 80px;
}
This is the inline stuff that I used where everything, including text, gets the opacity treatment. (In this case the image is attached to the rightboxtext div class, but I also tried it attached to the rightbox div class.)
<div class="rightbox"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60">
<div class="rightboxtext"
style="background-image: url(image.jpg); height: 160px; width: 290px;">
<span>Hello text.</span></div>
</div>
Otherwise I achieved this mangled bit of code, where one seems to block the other:
<div class="rightboxcontainer">
<div class="rightboxtext"
style="position: absolute; z-index: 100; height: 160px; width: 290px;">
<span>Hello text.</span></div>
<div class="rightbox"
style="position: absolute; z-index: 50; height: 160px; width: 290px;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60"><img
src="image.jpg">
</div>
</div>
With this extra bit in the stylesheet:
.rightboxcontainer { width: 290px; height: 160px; margin-bottom: 18px;}
Thanks in advance!
As a commenter pointed out above, you can do this entirely with CSS:
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 250px;
height: 250px;
overflow: hidden;
}
.box img {
width: 250px;
height: 250px;
}
.box .message {
background: rgba(0, 0, 0, 0.5);
opacity: 0;
width: 250px;
height: 250px;
position: relative;
top: -256px;
color: #fff;
font-size: 32px;
line-height: 250px;
text-align: center;
font-weight: bold;
font-family: arial;
}
.box .message:hover {
opacity: 1;
}
</style>
<div class="box">
<img src="http://www2.le.ac.uk/departments/geology/people/clark-n/personal/copy_of_images/Satellite-map-of-Antarctica/image">
<div class="message">Antarctica</div>
</div>
.message is positioned on top of the container, .box. When you hover over .message, it fades in from 0 opacity. Its background is semi-opaque (using RGBA, where the fourth value is the opacity), so it dims the image. You could make the image the background-image of the .box if you wanted to.
http://jsfiddle.net/dgGG3/4/
Fist of all, try to avoid inline event handling as you can achieve the desired result with css :hover.
The problem as you can see here http://jsfiddle.net/UjY5Q/ is with opacity on a parent element all child elements also get that opacity.
.rightbox:hover {
opacity:0.5;
}
You can cheat on that one by setting positions to the elements and overlap one to the other one. That's kind a tricky and may also need browser support.
so the easyest way to get what you want is on :hover show a transparent background image example here: http://jsfiddle.net/UjY5Q/1/
I would say that's the way to go