I am trying to fade in and fade out a text using skrollr. Below is the code snippet
<div id="style" data-100="opacity:0;" data-600="opacity:1;" data-700="opacity:0;">
Howdy World
</div>
The CSS is as below
#style{
font-size: 80px;
color: white;
text-align: center;
position: fixed;
}
The fade in and fade out is working as expected. But the text is not aligned to the center.
Should I use Position with data attributes to achieve this or where am I am i going wrong.
Yes you can use data attributes for achieve this.
I have crated JsFiddle http://jsfiddle.net/anjum121/zkym4/
<div id="style" data-100="opacity:0; left:25%;" data-600="opacity:1;left:25%;" data-700="opacity:0;left:25%;" >
Howdy World
Because you have applied "position: fixed" to the div, it will be rendered in absolute positioning. So you need to set the "width" to 100% if you want to align the text on the document.
#style{
font-size: 80px;
color: white;
text-align: center;
position: fixed;
width: 100%;
}
jsfiddle demo
Hope this is helpful.
Related
I'm having a problem that once I use jQuery's .html() to insert a paragraph into a nested div. It's causing it to float outside of it's containing div. I've tried playing with the margins and padding of both divs but to no avail. I'm new to javascript/jQuery and would really like to understand why this is happening. Thanks for the help in advance.
Here's a screenshot link:
Here's my html:
<div class="selectHero">
<div id="ironMan"></div>
<div id="capAmerica"></div>
<div id="thor"></div>
<div id="winterSoldier"></div>
</div>
Here's my javascript:
$('#ironMan').html("<p>IronMan</p>"+"<p> health: "+ironMan.health+"</p>");
Here's my css:
.selectHero {
max-height: 250px;
max-width: 900px;
}
#ironMan {
background-image: url("../images/ironMan.jpg");
background-size: cover;
height: 200px;
width: 200px;
display: inline-block;
text-align: center;
color: white;
font-size: 26px;
}
Try using background-size property. I guess similar question is posted here -
Fit background image to div
I am working on a parallax page and super frustrated when it comes down to keeping the elements position exactly as i want when the window size is changed (responsive). All my elements are text and therefor a bit challenging hence the font-sizes need to follow a long with the positioning. I do not know where to begin with this challenge, as i have been experimenting with the viewport units such as vw and vh without any luck.
I have attached three images that illustrates the element positioning i want to achieve. I have added a background color to the elements to illustrate the positions. How do i achieve this responsiveness on my elements?
Absolute position is a must hence i need to parallax the elements up and down without being independent of any orders.
Fiddle: https://jsfiddle.net/440k02wg/1/
HTML
<section>
<div class="header__1">
A LOT OF TEXT
</div>
<div class="header__2">
BIT MORE TEXT
</div>
<div class="header__3">
SOME TEXT
</div>
</section>
CSS
body, html {
height: 100%;
background-color: black;
}
section {
height: 100%;
position: relative;
}
section > div {
position: absolute;
}
.header__1 {
font-size: 5vw;
color: red;
background-color: grey;
top: 14vh;
}
.header__2 {
top: 25vh;
left: 4vw;
font-size: 10vw;
color: orange;
background-color: white;
}
.header__3 {
top: 48vh;
left: 60vw;
font-size: 5vw;
color: blue;
background-color: green;
}
Is position: absolute; crucial for you? Removing that makes the issue a whole lot simpler, since block elements positioned relatively or statically always stick to their siblings. I've updated your provided example with my suggestion (and some tweaks to have the elements align accordingly).
Fiddle
Hope it's of some help :)
Hi I am trying to get the background of a specific div on my website to be the particleground jquery background - http://jonathannicol.com/blog/2014/08/18/particleground-jquery-plugin-background-particle-systems/ . I followed the steps from here and copied the script correctly, but instead of the background showing up behind the text in a div, it forms another div or section right above it. Troubleshooting steps included; adding a div before the section declaration and giving it the ID="particle", adding a div after the section declaration and giving it the ID="particle". Also making the z-index of each of these divs 1. Here is the HTML for the section :
<div id="particle">
<section class="container-fluid about">
<div class="container parallax-window " data-parallax="scroll" data-image-src="/images/parallax.jpg" >
<div class="row">
<div class="col-md-12">
<p>From concept to roll out, GM Motors...</p>
</div>
</div>
</div>
</section>
</div>
Here is the CSS:
section.about {
background-size: cover;
background-color: #00a1de;
padding-top: 80px;
padding-bottom: 80px; }
Help would be appreciated.
section.about p {
font-size: 26px;
line-height: 1.5em;
color: white;
margin: 0;
text-align: center;
font-weight: 300; }
Here I've created a JSFiddle for the particleground effect you're seeking.
By making a slight change in your CSS you can easily achieve that:
section.about {
position: absolute;
left: 0;
top: 50%;
padding: 0 20px;
width: 100%;
text-align: center;
}
Since reading your que I came to realize that you're using bootstrap so I've also added bootstrap library to check it is supported by particleground or not.
Please have a look. It will do the trick for you.
I have two <div>s with absolute position. One is displayed and the other is display: none on load. When the link on the visible one is clicked it is moved and the other is displayed.
I have a third <div> with link that I would like to display directly below these. Since they’re both position: absolute I have not been able to find a way to do this. I have found various solutions, but most of them are workarounds for using absolute position. Since my <div>s need to show ontop of each other I unfortunately can’t remove the absolute positioning.
As such I have tried various combinations of position: absolute and position: relative on the three <div>s, but so far nothing has worked.
JSFiddle with my problem: https://jsfiddle.net/dagz9tLw/1/
<div> with id linkbar is the one that needs to be at the bottom.
The other two <div>s don’t have a set height so margin-top won’t work. linkbar also needs to be just below the <div>s and not right at the bottom of the page.
I experienced that using a div acting as a buffer is quite useful and easy to implement for this purpose. You just set it above your div#linkbar and adjust it's height on load and when the div#front get's repositioned:
$("#topBuffer").css("height", $("#front").offset().top + $("#front").height());
$("#showLink").click(function() {
if (!$("#back").is(":visible")) {
$("#back").show();
$("#front").animate({
'marginLeft': "+=30px"
});
$("#front").animate({
'marginTop': "+=20px"
});
$("#topBuffer").animate({
'height': "+=20px"
});
}
return true;
});
.front {
width: 400px;
display: block;
border: 2px solid #000000;
text-align: center;
position: absolute;
margin-top: 20px;
z-index: 10;
background-color: white;
}
.back {
display: none;
width: 400px;
border: 2px solid #000000;
text-align: center;
position: absolute;
z-index: 1;
margin-top: 20px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front" class="front">
<a id="showLink" href="javascript:void(0);">front</a>
</div>
<div id="back" class="back">
back
</div>
<div id="topBuffer"></div>
<div id="linkbar">
test
test
test
</div>
I want to overlay the background image of a parent div over the content of its children.
What I have in essence is simple:
<div> <!-- has BGImage -->
<div>
<div>
<iframe /> <!-- serves content that needs to be interacted with -->
</div>
</div>
</div>
The top parent div has a background image (a silhouette of an ipad) and the content in the iframe is a page serving JQuery Mobile content (it is a mobile preview). I can't have another parent div with absolute positioning using z-index because the content in the iframe must remain fully usable and click-able.
The reason I need this is that the inside edge of the tablet silhouette has a transparent inner border, I need this to soften the edges of the served iframe content.
I hope this is achievable, I put the JavaScript and JQuery tags in the question because I am not shy to using if they need to be, but as always, if I can complete this using CSS then I am all for that.
Mock up JS fiddle basically showing what I have: http://jsfiddle.net/fQ22A/1/
The following image is where I am wanting to go based on the JSFiddle above:
Not the way you wanted but your purpose is solved here. http://jsfiddle.net/fQ22A/5/
Full Screen: http://jsfiddle.net/fQ22A/5/embedded/result/
HTML:
<div id="finalCont2">
<div id="insidewrapper2">
<div id="outsidewrapper2">
<div class="fullheight2">
<iframe id="template_preview_iframe" src="http://www.w3schools.com" width="770" height="1024"></iframe>
</div>
</div>
</div>
</div>
CSS:
#insidewrapper2{
background-image:url("http://desktop.ly/images/devices/ipad_mini_black.png");
background-repeat: no-repeat;
display: block;
height: 1289px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 870px;
}
#outsidewrapper2{
position: relative;
}
.fullheight2{
padding-top:133px;
}
#template_preview_iframe{
overflow:hidden;
display:block;
border:none;
margin:0 auto;
}
You can't do that.
...but you can get something close to what I guess your want using a box-shadow inner.
EDIT:
body{border:none;box-shadow: inset 0 0 10px #000;}
http://jsfiddle.net/rwA2f/1/
This could be something closer to what you are actually after:
Demo: http://jsfiddle.net/abhitalks/ZVEug/2/
Full Screen: http://jsfiddle.net/abhitalks/ZVEug/2/embedded/result/
You need to position the iframe inside your div using positioning. Here is a simple markup to give you the idea:
HTML:
<div class="outer">
<iframe src="..." />
</div>
CSS:
div.outer {
width: 320px;
height: 320px;
background: url('...') no-repeat top left;
background-size: 100%;
position: relative;
}
iframe {
border: none;
width: 250px;
height: 220px;
position: absolute;
top: 48px; left: 32px;
border-radius: 10px;
box-shadow: 0 0 30px #fff;
opacity: 0.6;
}
The trick is to use a combination of box-shadow with opacity to give the illusion of soft edges and also meets your requirement of the background peeping through at the same time the iframe contents are usable.
Please notice how the background's reflection (diagonal glass reflection) is visible through the iframe contents.