I want to create a navigation page where 3 images are displayed as diagonal stripes. My first approach was to use div's and to transform -webkit-transform: skew into shape. The problem is that the first and last image leaves a lot of free space.
My second approach would be to use canvas because it allows me to define the shape freely.
I'm not sure if I can use the images as buttons(onclick event) because the shape would be correct, but the div will remain rectangular. With the consequence that if for example the middle image is clicked and the middle div overlap the first div the first function of the first image is triggered.
Do you know a good way to solve this problem? Do you have a better approach?
The idea:
The stripes should have the +- the same size. Unlike my sketch
As requested here the code fragment. Unfortunately there is not much, as I haven't found a clever approach yet:
html, body{
width: 1024px;
height: 768px;
}
:root{
--preset-screen-width: 1024px;
--preset-screen-height: 768px;
--main-img-width: calc((var(--preset-screen-width) / 3) - 5px);
}
/*
.Hidden-Images {
width: 1024px;
height: 768px;
}
*/
.Hidden-Image_1{
width: 1024px;
height: 768px;
background-image: url(../img/redhead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Hidden-Image_2{
width: 1024px;
height: 768px;
background-image: url(../img/brownhead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Hidden-Image_3{
width: 1024px;
height: 768px;
background-image: url(../img/loecklihead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Image-Stripes-Holder{
width: 1024px;
height: 768px;
text-align:center;
background-color: rgb(93, 129, 39);
overflow: hidden;
}
.First-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: red 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
.Second-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: blue 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
.Third-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: green 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
<!doctype html>
<html>
<head>
<title>CH.Valette_S1.C1_2019.1850-DE</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/valette_custom.css">
<link rel="stylesheet" href="modules/essential/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="modules/noBouncing/noBouning.js"></script>
<script type="text/javascript" src="modules/fastSwipe/fastSwipe.js"></script>
<script type="text/javascript" src="modules/essential/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/jquery-ui.min.js"></script>
<script type="text/javascript" src="modules/essential/veeva-lib/veeva-library-3.2.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/accelerator/lib/touchy.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/iscroll.js"></script>
<script type="text/javascript" src="modules/essential/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="Hidden-Images">
<div class="Hidden-Image_1">
</div>
<div class="Hidden-Image_2">
</div>
<div class="Hidden-Image_3">
</div>
</div>
<div class="Image-Stripes-Holder">
<div class="First-Image-Holder">
<!--<img class="First-Image" src="assets/img/redhead_small.jpg">-->
</div>
<div class="Second-Image-Holder">
<!--<img class="First-Image" src="assets/img/brownhead_small.jpg">-->
</div>
<div class="Third-Image-Holder">
<!--<img class="First-Image" src="assets/img/loecklihead_small.jpg">-->
</div>
</div>
</body>
</html>
You can try using a map in your HTML to define click areas. Done this in the past and it works perfectly.
Remember to use
<area shape="poly"> for the map and define coordinates for click areas.
More detailed reading with an example can be found here.
Related
I have some issues with particles-js, firstly, it does not cover the whole page. Secondly, I cannot interact with the particles for some reason.
This is the code for HTML:
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
And this is my css for particles-js:
#particles-js{
position : absolute;
width:100%;
height:100%;
z-index:-1;
background-image: url(gfx/testback.png);
}
[1]: https://i.stack.imgur.com/XO6w5.png
It's really easy to cover all the page with particle-js like my website: https://askianoor.ir
You should add a div with height 100
Edited Version :
<body>
<div class="h-100">
<!-- PARTICLES-->
<div id="particles-js">
<div class="position-absolute w-100">
Place your text here !
</div>
</div>
</div>
</body>
and in CSS :
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url(gfx/testback.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
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>
My question is how can i set full width and height background image for the header in Bootstrap like http://demo.evenfly.com/view?theme=SantaGo ( i am not expecting animations, i am expecting how to make background that fits in to screen like this)?
This is what i have done so far,
https://codepen.io/anon/pen/reYRBo
HTML:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sltac.css">
</head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
<img src="http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg" class="img-responsive" alt="Cinque Terre" width="100%" height="40%" back>
</div>
</header>
</body>
</html>
CSS:
body{
margin:0;
padding:0;
width:100%;
}
#jumboid{
width:100% ;
}
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
header{
width:100%;
height:100%;
height:calc(100% - 1px);
background-image:url('a.jpg');
background-size:cover;
}
At the end i'm expecting the result like this(if i take full page screen shot),
expected result
There is no need to use an extra image tag. Just set the background and the property background-size: cover
Try it like this:
html,
body {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 100%;
background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg) center center no-repeat;
background-size: cover;
}
<body>
<header>
</header>
</body>
Do you have an img tag inside the #jumboid?
In case you don't, you can easily fix it with a background-image on #jumboid.
Edit the css as following:
#jumboid{
width:100% ;
height: 100vh;
background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-size: cover;
background-repeat: no-repeat;
}
(forked) example: https://codepen.io/pimskie/pen/wGPOar
Simply use, using contain keeps your bg-img scalable and responsive-
background-size:contain;
OR if want to have a fixed header height and wan't to keep the image background scaled upto header's width-
background-size:100% 100%;
Hi try this code and Is this what you are looking for.
body {
margin: 0;
padding: 0;
width: 100%;
}
#jumboid {
width: 100%;
}
.bg-image {
position: relative;
background: url("http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg") no-repeat center center /cover;
height: 450px;
background-attachment: fixed;
}
.bg-image img {
display: block;
width: 100%;
margin: 0 auto;
}
header {
width: 100%;
height: 100%;
height: calc(100% - 1px);
background-image: url('a.jpg');
background-size: cover;
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sltac.css">
</head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
</div>
</div>
</header>
<div class="restofthecontent">
<p>your content</p>
</div>
</body>
</html>
Put your image in background of DIV by css not in <img> tag.
and give that DIV below CSS.
.Your_DV {
background-image: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-position: fixed;
background-size: cover;
background-repeat: no-repeat;
}
I'm using the load method to load a webpage with in my website.
// main.js
$(document).ready(function ()
{
$("#content").html("<object data='http://tired.com/'>");
});
// index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/main.js"></script>
<style type="text/css">
#container{
width: 100%;
height: 100%;
}
#content{
margin-top: 10;
margin-left: 100;
margin-bottom: 10;
margin-right: 10;
width: 500px;
height: 500px;
}
</style>
</head>
<title>
Testing loading a html page into a div
</title>
<body>
<div id="container">
<div id="top">
<p> Top </p>
</div>
<div id="content">
</div>
<div id="bottom">
<p> Bottom </p>
</div>
</div>
</body>
</html>
In spite of giving the content div a height and width of 500px, the webpage still loads in it's original size.
How do I make it larger?
Thanks.
It does work, check this fiddle.
JSFiddle Demo Link
You also might want to add px to your margins.
#content{
margin-top: 10px;
margin-left: 100px;
margin-bottom: 10px;
margin-right: 10px;
background:skyblue;
width: 500px;
height: 500px;
padding:10px;
}
I would recommend trying to set style on the object tag itself:
#content object {
width: 500px;
height: 500px;
}
I am trying to make overlay over image while dragging but its also moving image when I move my textarea. So I want my edit area be transparent and overlay image. Please help
Here is what I have
<head>
<style>
.positionable {
width:100px; height:100px;
position:absolute;
}
.dragRegion {
background-color:#FFF; color:#000;
cursor:move;
top: -2px; left: -2px;
position: absolute;
font-size:14px; line-height:14px;
margin: -5px;
padding-left: 10px;
padding-top: 10px;
background-image:url('arrow_move.png');
background-repeat:no-repeat;
}
.editable {
width: 150px; height: 150px; padding: 0.5em;
position:relative;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<div class="positionable">
<div class="dragRegion"/>
<textarea id="resizable" rows="5" cols="20"></textarea>
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" style="z-index: 100" />
<script type="text/javascript">
$('.positionable').draggable({handle: '.dragRegion'});
$('.editable').resizable();
</script>
</div>
Use z-index on the draggable object.
For example:
.dragRegion {
z-index:500
.... old css code
}
You set the code in your CSS