• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

changing logo on menu activate

Contributor ,
Jul 29, 2020 Jul 29, 2020

Copy link to clipboard

Copied

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?

Views

1.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 6 Correct answers

LEGEND , Jul 30, 2020 Jul 30, 2020

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

...

Votes

Translate

Translate
Contributor , Jul 30, 2020 Jul 30, 2020

so sorry -

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

 

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

results in:

Screen Shot 2020-07-30 at 3.30.07 PM.png

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

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

Screen Shot 2020-07-30 at 3.31.46 PM.png

 

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

Screen Shot 2020-07-30 at 3.35.32 PM.png

 

Votes

Translate

Translate
LEGEND , Jul 30, 2020 Jul 30, 2020

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.

 

Votes

Translate

Translate
LEGEND , Jul 31, 2020 Jul 31, 2020

 

'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.

...

Votes

Translate

Translate
LEGEND , Aug 02, 2020 Aug 02, 2020

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 co

...

Votes

Translate

Translate
LEGEND , Aug 04, 2020 Aug 04, 2020

Actually you dont need Javascript for the delay, you could just use the 'animation-delay' css property. Add the two css properties, marked in red below, to the existing 'footer_slide_up' css selector:

 

.footer_slide_up {
position:fixed;
width: 100vw;
display: flex;
justify-content: center;
padding: 25px 0;
bottom: 0;
animation: slideup 1s forwards;
animation-delay: 2s;
transform: translateY(100%)
}

 

 

Avoid Javascript where you can use css instead, makes it all more streamlined.

Votes

Translate

Translate
LEGEND ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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?

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

****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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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;
}

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

so sorry -

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

 

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

results in:

Screen Shot 2020-07-30 at 3.30.07 PM.png

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

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

Screen Shot 2020-07-30 at 3.31.46 PM.png

 

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

Screen Shot 2020-07-30 at 3.35.32 PM.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

like this?

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

 

and the "f" for facebook works here..

 

so something is getting in the way somewhere

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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;
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

 

'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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

 

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;
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

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;
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 02, 2020 Aug 02, 2020

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 02, 2020 Aug 02, 2020

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 02, 2020 Aug 02, 2020

Copy link to clipboard

Copied

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..

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 03, 2020 Aug 03, 2020

Copy link to clipboard

Copied

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;
}

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines