Currently i have a running slideshow as my website background (3 images)
I also have a logo in the middle of these 3 images, which remains there throughout the duration of the slideshow.
Whilst the first image is displayed (when the website is loaded up) the logo image (which also has the function of a button) can be clicked and direct you to another website, however when the images change, the logo remains, however the ability to click is gone...
all help greatly appreciated
here is my current code
$(document).ready(function() {
var header = $('body');
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)', 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)', 'url(http://guruwallpapers.com/wp-content/uploads/2014/09/Sunset-Wide-Screen-Wallpapers-6.jpg)'
);
var current = 0;
function nextBackground() {
$('#mask').fadeTo(1000, 0.9, function() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
})
$('#mask').fadeTo(500, 0);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
body {
-webkit-background-size: 1390px 700px;
-moz-background-size: 1390px 700px;
background-size: 1390px 700px;
}
h1 {
font-size: 600%;
color: white;
margin-top: 0.5em;
}
h3 {
color: white;
margin-top: -50px;
}
.GFImage {
margin-top: 65px;
border: 0;
}
.Footer {
position: fixed;
bottom: 0;
width: 100%;
margin-left: -8px;
color: white;
background: #151515;
opacity: 0.8;
text-align: center;
vertical-align: middle;
height: 7%;
}
#mask {
width: 100%;
height: 100%;
background: #000000;
top: 0;
left: 0;
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<br>
<h1>Welcome to GF</h1>
</center>
<center>
<br>
<h3>Welcome to GF! Check out all the information you need by just the click of a button...</h3>
</center>
<center>
<a href="Home Page .html">
<img src="Images/GF Logo White .jpg" style="width: 275px; height: 275px;" class="GFImage">
</a>
</center>
<div class="Footer">
<p>Copyright © All Rights Reserved. Design by Gavin Foley.</p>
</div>
<div id="mask">SCRIPT FUNCTION IN HERE!!!!</div>
Seams like the link goes below the images.
I was able to solve this adding to the link element these properties:
position:absolute;
z-index:9
and then it should work.
EDIT
Just as a suggestion, have a look at this example, it could be useful if you are at the first try with html and css:
http://css-tricks.com/perfect-full-page-background-image/
Related
I'd like to attach a label to the images on my website, so I used the following CSS and HTML code.
CSS:
/* Image */
.image {
border: 0;
display: inline-block;
position: relative; }
.image::after {
content: "Photo credit: Me";
position: absolute;
bottom: 0;
right: 3em;
font-size: 0.7em;
color:rgba(0, 0, 0, 0.175)}
.image img {
display: block; }
.image.left, .image.right {
max-width: 30%; }
HTML:
<div class="row">
<p>
<span class="image left">
<img src="images/image_1.png">
</span>
</p>
</div>
The code above works perfectly but I don't always want to show "Photo credit: Me" on my images. Instead, I want to set "Photo credit: Me" as a default text but show different text when specified. I tried using attr like below:
/* Image */
.image {
border: 0;
display: inline-block;
position: relative; }
.image::after {
content: attr(data-content, "Photo credit: Me"); /*<--Modified */
position: absolute;
bottom: 0;
right: 3em;
font-size: 0.7em;
color:rgba(0, 0, 0, 0.175)}
.image img {
display: block; }
.image.left, .image.right {
max-width: 30%; }
<div class="row">
<p>
<span class="image left">
<img src="images/image_1.png" data-content="Photo credit: Others">
</span>
</p>
</div>
However, this code does not show anything on the images. What am I doing wrong?
Note: I'm using a template downloaded from https://html5up.net/editorial . There is a chance that some properties defined elsewhere in CSS are causing this issue...
first, you shoud put the data-content on span, because the class .image is on span.
second, till 2022-12-17, browser only supports basic attr() method, no one support fallback feature. if you want to implmenet fallback feature, you can use var to work around.
please check the code below:
css
/* Image */
.image {
border: 0;
display: inline-block;
position: relative;
}
.image[data-content] {
--test : attr(data-content); /* if image have data-content, then we defined the variable test) */
}
.image::after {
content: var(--test, "Photo credit: Me"); /*if var test not be define, we use default value */
position: absolute;
bottom: 0;
right: 3em;
font-size: 0.7em;
color:rgba(0, 0, 0, 0.175)}
.image img {
display: block; }
.image.left, .image.right {
max-width: 30%; }
html
<div class="row">
<p>
<span class="image left" data-content="Photo credit: Others">
<img src="images/image_1.png">
</span>
</p>
</div>
I made a custom title bar application and then I gave it a file menu also.(electron)
Now I want to open a menu on click of this menu. I want a popup but the popup shouldn't be the standard windows popup for the menus , I want to make that custom too...but crating a new window can become very tedious if it takes too much time.
Most probably I want to instantiate a section , but I have no idea how to do it
The current situation
I have a window with a #container div having a #buttons div having 3 #minimize,#maximize,#close each with a span
The #buttons also has 2 divs .menu1 and .menu2 i want these menus to behave like normal menus in windows like the file and edit menu
<div id="container">
<nav>
<div id="buttons">
<div id="file">
<span class = "menu1">file</span>
</div>
<div id="about_us">
<span class = "menu2">about..us</span>
</div>
<div id="minimize" onclick="min()">
<span>-</span>
</div>
<div id="maximize" onclick="max()">
<span>+</span>
</div>
<div id="close" onclick="uff()">
<span>×</span>
</div>
</div>
</nav>
</div>
The result is
All the menus and buttons are clickable and have hover colors
Here you need to do something like this:
create the popup window in html and css. Use position: absolute; and z-index to get it to overlay the rest of the application.
Then hide the popup with a css class of for example .hidethat sets the popup to display: none;.
You now need a small piece of javascript to toggle that .hide class. Something like for example a function like this: const togglePopup = () => document.querySelector('.popup').classList.toggle('hide')
Trigger the togglePopup script with the click on one of your elements:
const trigger = document.querySelector('#idOrClassOfTriggerElement')
trigger.addEventListener('click', () => togglePopup()
Add a method for closing the popup with the same type of technique – adding an eventlistener to a trigger element (X icon for example) and calling the same toggle function as in #3.
Hope this was somehow what you wanted to achieve.
EDIT: Example code for a popup overlay:
const popup = document.querySelector('.popup')
const closeBtn = document.querySelector('.popup-close')
const openBtn = document.querySelector('.open')
const body = document.querySelector('body')
const showPopup = () => {
popup.classList.add('fade-in')
body.classList.add('scroll-stop')
}
const hidePopup = () => {
popup.classList.remove('fade-in')
popup.classList.add('fade-out')
body.classList.remove('scroll-stop')
setTimeout(() => {
popup.classList.remove('fade-out')
}, 500)
body.focus();
}
openBtn.addEventListener('click', showPopup)
closeBtn.addEventListener('click', hidePopup)
.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fefefe;
z-index: 9;
opacity: 0;
pointer-events: none;
overflow: scroll;
}
.popup-inner {
width: 100%;
position: relative;
padding: 6% 16% 0;
}
.popup-close {
position: relative;
z-index: 10;
text-align: center;
color: #aaa;
font-size: 4rem;
cursor: pointer;
position: fixed;
right: 3%;
top: 3%;
}
.popup-close::before {
content: "\00d7";
}
.popup-close:hover::before {
color: #000;
transition: 0.6s all ease-in;
}
.open {
text-align: center;
cursor: pointer;
background: transparent;
padding: 1rem 2rem;
border: 2px solid;
border-radius: 6px;
color: #000;
font-weight: bold;
position: absolute;
top: 25%;
left: 44%;
}
.open:hover {
background: #ffffff18;
}
.fade-in {
opacity: 1;
pointer-events: unset;
transition: 0.3s all ease;
}
.fade-out {
opacity: 0;
pointer-events: none;
transition: 0.3s all ease;
}
.background {
height: 100vh;
width: 100vw;
background: olive;
margin: 0;
padding: 0;
}
<div class="background">
<button class="open">OPEN POPUP</a>
</div>
<!-- Add popup at the bottom of the html document, before </body> -->
<div class="popup" role="dialog" aria-label="Popup">
<div class="popup-close" role="button" arial-label="Close popup" tabindex="1"></div>
<div class="popup-inner">
<h2>This is a popup title</h3>
<p>Popup content...</p>
</div>
</div>
So i've come to live by these 3 CSS rules that almost always vertically center any block level element:
.vertically-center {
position: relative;
top: 50%;
transform: translateY( -50% );
}
It works often. But in the case of this particular layout I'm building it is pushing the elements too high ( partially off the screen ) and I don't know why.
This is how the webpage looks before adding my vertically-center class to my portrait-container div:
And this code snippet is how it appears after adding the vertically-center class to the portrait-container div:
.clearfix:after {
content: "";
display: block;
clear: both;
}
.vertically-center {
position: relative;
top: 50%;
transform: translateY( -50% );
}
body {
overflow: hidden;
}
main {
padding-top: 50px;
background: #fafafa;
text-align: left;
}
.portrait-container {
float: left;
}
img {
width: 150px;
border-radius: 50%;
}
.about-container {
width: 70%;
float: right;
}
<main class="clearfix">
<div class="portrait-container vertically-center">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
</div>
<div class="about-container">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good Kool Aid, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</div>
</main>
I just want the image container to be vertically-centered regardless of the height of it's parent. Help? Inspecting elements gave me no insights.
Edit: Just to show how this has always worked for me in the past. Here is a jsfiddle: https://jsfiddle.net/9kyjt8ze/4/. Why does it work for me there and not here?
Related question: What does top: 50%; actually do on relatively positioned elements?
Your CSS was not bad but I didn't get along with it. So here is another approach on how you could solve it, maybe it helps also. It will always center the image vertically and does not matter how much text the box on the right will have. The colored borders are just there to help show the visual effect of the box sizes.
* {
box-sizing: border-box;
}
.portrait-container {
position: relative;
margin: 20px 0;
}
.portrait-container:after {
content: '';
display: block;
clear: both;
}
.portrait-container img {
position: absolute;
top: calc(50% - 80px); /* 50% from top minus half img height*/
width: 150px;
height: 160px;
border-radius: 50%;
float: left;
}
.portrait-container {
border: solid 2px orange;
}
.portrait-container .about-container {
border: solid 2px green;
padding: 0 50px;
margin-left: 150px; /* this elements should be at least 150px away from left side */
width: calc(100% - 150px); /* the max width this element should have to be placed */
/* next to the image is the total width(100%) - the image width */
}
<main>
<div class="portrait-container">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
<div class="about-container">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good fruit punch, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</div>
</div>
</main>
<main>
<div class="portrait-container">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
<div class="about-container">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good fruit punch, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good fruit punch, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</div>
</div>
</main>
UPDATE
Edit: Just to show how this has always worked for me in the past. Here is a jsfiddle: https://jsfiddle.net/9kyjt8ze/4/. Why does it work for me there and not here?
The black circle is the only element there in the Fiddle, there's no obstructions. In the code you are having trouble with, you have many elements either in the way or wrapped around other elements trapping them. Your ruleset will work if you start stripping away the layers. Or you can just add a property and change another property as per Snippet 1.
One important note a relative element is actually occupying the original spot, so if given a left:40px it appears to be moved 40px to the left, but in reality it still occupies the space 40px to the right of where it appears to be. So relative elements are not really in a flow different from static elements. Therefore they are affected by and affect static layout, it's just not noticeable normally because they stack with z-index.
Snippet 2 is an interactive demo, I figured maybe that'll help explain things better.
The 3 CSS ruleset is a common way to vertically align elements, but it was originally position: absolute instead of position:relative and it had to be in another positioned element if I remember correctly.
REFERENCE
Specific Ruleset
W3Schools
MDN
SOLUTION
.vertically-center {
/* Changed to absolute from relative */
position: absolute;
top: 50%;
transform: translateY( -50% );
}
main {
/* Added position: relative */
position: relative;
padding-top: 50px;
background: #fafafa;
text-align: left;
}
SNIPPET 1
.vertically-center {
position: relative;
top: 50%;
transform: translateY( -50%);
}
body {}
main {
padding-top: 50px;
overflow: scroll;
background: #fafafa;
text-align: left;
}
img {
width: 150px;
border-radius: 50%;
float: left;
}
.about {
width: calc(100% - 150px);
float: right;
}
<main class="clearfix">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko" class="vertically-center">
<article class="vertically-center about">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all of my favorite work. When I'm not creating things, I enjoy excercising, playing video games, drinking good Kool Aid, and more.</p>
<p>If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</article>
</main>
SNIPPET 2
$('#b1').click(function() {
$('body').toggleClass('R S');
});
$('#b2').click(function() {
$('#N1,#N2,#N3').toggleClass('N M');
});
$('input[id$="2"]').on('input', function() {
var grp = "." + $(this).attr('class');
var num = parseInt($(this).val(), 10);
grp !== '.S' ? $('section' + grp).css('left', num + '%') : $('section.S').css('margin-left', num + '%');
});
$('input[id$="3"]').on('input', function() {
var grp = "." + $(this).attr('class');
var num = parseInt($(this).val(), 10);
grp !== '.S' ? $('section' + grp).css('top', num + '%') : $('section.S').css('margin-top', num + '%');
});
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: scroll;
font: 400 12px/1.2 Consolas;
}
section {
width: 50px;
height: 150px;
border: 2px dashed grey;
text-align: center;
color: white;
}
.R {
position: relative;
background: rgba(0, 0, 255, .3)
}
.A {
position: absolute;
background: rgba(255, 0, 0, .3)
}
.F {
position: fixed;
background: rgba(0, 255, 0, .3)
}
.S {
position: static;
background: rgba(122, 122, 0, .3)
}
.N {
position: absolute;
background: yellow;
color: blue;
}
.M {
position: relative;
background: black;
color: yellow;
}
#R1 {
left: 20%;
top: 3%;
z-index: 1;
}
#A1 {
left: 42%;
top: 44%;
z-index: 2;
}
#F1 {
right: 20%;
top: 44%;
z-index: 3;
}
#S1 {
margin-left: 0;
margin-top: -28%;
}
#N1 {
bottom: 0;
right: 0;
width: 25px;
height: 80px;
z-index: 4;
}
input {
width: 6ex;
position: static !important;
}
button {
font: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='S'>
<fieldset>
<button id='b1'>Body Relative/Static</button>
<button id='b2'>Nested Absolute/Relative</button>
<br><br> RLeft
<input id='R2' class='R' type='number' value='20'> RTop
<input id='R3' class='R' type='number' value='3'> ALeft
<input id='A2' class='A' type='number' value='44'> ATop
<input id='A3' class='A' type='number' value='44'><br> FLeft
<input id='F2' class='F' type='number' value='64'> FTop
<input id='F3' class='F' type='number' value='44'> SLeft
<input id='S2' class='S' type='number' value='0'> STop
<input id='S3' class='S' type='number' value='-28'><br> NLeft
<input id='N2' class='N' type='number' value='45'> NTop
<input id='N3' class='N' type='number' value='45'>
</fieldset>
<section id='R1' class='R'>RELATIVE
<section id='N1' class='N'>N<br>E<br>S<br>T<br>E<br>D</section>
</section>
<section id='A1' class='A'><br><br><br>ABSOLUTE</section>
<section id='F1' class='F'><br><br>FIXED</section>
<section id='S1' class='S'><br><br><br><br><br>STATIC</section>
</body>
You can achieve this by using flexboxwith a lot less code. The below code will do the trick.
.clearfix {
display: flex;
align-items: center;
}
img {
width: 150px;
border-radius: 50%;
}
.about-container {
width: 70%;
padding-left: 30px;
}
Check it out in codepen http://codepen.io/anon/pen/OWYxrb
I'm trying to figure out how to set some section headings to remain fixed, but then scroll up with the page when the user reaches the next heading. Example: http://www.codeandtheory.com/about-us.
My markup:
<div class="section-title"><div class="section-bar"></div>
<p class="section-title">Collections Management</p>
</div>
My CSS:
.section-title {
width: 270px;
font-size: 30px;
line-height: 38px;
color: #f18a21;
text-transform: uppercase;
position: fixed;
float: left;
display: block;
}
Test link: http://api.mtscollective.com
Can this be done in pure CSS, or is JS required?
Thanks!
Js is required!
try this to the same
jQuery
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.section-title').addClass('fixed');
} else {
$('.section-title').removeClass('fixed');
}
});
</script>
and CSS:
.fixed {position:fixed; top:0; left:0;}
First off I'm having a tough time understanding the fundamentals of the hero-transition within Polymer. I am attempting to build a hero transition card like the one in the example provided by them, which can be found here.
Below I've built the mini card and I'm just trying to understand the transition and how the larger card works with the smaller one.
My specific question is, how does the transition bind to each element? Do I need to complete the CSS for both before I can begin playing with the core-animated-pages? Does having an embedded template matter?
Any guidance would be extremely helpful.
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/core-image/core-image.html">
<link rel="import" href="../components/paper-shadow/paper-shadow.html">
<polymer-element name="chip-card">
<template>
<style>
#page2 {
width: 100%;
height: 100%;
}
#paper_shadow {
position: relative;
display: inline-block;
font-family:'Roboto', sans-serif;
font-size: 12px;
color: white;
}
#chip_body {
height: 400px;
width: 300px;
background-color: aqua;
color: black;
}
#chip_top {
background-color: deeppink;
background-image: url();
background-size: cover;
background-position: center center;
width: 100%;
position: relative;
}
#chip_bottom {
background-color: #fbfbfb;
width: 100%;
height: 20%;
position: relative;
font-size: 1.2em;
word-wrap: break-word;
}
#text {
padding-left: 5%;
padding-right: 2.5%;
overflow: hidden;
}
#coreImage {
display: block;
}
#card_container {
width: 70%;
height: 600px;
background-color: aqua;
color: black;
}
#card_right {
height: 100%;
width: 30%;
}
#card_left {
background-color: darkblue;
height: 100%;
width;
70%;
}
#card_left_top {
padding-right: 20px;
padding-top: 20px;
background-color: skyblue;
}
#circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
}
#header_text {
}
#card_content {
width:100%;
background-color: lightcoral;
}
</style>
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" animated=true; hero-p="" on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero=""></div>
</section>
</core-animated-pages>
</template>
<script>
Polymer('chip-card', {
page: 0,
raise: function() {
this.$.paper_shadow.setZ(2);
},
lower: function() {
this.$.paper_shadow.setZ(1);
},
transition: function(e) {
if (this.page === 0) {
this.$.paper_shadow = e.currentTarget;
this.page = 1;
} else {
this.page = 0;
}
}
});
</script>
</polymer-element>
you are actually very close to a working transition with the code you have.
I've implemented a more complicated hero transition on my website and took some code from there to get yours to work.
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" hero-p on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" hero vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero></div>
</section>
</core-animated-pages>
I've made but a few adjustments.
First off, any hero parent element, with the hero-p attribute, should contain just that attribute. So no need for the quotation marks :)
<paper-shadow hero-p .. >
Every element that's part of the Hero transition, needs a hero attribute.
Again, without the quotation marks. <div id="chip_body" .. hero .. >
And the same thing goes for the element you're transitioning to.
<div id="card_container" .. hero .. >
I've put a working version of your code on my website.
There's page containing the <chip-card> element and a second page containing the working template file.
Index page
Template file
Please note : I edited the reference to webcomponentsjs to conform with my folder structure.
Feel free to ask me if there's anything else!