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.
Related
The problem is that I already have caption for image, but another caption is appearing when I post from tumblr's mobile app. How can I "teleport" <h2> to .innertitle?
/* begin snippet: js hide: false console: true babel: false */
css:
.innertitle {
position: absolute;
top: 0;
height: 15%;
font-size: 1.5vw;
font-family: sans-serif;
}
.contentbox {
width: 40%;
background: #ccc;
position: relative;
height: auto;
}
.img-around img {
margin-top: 50px;
width: 100%;
}
html:
<div {block:Tags}id="{Tag}"{/block:Tags} class="contentbox">
<div class="innertitle">
{block:Caption}{Caption}{/block:Caption}
</div>
<div class="innerbox">
<div class="img-around">
<img src="https://66.media.tumblr.com/1efb53fff593aeb137b3c9b7b018a708/tumblr_pgggijEb4G1x36lvho1_1280.png">
<h2>This is appearing automatically.</h2>
</div>
</div>
</div>
Sorry for that post, it was a long time ago, I knew English very badly.
For the future, who is interested in how to solve this, what I've done is I posted posts of every kind from Tumblr's mobile app and from website. Then I opened DevTools and looked how do posts posted from mobile app and website differ.
The problem was that Tumblr for some reason puts the p, h1, h2 tags of posts differently than in the mobile app. So I just needed to style both of them.
Again sorry for that post.
I want to customize a swipe plugin with jQuery like the following:
My code structure is:
HTML
<div class="benefit-container">
<div class="benefit-title-container">
<div class="benefit-title">Why use Citrix Service Providers to Help Solve Your Business Problems?</div>
</div>
<div class="benefit-scroll-container">
<div id="benefit-support" class="benefit-sub-title">Support</div>
<div id="benefit-access" class="benefit-sub-title">Access</div>
<div id="benefit-service" class="benefit-sub-title">Service</div>
<div id="benefit-business-model" class="benefit-sub-title">Business Model</div>
<div id="benefit-choice" class="benefit-sub-title">Choice</div>
</div>
</div>
CSS
div.benefit-scroll-container{
position: relative;
margin-bottom: 36px;
overflow-x: visible;
white-space: nowrap;
text-align: center;
border-top: 1px solid #cfd1d3;
border-bottom: 1px solid #cfd1d3;
line-height: 44px;
padding-left: 10px;
padding-right: 10px;
}
My thinking is: when touch move the plugin, I will change the position of benefit-scroll-container.
When I set the "benefit-scroll-container" class with the following and swipe left. I found some part lost as the following picture shown.
div.benefit-scroll-container{
overflow-x: hidden;
}
If I set the "benefit-scroll-container" class with the following.
div.benefit-scroll-container{
overflow-x: visible;
}
Then I swipe left, found the whole page will be swiped left and some of plugin lose the border like the follow picture shown.
How can I solve this problem?
Give a certain width to div.benefit-scroll-container and then provide scroll property like this:
div.benefit-scroll-container {
width: 1000px; //or 100% as per your use
overflow-x: scroll;
}
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 :)
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.
I've been spacing list items using the technique found in this answer, but a recent change is requiring me to insert the elements dynamically. I have found that for some reason the approach completely stops working if the elements are inserted dynamically. Why?
This fiddle demonstrates the static and dynamic versions.
As seen in the linked question, the basic idea is below. It's just when the HTML is inserted to the page via Javascript, the menu items don't justify.
HTML
<div id="menuwrapper">
<div class="menuitem">menu</div>
<div class="menuitem">menu</div>
...
<span class="stretcher"></span>
</div>
CSS
#menuwrapper, #dynamic {
height: auto;
background: #000;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
min-width: 300px; /* just for demo */
}
#dynamic {
background: blue;
}
.menuitem {
width: auto;
height: 40px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
background: #000;
color: yellow;
}
.stretcher {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
There was no spaces between elements.
take a look jsfiddle
document.getElementById("dynamic").innerHTML = '<div class="menuitem">CAREERS</div> <div class="menuitem">TRADE</div> <div class="menuitem">CONTACT US</div> <div class="menuitem">PRIVACY POLICY</div> <div class="menuitem">T&CS</div> <div class="menuitem">SITEMAP</div> <span class="stretcher"></span>';
Some related articles:
- Fighting the Space Between Inline Block Elements
You can do what apple website does and make your menu items display: table-cell;
This is probably not completely cross browser compatible (e.g. IE6 will probably fail), but it does not require any javascript at all