I'm trying to make a couple of changes to the HTML5UP Highlights site. You can see from the preview here https://html5up.net/highlights that as you scroll down to the next section of the page the background image changes like this:
Then if you resize the window the original background image is displayed and the second image becomes included in the content like this:
I'm trying to work out how the background image changes in the first screen shot. I'm trying to always show the original background as in the second screenshot regardless of screensize and always include the sub images in the content. Basically I'm trying to emulate the second screenshot in all screen sizes.
I can see there are these sections in the CSS for different screen sizes:
#media screen and (max-width: 980px) {
.main .image.primary {
display: block;
margin: 0 0 4em 0;
}
}
So I've changed this for the Main version too and commented out display:none.
.main .image.primary {
/*display: none; */
display: block;
margin: 0 0 4em 0;
}
This seems to add the content images regardless of screenshot but I can't work out what changes the background image on screen resize?
1st part: remove the background transition
To disable the background transition effect, look in your assets/js/main.js file. You'll find a part title with the comment // Main sections. (line 156+). A little lower, You'll find the following:
// Create bg and append it to body.
$bg = $('<div class="main-bg" id="' + $this.attr('id') + '-bg"></div>')
.css('background-image', (
'url("css/images/overlay.png"), url("' + $primaryImg.attr('src') + '")'
))
.appendTo($body);
This creates an element for the background image, that depends on the current element.
And after that, You'll find the code to add/remove this element with or without transition (line 194+):
if (skel.canUse('transition')) {
options.init = function() { $bg.removeClass('active'); };
options.enter = function() { $bg.addClass('active'); };
options.leave = function() { $bg.removeClass('active'); };
}
else {
$bg
.css('opacity', 1)
.hide();
options.init = function() { $bg.fadeOut(0); };
options.enter = function() { $bg.fadeIn(400); };
options.leave = function() { $bg.fadeOut(400); };
}
You can just delete or comment that part, and the transition effect should be gone.
2nd part: always show the content images
Here you already found the correct place in the assets/css/main.css file. Just set
.main .image.primary {
display: block;
}
and remove the min-height property:
.main .container:before {
/*min-height: calc( 100vh - 13em );*/
content: '';
display: inline-block;
vertical-align: middle;
width: 1px;
}
No everything shoud work as your second screenshot.
Related
Noob question. I am practicing with a Web-Site; and I have a toggleable menu that appears when it gets to a certain width (250-750px) and disappears when it reaches 751px. When I insert a js script it remains hidden.
CSS
#media (min-width: 250px) and (max-width: 750px){
.headernav ul li {
width: 100%;
display: block;
background-color: hsl(3, 43%, 56%);
opacity: 0;
transition: .5s;
}
#media (min-width: 751px){
.headernav ul li{
opacity: 1;
}
}
Here is the js code
let toggledNavMenu = false;
function toggleMenu(){
let getMenu = document.querySelector(".menu");
let getLi = document.querySelectorAll(".headernav ul li");
let liSize = getLi.length;
if(toggledNavMenu == false){
for (let i = 0; i < liSize; i++) {
getLi[i].style.opacity ="0";
}
toggledNavMenu = true;
}
else{
for (let i = 0; i < liSize; i++) {
getLi[i].style.opacity ="1";
}
toggledNavMenu = false;
}
}
The problem is that if I click on the menu; and the opacity is set to 0 in the js script, the menu remains hidden when I expand the screen. So basically I end up with an invisible menu. I'll let a sequence of images to explain it better. The only way to fix this is by going to a width<=750 so the buttom shows and then click on it, bringing the opacity back to 1 and it's really annoying.
Starting Nav
When Width is <= 750 the toggleable menu appears
The menu displays when clicked
Width is now > 750 and the menu disappears
I felt like you wrote many unnecessary codes like for loop functions for a simple Nav-Bar.
CSS code
#media (min-width: 250px) and (max-width: 750px){
.menu{
display: none;
}
}
JS code
function toggleNav() {
var toggledNavMenu = document.getElementById(".menu");
if (toggledNavMenu.style.display === "none") {
toggledNavMenu.style.display = "block";
} else {
toggledNavMenu.style.display = "none";
}
}
// just piece of cake ;)
You're getting the job wrong.
First - install jQuery, it's simple enough for a newbiew.
Second - Explore and learn.
Third - Implement.
In most cases css elements are bound to jQuery/Javascript events. So when you hover, then you add 'active' class to the element that was clicked. You add other class to the parent as well.
So you get
<ul class="dropdown-is-active"><li class="selected"> ... </ul>
Basically you react to events, add/remove classes and compose css properly. Remember that it's hard to make uniform dropdown menu. It's always somehow limited.
I tried the break point in 5.5.2 and was pretty easily accomplished just by changing the width in 3 instances as follow:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:64.063em/";
width: 64.063em;
}
#media only screen and (min-width: 64.063em) {
.top-bar {
background: #333333;
*zoom: 1;
overflow: visible;
}
the only problem I'm facing is the main menu (parent link) of the drop down is not visible (once you click, it only shows the dropdown part not the main link) when it comes to toggle menu, unless you reach the actual break point ie. 40.063 em. Should I need to make any change in javascript?
Thanks for helping me!!
I've done a little more research and found the fix. All you have to do is go to [js/foundation/foundation.topbar.js]
line number 368 change "show-for-small" to "show-for-medium-down".
Following is the code for you:
if (settings.mobile_show_parent_link == true && url) {
$titleLi = $('<li class="title back js-generated"><h5></h5></li><li class="parent-link show-for-medium-down"><a class="parent-link js-generated" href="' + url + '">' + $link.html() +'</a></li>');
} else {
$titleLi = $('<li class="title back js-generated"><h5></h5>');
}
Then at the very bottom of your html file, where you are calling other js files, call topbar.js by adding following line
<script src="js/foundation/foundation.topbar.js"></script>
You can even make this work just by making the above mentioned change in js/foundation.min.js
The idea is that when users mouse over each name in the list, the div with id preview will have background image. The first a does not have a problem, but when I added the href, JavaScript keep firing the hover event. What is the problem here?
HTML
<ul>
<li><a>John</a></li>
<li>Sam</li>
<li>Tom</li>
</ul>
<div id="preview"></div>
JavaScript
jQuery(function() {
var names = $('a');
var bg = document.getElementById('preview');
names.hover(
changeBackground, handlerOut
);
function changeBackground(e) {
console.log('hover');
var image = 'http://londonalley.com/wp-content/uploads/2014/08/creativesUS3bb-1920x1080.jpg';
if (bg.style.cssText.length == 0) {
bg.style.cssText = builtStyle(image);
bg.style.display = "block";
}
}
function builtStyle(image) {
return "width: 100%;height: 100%;opacity: .6;position: absolute;top:0px;left: 0px;z-index: 101;opacity:.9: 1;display: block;visibility: visible;background-image: url(" +
image + ");"
}
//handle mouse leaves
function handlerOut() {
console.log('out');
if (bg.style.cssText) {
bg.style.cssText = "";
}
}
});
JSfiddle: https://jsfiddle.net/rattanak22/q96a6dz4/
Solution: Simply change your z-index css in the builtStyle function from 101 to -1
z-index: -1;
Note: You have specified opacity twice in your CSS.
The problem is you are setting background image as absolutely positioned without z-index. So when you hover over "a" tag, changeBackground function assigns an background image which is absolutely positioned with no z-index. That will bring image on top above all, like one more layer above "a" tag. As this new layer comes up, mouse cannot reach "a" tag which triggers hoverOut, and the cycle continues for every mouse moment.
function builtStyle(image) {
return "width: 100%;height: 100%;opacity: .6;position: absolute;top:0px;left: 0px;z-index: -1;opacity:.9: 1;display: block;visibility: visible;background-image: url(" +
image + ");"
}
https://jsfiddle.net/pradosh987/9p0pjtd4/
I have assigned -1 z-index to background image and that works.
After looking at your site, simply, change your css rules to:
#content-wrapper {
position: relative;
z-index: 102;
overflow: hidden;
}
#preview{
pointer-events: none;
}
I have 2 elements, the first one (at the top) has the following CSS properties:
header {
position: relative;
height: 100%;
width: 100%;
background-color: black;
}
This makes it in the size of the browser's viewport, what I did on purpose because I wanted that result. I also had to give the html, body element the CSS property's for this to work (filling the screen with the first element):
html, body {
height: 100%;
width: 100%;
}
The second element I have looks like this:
#content {
display: none;
position: relative;
height: 1500px;
width: 100%;
background-color: yellow;
}
This element is underneath the first one.
As you can see, this element is hidden. That's because when I click on the button on the first element (which you can see in the jsFiddle) it shows the #content element, scrolls to that, and hides the element where we came from (header) when it's done scrolling.
Which works perfectly, I've got the function here:
var showScrollHide = function(showTime, element, eleTime, hide, hideTime, func) {
var _ele = $(element),
_hide = $(hide);
_ele.fadeIn(showTime, function() {
$('html, body').animate({
scrollTop: _ele.offset().top
}, eleTime, function() {
_hide.fadeOut(hideTime, func ? func : null);
});
});
};
I'm calling that function by this piece of code:
$('.exploreBtn').on('click', function() {
showScrollHide(500, content, 1000, header, 250, function() {
$(window).scrollTop(0);
$('.scrollBackBtn').fadeIn();
});
});
In the snippet above I had to call $(window).scrollTop(0); otherwise it would scroll down the page a bit when it was done scrolling. Also I displayed the scroll back button now, but that is the problem.
When I'm on the second element, and the element above it is hidden by the function above. And I try to use the same function to scroll it back up which means:
Show the element above
Scroll to it
Fade out the element we came from
It only gives me a fade to the element I'm trying to scroll to.
When I removed all the code from the function, and only used this:
$('header').fadeIn();
It just did the same and automatically faded the screen to that element we have just faded in. Which means it scrolls up, but not with any animation or what so ever.
Here is a jsFiddle to show what I'm doing
Btw, I already fixed this issue with the help of #Loktar with this piece of code, but I'm still not sure if its the right way to do it:
$('.scrollBackBtn').on('click', function() {
$(window).scrollTop(0);
$(header).slideDown();
});
If I am understanding it correctly the following should work.
_scrollBackBtn.on('click', function() {
_window.scrollTop(0);
$(header).slideDown();
});
Live Demo
I am trying get this background to fade in on click. I found one tutorial that was helpful, and I ended up created the code so it has two images, and they fade in and out on click to bring up the picture.
Here's the work: http://www.mccraymusic.com/bgchangetest.html
Only a couple of issues though:
How do I make this work without the images getting selected at random? I'd like it to just switch from the plain black image to the image with the drum set. (And cross-fade to if possible, but not necessary)
How do I center the image on the page, so the image of the drums are centered?
I'm guessing this is what you're after:
$(function() {
var images = ["black.jpg","bg.jpg"];
$('<img>').attr({'src':'http://www.mccraymusic.com/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);
$('.entersite').click(function(e) {
e.preventDefault();
var image = images[1];
$('#bg').parent().fadeOut(200, function() {
$('#bg').attr('src', 'http://www.mccraymusic.com/assets/images/'+image);
$(this).fadeIn(1000);
});
$(this).fadeOut(1000, function() {
$(this).remove();
});
});
});
DEMONSTRATION
Also added :
display: block;
margin-left: auto;
margin-right: auto;
to your #bg element to center the image.
Alright, assuming you use JQuery
You have #backgroundid and #imageid
Begin by setting
$('#backgroundid').css('opacity',1);
$('#imageid').css('opacity',0); // setting opacity (transparency) to 0, invisible
Now you have #buttonid.
Set up a jquery event so that when it's clicked, you fade out the background, and fade in the image using JQuery's animate.
$('#buttonid').click(function() {
$('#backgroundid').animate(function() {
opacity : 0 // fade it to 0 opacity, invisible
}, 1000); // animation will take 1000ms, 1second
$('#imageid').animate(function() {
opacity : 1 // fade it to full opacity, solid
}, 1000);
});
Now about that image centering.
You can either let css manage it with
body { /* Body or #imageid parent */
text-align : center;
}
#imageid {
margin: 0px auto;
}
Or you can stick to a JQuery solution, using absolute/fixed positioning.
First, use some css to fix the position of your image
#imageid {
position: absolute; // or fixed, if you want
}
Now use JQuery to reposition it
function positionImage() {
var imagewidth = $('#imageid').width();
var imageheight = $('#imageid').height();
$('#imageid').css('left', ($(window).width() - imagewidth) / 2);
$('#imageid').css('top', ($(window).height() - imageheight) / 2);
}
$(document).ready(positionImage); // bind the ready event to reposition
$(window).resize(positionImage); // on window resize, reposition image too
if you keep a div element with height and width as 100% and bgcolor as black. And then change the opacity of the div as desired to get the fade in/out effect, that should generate the same effect. I guess..
You are better off using any available jQuery plugin as they would have optimized and fixed bugs for multiple browsers.
Try lightBoxMe plugin
http://buckwilson.me/lightboxme/
This is the simplest plugin available!