curtain effect
Hello I need to make this effect in a photo viewer, I have no idea how to make it, please any help?
If we assume there are two layers, top layer has color, bottom layer has greyscale we can achieve the desired results. Here is an example using a single HTML file and two image files. The image files are identical except one is color, the other is greyscale. We use CSS for position of the elements and z-index order, and use jquery for mouse event handling to reduce the size of the top layer giving a clipping effect. The only other piece I can tell is changing the mouse pointer to some arbitrary horizontal rule, and vertical rule to give a curtain effect...
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
.picture-container
{
position: absolute;
}
#picture-container-color
{
z-index:2;
background-image: url("flower-color.jpg");
background-repeat: no-repeat;
background-color: red;
width: 500px;
height: 500px;
}
#picture-container-grey
{
z-index:1;
background-image: url("flower-grey.jpg");
background-repeat: no-repeat;
background-color: yellow;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="picture-container-color" class="picture-container"></div>
<div id="picture-container-grey" class="picture-container"></div>
<script>
var mousedown = false;
$(".picture-container").mousedown(function(event) {
mousedown = true;
});
$(".picture-container").mousemove(function(event) {
if (mousedown === true) {
$("#picture-container-color").width(event.pageX);
$("#picture-container-color").height(event.pageY);
}
});
$(".picture-container").mouseup(function(event) {
mousedown = false;
});
</script>
</body>
</html>
Related
I want the background-image in the "main" div to fit into the flexbox, without changing the picture aspect ratio.
This is what I wrote in HTML/CSS:
.main {
display: flex;
width: 100%;
height: 853px;
object-fit: cover;
object-position: 50% 50%;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Startseite</title>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="main" style="background-image:url('titelbild.jpg')">
<div class="titel">
<h1>Engelberg Titlis</h1>
</div>
</div>
</body>
</html>
The size of the picture doesn't change when I write this. It just shows an image section, the size of the flexbox
I tried all the different object-fit functions (cover, contain, etc.). I also tried the same thing while applying a class to the image itself.
neither worked
.main {
display: flex;
width: 100%;
height: 853px;
background-image: url('titelbild.jpg');
background-size: cover;
background-position: 50% 50%;
justify-content: center;
}
Also, You need to add background-repeat: no-repeat; to the class in order to remove the repeat of the background-image.
Trying to make the top nav bar stick while scrolling like the main nav does when scrolling, and need to add social media icons to the left of the top bar. Website is http://www.stephensengineering.com/stephens33/ any help is greatly appreciated. :)
i tried adding position: sticky but no luck.
<!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>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--
#navbar ul {
margin: 0;
padding: 10px;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
<li>project#stephensengineering.com</li>
<li>888-300-0642</li>
<li>Stephens University</li>
<li>Submit Assignment</li>
</ul>
</div>
</body>
</html>
To make the top black navbar stick to the page when user scrolls down,
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
This will place the element on top of the page when user scrolls, but you will have a new problem. The black navbar now overlaps the slidein Main menu that appears when user scrolls. So, you will need to place the slidein Main menu below the top black nav bar. This can be achieved by setting:
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
Adding social icons will need additional markup in your HTML code.
A simple nested polymer-element inside another one will not display:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="lib/polymer.min.js"></script>
<link rel="import" href="elements/indx-grid.html">
<link rel="import" href="elements/indx-griditem.html">
<title>INDX-polymer</title>
</head>
<body>
<indx-grid>
<indx-griditem></indx-griditem>
</indx-grid>
</body>
</html>
indx-grid.html
<polymer-element name="indx-grid">
<template>
<style>
#host {
:scope {
display: block;
margin: 20px;
border: 2px solid #E60000;
background: #CCC;
height: 500px;
}
}
</style>
</template>
<script>
Polymer('indx-grid');
</script>
</polymer-element>
indx-griditem.html
<polymer-element name="indx-griditem">
<template>
<style>
#host {
:scope {
display: block;
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
background: #FFF;
width: 100px;
height: 100px;
}
}
</style>
</template>
<script>
Polymer('indx-griditem');
</script>
</polymer-element>
Strangely enough, although I can see it in developer tools in Chrome and CSS properties are all correct, the element will not display and not even have a 'size tooltip' while inspecting it with Chrome dev tools.
Does someone have any clue about the problem here?
Thanks
You need <content> 1 to bring in <indx-griditem> ("light DOM") into the <indx-grid>'s shadow DOM.
Demo: http://jsbin.com/eRimiJo/2/edit
Bonus tip: you can also use noscript on Polymer elements that don't setup a prototype (e.g. only call Polymer('element-name');
Responsive navigation hidden on window resize.
Hi all
I have a demo here
http://www.ttmt.org.uk
and jsfiddle here
http://jsfiddle.net/VCPJu/
It's a simple horizontal li list navigation, on window resize the navigation hides and a menu button shows. Menu button then slides down the navigation that is now vertical.
If I make the window smaller open the slide down menu and resize the window bigger the navigation returns to the horizontal menu.
My problem is if I make the window smaller open the slide down menu and then close then resize the window larger the horizontal menu doesn't show again.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
#menu_btn{
width:50px;
height:30px;
background:red;
display:none;
color:white;
text-align:center;
}
#menu_btn:hover{
cursor:pointer;
}
nav{
margin:50px;
display:block;
}
nav ul{
display:block;
overflow:auto;
background:#eee;
}
nav ul li{
display:inline;
}
nav ul li a{
font-family:helvetica, sans-serif;
float:left;
display:block;
padding:5px;
background:#aaa;
text-decoration:none;
margin:0 5px 0 0;
color:red;
}
#media only screen and (max-width:500px){
#menu_btn{
display:block;
}
nav ul{
display:none;
}
nav ul li{
display:block;
}
nav ul li a{
float:none;
margin:0 0 5px 0;
}
}
</style>
</head>
<body>
<nav>
<a herf="#" id="menu_btn">Menu</a>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<script>
$('#menu_btn').click(function(){
$('nav ul').slideToggle();
})
</script>
</body>
</html>
You're going to have to use some javascript to detect the screen size and reset nav ul{display: block;} ... the reason why is because when you're firing off your jquery it is applying the style DIRECTLY to your element making your internal CSS not want to render.
EDIT::: here is probably an easier solution by using class http://jsfiddle.net/Pkk2h/
This is an old question, however I came across it whilst looking for a solution to the same problem as it was occurring to me, I wanted to add a new answer as the one that was marked as the accepted answer isn't completely true. Yes, the Jquery applies the display property directly to your element, however you do not need to apply the display element again using Jquery, you can simply add a media query for when the screen size is to show your full screen menu and then set the menu element to display: block!important; which will over-write the Jquery display set. Hope this helps out any future readers with this problem, if the author of the question is still active, I assume you would accept my answer.
#media only screen and (max-width: 950px){
#nav {
/* Apply your responsive menu for screen sizes smaller than 950px */
}
}
#media only screen and (min-width: 951px){
#nav {
display: block!important;
}
}
I want to make the header and footer backgrounds to be repeated on x. So it takes all the width size of any page resolution.
This is how I want it to look like:
An this how is being displayed:
I'm using the 960 gs, every div is limited to 960px. Is there a way to expand the color of the div through x?
See the project here:
http://gabrielmeono.com/yonature/
yes there is
you have to split the page into 3 parts: header, body, footer
what we're gonna do is create divs with a little bit of CSS. we will have a div that goes all the way to the sides of the website, and a div which is centered.
i'll show you how to do it for the header, and you make the same thing for body/footer:
<html>
<head>
<style type="text/css">
html{}
body { margin: 0px; width: 100%; }
#headerCenter { float: left; width: 100%; text-align: center; color: #00AA00; height: 120px; }
#headerContainer { margin: 0 auto; width: 960px; }
#header { width: 100%; float: left; height: 120px; }
</style>
</head>
<body>
<div id="headerCenter">
<div id="headerContainer">
<div id="header">HEADER</div>
</div>
</div>
.. same for body/footer....
</body>
</html>
so the trick is:
a div (#headerCenter) which goes all the way across the page. we will define height for it, paint it's background, and set 'text-align: center;'
inside we put a div with 'margin: 0 auto;' and the desired width. NO FLOAT on this div! this will create a div with height 0, placed in the center of the parent div.
inside we put the header. we can set float left etc... width can be 100% (or 960px)
repeat this for body and for footer
another method btw is using HTML tables, which i don't like to use for layouts.
if you have any trouble setting this up, let me know and i'll do the layout for you