NB
My Header:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
I have 2 divs:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
What else can I try/read up on? Thanks
NB
This is part of my CSS
#content1 {
clear: both;
position: absolute;
}
Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'
'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
Click the text to see the fade transition in action.
Related
I am developing a project for school and I am pretty new to Bootstrap and I keep having some problems with scaling the website for different resolutions. When I change it to mobile the images go on top of the text. If anybody could help me I would appreciate it.
I have tried everything and still cant find a solution.
<body>
<div class="container">
<nav class="navbar-fixed-top sticky-top navbar" style="width: 100%; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<div class="navbar-header">
<a class="navbar-brand"><img src="transferir.png" alt="" style="height: 65; width: 60px"></a>
</div>
<div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contacta-nos</li>
</ul>
</div>
</nav>
<div class="site-index">
<div id="home" class="block home-block">
<div class="container">
<div class="col-sm-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" class="d-img">
<img src="appstore.png" alt="Apple App Store" class="d-img">
</div>
</div>
<div class="col-sm-5 right-block">
<img src="phones.png" style="height: 350px; float: right; vertical-align: middle; width: auto !important; position: relative">
</div>
</div>
<hr class="sombra">
</div>
</div>
Css
html{
scroll-behavior: smooth;
}
body{
padding-top: 1%;
font-family: 'Lato', sans-serif;
}
.block{
padding: 35px;
}
.home-block{
min-height: calc(100vh - 90px);
}
#home .container{
height: 500px;
}
.left-block{
text-align: center;
top: 30%;
}
.right-block{
bottom: 35%;
margin-left: 25%;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Desktop
When i squish the page
First of all, you probably forgot to include <div class="row"></div> wrapper inside your <div class="container">...</div> element, just as it says here.
Secondly, I strongly recommend you to not play too much with CSS properties such as position: relative/absolute, top: ...; left: ...; right: ...; bottom: ..., because most of them break the CSS native document flow and they should be used only when other tools do not help much.
I suggest you reading this series of articles if you have enough time: CSS layout
I turned off most of the properties of that kind and it already looks much nicer:
This answer would be just be a massive advice if I wouldn't provide some code help, so here it is.
Start by disabling these properties in DevTools:
.home-block{
/* min-height: calc(100vh - 90px); */
}
#home .container{
/* height: 500px; */
}
.left-block{
/* text-align: center; */
/* top: 30%; */
}
.right-block{
/* bottom: 35%; */
/* margin-left: 25%; */
}
Fixing Bootstrap markup:
<div id="home" class="block home-block">
<div class="container">
<!-- Added this wrapper, changed .col-* classes to responsive -->
<div class="row">
<!-- Removed .left-block class -->
<div class="col-sm-12 col-lg-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" style="height: 40px;">
<img src="appstore.png" alt="Apple App Store" style="height: 40px">
</div>
</div>
<!-- Removed .right-block class, added .text-centered class -->
<div class="col-sm-12 col-lg-6 text-centered">
<!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
<img src="phones.png" height="350">
</div>
</div>
</div>
</div>
Then you would get this picture (no interval between image and the button on the top):
This one is solved by applying margin-top: ...px; to the image block, wrapped in #media query at .col-md-* resolutions and lower. For the exact values see Bootstrap grid options. For more info on applying #media queries see MDN docs
As for navigation bar, I first suggest you disabling padding-left on ul#menu element:
#menu {
padding-left: 0;
}
Although it fixes it on sm resolutions, the navigation menu still wraps under the logo on resolutions less than about 520px. I suggest you imagine what to do with this occasion in your mind or in some markup service like https://app.diagrams.net/ and then develop what you decided to.
You can use
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
See this and this
I want to create a web site that contains a network graph. I used vis.js for this. If you hover over an image of a person the image should flip and show some information on the background. I created a JavaScript file that creates a tree out of a json file dynamically. Here is a picture of the result:
As you can see the images are visible outside the box which should not be the case. They should not be displayed outside of the borders.
Here is my html-code:
<div id="fullpage">
<div class="section " id="section0">
...
</div>
<div class="section" id="section1">
...
</div>
<div class="section" id="section2">
<div class="intro">
...
</div>
<div id="media">
...
</div>
</div>
<div class="section active" id="section3">
<div class="slide" id="slide1">
<div id="network_container_1">
<div id="network"></div>
</div>
</div>
<div class="slide active" id="slide2">
<div id="network_container_2">
</div>
</div>
</div>
Here is the CSS:
#network{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#network_container_bewohner{
width: 100%;
height: 100%;
left: 0;
top: 0;
border:1px black solid;
}
#network_container_freunde{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.overlay {
position: absolute;
padding: 4px;
z-index: 0;
}
#slide1{
z-index:0;
}
#slide2{
z-index:1;
}
The images are located as #block1, #block2, #block3, etc. as class overlay inside of #network_container_1.
As you can see I tried to mess around with the z-index but it doesn't work.
Okay I found the solution. The problem was the absolute position.
See here: Position absolute and overflow hidden
I have 3 questions about my jQuery study today.
Why my jQuery code not have the animation effect as it should be? for example, .slideUp() and .slideDown(), my code shows something strange instead of slideUp animation.
I understand, the .hide() or .slideUp() function is only to HIDE the div box, not DELETE them, however, in my code, why the position of other div boxes changed after a DIV .hide()? Shouldn't it stay at their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position, when one DIV box has been hided?
$(document).ready(function() {
$('#panel1').slideUp(1000).delay(1500).slideDown(1000);
});
.panel {
display: inline-block;
width: 80px;
height: 60px;
border: 1px solid green;
position: relative;
top: 20px;
margin-left: 45px;
border-radius: 5px;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
For your first question
Why my jQuery code not have the animation effect as it should be? for
example, .slideUp() and .slideDown(), my code shows something strange
instead of slideUp animation.
The .slideUp() method animates the height of the matched elements. Means it animates height so it reaches 0 (or, if set, to whatever the CSS min-height property is). See here for reference. That is exactly what is happening to your first box it is decreasing in height.
Afterwards the display style property is set to none to ensure that the element no longer affects the layout of the page.
What display none does ?
display:none means that the tag in question will not appear on the
page at all
Now for second and third question
I understand, the .hide() or .slideUp() function is only to HIDE the
div box, not DELETE them, however, in my code, why the position of
other div boxes changed after a DIV .hide()? Shouldn't it stay at
their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position,
when one DIV box has been hided?
The .hide() and .slideUp()function they both add display:none to your tag element. Means they are gone now
Now what can you do to let them stay there, But hidden from view ?
You can use visibility or opacity property instead rather than using display
property.
For example: visibility: hidden; will just hide it from the view.
Will update your fiddle in order to demonstrate it in a while. Hope this will help you. Please feel free to ask if not clear. Thank you.
$(document).ready(function() {
setInterval(function(){
$('#panel1').slideUp(1000).delay(500).slideDown(1000);
}, 3000);
});
.outer-div
{
position: relative;
display: inline-block;
min-height: 1px;
margin-right: 15px;
margin-left: 15px;
width: 130px;
height: 90px;
}
.panel {
border: 1px solid green;
margin-left: 45px;
border-radius: 5px;
position:absolute;
top:0;
width: 100%;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div class="outer-div">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
</div>
You should use display:flex on .panels, that solves your first question.
For second question you should use visibility or opacity.
With current code you are removing it, although it is called hide() it is equivalent to CSS display:none; which doesn't keep space of element.
Although you actually don't need to set visibility in your case because sliding it up will hide element and down show.
Something like this:
$('#panel1').animate({
top: -62 // 60 is height of element plus 2px of borders
}, 1000).delay(1500).animate({
top: 0
}, 1000);
Also you have to change CSS a bit.
Add this to your CSS:
.panels {
display: flex;
overflow: hidden;
margin-top: 20px;
}
And from .panel remove top: 20px;
Full example is here https://jsfiddle.net/_jakob/cphptby3/1/
I want to make a grid 3x3, but problem is that the height on some of the cells will expand with content.
Apart from those height marked with the red arrows, the rest is fixed px.
I made a 3x3 grid with divs to test:
<div id="container">
<div id="one">1</div> <div id="two">2</div> <div id="three">3</div>
<div id="four">4</div> <div id="five">5</div> <div id="six">6</div>
<div id="seven">7</div> <div id="eight">8</div> <div id="nine">9</div>
</div>
#container {
width: 300px;
margin: 0px auto;
}
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 100px;
float: left;
padding: 0px; 0px;
text-align: center;
}
But as soon as I change one height they jump out of place.
Any idea?
It looks to me like you want columns.
A structure like this:
<div class="column-thing">
<div class="left-thing">
<div>A</div>
<div>C</div>
</div>
<div class="right-thing">
<div>B<br>B</div>
<div>D</div>
</div>
</div>
And some absolute positioning:
.column-thing {
position: relative;
}
.left-thing {
left: 0;
position: absolute;
right: 50%;
}
.right-thing {
left: 50%;
position: absolute;
right: 0;
}
Voilà.
You can also use lists (ul/ol, li) (without javascript)
<ul class="list">
<li>
<ul>
<li><div>1<br/>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
</ul>
</li>
...
</ul>
http://jsfiddle.net/xKjNG/
If you want to ensure that there's three divs in each row, you need to ensure that there's actually a div enclosing each set of three divs...
Try this:
<style>
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 100px;
float: left;
padding: 0px; 0px;
text-align: center;
outline: 1px solid black;
}
.clear_float {
clear: both;
}
</style>
<div id="container">
<div id="one">1</div> <div id="two">2</div> <div id="three">3</div><div class = "clear_float"></div>
<div id="four">4</div> <div id="five">5</div> <div id="six">6</div><div class = "clear_float"></div>
<div id="seven">7</div> <div id="eight">8</div> <div id="nine">9</div><div class = "clear_float"></div>
</div>
I'm taking it that the content shouldn't be table based which is why you don't want to use a table.
But an idea would be to use a faux table:
<div class="table">
<div class="tr">
<div class="td">
</div>
<div class="td">
</div>
</div>
</div>
Then on .table add CSS display:table and on .td add CSS display:table-cell.
The naming convention helps work with the code because you'll be used to working with a table's tags structure.
I made a quick example (needed more work than I thought it would): http://jsfiddle.net/cyv6y/1/
needs tidying up a bit but the concept works.
SOLVED:
After re-reading the w3 spec for transforms, I realised the footer was being considered part of the 3d context due to DOM structure and was being affected by rotated elements. I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM.
Having a major problem with a container that is being rotated using css3 transforms and over-writing part of a buttons hit area in another div.
The transform visually works and the container is leaning back (using rotateX). However, the button in the footer, despite being of a higher z-index and naturally stacked to be above the container, is having its hit area ignored where the rotated container and the button visually overlap. The button still 'appears' to be on top of the rotated container, but acts like it is under it.
I should mention im using Less for the css (and all the Less code does work).
I've looked through lots of similar questions and the various solutions didn't work for me. Amongst those that didn't work (vendor prefixes omitted):
translate3d(0px, 0px, 0px);
transform-style: flat;
Here is the short version of the code:
html:
<div class="screen snap" style="display: block;">
<div class="container">**<!-- has perspective set to 1000 -->**
<div class="cardsContainer"> **<!-- is rotated on x using transform -->**
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
</div>
<footer>
**<!-- at certain screen sizes, when the container and footer overlap, top half of this buttons hit area is inactive-->**
<button class="checkButton">Start</button>
</footer>
</div>
</div>
Here are the full length files, look forward to any advice / tips:
.html file:
<div class="screen snap" style="display: block;">
<div class="container">
<div class="cardsContainer">
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
<div class="card" style="left: 420px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">Paint</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Nail</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Apple</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">House</div>
</div>
</div>
</div>
<footer>
<button class="checkButton">Start</button>
</footer>
</div>
</div>
.less file:
.screen.snap .container{
padding: 0;
margin: 0;
border: 0;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 0;
box-shadow: none;
vertical-align: baseline;
background-color: #efe8b6;
-webkit-perspective:1000px;
.cardsContainer{
position:absolute;
width:800px;
height:350px;
top:100px;
text-align: center;
background-color: lighten(#efe8b6, 10%);
-webkit-transform: rotateX(20deg);
.card {
position: absolute;
width:250px;
height:350px;
border-radius: 10px;
.cardFront{
background-image: url('images/snap_card_front.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
.cardContent{
width:200px;
height:300px;
font-size: 37px;
}
}
.cardBack{
background-image: url('images/snap_card_back.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
}
}
}
}
footer{
z-index:999;
background-color: #f00;
position: relative;
.button{
position:absolute;
width:50px;
height:50px;
background-color: #ccc;
border-radius: 5px;
font-size: 25px;
cursor: pointer;
}
}
After re-reading the w3 spec for transforms, I realised what the problem was.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM. I was applying the perspective style to the container which both the footer and the cardsContainer were part of. The footer was then being considered part of the 3d context due to DOM structure and was being affected by rotated elements.
I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context because it is now not inside the dom structure which has perspective style set.
The new structure is now this:
.screen.snap .container{
.cards3dContainer{
-webkit-perspective:1000px;
.cardsContainer{
}
}
.footer{
}
}
Apologies to anyone who may have been working on an answer at the moment.