I have a fixed position element which I am using Midnight.js (https://aerolab.github.io/midnight.js/) to change the colour of depending on the elements which scroll behind it.
The idea is that the contrast is always high enough for the navigational elements to be visible/useable.
I'm seeing a strange lag behind the element which triggers the change between states on scroll, which gets smaller the further the page is scrolled (or, the closer to bottom of the viewport the dividing line is). it's best communicated by these images – the element in question is the navigational bar on the left:
I just can't figure out why this is happening. Is something in my CSS clashing with Midnight's functions?
Full version demonstrating issue: https://hba.matmartin.studio/about/
HTML (with non-pertinent elements removed):
<div class="pagewrap">
<div class="triggers">
<div class="nav-trigger-wrap">
<div class="nav-trigger">
<div class="nav-trigger-line" id="tl-top"></div>
<div class="nav-trigger-line" id="tl-bot"></div>
</div>
</div>
<div class="search-trigger">
<div class="st-close">
<!-- svg code -->
<div class="search-trigger-line" id="tl-top"></div>
<div class="search-trigger-line" id="tl-bot"></div>
</div>
</div>
<div class="sep-line-v"></div>
<div class="twitter-trigger">
<a href="#" target="_blank">
<!-- svg code -->
</a>
</div>
</div>
<div class="pagecontent">
<div class="width" id="page-lander">
<!-- content -->
</div>
<div class="fullwidth" data-midnight="white">
<!-- more content -->
</div>
<div class="fullwidth">
<!-- even more content -->
</div>
</div>
</div>
CSS (height and position etc is added inline by the jQuery plugin)
.pagewrap {
width: 100%;
z-index: 10;
min-height: 100vh;
}
.triggers,
.midnightHeader,
.midnightInner {
width: 24px;
padding: 37px 0 0 32px;
box-sizing: content-box;
z-index: 10002;
}
.triggers .nav-trigger-wrap {
height: 12px;
}
.triggers .search-trigger {
width: 22px;
height: auto;
min-height: 22px;
padding: 16px 0 32px 0;
margin: 0 0 0 1px;
}
.triggers .sep-line-v {
width: 1px;
height: 77vh;
margin: 0 10.5px;
background-color: #F4F4F4;
}
.triggers .twitter-trigger {
width: 22px;
height: auto;
padding: 28px 0 0 0;
margin: 0 0 0 1px;
}
#page-lander {
padding: 88px 0;
}
.width {
width: 78%;
margin: 0 auto 64px;
}
.fullwidth {
width: 100%;
padding: 72px calc(14% + 24px);
background-color: #F4F4F4;
color: #383838;
}
.midnightHeader.white .sep-line-v,
.midnightHeader.white .nav-trigger-line {
background-color: #383838;
}
JS:
$('div.triggers').midnight();
Related
.game__feature__block {
transition: 1s;
flex: 1;
padding: 15px;
border: 1px solid #e40e0e;
background-position: 50% 0%;
background-size: contain;
background-repeat: no-repeat;
box-shadow: 0 0 20px -4px #000, inset 0 0 0 5px #200607;
text-align: center;
}
.game__feature__block:hover{
flex: 2;
}
.container {
width: 100%;
max-width: 1480px;
margin-right: auto;
margin-left: auto;
padding-right: 10px;
padding-left: 10px;
}
<html>
<div class="container" style="display:flex;">
<div class="game__feature__block" >
<img src="https://i.imgur.com/Qz2XMxk.png">
<h3 class="game__feature__title">RAIDS</h3>
<p>chambers of xeric.</p>
</div>
<div class="game__feature__block">
<img src="https://i.imgur.com/Qz2XMxk.png">
<div>
<h3 class="game__feature__title">RAIDS2</h3>
<p>theatre of blood osrs.</p>
</div>
</div>
<div class="game__feature__block">
<img src="https://i.imgur.com/Qz2XMxk.png">
<div>
<h3 class="game__feature__title">TRADINGPOST</h3>
<p>Where you can sell or buy your item to another players.</p>
</div>
</div>
<div class="game__feature__block">
<img src="https://i.imgur.com/Qz2XMxk.png">
<div>
<h3 class="game__feature__title">Presets</h3>
<p>Save and fast Equipment Your Item.</p>
</div>
</div>
</div>
</html>
So I would like to keep the images and text in from of the img frozen. And the first element to be flexed: 2 as default and flex back to 1 when other elements are hovered. IDK is there is a better they then flex but this could work fine I think. Doesnt seem to work on this snippet but on separate files it works.
Your code is almost good. Two things you need to add:
.game__feature__block {
overflow: hidden;
}
And
.container:not(:hover) .game__feature__block:first-child {
flex: 2;
}
Good day,
NO matter what i try or what tutorial i use, the card size images are not the same.
A user uploads a image and then the cards needs to scale the image up or down but the total card size across should stay the same width and height.
one image is 2956 x 1965
and the second image is 1024 x 683
the below code looks right until you use different images sizes.
i don't want to upload 100's of images with the same sizes
Below is a screenshot and the code
[enter image description here][1]
<style>
.column_main {
float: left;
width: 25%;
padding: 10px;
height: 900px; /* Should be removed. Only for demonstration */
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
.column_main {
width: 100%;
height: 100%;
}
}
div.polaroid {
width:100%;
overflow: hidden;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="column">
<div class="polaroid">
<img src="img_nature2.jpg" alt="5 Terre" style="width:100%">
<div class="container">
<p>Title</p>
</div>
</div>
</div>
<div class="column">
<div class="polaroid">
<img src="img_nature1.jpg" alt="5 Terre"style="width:100%">
<div class="container">
<p>Title</p>
</div>
</div>
</div>
</div>
</body>
</html>
You need to give a default css to the img or its parent div element
.card{
width: 200px;
height: 200px;
border: black solid 1px; //Look clearly with border :)
}
.card-image{
width:100%;
height:150px; //Whatever you want for only image
object-fit: cover; // it is important for scale of image
}
<div class="card">
<img src="https://theimageconference.org/wp-content/uploads/2020/04/vancouver_image_conference_3-scaled.jpg" class="card-image">
<p>Card Title</p>
</div>
I am having an issue getting tabs to open based on the selection I am choosing. In the snippet you will see 4 boxes. If you click on box 1, I am wanting #marketing1 to open below it and so on.
The method I am using is to get the specific id of the button selection (the 1,2,3,4 box) and then declare a variable to just get the number. Then to add that number to the id of #marketing to show the appropriate section. I am not sure what I am doing wrong. No errors are showing.
Ps - I am also trying to add an .active class to the #marketing-service for when one of the selection boxes is clicked on to show my the active class (it creates a down arrow under the box. Am I implementing the .active wrong to the :before and :after?
//For tabs to stay active
$('.marketing-service').click(function() {
$('.marketing-service.active').removeClass('active');
$(this).toggleClass('active');
//To get the service display box to show
var item_number = $(this).attr('id').replace('marketing-tab', '');
/* $('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);*/
$('#marketing'+item_number).show().siblings('.marketing-section-wrap').hide();
});
.marketing-section-wrap, .marketing-section-wrap-main {
width: 100%;
height: auto;
padding: 80px 0;
border-bottom: 1px solid #EBEBEB;
}
.marketing-section-wrap {
display: none;
}
#marketing-services {
width: 95%;
margin: 0 2.5%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 1%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
/*-- Down Arrow for boxes --*/
.marketing-service:after.active, .marketing-service:before.active {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service:after.active {
border-width: 0px;
margin-left: 0px;
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
margin-top: -30px;
}
.marketing-service:before.active {
border-color: #FFF;
border-top-color: #88b7d5;
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">1</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">2</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">3</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">4</h2>
</div>
</div>
</div>
<div id="marketing1">
<div class="marketing-section-wrap">
1
</div>
</div>
<div id="marketing2">
<div class="marketing-section-wrap">
2
</div>
</div>
Quite simple just try $('#marketing'+item_number).children().show() because marketing-section-wrap is display:none;
first run this to hide all marketing-section-wrap
$('.marketing-section-wrap').hide();
then this will show only the one which corresponds to this click.
$('#marketing'+item_number).children().show();
I am creating a slideshow with 3 images of width 700px and I want to set the image 'left' position of each image from jquery, so that the images slide in, showing the current image and hiding the other images.
Here is the code.
$(document).ready(function() {
//calculating the no. of photos using each funct. Each func will detect the total imgs.
$('.marquee_container .slide').each(function(index) {
//setting the photowidth according to the container width
var photoWidth = $('.marquee_container').width();
//calculating the photoposition
var photoPosition = index * photoWidth;
//setting the left position of the photos
$('.slide').css({
'left': photoPosition
});
//caculating the width of the div depending on the photos
$('.holder').css({
'width': photoWidth + photoPosition
});
});
//generating navigation links
//calculating the no. of marquee_photos divs using the each func
//appending html code inside the marquee_nav
//the marquee_nav links will appear according to the number of marquee_photos divs, using the each function
$('.slide').each(function(index) {
$('.marquee_nav').append('');
});
});
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
}
.holder {
overflow: hidden;
position: relative;
width: 700px;
height: 350px;
}
.slide {
position: absolute;
top: 0px;
left: 0px;
}
.marquee_photos {
overflow: hidden;
}
.marquee_photos img {
display: block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav {
position: absolute;
bottom: 5px;
right: 0;
}
.marquee_nav .marquee_nav_item {
color: #fff;
text-decoration: none;
background: url(images/template/nav_buttons.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
display: block;
width: 17px;
height: 18px;
float: left;
margin: 0 4px;
}
.marquee_nav .marquee_nav_item:hover {
background: url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item:selected {
background: url(images/template/nav_buttons.png) no-repeat -50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>
I am able to add the width dynamically but all the images left position are equal to the last image i.e. left:1400
From js you can see that I have calculated each photo position using index but I am still not able to get the result.
TLDR
You are misusing .each() loop.
To access a value inside of .each() loop you have to use value argument.
$('.marquee_container .slide').each(function (index, value) {
console.log($('.slide')); // All slides on the page.
console.log($(value)); // A value for current iteration
});
Detailed explanation
Sizzle selector engine, used in jQuery returns a collection of matched elements, when you specify a class, and your DOM contains multiple elements with this class.
By calling .each(callback) on a jQuery Collection, you basically tell JavaScript to call callback function for every element in collection. The callback function accepts two arguments: index, value
Where index — current index in array or object, value — a single value from your collection.
By applying $('.slide').css(), you change CSS properties of all elements from collection. To assign a specific position for each element, you need to interact with every separate element by accessing $(value).
Fixing
Please try this demo with your images:
$(document).ready(function() {
//calculating the no. of photos using each funct. Each func will detect the total imgs.
$('.marquee_container .slide').each(function(index, value) {
//setting the photowidth according to the container width
var photoWidth = $('.marquee_container').width();
//calculating the photoposition
var photoPosition = index * photoWidth;
//setting the left position of the photos
$(value).css({
'left': photoPosition
});
//caculating the width of the div depending on the photos
$('.holder').css({
'width': photoWidth + photoPosition
});
});
//generating navigation links
//calculating the no. of marquee_photos divs using the each func
//appending html code inside the marquee_nav
//the marquee_nav links will appear according to the number of marquee_photos divs, using the each function
$('.slide').each(function(index) {
$('.marquee_nav').append('');
});
});
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
}
.holder {
overflow: hidden;
position: relative;
width: 700px;
height: 350px;
}
.slide {
position: absolute;
top: 0px;
left: 0px;
}
.marquee_photos {
overflow: hidden;
}
.marquee_photos img {
display: block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav {
position: absolute;
bottom: 5px;
right: 0;
}
.marquee_nav .marquee_nav_item {
color: #fff;
text-decoration: none;
background: url(images/template/nav_buttons.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
display: block;
width: 17px;
height: 18px;
float: left;
margin: 0 4px;
}
.marquee_nav .marquee_nav_item:hover {
background: url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item:selected {
background: url(images/template/nav_buttons.png) no-repeat -50px 0;
}
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>
I'm trying to make a web page to time a race and I had the idea to make the html page with the timer slide from the right with hitting a button
here's the html of the main menu:
<!DOCTYPE HTML>
<body style="background:#f2f2f2;">
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu" onclick="openChronometre()" ></div>
</div>
</body>
here's a js fiddle of the main menu (without images)
here's a js fiddle of the timer (the layout isn't that great, still WIP)
when hitting the black bar in the main menu, the entire page html page for the timer should come from the right, is there any way to do that?
Sorry I didn't do the animation part. But as a basic idea...
You're probably better off keeping the timer as a div on the main menu page.
If it has to be another page then use an iframe or ajax to load the contents to the div I guess.
Either way it should be contained in the element you're clicking on. Then you can use some JavaScript to modify the CSS and show it/slide it on the page. The jQuery library has a lot of animation/slide functions for example.
I basically combined your 2 fiddles into one and added:
#options {position: absolute; left: 90%; }
and
onclick="opts = document.getElementById('options'); if (opts.style.left == '0px') { opts.style.left = '90%'; } else { opts.style.left = '0px';}"
html {
overflow: hidden;
}
body {
font-family: 'Century Gothic';
font-size: 34px;
}
#options {
box-shadow: 0 0 5px 1px;
margin-top: 100px;
margin-right: -8px;
height: 450px;
cursor: pointer;
position: absolute;
left: 90%;
}
#Chrono1,
#Chrono2 {
overflow: hidden;
background-color: #2d2d2d;
box-shadow: 0 0 4px 0 #0c0c0c;
padding: 6px 20px;
}
#Panel1,
#Panel2 {
overflow: hidden;
background-color: #2d2d2d;
box-shadow: 0 0 4px 0 #0c0c0c;
width: 400px;
height: 450px;
}
#Panel1:hover,
#Panel2:hover {
transition: opacity 0.5s;
-webkit-animation: PanelSlide 2s;
/* Chrome, Safari, Opera */
animation: PanelSlide 2s;
/* IE */
}
<body style="background:#f2f2f2;">
<div id="options" style="background-color: #262626; font-family: Century Gothic; color: #8c8c8c;" onclick="opts = document.getElementById('options');
if (opts.style.left == '0px') {
opts.style.left = '90%';
} else {
opts.style.left = '0px';
}
">
<div id="Title" style="font-size: 55px; text-align: center; margin-top: 3%">Timer</div>
<div id="Temps" style="text-align: center; font-size: 30px; margin: 7%;">
<div id="Chrono1" style="display: inline-block; margin-right: 540px; position:relative;">
00:00:00
</div>
<div id="Chrono2" style="display: inline-block; position:relative;">
00:00:00
</div>
</div>
<div id="Panels" style="text-align: center; font-size: 30px; margin-top: -5%;">
<div id="Panel1" style="display: inline-block; position:relative; margin-right: 300px; opacity: 0;">
</div>
<div id="Panel2" style="display: inline-block; position:relative; opacity: 0;">
</div>
</div>
</div>
</body>
Just have (or load) the chronometre page in a div that is outside of the visibility, then use the animations to slide it in:
#next_page {
position:fixed;
top:0px;
left:100%;
z-index:222;
height:100%;
width:100%;
background:rgba(0,0,0,0.6);
}
And then with JS (I used jQuery for convenience):
function openChronometre(){
$("#next_page").stop(0,0).animate(
{ left: 0 },
1000
);
}
You can see it working here: http://jsfiddle.net/1uggfw32/5/ (I made the options as a green box so you can click on them).