I have a question in regards HTML I want my text to be in the middle of the image not outside of the image. It has to be inside the image in a specific X and Y position.
My code so far:
<center>
<div style='position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; overflow: show;'>
<div id='loadingtext' style='margin-top: 10px; color: #666; font-family: Arial; font-size: 12px; font-weight: bold;'>Loading Text..</div>
<img src='http://oi58.tinypic.com/2wmou89.jpg'>
</div>
</center>
<div style='-webkit-box-reflect: below -120px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 1.0))); position: absolute; top: 90%; right: 0; bottom: 0; left: 5%; height: 100px; overflow: show; font-family: Arial; font-size: 24px; font-weight: bold; color: #888' id='files'>
</div>
</div>
I would like the text to be in the middle of the image so that people can see the loading text in the middle of the image.
1st: Please remove the keyword "javascript" and replace it by "css" ;)
2nd: The following is a most easy CSS solution. You would need another solution or javascript if the text cannot have a fixed width. But I would suggest to use a fixed width anyway because long lines are ugly.
Forget about the terrible z-index solutions. We do not need z-index. The order of the elements has the same purpose.
3rd: solution
<div style="position: absolute;">
<img src="http://oi58.tinypic.com/2wmou89.jpg">
<div id="loadingtext" style="position:absolute; top:50%; left:50%; color: #666; font-family: Arial; font-size: 12px; margin-top:-6px; width:128px; margin-left:-64px; font-weight: bold;">Loading Text..</div>
</div>
margin-top is 0-(font-size/2) and margin-left is 0-(width/2) ...
You just have to change the containing div's position from absolute to relative and set the div with the id=loadingtext to absolute , z-index and position it according to your needs (eg: left:50%; top:50%;) and the text will be on top of the image.
Related
I'm a beginner web developer creating my first personal portfolio page. I'm trying to use this particle container as a sort of background hero "video."
Codepen.io - https://codepen.io/erikterwan/pen/VpjVvZ
HTML:
<div id="fps"></div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#fps {
position: absolute;
bottom: 5px;
right: 5px;
font-family: sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #fff;
color: rgba(255,255,255,0.5);
z-index: 2;
}
I'll omit the JS for now since it's pretty long, but it's there in the Codepen if you want to take a look (and see what the particle container actually looks like).
I've been trying to overlay an image and text over the container (like my picture with my name under it), but they either just go above or under it, or disappear entirely (I assumed behind it).
My HTML:
<div class="container-fluid">
<div id="fps"></div>
<div class="row">
<div class="col-lg-3 col-lg-offset-4">
<img id="profile-image" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
</div>
</div>
My CSS:
html {
font-family: 'Raleway', sans-serif;
}
/* Navbar Stuff Here */
#fps {
color: #fff;
color: rgba(255,255,255,0.5);
z-index: 2;
}
#profile-image {
border-radius: 100%;
height: 150px;
background-color: yellow;
}
I haven't modified any of the JS.
Would really appreciate if anyone could give some insight or point me in the right direction to figure out this problem!
You just have to absolutely position your <div>:
.container-fluid{
z-index:1;
position: absolute;
}
I have a simple site with two sections. Ideally the section at the top would load at a particular size, but then with the click of a button located at the bottom of this section, the section would increase size to fit screen. If clicked again the section would go back to its original size.
Functionality should be exactly as the one on this site:
http://www.urbandisplacement.org/map/la
I have a couple of questions:
What is the best way to accomplish this effect through JQuery/CSS?
How do I make sure the button stays fixed at the bottom of the growing/shrinking div and moves as the div does?
I've tried resetting the height of the top div when the button is clicked, using JQuery, but this neither animates nor keeps the button at the bottom of the div when it's used.
Thank you!
Here's a simple CSS only version:
https://jsfiddle.net/otenf0fy/
body,#wrapper {
height: 100%;
}
#expand {
display: none;
}
#top {
background: black;
color: white;
padding: 1em;
position: relative;
}
label {
background: blue;
color: white;
border-radius: .5em;
padding: 1em;
display: block;
width: 5em;
text-align: center;
cursor: pointer;
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-2.5em,0);
}
#expand:checked ~ #top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="wrapper">
<input id="expand" type="checkbox">
<div id="top">
<p>
This is just a test
</p>
<label for="expand">Expand</label>
</div>
</div>
</body>
I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});
Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}
I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.
I have two divs that I want to show one and hide the other continuously. The code I have only shows the first one Mass_alert. What must I fix to show and hide both divs in turn.
Here is the HTML.
<div style="position: relative; top: 50px; width: 778px; margin: 0 auto;">
<div id="alerts" style="float: right; width:200px; height: 25px; background: goldenrod; border-radius: 3px 3px 3px 3px; font: 11px Arial; color: #404040; overflow: hidden;">
<div id="Mass_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px;"></div>
<div id="Devotion_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px; visibility: hidden;"></div>
</div>
</div>
The code to do the fade toggle is this one.
$(document).ready(function() {
show_next_Mass(channel_array_sort);
show_next_devotion();
setInterval("show_alerts()",10000);
var continuous = function () {
$("#Mass_alert").fadeToggle(600);
$("#Devotion_alert").fadeToggle(600);
};
setInterval(continuous,600);
});
Judging by this API doc, you need to use display: none; instead of visibility: hidden; for the hidden element.
When you watch what .fadeToggle() does you see the change to the following attributes
opacity: 0;
display: none;
(As also Alexander pointed out in his answer.)
So I've copied this to the style attribute for the second div. But it didn't work. My assumption is jQuery keeps in some way track of what it has done to the elements but not really recognise the initial CSS.
My idea is that jQuery somewhat keeps track of what it has done to the elements but not really recognise the style the HTML came already with. So I cleaned 2nd div's CSS from any hiding related attributes and put a .hide() in the "initialising function".
seems to work (#jsFiddle)
I'm using the latest version of JQuery and trying to animate a div to the left of the screen. It's just about fine, except that it jumps up noticeably before actually animating. I've set it up in jsFiddle here http://jsfiddle.net/ns6string/agY2z/
Be sure to click on either 'portfolio' or 'about' to see what I'm dealing with.
You can see the code I've set up (I tried to clean it up) but here it is again, in case anyone doesn't feel like hitting the jump ;)
HTML:
<body>
<div id="header">
HOME
</div>
<div id="menu">
<div id="portfolio">
<h3 class="menuitem" >Portfolio</h3>
</div>
<div id="about">
<h3 id="about" class="menuitem">About</h3>
</div>
</div>
</body>
CSS:
body{ right: 0px; left: 0px; bottom: 0px; top: 0px; position: fixed; color: #444444; margin: 0px; background-color: #c7c7c7; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
#menu{ text-shadow: 1px 1px 3px white; position: fixed; margin-top:220px; width: 200px; margin-right: auto; margin-left: auto; right: auto; left: 47.5%; }
.menuitem{ display: inline-block; text-align: left; }
JS:
$(document).ready(function() {
//Hovering stuff went here, shouldn't be relevant
$(".menuitem").click(function() {
$("#menu").animate({
'top': '10%',
'left': '7%'
}, {
duration: 500,
queue: false
}, function() {})
});
});
Firstly: Very odd issue.
All you need to do is specify a css value for top: 5% on #menu (should be fine with any value if 5% is not what you want). This will stop the "shake" when you click it.
On a side note I noticed that you've specified values for right and left. I would suggest removing the right value.