I would like to achieve the effect where one image is revealed over the other when scrolling the page.
You can see an example on livearealabs.com (new york / seattle). Does anybody know how to create it using CSS3?
Check out this jsfiddle to create the sliding effect.
The trick is to have one div rotated 60 degrees. You position it so that it covers the entire wrapper and the overflow is hidden. Then with javascript you just have to move the slice container either by changing the left property or by changing the translate-X property.
Here is the code:
HTML:
<div class="wrapper">
<div class="bg"></div>
<div class="slice" data-show="true"></div>
</div>
CSS:
.wrapper {
position: relative;
overflow: hidden;
width: 20em;
height: 10em;
}
.bg {
background-color: red;
width: 100%;
height: 100%;
}
.slice {
position: absolute;
top: -12em;
left: -8em;
width: 30em;
height: 30em;
background-color: blue;
-webkit-transform: rotate(-60deg);
}
JS:
var hidden = false;
$('.wrapper').click(function() {
console.log('click');
if (hidden) {
$('.slice').stop().animate({left: '-8em'}, 2000);
hidden = false;
} else {
$('.slice').stop().animate({left: '-34em'}, 2000);
hidden = true;
}
console.log('click end');
});
Also check out this jsfiddle for a similar sliding effect that can be achieved with CSS only.
Related
I'm displaying this component in an NgbModal:
<div id="gallerypopup">
<div id="main-image">
<lib-ngx-image-zoom id="zoomer"
[thumbImage]="item.thumbnailUrls[selectedIndex]"
[fullImage]="item.imageUrls[selectedIndex]"
zoomMode="click"
></lib-ngx-image-zoom>
</div>
<cdk-virtual-scroll-viewport orientation="horizontal" itemSize="400" minBufferPx="400" maxBufferPx="400" class="viewport">
<span *cdkVirtualFor="let thumbnail of item.thumbnailUrls; let index = index;" class="thumbcell">
<img [src]="thumbnail" height="300" (click)="selectImage(index)" /
</span>
</cdk-virtual-scroll-viewport>
</div>
with the following CSS:
#gallerypopup {
height: 75%;
width: 75%;
}
.thumbcell {
height: 300px;
width: 400px;
background-color: #dddddd;
margin: 0;
padding: 0;
cursor: pointer;
}
.viewport {
height: 300px;
}
.cdk-virtual-scroll-content-wrapper {
display: flex;
flex-direction: row;
}
.ngxImageZoomFullContainer {
cursor: zoom-out;
}
.ngxImageZoomThumbnail {
cursor: zoom-in;
}
But even though the scrolling viewport is set to horizontal orientation, the thumbnails still appear stacked vertically. How do I fix this? I suspect the problem is that the scrollable area is being incorrectly constrained to fit its width inside the width of the modal popup (which for some reason isn't 75% of the browser window, despite the first CSS rule).
Did you tried the following in order to display the elements horizontally?
.cdk-virtual-scroll-content-wrapper .viewport {
display: flex;
flex-direction: row;
}
Thing is .viewport children layout is still vertical.
Solution :
.viewport .cdk-virtual-scroll-content-wrapper {
display: flex;
flex-direction: row;
}
here is stackblatz this is example from angular material doc and i have modified it.
I want my app to have no title bar but still be closeable, draggable, minimizable, maximizable, and resizable like a regular window. I can do this in OS X since there is a [titleBarStyle] 1 option called hidden-inset that I can use but unfortunately, it's not available for Windows, which is the platform that I'm developing for. How would I go about doing something like this in Windows?
Above is an example of what I'm talking about.
Assuming you don't want window chrome, you can accomplish this by removing the frame around Electron and filling the rest in with html/css/js. I wrote an article that achieves what you are looking for on my blog here: http://mylifeforthecode.github.io/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/. Code to get you started is also hosted here: https://github.com/srakowski/ElectronLikeVS
To summarize, you need to pass frame: false when you create the BrowserWindow:
mainWindow = new BrowserWindow({width: 800, height: 600, frame: false});
Then create and add control buttons for your title bar:
<div id="title-bar">
<div id="title">My Life For The Code</div>
<div id="title-bar-btns">
<button id="min-btn">-</button>
<button id="max-btn">+</button>
<button id="close-btn">x</button>
</div>
</div>
Bind in the max/min/close functions in js:
(function () {
var remote = require('remote');
var BrowserWindow = remote.require('browser-window');
function init() {
document.getElementById("min-btn").addEventListener("click", function (e) {
var window = BrowserWindow.getFocusedWindow();
window.minimize();
});
document.getElementById("max-btn").addEventListener("click", function (e) {
var window = BrowserWindow.getFocusedWindow();
window.maximize();
});
document.getElementById("close-btn").addEventListener("click", function (e) {
var window = BrowserWindow.getFocusedWindow();
window.close();
});
};
document.onreadystatechange = function () {
if (document.readyState == "complete") {
init();
}
};
})();
Styling the window can be tricky, but the key use to use special properties from webkit. Here is some minimal CSS:
body {
padding: 0px;
margin: 0px;
}
#title-bar {
-webkit-app-region: drag;
height: 24px;
background-color: darkviolet;
padding: none;
margin: 0px;
}
#title {
position: fixed;
top: 0px;
left: 6px;
}
#title-bar-btns {
-webkit-app-region: no-drag;
position: fixed;
top: 0px;
right: 6px;
}
Note that these are important:
-webkit-app-region: drag;
-webkit-app-region: no-drag;
-webkit-app-region: drag on your 'title bar' region will make it so that you can drag it around as is common with windows. The no-drag is applied to the buttons so that they do not cause dragging.
I was inspired by Shawn's article and apps like Hyper Terminal to figure out how to exactly replicate the Windows 10 style look as a seamless title bar, and wrote this tutorial (please note: as of 2022 this tutorial is somewhat outdated in terms of Electron).
It includes a fix for the resizing issue Shawn mentioned, and also switches between the maximise and restore buttons, even when e.g. the window is maximised by dragging the it to the top of the screen.
Quick reference
Title bar height: 32px
Title bar title font-size: 12px
Window control buttons: 46px wide, 32px high
Window control button assets from font Segoe MDL2 Assets (docs here), size: 10px
Minimise:
Maximise:
Restore:
Close:
Window control button colours: varies between UWP apps, but seems to be
Dark mode apps (white window controls): #FFF
Light mode apps (black window controls): #171717
Close button colours
Hover (:hover): background #E81123, colour #FFF
Pressed (:active): background #F1707A, colour #000 or #171717
Note: in the tutorial I have switched to PNG icons with different sizes for pixel-perfect scaling, but I leave the Segoe MDL2 Assets font characters above as an alternative
I use this in my apps:
const { remote } = require("electron");
var win = remote.BrowserWindow.getFocusedWindow();
var title = document.querySelector("title").innerHTML;
document.querySelector("#titleshown").innerHTML = title;
var minimize = document.querySelector("#minimize");
var maximize = document.querySelector("#maximize");
var quit = document.querySelector("#quit");
minimize.addEventListener("click", () => {
win.minimize();
});
maximize.addEventListener("click", () => {
win.setFullScreen(!win.isFullScreen());
});
quit.addEventListener("click", () => {
win.close();
});
nav {
display: block;
width: 100%;
height: 30px;
background-color: #333333;
-webkit-app-region: drag;
-webkit-user-select: none;
position: fixed;
z-index: 1;
}
nav #titleshown {
width: 30%;
height: 100%;
line-height: 30px;
color: #f7f7f7;
float: left;
padding: 0 0 0 1em;
}
nav #buttons {
float: right;
width: 150px;
height: 100%;
line-height: 30px;
background-color: #222222;
-webkit-app-region: no-drag;
}
nav #buttons #minimize,
nav #buttons #maximize,
nav #buttons #quit {
float: left;
height: 100%;
width: 33%;
text-align: center;
color: #f7f7f7;
cursor: default;
}
nav #buttons #minimize:hover {
background-color: #333333aa;
}
nav #buttons #maximize:hover {
background-color: #333333aa;
}
nav #buttons #quit:hover {
background-color: #ff0000dd;
}
main {
padding-top: 30px;
overflow: auto;
height: calc(100vh - 30px);
position: absolute;
top: 30px;
left: 0;
padding: 0;
width: 100%;
}
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<nav>
<div id="titleshown"></div>
<div id="buttons">
<div id="minimize"><span>‐</span></div>
<div id="maximize"><span>□</span></div>
<div id="quit"><span>×</span></div>
</div>
</nav>
<main>
<div class="container">
<h1>Hello World!</h1>
</div>
</main>
</body>
</html>
Ran into this problem and my solution was to keep the frame but set the title to blank i.e.
document.querySelector("title").innerHTML ="";
That solved my problem i.e. I got a window which can be closed, maximized or minimized without a title on it.
I'm trying to show a gif during an Ajax call; it works fine if the div is at the body level but won't appear in a tab panel. I've tried putting the div at the tab-pane, container, row and column levels but it won't show.
Simple html:
<div id="loading">
<img id="loading-image" src="images/page-loader.gif" alt="waiting..." />
</div>
jquery:
$('#loading').hide(); $('#loading').show(); // as required
css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 10px;
left: 24px;
z-index: 100;
}
Try this:
$(document).ajaxStart(function() {
$('<div id="loading"><img id="loading-image" src="images/page-loader.gif" alt="waiting..." /></img></div>')
.prependTo('.tabClass'); });
$(document).ajaxStop(function() {
$('#loading').remove();
});
replacing 'tabClass' with the class of whatever container you want the gif animation to attach to.
I've found this solution to be cleaner & work well.
I am trying create nice animation during loading content using ajax. I want to use display icon during reloading div with "Content", however I can't figured out is it possible to do that only with CSS.
Icon should:
horizontally always in the center of div with "Content"
vertically always in the center of "visible part of content"
should stay during whole animation in the vertically center of "visible part of content" during slide animation which hides Menu.
If vertical centering according to "visible part of content" is not possible, it would be ok to center image according to viewport of the browser.
[EDIT]:
Here is my fiddle: http://jsfiddle.net/QWB9x/74/ and the part which probably should be changed:
.loading #img_loading {
position: fixed;
top: 50%;
left: 50%;
display: block;
}
This works best for me :)
function loadNewContent(){
$(".loaderCont").removeClass("loading")
}
$(document).ready(function () {
$("#hide_button").on("click", function () {
$(this).closest(".bottom").toggleClass("left_hided");
$(".loaderCont").toggleClass("left_hided2");
});
$("#filter1,#filter2,#filter3,#filter4").on("click", function() {
$(".loaderCont").addClass("loading");
setTimeout(loadNewContent, 2000);
});
});
CSS:
.header {
background-color: Green;
width: 100%;
margin-bottom: 20px;
height: 100px;
}
.left {
background-color: Red;
float: left;
width: 100px;
}
.left_hided .left{
margin-left: -85px;
}
.right {
background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;
width: calc(100% - 140px);
float: right;
}
.left_hided .right{
width: calc(100% - 55px);
}
input{
float:right;
}
.loaderCont {
background-color: rgba(255, 0, 0, 0.6);
height: 100%;
width: calc(100% - 140px);
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
.left_hided2 {
width: calc(100% - 55px);
}
#loader {
background: url(http://i.stack.imgur.com/FhHRx.gif) no-repeat center center;
position: relative;
top: calc(50% - 16px);
left: calc(50% - 16px);
display: block;
height: 32px;
width: 32px;
}
.loading {
z-index: 9001;
}
JSFiddle: http://jsfiddle.net/ZRwzr/1/
For this to work to your requirements you will need to use JavaScript to determine where the loading image needs to be placed over the visible part using a fixed position div and then reposition it when the user resizes the window or scrolls the window so it is always in the desired position.
$(window).scroll(function() {
scrolling();
});
$(window).resize(function() {
scrolling();
});
scrolling();
function scrolling() {
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
var offsetTop = $('#thediv')[0].offsetTop;
var offsetHeight = $('#thediv')[0].offsetHeight;
var offsetWidth = $('#thediv')[0].offsetWidth;
var top = offsetTop - scrollTop;
top = top < 0 ? 0 : top;
var bottom = (scrollTop + windowHeight) - (offsetHeight + offsetTop);
bottom = bottom < 0 ? 0 : bottom;
$('.image').css('top', top);
$('.image').css('bottom', bottom);
$('.image').css('width', offsetWidth);
}
Please note that if you change the width of the div you will always need to call the scrolling() function so that it can recalculate the position.
I also added the loading image as a background image to the fixed div so that we can use CSS to centre it.
.image {
position: fixed;
text-align:center;
background-image:url('http://i.stack.imgur.com/FhHRx.gif');
background-repeat:no-repeat;
background-position:center center;
background-color:rgba(255,255,255,.4);
}
Here is the JSFiddle http://jsfiddle.net/QWB9x/89/
You do not need to do so much of scripting to assign it a position. You can do it with simple css.
Just make the loader relative to its parent. Assign a height and width and do the following css part.
.loader{
position: relative;
top: -half of the height;
left: -half of the width;
margin-top: 50%;
margin-left: 50%;
}
works with every device
use z-index example:-
<div style="z-index:100;">loading image</div>
.loading #img_loading {
position: fixed;
top: 50%;
left: calc(50% + 55px);
display: block;
}
The above will solve the half of the problem, you need to update the left dynamically with javascript.
After learning JS for about a month now and completing around 4 courses I am still unable to work out how to change an image when clicking a thumbnail! What I want to do is simple, I just want to change the Main Image when a thumbnail is clicked! In this example there are two thumbnail images in a div and a main image above them. I just want to change the main image when a thumbnail is clicked. I know this is DOM Manipulation and think it is: document.getElementById.....?
I have make a small page so that I can learn / try different things and and finally giving up and asking for help! The code is as follows:
#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}
<body>
<div id="MainContainer">
<div id="MainImage"></div>
<div id="TNBodyContainer">
<div id="TNOne">
<div id="TNTwo"></div>
</div>
</div>
Thank you very much for any help.
Margate
You need to add some scripting to change the image when either of the thumbnails are clicked. This function is called when the page is loaded. Change the image names to suit.
This should be placed in the section of the html page.
<script>
window.onload = function() {
var mainImg = document.getElementById('Main');
document.getElementById('TNOne').onclick = function() {
mainImg.src = 'main1.jpg';
//alert('one clicked');
};
document.getElementById('TNTwo').onclick = function() {
mainImg.src = 'main2.jpg';
//alert('two clicked');
};
};
</script>
The two thumbnail divs become <img> tags with the same IDs.
Similarly the main <img> is defined also (with id="Main"). Now the elements
are clickable.
<div id="MainContainer">
<div id="MainImage">
<img id="Main" src="MainImage01.jpg"</img>
</div>
<div id="TNBodyContainer">
<img id="TNOne" src="thumb1.jpg"></img>
<img id="TNTwo" src="thumb2.jpg"></img>
</div>
</div>
Finally CSS for the thumbnails, here float is used to keep the thumbnails in the same line within the TNBodyContainer div.
TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}
To change the image in the CSS background property, you need to use
document.getElementById("MainImage").style.background
The right way to go is to add event listeners:
document.getElementById("TNOne").addEventListener("click", function (event) {
setImage(event);
}, false);
document.getElementById("TNTwo").addEventListener("click", function (event) {
setImage(event);
}, false);
}
They both call the same function, but with event it is possible to see which one "clicked" with "event.target.id".
You can then decide what you want to do with for instance a switch statement. basically saying: if event.target.id == "TNOne".
You can see all this I made you a fiddle: http://jsfiddle.net/djwave28/32pQD/3/
There are some slight changes in your HTML and CSS too.