Jump to content
Search Community

Really need your help – numerous issues!

jimcam test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi folks,

 

I'm really new to all this, but from all your tips I managed to build my first timeline. However, the good old client is turning my banner into a bit of beast and I'm struggling. Think I'm out of my depth a bit, so your help would be much appreciated!

 

I really need your help with following:

 

1. <button id="infoBtn"> to start my second timeline when clicked

2. <button id="closeBtn"> to go to <div id="f4"> when clicked

3. my buttons to sit above the clicktag

 

My code is probably in a right mess – but please bear with me, I know its a bit of hack (your thoughts would be much welcomed).

 

Anyway, heres the Codepen to all this:

 

See the Pen VKaoqQ by jimcam (@jimcam) on CodePen

 

Thanks in advanced!!!

Link to comment
Share on other sites

3 Above? On Top? z-index? (w/ prevent default maybe on bubble of events)
 

2 Do you have a 'console.log' working when you click on closeBtn?

 

1. Do have a console.log working when you click on infoBtn?
 

I do not see any click or touch or mouse triggers.

Link to comment
Share on other sites

Hello jimcam,

 

Welcome to the forums and the wonderful world of banner creation :D

 

It looks like you have just copied your local code and dumped into the Pen (which is fine, don't worry), therefore, there's a bunch of things there that shouldn't be and will cause people to point that to you (I guess I just did). No need to have <body>, its parents and <script> tags in there. CodePen already adds that for you.

 

There was also a load of JavaScript code in your Pen that did not seem to have any relevance to your question. The less code we have to read the easier it will be for us to help you. ;)

 

Firstly as Vic_ pointed out you did not create any click/touch events. You'll have to add something. It's best to have an event listener not in the DOM.

var myBtn = document.getElementById("myBtn"); 
myBtn.addEventListener("click", myFunction);

function myFunction() {
 // Body of function
}

With that, controlling the timeline and showing/hiding elements is trivial.

var infoBtn = document.getElementById("infoBtn"); 
myBtn.addEventListener("click", startTl2);

function startTl2() {
 if( tl.isActive() ) {
 tl.pause();
}
 tl.play();
}

Finally, to have your buttons sit on above (we read on top of) the clicktag, you just place them after the clicktag itself in the HTML

<button id="clicktag">Click Me</button>
<button id="bt1">One</button> 
<button id="bt2">Two</button> 

By the way, when you're using autoAlpha, you should use a number (0, 0.5, 1) rather than true or false. That way, you can get semi-transparent as well as full transparency and opacity.

  • Like 2
Link to comment
Share on other sites

3 Above? On Top? z-index? (w/ prevent default maybe on bubble of events)

 

2 Do you have a 'console.log' working when you click on closeBtn?

 

1. Do have a console.log working when you click on infoBtn?

 

I do not see any click or touch or mouse triggers.

Hey Vic,

 

Thanks so much for having a look at this – think you can tell that I'm struggling abit!

 

3. I almost need the buttons to overwrite the 'clicktag', at the moment, when you click the button, it activates the clicktag.

 

2. I've been trying various codes for buttons, but don't seem to be getting anywhere – I guess I'll search for this, although your guidance would be appreciated.

 

Thanks again for your time!

Link to comment
Share on other sites

Hello jimcam,

 

Welcome to the forums and the wonderful world of banner creation :D

 

It looks like you have just copied your local code and dumped into the Pen (which is fine, don't worry), therefore, there's a bunch of things there that shouldn't be and will cause people to point that to you (I guess I just did). No need to have <body>, its parents and <script> tags in there. CodePen already adds that for you.

 

There was also a load of JavaScript code in your Pen that did not seem to have any relevance to your question. The less code we have to read the easier it will be for us to help you. ;)

 

Firstly as Vic_ pointed out you did not create any click/touch events. You'll have to add something. It's best to have an event listener not in the DOM.

var myBtn = document.getElementById("myBtn"); 
myBtn.addEventListener("click", myFunction);

function myFunction() {
 // Body of function
}

With that, controlling the timeline and showing/hiding elements is trivial.

var infoBtn = document.getElementById("infoBtn"); 
myBtn.addEventListener("click", startTl2);

function startTl2() {
 if( tl.isActive() ) {
 tl.pause();
}
 tl.play();
}

Finally, to have your buttons sit on above (we read on top of) the clicktag, you just place them after the clicktag itself in the HTML

<button id="clicktag">Click Me</button>
<button id="bt1">One</button> 
<button id="bt2">Two</button> 

By the way, when you're using autoAlpha, you should use a number (0, 0.5, 1) rather than true or false. That way, you can get semi-transparent as well as full transparency and opacity.

Hey Dipcom,

 

Firstly, I apologise to all you coders out there on behalf on those people like me that hack away at code without knowing what they are doing!  :-P

 

Thanks so much for this! This is my first dip into the world of HTML. Basically, I'm print artworker at my job and we were supplied a load of html banners that our client has asked us to update (built by someone else). I've guessed and hacked at the code to try and get it to work.

 

Guys – can't thank you enough for all your help and support.

Link to comment
Share on other sites

It's all good. I'm not a coder either (yet, I'll get there).

 

Come back with as many questions as you have. Going from print artwork to code artwork is a big jump. There will be loads of things people here take for granted but might be unfamiliar to you.

 

Happy Tweeting!

  • Like 1
Link to comment
Share on other sites

Dipscom gave you a more thoughtful answer, including click code.  
 

For 'override' click first you have to have an idea of 'bubbling' of layers (z-index).
If I have a button on a panel, when I click, computer sees that you clicked on both - the button and panel - so both click commands 'trigger'.

It's called event bubbling. 

http://javascript.info/tutorial/bubbling-and-capturing

 

Now that you know how it works, you can prevent it.

hth, .V

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...