How I can make an application with irregular borders? [duplicate] - javascript

Is it possible to make a <div> element contain a background image, and if so, how would I go about doing this?


You mean this?
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
</div>


You can do that using CSS's background propieties. There are few ways to do it:
By ID
HTML:
<div id="div-with-bg"></div>
CSS:
#div-with-bg
{
background: color url('path') others;
}
By Class
HTML:
<div class="div-with-bg"></div>
CSS:
.div-with-bg
{
background: color url('path') others;
}
In HTML (which is evil)
HTML:
<div style="background: color url('path')"></div>
Where:
color is color in hex or one from X11 Colors
path is path to the image
others like position, attachament
background CSS Property is a connection of all background-xxx propieties in that syntax:
background:
background-color
background-image
background-repeat
background-attachment
background-position;
Source: w3schools


Yes:
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>


Use this style to get a centered background image without repeat.
.bgImgCenter{
background-image: url('imagePath');
background-repeat: no-repeat;
background-position: center;
position: relative;
}
In HTML, set this style for your div:
<div class="bgImgCenter"></div>


Use like ..
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>


You can simply add an img src Attribute with id:
<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>
and in your CSS file (stretch background):
#backgroundimage
{
height: auto;
left: 0;
margin: 0;
min-height: 100%;
min-width: 674px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}


<div class="foo">Foo Bar</div>
and in your CSS file:
.foo {
background-image: url("images/foo.png");
}


<div id="image">Example to have Background Image</div>
We need to Add the below content in Style tag:
.image {
background-image: url('C:\Users\ajai\Desktop\10.jpg');
}


For the most part, the method is the same as setting the whole body
.divi{
background-image: url('path');
}
</style>
<div class="divi"></div>

Related

How to Use scrollr (jquery plugin) on specific div to make a parallax effect happen

Hi I was using a Scrollr jquery plugin made by Alexander Prinzhorn to make a parallax effect. I made a parallax effect happen on full screen, but when I wanted it to happen on a specific div, it doesn't work. The original tutorial is made by Petr Tichy. I hope You can help me out here.
This is the code
css file
.con{
width: 500px;
height: 500px;
overflow: auto;
margin: 40px; background-color: #b3b3b3;
}
body{
padding: 0;
margin: 0;
background-color: #a3a3a3;
}
section{
height: 400px;
}
#slide-1 .bcg{
display: block;
}
#slide-2 .bcg{
display: block;
}
.bcg{
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 500px;
width: 500px;
}
These are script files I included.
<script src="path to jquery/jquery-1.9.1.min.js"></script>
<script src="path to scrollr js /skrollr.js"></script>
<script>
//initialize the scrollr function
$(document).ready( function(){
var s = skrollr.init({
forceHeight: false });
});
</script>
html file
<div class="con">
<section id="slide-1">
<div class="bcg" style="background-image: url('img1.jpg')"
data-center-top="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-anchor-target="#slide-1"
data-emit-events>
</div>
</section>
<section id="slide-2">
<div class="bcg" style="background-image: url('img2.jpg')"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-2"
data-emit-events>
</div>
</section>
</div>

Showing element in front of common backdrop

We want to find a solution to show just the green box in front of the backdrop (#back). And this without modifying the html.
HTML:
<div id="body" style="z-index:1;position:relative;">
<div id="div1" style="z-index:4;position:relative;">
</div>
<div style="z-index:4;background-color: red; width: 70px;position:relative;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
<div id="back" style="z-index:5;">
</div>
</div>
CSS:
#body {
background-color: blue;
width: 500px;
height: 500px;
position: relative;
}
#div1 {
position:relative;
background-color: white;
width: 100px;
height: 100px;
}
#back {
position: absolute;
top:0;
width: 100%;
height: 100%;
opacity: 0.7;
background-color: black;
}
div {
width: 50px;
height: 50px;
}
There is a fiddle of our problem :
https://jsfiddle.net/ruj23c60/3/

<div style="z-index:4;background-color: red; width: 70px;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
Removing the style position: relative from the parent of #div2 is sufficient already

