• 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
Contributor ,
Aug 03, 2020 Aug 03, 2020

Copy link to clipboard

Copied

that works but i lose the delay - id like it to delay a beat after everything loads..  

it seems that delay is what was causing my issue bc as soon as i add it to your css the glitch happens

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 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

Javascript is needed for a delay:

 

Amend the css to as below:

 

.footer_slide_up {
position:fixed;
width: 100vw;
display: flex;
justify-content: center;
padding: 25px 0;
bottom: 0;
transform: translateY(100%);
transition: all 1s ease;

}

.slideUp {
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;
}

 

 

 

Then add the javascript delay: (this is set for 3 seconds)

 

<script>

setTimeout(function() {
document.querySelector('.footer_slide_up').classList.add('slideUp');
}, 3000);

</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 ,
Aug 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

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

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 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

thank you-- it works great on the reel and movie pages (i adjusted it so each has their on "a" class) but not on the copyright on the overlay (hit the hamburger - the copyright just pops on)

http://toddheymandirector.com/reel/

 

i am assuming this is because the overlay elements are called up on page load - is there a way to delay the animation till the overlay is called?

 

once again thank you for all your guidance - 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 ,
Aug 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

thanks!-  it works great on the reel/archive link and the movie titles but it doent work on the copyright footer on the overlay (hit the hamburger)

 

http://toddheymandirector.com/reel/

 

Im guessing it is because the the copyright/ overlay loads when the page loads- is there a way to activate the animation only when the overlay is prompted by the toggle?

 

i agree about limiting the java - i always aim for a css solution whenever Im trying to figure something 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
Contributor ,
Aug 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

thank you! it worked for the reel/archive link and the movie titles but not for the copyright -

(hit the hamburger)

http://toddheymandirector.com/reel/

 

guessing its because the copyright/overlay loads when the page loads and not when its called up by the toggle? is there a way to activate the animation only when the toggle is activated?

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 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

 

thank you! it worked for the reel/archive link and the movie titles but not for the copyright -

(hit the hamburger)

 

 

guessing its because the copyright/overlay loads when the page loads and not when its called up by the toggle? is there a way to activate the animation only when the toggle is activated?

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 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

Reference your copyright div not working. Delete it from the overlayz <div>. You need to position it out of sight at he bottom of the browser window.

 

Simplify the html and include it right after the opening <body> tag:

 

<div class="copyright">
<span>© 2020 Todd Heyman // All Rights Reserved</span>
</div>

 

Then use the css below (sorry about the z-index - I had to use a high nummer to get it to the top of the stack as you've used all kinds of carzy z-index in you css):

 

.copyright {
display: flex;
justify-content: center;
width: 100%;
position: fixed;
bottom: 0;
z-index: 30000000000000000000000000;
transform: translateY(100%);
padding: 20px 0;
color: #fff;
transition: all 1s ease;
}
.copyrightSlideUp {
transform: translateY(0);
}

 

 

add the javascript blcok of code at the end of you page:

 

<script>
function copyrightUp() {
const copyright = document.querySelector('.copyright');
copyright.style.opacity = 0;
setTimeout(function(){
copyright.style.opacity = 1;
copyright.classList.toggle('copyrightSlideUp')
}, 2000)
}
</script>

 

 

Then locate this block of code, which is already present and add the line in red, which call the function when the hamburger is toggled.

 

<script id="rendered-js">
$('#toggle').click(function () {
$('#overlayz').addClass('open');
copyrightUp();
});
</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
Contributor ,
Aug 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

thank you! it worked for the reel/archive link and the movie titles but not for the copyright -

(hit the hamburger)

 

http://toddheymandirector.com/reel/

 

guessing its because the copyright/overlay loads when the page loads and not when its called up by the toggle? is there a way to activate the animation only when the toggle is activated?

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 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

thank you! it worked for the reel/archive link and the movie titles but not for the copyright - (hit the hamburger) http://toddheymandirector.com/reel/  

guessing its because the copyright/overlay loads when the page loads and not when its called up by the toggle? is there a way to activate the animation only when the toggle is activated?

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 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

I have no idea why we cant post to the orginal thread, maybe a forum moderator can tell us? However in reference to you copyright issue.

 

You need to position that <div> at the foot of the browser window so you need to move it out of the overlayz <div>.

 

Simplify the html and include it right after the opening <body> tag of your page:

<div class="copyright">
<a>© 2020 Todd Heyman // All Rights Reserved</a>
</div>

 

Then add the css below (sorry about the z-index number but I had to get it to the top of the stack - your crazy use of z-indexs is a problem)

 

.copyright {
display: flex;
justify-content: center;
width: 100%;
position: fixed;
bottom: 0;
z-index: 30000000000000000000000000;
transform: translateY(100%);
padding: 20px 0;
color: #fff;
transition: all 1s ease;
}
.copyrightSlideUp {
transform: translateY(0)
}

 

 

Then add the block of javscript below at the foot of your page:

 

<script>
function copyrightUp() {
const copyright = document.querySelector('.copyright');
copyright.style.opacity = 0;
setTimeout(function(){
copyright.style.opacity = 1;
copyright.classList.toggle('copyrightSlideUp')
}, 2000)
}
</script>

 

 

Then locate the below block of javascript and add the line in red. That will call the 'copyrightUp' function when the hamburger is toggled.

 

<script id="rendered-js">
$('#toggle').click(function () {
$('#overlayz').addClass('open');
copyrightUp();
});
</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
Contributor ,
Aug 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

re- the below-- thank you! it worked for the reel/archive link and the movie titles but not for the copyright -

(hit the hamburger)

http://toddheymandirector.com/reel/

 

guessing its because the copyright/overlay loads when the page loads and not when its called up by the toggle? is there a way to activate the animation only when the toggle is activated?

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 06, 2020 Aug 06, 2020

Copy link to clipboard

Copied

Test Reply that is NOT Threaded. Ignore.

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
Community Expert ,
Aug 06, 2020 Aug 06, 2020

Copy link to clipboard

Copied

LATEST

This number plate was recently cancelled in Victoria Australia declaring it offensive:

The plates spell out the word ‘weapon’ in four letters: ‘WEPN’.

 

I womder how long it will be when the PC's will condemn your screen name.

Wappler, the only real Dreamweaver alternative.

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