changing logo on menu activate

[REELHERO]

i have a burger menu with an overlay -

http://toddheymandirector.com/reel/index_burger7.html

i need the black logo to disappear (revealing the white) when the overlay activates - 

i tried }
.button_container:active .th_logo_black {
opacity: 0;

not working - any ideas?

[osgood_ · Accepted solution]

Youre suffering from a lot of z-index nonsense:

z-index: 999999999999999999999999999999999999999999999999999999999999;

Add the below to your css styles: (I don't have time to work out your z-index issues so I have applied a z-index to the hamburger which will move that to the top of the stack.

#toggle {
position: absolute;
z-index: 200000000000000000000000000000000000000000000000000000;
}
.showHide{
display: none;
}

Then add the javascript block of code below directly before the closing </body> tag of your page.

<script>
const toggle = document.querySelector('#toggle');
const blackLogo = document.querySelector('.th_logo_black');
toggle.onclick = function() {
blackLogo.classList.toggle('showHide');
}
</script>

You really need to sort out the z-index issue so the code is manageable.

[REELHERO]

you rock thank you!

(you helped a long time ago on an issue and i was very grateful..)

yeah the z-index - that was me just being frustrated that I couldnt work out the issue so i just went nuts on the 'Zs" i promise i will clean it up when I get it all to work..

i have one other issue (one of the catalysts that caused me to start the Z mania) my rollover on the thumnails are not operating normally..

here is them functioning normally on my current site

http://toddheymandirector.com/reel/

on the test page they only operate hover-off -

http://toddheymandirector.com/reel/index_burger7.html

something about the overlay is conflicting and Im not sure what..

again thank you! i promise i will clean up the code when Im done

[REELHERO]

apologies i forgot - theres one more glitch Im encountering-- ( i promise i wont be greedy with your time)

the social media icon font on the overlay breaks when i add links-

http://toddheymandirector.com/reel/index_burger7a.html

but works fine without a link- ive tried starting with the link.. no go

ive seen others have the issue but never found a solution

[osgood_]

To answer your first query, as to why your rollovers on the thumbnails are not working correctly, it looks like you have a jQuery conflict. The jQuery 2.1.3 library has been introduced into your latest version, which was not present in the version that works correctly.

This version of jQuery(2.1.3), linked near the bottom of your code, is stopping the rollovers from working as you want them to:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

This version of jQuery(1.10.2), linked near the top of your code, is the version which is compatible with however the rollovers function.

<script src="http://toddheymandirector.com/js/jquery-1.10.2.min.js" type="text/javascript"></script>

You have to decide whether jQuery version 2.1.3 is needed for the page to work or not. If you remove it then it might affect something else, but you'll need to test to discover that.

This is/was the problem with a lot of 'off-the-shelf' components written in jQuery - when a new version of jQuery came out and you linked that to the page it could break anything written in a previous version.

To answer your second query - I don't know what set of font-icons you are using for your social-media?

[REELHERO]

thank you osgood - i thought it might be that - i deleted the second jquery and my menu/overlay stopped working.. what to do  what to do - aiiiy..

the fonts im using are social-media-webfont

http://toddheymandirector.com/css/font_stylesheet2.css

they're uploaded and work when theres no link -thats whats strange..

see here

http://toddheymandirector.com/reel/index_burger7.html

vs

here

http://toddheymandirector.com/reel/index_burger7a.html

so its just adding a hyperlink thats messing them up which is such an odd thing no? 

here is the code

<div id="social_overlay2">
<div id="social_overlay">
<div class="social_font"><a href="https://www.facebook.com/todd.heyman.18" target="_blank" >f</a></div>

<div class="social_font"><a href="https://www.facebook.com/todd.heyman.18" target="_blank" >9</a></div>

<div class="social_font"><a href="https://www.facebook.com/todd.heyman.18" a target="_blank" >c</a></div>

</div></div>

[REELHERO]

****edit - i removed the newer jquery and now its working - still problematic for the reasons you mentioned above -- so the only issue left is the social fonts breaking

[osgood_]

have you tried wrapping the anchor tag around the <div>:

<a href="https://www.facebook.com/todd.heyman.18" target="_blank" >
<div class="social_font">f</div>
</a>

EDITED:

I tested the social-media-icons using the web-font files and they work for me. What do you mean 'they break' - the icons don't show at all when you use an anchor tag or are you seeing the results of the anchor tag, which will turn the icons a different color and insert an underline beneath them?

What happens if you include the @font-face css directly in your css above the .social_font css:

.social_font {
	float:left;
	padding-right:20px;
	margin-top:.5vw;
	color:#a8aaab;
	font-size:18px;
	font-family: 'social_mediaregular';
	z-index: 99999999999999999999999999999999999999999999999999999999999999999999999;
}

Include the below before the css above: (I see you have the below @font-face declared twice in your 'font_stylesheet2.css' file, one which has the full url path to the woff files and one which just starts at /fonts

@font-face {
    font-family: 'social_mediaregular';
    src: url('fonts/social_media-webfont.woff2') format('woff2'),
         url('fonts/social_media-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

[REELHERO · Accepted solution]

so sorry -

this was the link (im creating a lot of test pages):

http://toddheymandirector.com/reel/index_burger7c.html

results in:

http://toddheymandirector.com/reel/index_burger7.html

this is how its supposeed to look (only looks correct when there are no links)

i did try wrapping the anchor around the div and i get a slightly different issue:

http://toddheymandirector.com/reel/index_burger7cc.html

it removes the float/center - and jumbles the icons

[osgood_]

Can you try altering your 'social_overlay' css to as below. That should then result in the social media icons all being on one line.

#social_overlay {
display: flex; 
justify-content: center;
}

You then dont need float: left:

.social_font {
	float:left;
	padding-right:20px;
	margin-top:.5vw;
	color:#a8aaab;
	font-size:18px;
	font-family: 'social_mediaregular';
	z-index: 99999999999999999999999999999999999999999999999999999999999999999999999;
}

I can't think why the actual icons would be changing when just moving the anchor tags outside of the <divs>. Try moving the @font-face to above your .social_font css and see what happens. It might just be getting confused.

[REELHERO]

thank you -- closer! now

http://toddheymandirector.com/reel/index_burger7cc.html

i just figure out why the icons dont correspond correctly (ie the facebook  and instagram icon alters yet the vimeo doesnt)..  i thought it might be a "case" issue but no

i did add the fontface css right before social fonts and removed the double link in the fontstylesheet

[REELHERO]

its strange right? i could type out the entire alphabet and see what comes up as facebook an instagram even if it isnt correct.. i just worry that somehow it might display incorrectly on a another browser

[osgood_ · Accepted solution]

I guess there must be some conflict going on.

Test just the social icons in a file on their own, without all the other @font-face, just the one which is applicable to the social icons

It works ok for me.

[REELHERO]

like this?

http://toddheymandirector.com/reel/font_test.html

and the "f" for facebook works here..

so something is getting in the way somewhere

[REELHERO]

i figured it out!

http://toddheymandirector.com/reel/index_burger7cc.html

the li styling from the menu was carrying over to everything in the list (i didnt have a map so i didnt know what those icons were)

i added a text-transform:lowercase to the social font and voila!

[REELHERO]

thank you so much for all your help you were very gracious with your time - much appreciated!

[REELHERO]

one more quick question-

the overlay slides down on open and slides up on close 

if i wanted to change the close to a simple dissolve - what would i change?

i tried adding an overlay.close but it didnt work

heres the code

.overlay {
position: fixed;
background: #0b2330;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: opacity .15s, visibility .15s, height .31s;
transition: all .3s ease;
letter-spacing: 5px;
z-index: 20000000000000000000000000000000000000000000000000000;

}
.overlay.open {
opacity: .95;
visibility: visible;
height: 100%;
z-index: 999;
}

[osgood_ · Accepted solution]

'if i wanted to change the close to a simple dissolve - what would i change?'

Make a back-up of what you have so far just incase you need to go back to a working version.

The below will fade in the overlay and fade out the overlay IT WONT slide down the overlay.

Locate your 'overlay' css and amend both css selectors as follows:

.overlay {
position: fixed;
background: #0b2330;
top: 0;
left: 0;
width: 100%;
height: 100%;
letter-spacing: 5px;
z-index: -100;
opacity: 0;
transition: opacity 1s ease;
}
.overlay.open {
z-index: 999;
opacity: 1;
}

Then locate the block of javascript below and DELETE it.

<script id="rendered-js">
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
//# sourceURL=pen.js
</script>

Then update the block of javascript we included to make the logo go from black to white on toggle of the hamburger:

<script>
const toggle = document.querySelector('#toggle');
const overlay = document.querySelector('#overlay');
const blackLogo = document.querySelector('.th_logo_black');
toggle.onclick = function() {
this.classList.toggle('active');
blackLogo.classList.toggle('showHide');
overlay.classList.toggle('open');
}

</script>

[osgood_]

IF you did ONLY want the overlay to fade out on close use the javascript below in the ORDER shown:

<script>
const toggle = document.querySelector('#toggle');
const blackLogo = document.querySelector('.th_logo_black');
const overlay = document.querySelector('#overlay');
toggle.onclick = function() {
this.classList.toggle('active');
blackLogo.classList.toggle('showHide');
if(overlay.classList.contains('open')) {
overlay.classList.add('fadeOut');
setTimeout(function(){
overlay.classList.remove('open');
overlay.classList.remove('fadeOut'); },
1000);
};
}
</script>

<script id="rendered-js">
$('#toggle').click(function () {
$('#overlay').addClass('open');
});
//# sourceURL=pen.js
</script>

Then add the below to your css:

.overlay.fadeOut {
opacity: 0!important;
transition: opacity 1s ease;
}

[REELHERO]

trying now - just to confirm..

i do want it to slide up on open and fade out on close so i dont alter the overlay and overlay.open class

just these  changes correct?:

 locate the block of javascript below and DELETE it.

<script id="rendered-js">
$('#toggle').click(function () {
$(this).toggleClass('active');

replace with the javascript below in the ORDER shown:

<script>
const toggle = document.querySelector('#toggle');
const blackLogo = document.querySelector('.th_logo_black');
const overlay = document.querySelector('#overlay');
toggle.onclick = function() {
this.classList.toggle('active');
blackLogo.classList.toggle('showHide');
if(overlay.classList.contains('open')) {
overlay.classList.add('fadeOut');
setTimeout(function(){
overlay.classList.remove('open');
overlay.classList.remove('fadeOut'); },
1000);
};
}
</script>

<script id="rendered-js">
$('#toggle').click(function () {
$('#overlay').addClass('open');
});
//# sourceURL=pen.js
</script>

Then add the below to my css:

.overlay.fadeOut {
opacity: 0!important;
transition: opacity 1s ease;
}

[REELHERO]

i answered my own question:

http://toddheymandirector.com/reel/index_burger_final_c.html

works like a charm!

i cant thank you enough for all your help - so kind!

[REELHERO]

hi osgood - the site is up

http://toddheymandirector.com/

(i havent corrected the Z-space yet but I will as soon as i get this to work)

the only thing that isnt working is the overlay doesnt function on my movie player:

http://toddheymandirector.com/reel/movies/nike_the_getaway/index_new2.html

I added our js and css but its not working - what am I missing?

[osgood_ · Accepted solution]

I really have no idea other than it is probably as a result of the addition of the media player, perhaps the css for that component is blocking the overlay.

I'd start by going through the movie component css, comment it out then uncomment it, line by line, and see at what stage it breaks the overlay.

Maybe also comment out the javascript for the movie component and re-introduce that one at a time to check if that is having any influence on the overlay.

So really just start by adding the movie component html to the page, then start adding the movie css back and then the javascript. Test each time you add something back.

The actual overlay IS working for me when I test locally BUT the movie component is not positioned correctly so I assume Im not getting something as a result of testing it locally, which is making it not possible for me to replicate the issue.

[REELHERO]

it took a bit but i found the conflciting css -- thank you! (click any thumb)

http://toddheymandirector.com/reel/

site is all up.. working nicely.. the only stupid little glitch im seeing is all the footers (copyright, archive link, movie title) slide up but they appear right before sliding up for a split second.. then slide up.. thats the only error Im seeing..

i tried adding a visibilty class on movie title and the slide but that didnt work:

#movietitle1 {
position:fixed;
width:100vw;
display: flex;
justify-content: center;
bottom:18px;
visibility:hidden

}

.movietitle a {

text-align:center;
font-family: open_sansregular;
color:#000;
font-size: 1.15em;

line-height: 14px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight:800;

}

@keyframes slideUpFromBottom {
0% {
visibility: hidden;
opacity: 0;
transform: translateY(100px);
}
100% {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}

.movietitle_slide {
animation: .6s ease-out .6s 1 slideUpFromBottom2;

}

ims ure Ill figure it out..

[osgood_]

I would simplify the structure for the footer slide up from the below, which is what you currently have:

<div id="archive1" class="archive_slide">
<div class="archiverequest archive_slide"> <a href="mailto:info@xxxxxxxxxxxxxxxxxxxxxxxxxxxx.com?subject=Send me an archive link">Archive</a> 
</div>
</div>

To:

<footer class="footer_slide_up"> 
<a href="mailto:info@xxxxxxxxxxxxxxxxxxxxxxxxxxxx.com?subject=Send me an archive link">Archive</a> 
</footer>

Then use the css below:

.footer_slide_up {				
position:fixed;
width: 100vw;
display: flex; 
justify-content: center;
padding: 25px 0;
bottom: 0;
animation: slideup 1s forwards;
}


@keyframes slideup {
0%   {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}

.footer_slide_up a {
font-family:  dosisregular;
color: #404040;
font-size: 1.7em;
line-height: 14px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 800;
}
.footer_slide_up a:hover {     
color: #000;
}