There are two way as i know.
First:
You need to give z-index:3 to #back. (less than #div2 parent div) then you can make it front of #back
But this way whole div come in front of black(#back) div.
Fiddle
Second:
Make position:adsolute; to #div2 and remove position:relative; from it's parent.
Fiddle
Note: I have comment opacity: 0.7; from #back to understand properly.

javascript - get div width and add to border

Hey I want to get the width of a div and add it to a css class as border width. Thanks in advance!
Here is the div:
<div id="web" class="well">
<div style="padding:19px">
<a style="text-decoration:none;" class="boxclose web_close"></a>
<h2 style="color:#242424; font-weight:bold;"><em style="color:#4fd886;">—</em> Web.</h2>
<p></p>
</div>
</div>
and here is the CSS class:
.well:before {
width: 0;
height: 0;
content: "";
border-bottom: 81px solid #fff;
border-left:/*WIDTH HERE*/ solid transparent;
position: absolute;
bottom: 100%;
}

I didn't mention you want border any one sided like border-left, right etc. or border in all direction.
I've tried to solve your query please find fiddle link below..
find js fiddle demo
.well{
position:relative;
float:left;
}
.well:before {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left:0;
border:1px solid red;
}

div always on top of fixed element

what I'm trying to do is simple to tell. There is fixed div on my page on bottom. It must be always shown on bottom, so position fixed is used.
In this div there are 2divs, one small must be always on top of this fixed div, another must be scrollable.
The problem is small div, if I give him position fixed, it is position to top of window, not on top of this fixed div, as you can see in this fiddle
If small div is position absolute, it is on top of fixed div, but if it is scrolled, as you can see in this fiddle
HTML
<div class="bottom">
<div class="top"></div>
<div class="content"></div>
</div>
CSS
.bottom
{
padding:20px;
height: 253px;
position: fixed;
bottom:0px;
width:100%;
background-color: red;
overflow-x: hidden;
overflow-y: scroll;
}
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
top: 0px;
}
.content
{
height: 1500px;
background: linear-gradient(green, blue);
}
Is is possible to make this work without watching scrolling by jvascript? By pure CSS?

You can use a wrapper <div> for the content and let it scroll - so that the absolutely positioned sibling does not scroll along with it, as follows:
HTML
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
CSS
.contentWrap{
height:100%;
overflow-y:auto;
}
* {
margin: 0;
padding: 0;
}
.bottom {
padding: 20px;
height: 253px;
position: fixed;
bottom: 0px;
width: 100%;
background-color: red;
overflow: hidden;
}
.top {
height: 50px;
width: 100%;
background-color: yellow;
position: absolute;
top: 0px;
}
.contentWrap {
height: 100%;
padding-top: 30px; /* .top height - .bottom padding*/
overflow-y: auto;
}
.content {
height: 1500px;
background: linear-gradient(green, blue);
}
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
JSFiddle Demo

Your approach using fixed -> absolute is absolutely correct since you can position an element absolute but relative to its parent by doing so. The problem is that the absolute .top always appears on top of .bottom - so if .bottom is scrolled, .top will follow.
My solution would be using position:fixed; on .top, but using bottom instead of top:
.top {
....
position:fixed;
bottom:253px; /*note sure how it should look at the end, try it yourself*/
}

Add div with class top inside div with class content and remove top:0 from .top class:
html
<div class="bottom">
<div class="content" >
<div class="top"></div>
</div>
<div>
css
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
}
fiddle

Try this, it basically just puts a frame container around your scrollable div to keep everything in place. JSFiddle
<div class="bottom">
<div class="top"></div>
<div class="scroll-container">
<div class="content" ></div>
</div>
<div>
.scroll-container
{
height: 203px;
overflow-y: scroll;
}
Also, remove overflow-y: scroll; from the .bottom class

If you already dealing with fixed heights & positions, why not just position the 'top' section as fixed as well? check the Fiddle Demo
like so:
.top
{
height:50px;
bottom:243px;
width:100%;
background-color: yellow;
position: fixed;
}

How do I show just one image and center it in a slider?

I'm using iosslider but can't seem to show just one image in the slider at a time. I'm also trying to center the single image shown. Here is what I have for HTML:
HTML:
<div class = 'iosSlider'>
<div class = 'slider'>
<div class="item">
<img src="/images/nature1.png" />
</div>
<div class="item">
<img src="/images/nature2.png" />
</div>
</div>
</div>
My CSS looks like this:
.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 300px;
border: solid 1px #ff0000;
}
/* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .slider .slide {
/* required */
float: left;
width: 100%;
height: 100%;
}
.iosSlider .slider .item img {
width: auto;
height: 300px;
border: solid 1px #00ff00;
}
I'm basically trying to show just one centered image at a time in the slider. Below is what I currently see. As you can see the image to the right is also shown.
Any idea how I can do this with my CSS?
Try resizing the window and you'll see my issue. I'm running this on a mobile webpage that has 320x480 resolution.

Give the images width/height of 100% and you can also position them absolutely:
.iosSlider .slider .item img {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
border: solid 1px #00ff00;
}

Ok do one thing use javascript or jQuery here to loop through your set of images.
Now add another class to the centered or focused image when jQuery function selects it like <div class = 'iosSlider'>
<div class = 'slider'>
<div class="item current">
<img src="/images/nature1.png" />
</div>
<div class="item">
<img src="/images/nature2.png" />
</div>
</div>
</div>
and when the next image got focus, remove this class "current" from 1st image and apply to 2nd one and so on.
And wrtite css for this class current liek allign: center; margin-left:auto; margin-right:auto; and other necessary css.

Categories

Resources