<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#slider {
height: 350px;
width: 70%;
margin: auto;
overflow: hidden;
background: #CCC;
}
.slide {
height: 350px;
float: left;
text-align: center;
border: 1PX SOLID #000;
line-height: 8em;
font-size: 40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>
<script>
$(document).ready(function () {
// you can set this, as long as it's not greater than the cv.slides length
var show = 3;
var w = $('#slider').width() / show;
var l = $('.slide').length;
$('.slide').width(w);
$('#slide-container').width(w * l)
function slider() {
$('.slide:first-child').animate({
marginLeft: -w
}, 'slow', function () {
$(this).appendTo($(this).parent()).css({marginLeft: 0});
});
}
var timer = setInterval(slider, 2000);
$('#slider').hover(function() {
clearInterval(timer);
},function() {
timer = setInterval(slider, 2000);
});
});
</script>
</head>
<body background="../background2.png">
<h1 style="text-align:center; margin-top:60px; color:#fff; fb f font-size:60px">Slider</h1>
<div id="slider">
<div id="slide-container">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>
<div class="slide">Slide 6</div>
</div>
</div>
</body>
</html>
This is the full code for making the slider.
This is a linear type of slider which can be use for to display the products or all about its categories.
How to make this Slider Responsive?
Update the css .
Take out the absolute height value from the slide class and add width: 100%
The reason you want to take out the height is so you do not have a fixed height that becomes a problem when resizing or on smaller devices.
In the slider ID
#slider {
width: 100%;//add this
}
This will have all your slides lined up vertically and responsive.
Here's what you should have for what it seem you are trying to do.
#slider {
width: 100%;
margin: auto;
overflow: hidden;
background: #CCC;
}
.slide {
width: 100%:
height: 350px;
float: left;
text-align: center;
border: 1PX SOLID #000;
line-height: 8em;
font-size: 40px;
}
Related
I built a menu using this method: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push
I need to make it manually resizable by the user.
I added resize: horizontal; to the menu class in CSS, but:
the user can only grab the panel at the very bottom right of the menu, which is very small, it would be better if the mouse could catch and drag the menu border on any place of its vertical right border
the animation to open the menu is now polluting the manual resize, it's like we have to pull very strong on the menu to change its size :) do I have to drop the animation completely if the menu is resizable?
function openMenu() {
document.getElementById("menu").style.width = "500px";
document.getElementById("main").style.marginLeft = "500px";
}
function closeMenu() {
document.getElementById("menu").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
openMenu();
body {
margin-top: 0;
}
.header {
position: fixed;
top: 0;
padding: 5px;
background-color: white;
}
.middle {
padding-top: 100px;
}
.menu {
height: calc(100% - 110px);
width: 0;
position: fixed;
z-index: 1;
left: 0;
background-color: #d3d3d3;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
margin-bottom: 30px;
margin-top: 0;
resize: horizontal;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* ----- MENU CONTENT ----- */
.closebtn {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.closebtn:hover {
color: black;
}
.menuContent {
padding-left: 10px;
height: 100%;
}
h1 {
font-family: 'Rouge Script', cursive;font-family: 'Princess Sofia', cursive;
font-size: 50px;
margin: 0;
}
h2 {
margin-bottom: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
</style>
</head>
<body>
<div class="header">
LOGO IMAGE
</div>
<div class="middle">
<div id="menu" class="menu">
<div class="menuContent">
<h1>Title h1</h1>
×
<h2>Title h2 - 1</h2>
<p>Hello</p>
<h2>Title h2 - 2</h2>
<p>Hello</p>
<h2>Title h2 - 3</h2>
<p>Hello</p>
<h2>Title h2 - 4</h2>
<p>Hello</p>
<h2>Title h2 - 5</h2>
<p>Hello</p>
<h2>Title h2 - 6</h2>
<p>Hello</p>
</div>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openMenu()">☰ menu</span>
<div id="mapBody"></div>
</div>
</div>
</body>
<script>
</script>
</html>
You can add a bit of javascript code and tweak some design of the project to make the bar a bit easy to resize.
code in HTML
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e){
ghostbar.css("left",e.pageX+2);
});
});
$(document).mouseup(function(e){
if (dragging)
{
$('#sidebar').css("width",e.pageX+2);
$('#main').css("left",e.pageX+2);
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
body,html{width:100%;height:100%;padding:0;margin:0;}
#main{
background-color: BurlyWood;
float: right;
position: absolute;
height:200px;
right: 0;
left:200px;
margin-top:10px;
}
#sidebar{
background-color: IndianRed;
margin-top:10px;
width:200px;
float: left;
position: absolute;
height:200px;
overflow-y: hidden;
}
#dragbar{
background-color:black;
height:100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}
<div id="sidebar">
<span id="position"></span>
<div id="dragbar"></div>
sidebar
</div>
<div id="main">
main
</div>
code in css for the HTML :
body,html{width:100%;height:100%;padding:0;margin:0;}
#main{
background-color: BurlyWood;
float: right;
position: absolute;
height:200px;
right: 0;
left:200px;
margin-top:10px;
}
#sidebar{
background-color: IndianRed;
margin-top:10px;
width:200px;
float: left;
position: absolute;
height:200px;
overflow-y: hidden;
}
#dragbar{
background-color:black;
height:100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}
Javascript :
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e){
ghostbar.css("left",e.pageX+2);
});
});
$(document).mouseup(function(e){
if (dragging)
{
$('#sidebar').css("width",e.pageX+2);
$('#main').css("left",e.pageX+2);
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
Hope this gives an idea of what you're trying to do.
I have a section in my web page that has has multiple content, so I decided to give it a fixed height and a scrollbar with overflow-y: scroll. In order to facilitate navigation I added a navigation bar on top of the section with anchor links to each content inside the section. My issue is whenever you click on an anchor link, the parent page scroll along with the section, witch makes the navigation bar disappear, so you have to scroll the parent page back up to find the navigation bar again.
Here's a quick example of what I mean: as you see the body section is scrolling to the target too when I only want the scrollview section to scroll. How do I fix this behavior?
Note: the smooth scroll part is not really important as of now, I included it only to show my final intentions.
body{height: 100em}
#scrollviewsection
{
background-color: white;
}
#navbar {
overflow: hidden;
background-color: #333;
position: relative;
top: 0px;
}
/* tabbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
#scrollview
{
height: 40em;
width: auto;
overflow-y: scroll;
overflow-x: hidden;
scroll-behavior: smooth !important;
}
#part1 {height:10em;background-color: #cc6699}
#part2 {height:10em;background-color: #e68a00}
#part3 {height:10em;background-color: #00ffff}
#part4 {height:10em;background-color: #5cd65c}
<body>
<div style="height:10em"></div>
<section id="scrollviewsection">
<div id="navbar">
part1
part2
part3
part4
</div>
<div id="scrollview">
<div id="part1">part1</div>
<div style="height:10em"></div>
<div id="part2">part2</div>
<div style="height:10em"></div>
<div id="part3">part3</div>
<div style="height:10em"></div>
<div id="part4">part4</div>
</div>
</section>
</body>
EDIT: I tried using jquery smooth scrolling because I remembered that I can control what element to animate, now I have a whole bunch of new errors: for example when I click on part2 from part1 it scroll past the target.
$('#navbar a').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('#scrollview').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
body {
height: 100em
}
#scrollviewsection {
background-color: white;
}
#navbar {
overflow: hidden;
background-color: #333;
position: relative;
top: 0px;
}
/* tabbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
#scrollview {
height: 40em;
width: auto;
overflow-y: scroll;
overflow-x: hidden;
}
#part1 {
height: 10em;
background-color: #cc6699
}
#part2 {
height: 10em;
background-color: #e68a00
}
#part3 {
height: 10em;
background-color: #00ffff
}
#part4 {
height: 10em;
background-color: #5cd65c
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body>
<div style="height:10em"></div>
<section id="scrollviewsection">
<div id="navbar">
part1
part2
part3
part4
</div>
<div id="scrollview">
<div id="part1">part1</div>
<div style="height:10em"></div>
<div id="part2">part2</div>
<div style="height:10em"></div>
<div id="part3">part3</div>
<div style="height:10em"></div>
<div id="part4">part4</div>
</div>
</section>
</body>
I think this is what you're looking for:
Edited to allow for body scroll
Basically what I did is set the <body> overflow to hidden and then gave the navbar a fixed height and the scrolling div a top margin that matches the height of the navbar to keep them adjacent to one another vertically.
Setting the height of the scrolling div (#scrollview) to 40em is probably not what you want in your final version, but I leave that to you. That is what causes "part4" to not show up when you scroll down in the snippet below.
body{
height: 100%;
overflow-y: scroll; /* or auto */
}
#scrollviewsection
{
background-color: white;
height: 100%;
}
#navbar {
overflow: hidden;
background-color: #333;
position: fixed;
width: 100%;
top: 0px;
height: 3em;
}
/* tabbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
#scrollview
{
height: 40em;
width: auto;
overflow-y: scroll;
overflow-x: hidden;
scroll-behavior: smooth !important;
display: block;
margin-top: 3em;
}
#part1 {height:10em;background-color: #cc6699;}
#part2 {height:10em;background-color: #e68a00}
#part3 {height:10em;background-color: #00ffff}
#part4 {height:10em;background-color: #5cd65c}
<body>
<!-- <div style="height:10em"></div>-->
<section id="scrollviewsection">
<div id="navbar">
part1
part2
part3
part4
</div>
<div id="scrollview">
<div id="part1">part1</div>
<div style="height:10em"></div>
<div id="part2">part2</div>
<div style="height:10em"></div>
<div id="part3">part3</div>
<div style="height:10em"></div>
<div id="part4">part4</div>
<div style="height:10em"></div>
</div>
</section>
</body>
My idea is, when my Boolean variable is true, than a grey container with a opacity overlaps the orange and with a higher z-index.
I can't click on some buttons or else inside the orange container.
But I need the flexbox on the wrapper.
At the moment, my idea with the z-index failed, and it's flex in a row.
How can I fix this and put the grey above the orange (both 100% width and high of the wrapper) and still using flexbox.
Important: When its overlapped, I can't click in the orange container, looking like it is disabled.
I've got following code:
angular.module("myApp", []).controller("myController", function($scope) {
$scope.isDisabled = true;
});
.wrapper {
display: flex;
width: 100%;
height: 50px;
border: 1px solid red;
z-index: 100;
}
.overlapped {
width: 100%;
height: 100%;
background-color: grey;
opacity: 0.5;
z-index: 102;
}
.someContent {
width: 100%;
height: 100%;
background-color: orange;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" class="wrapper">
<div ng-if="isDisabled" class="overlapped"></div>
<div class="someContent">I have some random content...</div>
</div>
To make the container overlaying the other:
just use position:relative in the parent .wrapper and position:absolute in overlapped
To disable the orange container:
use pointer-events:none linked to your Boolean variable. (might be optional)
angular.module("myApp", []).controller("myController", function($scope) {
$scope.isDisabled = true;
$scope.isPointer = true;
});
.wrapper {
display: flex;
width: 100%;
height: 50px;
border: 1px solid red;
position: relative;
}
.overlapped {
width: 100%;
height: 100%;
background-color: grey;
opacity: 0.5;
z-index: 1;
position: absolute;
}
.someContent {
width: 100%;
height: 100%;
background-color: orange;
}
.pointer-events {
pointer-events: none
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" class="wrapper">
<div ng-if="isDisabled" class="overlapped"></div>
<div ng-if="isPointer" class="someContent pointer-events">I have some random content...</div>
</div>
I am using CarouFredSel as my carousel and I want to visually vertically align the text content within this carousel to my body content. I know you can do this with javascript (I have commented it out) by adjusting the left property of #carousel based on the browser width but I am looking for a CSS solution.
The blue screenshot on the left is displaying the website when the browser is maximized, and the 'link3' in the carousel appears to be aligned with 'content'. The red screenshot on the right is displaying the website when the browser is minimized, and 'link1' is not visually aligned with 'content'.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css">
<script type="text/javascript" language="javascript" src="<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>"></script>
<script type="text/javascript" language="javascript" src="http://www.sfu.ca/~jca41/stuph/jquery.carouFredSel.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#carousel').carouFredSel({
items: 1,
scroll: {
fx: 'crossfade',
duration: 1000
},
pagination: {
container: '#pager',
duration: 500
}
});
/*$(window).resize(function() {
var winW = $(window).width();
var carouselWidth = $('#carousel .slide').css('width');
carouselWidth = carouselWidth.replace(/[^0-9]/g, '');
if (winW > carouselWidth) {
$('#c-carousel').css('left', (winW-carouselWidth)/2 + 'px');
} else {
$('#c-carousel').css('left', '0px');
}
}).resize();*/
});
</script>
<style type="text/css" media="all">
#heroicCarousel {
height: 100%;
padding: 0;
margin: 0 auto;
min-height: 250px;
position: relative;
z-index: 1000;
text-align:center;
max-width:600px;
}
.caroufredsel_wrapper {
width: 100% !important;
height: 100% !important;
}
#carousel {
position: absolute !important;
}
#carousel .slide {
width:600px;
height:250px;
overflow: hidden;
float: left;
}
#carousel .slide .content {
font-size: 55pt;
position: relative;
top: -100px;
left: 150px;
z-index: 5;
}
#carousel .slide img {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
#pager {
position: relative;
top: -700px;
left: 0;
z-index: 10;
display: block;
text-align: center;
}
#pager a {
background-color: #356;
display: inline-block;
width: 15px;
height: 15px;
margin-right: 6px;
border-radius: 10px;
box-shadow: 0 1px 1px #cef;
}
#pager a.selected {
background-color: #134;
}
#pager a span {
display: none;
}
#content {
background: yellow;
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
z-index: 20px;
top: -520px;
font-size: 60pt;
}
</style>
</head>
<body>
<div id="heroicCarousel">
<div class="caroufredsel_wrapper">
<div id="carousel">
<div class="slide">
<img src="http://www.placehold.it/600x250/ff0000/999999">
<div class="content">link1</div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/00ff00/999999">
<div class="content">link2</div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/0000ff/999999">
<div class="content">link3</div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/f0f0ff/999999">
<div class="content">link4</div>
</div>
</div>
</div>
<div id="pager">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<div id="content">
content
</div>
</body>
</html>
I usually do it with a wrapping elem around the divs. This elem is as wide as your widest div and any children with margin:0 auto; are centered to it. Example http://jsfiddle.net/5LJhC/1/
Very simple example but shows how as the carousel width changes the content div is centered
I am struggling with getting the layout of the header i have in mind together.
Here is the html so far:
<div id="header">
<img src="/img/headerBg.jpg" alt="" class="headerBg" />
<img src="/img/logo.png" alt="Logo" class="logo" />
<div id="loginBox">
other code
</div>
</div>
And the css so far:
#header {
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
}
.logo {
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
What I am trying to accomplish, is have the image "headerBg.jpg" display to 100% width of the div "header", so essentially it will be the background of the div itself. Then have the image "logo.png" and the div "loginBox" display above "headerBg.jpg".
The logo should be floated to the far left end and the loginBox floated to the far right as in the css.
With the image removed, the logo and div are placed correctly, but when the image is introduced they two floated items are placed after the image in the flow.
I have tried various additions and reconfigurations but none have proven to work out how I want them to.
I have added the image in the css as a background to the header div, but it does not stretch 100% that way.
Would anyone be able to provide some insight on this?
Also any tutorials covering things like this would be a great addition to my collection!
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
#header {
position:relative;
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
position:relative;
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.logo {
position:relative;
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/headerBg.jpg" alt="" class="headerBg" />
<img src="img/logo.png" alt="Logo" class="logo" />
<div id="loginBox">
other code
</div>
</div>
</body>
</html>
.header {
position: relative;
}
.headerBg {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
}
Note that this will scale the image to fit the width of the <div>; if you only want it to resize horizontally then you should set the height explicitly.
You could also try max-width: 100%; if you only want the image to scale on large windows.
Just make the header background image the true background of that div. Float does not ignore other objects the way that position: absolute does.
#header {
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
background: url(headerBg.jpg);
}
Set the div class which will not show any extra parts.
div {
overflow: hidden;
}
These settings worked perfect for me.. it will size ur photo for all pics..
#headerBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<!--link rel="stylesheet" href="#"-->
<style>
.mySlides {
display: none;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
height: 195px;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
}
.img2 {
float: center;
display: inline-block;
}
</style>
<style type="text/css">
.c4 {
max-width: 500px
}
.c3 {
width: 100%
}
.c2 {
display: inline-block;
text-align: center;
width: 100%;
}
.c1 {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2 class="c2">Automatic Slideshow</h2>
<div id="header" class="c2">
<img class="img2 c1" src="./img/16px/avi.png" alt="Pineapple">
<h1 class="c2">
I want to be
</h1>
<div class="c4">
<img id="carousel" src="" class="c3">
</div>
</div>
<script>
//set up things
var images = [];
images[0] = "./img/16px/avi.png";
images[1] = "./img/16px/bmp.png";
images[2] = "./img/16px/cpp.png";
var n = images.length - 1;
var carouselimg = document.getElementById("carousel");
var header = document.getElementById("carousel");
// preload all images
carouselimg.style.display = "none";
for (var i = 0; i < n; i++) {
carouselimg.src = images[i];
}
carouselimg.style.display = "block";
//prepare first round
var carouselIndex = 0;
// start show
rotate();
function rotate() {
var dr = header.getBoundingClientRect();
carouselimg.style.width = dr.width;
carouselimg.src = images[carouselIndex];
//index is a global variable
//so its state will be kept and we can load the first / next image
carouselIndex++;
// increment image array index
if (carouselIndex > n) {
// do we rech the end
carouselIndex = 0
// start from begin
}
setTimeout(rotate, 2000);
// restart rotation every 2 seconds
}
</script>
</body>
</html>
try using in your css:
max-height:100%;