Can some CSS guru help me getting this layout.
What I have here is
<div class="movieList">
<div class="image" selected = true>
<img class="poster" src="image1" selected = true/>
</div>
<div class="image">
<img class="poster" src="image1"/>
</div>
<div class="image">
<img class="poster" src="image2"/>
</div>
.
.
</div>
Thanks
Start with:
.cover {
float:left;
margin-left:-50px;
}
and go from there.
Example: http://jsfiddle.net/steve/T2qHR/ (centered, pure CSS, enlarging effect)
See this http://www.jsfiddle.net/hKQcX/4/
$(function(){
$('.movie').live('mouseover', function(){
var $movie = $('.movie');
$movie.css('z-index', 0);
$movie.css('opacity', .50);
$movie.css('width', '100px');
$movie.css('height', '150px');
$movie.css('margin-top', '0');
var $this = $(this);
$this.css('z-index', 100);
$this.css('opacity', 1.00);
$this.css('width', '120px');
$this.css('height', '180px');
$this.css('margin-top', '-15px');
});
var i=0;
for (i;i<10;i++){
if(i%2==0)
$('#container').append('<div class=\"movie red \"></div>');
else
$('#container').append('<div class=\"movie green\"></div>')
}
});
in your css
#container{
margin-left: 50px;
margin-top: 100px;
}
.movie{
position: relative;
float:left;
width:100px;
height: 150px;
margin-left:-50px;
}
.red{
background-color:red;
opacity: .5;
}
.green{
background-color:green;
opacity: .5;
}
If you want to display them than Steve has the right answer, if you want to align that container in the center then:
.cover {
margin: 0 auto;
width:600px;
}
Related
I know it's widely answered question but i'm trying to let an ABSOLUTE element from a stacking context go in front of another stacking context. It's driving me crazy !
Here is what I want to implement :
function expand() {
var x = document.getElementById('expandable')
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.container{
transform:translate(0);
position:relative;
width: 100%;
height:100px;
z-index:0;
}
.red {
background-color:red;
}
.orange {
background-color:orange;
}
#expandable{
background-color:green;
position:absolute;
top:100%;
width:50px;
height:200px;
z-index:999;
}
<div class="container red">
1
<button onclick="expand()">
expand
</button>
<div id="expandable" style="display:none;">
</div>
</div>
<hr>
<div class="container orange">
2
</div>
The problem is : I would like the green div to go in front of the other.
Here jsfiddle link : https://jsfiddle.net/8ure2159/
Add a position to both containers, then position the red one higher than the orange one.
function expand() {
var x = document.getElementById('expandable')
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.container {
position: relative;
width: 100%;
height:100px;
}
.red {
background-color:red;
z-index: 2;
}
.orange {
background-color:orange;
}
#expandable {
background-color:green;
position:absolute;
top:100%;
width:50px;
height:200px;
}
<div class="container red">
1
<button onclick="expand()">expand</button>
<div id="expandable" style="display:none;"> </div>
</div>
<hr>
<div class="container orange">2</div>
This method brings the green box in front of both orange and red divs:
I moved #expandable outside of the red div and gave expandable a top position of 0 instead of 100%;
It's not clear as to whether you want that green box on top of both or one of the other divs.
function expand() {
var x = document.getElementById('expandable')
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.container {
transform: translate(0);
width: 100%;
height: 100px;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
#expandable {
background-color: green;
position: absolute;
top: 0;
width: 50px;
height: 200px;
z-index: 999;
}
<div class="container red">
1
<button onclick="expand()">
expand
</button>
</div>
<div id="expandable" style="display:none;">
</div>
<hr>
<div class="container orange">
2
</div>
Investigating and, putting together my code little by little, I have achieved a carousel with the mouseup function that allows me to move the products by pressing the left button of the mouse without releasing it, so far it goes very well, well sometimes it remains as stalled, that is, without having pressed if I move the pointer moves the products.
What I want to achieve in my code is to be able to integrate two buttons, one right and one left, to also be able to move the products of the carousel in that way. How can I achieve it, can you explain to me?
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function(){
// vars for clients list carousel
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140); // 140px width for each client item
$product_carousel.css('width',product_width);
var rotating = true;
//var product_speed = 1800;
//var see_products = setInterval(rotateClients, product_speed);
$(document).on({
mouseenter: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + ( e.pageX - scroll ) +"px, 0)")
}
});
});
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div> <div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
The goal here is to shift the order of elements to the left or right. With jQuery this is exceptionally easy.
The logic is as so:
To shift the order to the right, select the last item, delete it, then insert before the first item
To shift the order to the left, select the first item, delete it, then insert after the last item
To achieve this, we attach a click event listener to each respective button. We select all the slider items with the selector $('.item.product'), use last() and first() to get the first and last items, and the remove() function to delete the element. Then, to reorder, we use jQuery's insertBefore() and insertAfter().
This is the result:
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
And the rest is just a matter of styling (note: uses Material Icons for the arrow icons). Define two button elements;
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
The "chevron_right" and "chevron_left" are icon names | List of Icons
Set their position to fixed so that their position isn't lost when the user scrolls. Set the top attribute to calc(50vh - 50px), where 50vh is half the height of the viewport and 50px is the height of the button (to make it exactly in the "center").
A full example (best viewed in full page mode):
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function() {
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140);
$product_carousel.css('width', product_width);
var rotating = true;
$(document).on({
mouseenter: function() {
rotating = false;
},
mouseleave: function() {
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + (e.pageX - scroll) + "px, 0)")
}
});
});
/* button integration styling (start) */
#left {
left: 10px;
}
#right {
right: 10px;
}
.nav-btn {
position: fixed;
top: calc(50vh - 50px);
z-index: 100;
z-index: 100;
height: 50px;
width: 50px;
border-radius: 50%;
cursor: pointer;
background-color: white;
box-shadow: 0 0 1px black;
transition: 0.2s;
}
.nav-btn:hover {
background-color: #d1d1d1;
}
/* button integration styling (end) */
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96&d=identicon&r=PG&f=1">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Spectric</h3>
</div>
<div class="author">
<span>Spectric</span>
</div>
<div class="purchased items-center">
<button>Check out</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
I have a search bar which would like to display onto the header on scroll, a great example is like the one on this site: https://www.indiamart.com/
Approach 1 - A simple way to do this would be to detect a scroll & add and remove a class that contains display: none;
You can have an event listener -
window.addEventListener('scroll', function() {
if( window.scrollY !== 0) {
document.getElementById('searchBar').classList.add('scrolled');
} else {
document.getElementById('searchBar').classList.remove('scrolled');
}
});
With the CSS -
.noScroll
{
background: yellow;
position:fixed;
height: 50px; /*Whatever you want*/
width: 100%; /*Whatever you want*/
top:0;
left:0;
display:none;
}
/*Use this class when you want your content to be shown after some scroll*/
.scrolled
{
display: block !important;
}
.parent {
/* something to ensure that the parent container is scrollable */
height: 200vh;
}
And the html would be -
<div class="parent">
<div class ='noScroll' id='searchBar'>Content you want to show on scroll</div>
</div>
Here's a JSFiddle of the same - https://jsfiddle.net/kecnrh3g/
Approach 2 -
Another simple approach would be
<script>
let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById('searchBar').style.top = '-50px';
} else {
document.getElementById('searchBar').style.top = '0';
}
prevScrollpos = currentScrollPos;
}
</script>
with the html -
<div class="parent">
<div id ='searchBar'>Content you want to show on scroll</div>
</div>
and css
#searchBar {
background: yellow;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
display: block;
transition: top 0.3s;
}
.parent {
height: 200vh;
}
Here's a JSFiddle of the same - https://jsfiddle.net/0tkedcns/1/
From the same example, the idea is only to show/hide once user scroll the page using inline css display property, you can do the same or at least provide a code sample so we can help you!
HTML
<div class="search-bar">
<div class="sticky-search">
Sticky Search: <input type="text" value="search" />
</div>
</div>
CSS
.sticky-search {
display:none;
position:fixed;
top:0px;
left:0px;
right:0px;
background:blue;
padding:10px;
}
JS
var searchHeight = $(".search-bar").outerHeight();
var offset = $(".search-bar").offset().top;
var totalHeight = searchHeight + offset;
console.log(totalHeight);
$(window).scroll(function(){
if($(document).scrollTop() >= totalHeight) {
$('.sticky-search').show();
} else {
$('.sticky-search').hide();
}
});
Hey I am making a website and have recently seen some problems With css. My header div Works great maybe because I have styled it With Width 100%. But my main and side div seems to have some problems with the size. I have a Width of 1288px on my main id and when I checked it it is way less. I want my side div to be 30% of the Width of the page and the main div to be 70% of the page. How can I do this?
Here is my php code:
<?php
$tjener = "localhost";
$brukernavn = "root";
$passord = "";
$database = "searchengine";
$connection = mysqli_connect($tjener,$brukernavn,$passord,$database) or die("could not connect");
$connection->set_charset("utf8");
$output = "";
//collect
if(isset($_POST["q"])) {
$searchq = $_POST["q"];
$searchq = mysqli_real_escape_string($connection,$searchq);
$searchq = htmlspecialchars($searchq);
$query = mysqli_query($connection,"SELECT * FROM products WHERE vareNavn LIKE '%$searchq%' OR desci LIKE '%$searchq%'");
$count = mysqli_num_rows($query);
if($count == 0) {
$output = "There was no search results.";
} else {
while ($row = mysqli_fetch_array($query)) {
$id = $row['vareNr'];
$vareNavn = $row['vareNavn'];
$desci = $row['desci'];
$output .= "<h1>" . $vareNavn . "</h1><p> " . $desci . "</p><br/>";
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script>
function active(){
var Search = document.getElementById("search");
if(search.value == "Search..."){
search.value = "";
search.placeholder = "Search...";
}
}
function inactive(){
var Search = document.getElementById("search");
if(search.value == ""){
search.value = "Search...";
search.placeholder = "";
}
}
</script>
</head>
<body>
<div id="header">
<div id ="searchBar">
<form action="main.php" method= "post">
<input type="text" id="search" name="q" placeholder="" value="Search..." autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="searchButton" value="Search"/>
</form>
</div>
</div>
<div id="main">
<div id="oppstart">
<h1>Newly commenced webstore</h1>
</div>
<div id="klokkeMer">
<h2>Watches</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<?php
print($output);
?>
</div>
<div id="side">
</div>
</body>
</html>
and here is my css code:
body {
font-family: arial;
}
h1 {
margin: 20px 0px 0px 0px;
padding:0;
}
p {
margin: 0;
padding:0;
}
#header {
width:100%; /* Full lengde*/
background-color:#1F2A40;
height:100px; /* 150px */
position:absolute;
top:0px;
left:0px;
}
#search {
border: 1px solid #1F2A40;
border-right:none;
font-size:16px;
padding:10px;
outline:none;
width:700px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
#searchButton {
border: 1px solid #1F2A40;
padding:10px;
font-size:16px;
background-color:#ff9933;
font-weight:bold;
color:#1F2A40;
cursor:pointer;
outline:none;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
#searchButton:hover {
background-color:#F5870A;
}
#main {
position:absolute;
top:100px;
background-color:red; // change to white when website is done
width:1288px;
height:800px;
left:300px;
}
#side {
position:absolute;
top:100px;
background-color:orange; // change to white when website is done
width:300px;
left:0px;
height:800px;
}
#searchBar {
position:absolute;
width:800px;
top:8px;
left:250px;
/* border:1px solid red; */
}
#div1 {
position:absolute;
width:100px;
top:200px;
left:300px;
border:1px solid black;
height:100px;
background-color:purple;
}
#div2 {
}
#div3 {
}
Try using percentages for your main and side widths instead of pixels
#side{
width: 30%;
}
#main{
width: 70%;
}
So what I would do is to scrap most of this css, and use Bootstrap
This way you get a clean and easy set of tools to use troughout your webpage.
You include the following in your header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
After this, then you use this code:
<div id="side" class="col-md-3">
Sidebar
</div>
<div id="main" class="col-md-9 col-md-offset-3">
<div id="oppstart">
<h1>Newly commenced webstore</h1>
</div>
<div id="klokkeMer">
<h2>Watches</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<?php
print($output);
?>
</div>
See it in action here on jsfiddle
It might not have your exact dimentions, however this gives you a structered set of rules for your CSS you can use troughout your website
I have to put an image in the absolute position. This absolute position I make overflow hidden, so that it will height automatically, and of course, I make this absolute div inside the relative position.
But image only showing up when I change the position of absolute into relative.
Here is my code:
<div style="position:relative; display:block; overflow:hidden; float:left;">
<div style="position:absolute; overflow:hidden; display:block; top:0; left:0;">
<img src="WEBbgB.jpg" />
</div>
</div>
SOURCE CODE
<ul id="slideHome">
<li><img src="<?php base_url();?>assets/img/WEBbgA.jpg"/></li>
<li><img src="<?php base_url();?>assets/img/WEBbgB.jpg"/></li>
</ul>
CSS
#slideHome {
list-style: outside none none;
padding: 0px;
position: relative;
color: #FFF;
font-size: 18px;
float:left;
}
#slideHome li {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background:green;
overflow:hidden;
margin: 0 auto;
}
#slideHome li img {
width:100%;
}
JS
$.noConflict();
jQuery( document ).ready(function( $ ) {
var triggers = $('ul#thumnalHome li');
var images = $('ul#slideHome li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('active');
images.hide().first().show();
function sliderResponse(target) {
images.fadeOut(300).eq(target).fadeIn(300);
triggers.removeClass('active').eq(target).addClass('active');
}
triggers.click(function() {
if ( !$(this).hasClass('active') ) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
$('.next').click(function() {
target = $('ul#thumnalHome li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
$('.prev').click(function() {
target = $('ul#thumnalHome li.active').index();
lastElem = triggers.length-1;
target === 0 ? target = lastElem : target = target-1;
sliderResponse(target);
resetTiming();
});
function sliderTiming() {
target = $('ul#thumnalHome li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() { sliderTiming(); },1000);
}
});
The reason Why I make this position absolute is because this is for slider purpose.
Any idea please.
it will not show up because of
overflow:hidden;
and not because of your position
apply
position:fixed; into your image
<img style="position:fixed;" src="WEBbgB.jpg" />
and that could make it visible
<div style=" position:relative; display:block; overflow:hidden; float:left;">
<div style=" position:absolute; overflow:hidden; display:block; top:0; left:0;">
<img style="position:fixed;" src="WEBbgB.jpg" />
</div>
</div>