Funce

This is an odd bug with Mozilla. Try adding transform: rotateX(0deg); onto the front and back. .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateX(0deg); } It seems to get it to work.

So each time you call showSlides, you're setting a new recurring call of showSlides, due to setTimeout. The timeouts don't interfere with each other, as you can see in this tryit. https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_settimeout2 Rather than going setTimeout each time you click a button, you'll need to first clear the current timeOut using clearTimeout. Are you able to give it a go from here?

Try using the 'Report Error' button at the bottom of the page you've linked. Include what you've said here. That will alert the developers to your correction.

Data translation, is that what its called? I didn't know that. Hey Roddy! I guess the issue here is that you're using the object incorrectly, as its currently defined in your class. __construct is only called when the object is created. ($matomo_action = new TranslateMatomoAction(arg1, arg2);) I can see you're trying to be clever here, and fortunately you can be super clever with a slight tweak. By instead defining that logic in the __invoke magic function, you can get exactly the behaviour you desire. Your level 3 action is already attempting to use it as such. For the inserted class, all you'd need is something like this. (untested, working off brain here) <?php if (is_array($value1) && ($key1 === 'actionDetails')) { foreach($value1 as $key2 => $value2) { //LEVEL 2 - This foreach statement traverses the set of indexed arrays whose elements are a key-value pair of indices and arrays. Each array is a value of the actionDetails element of a visit. if (is_array($value2)) { $matomo_action = new TranslateMatomoAction(); foreach($value2 as $key3 => $value3) { //LEVEL 3 - This foreach statement traverses the elements of the associative array corresponding to the value of $key2. $matomo_action($key3, $value); } } } } ?>

You could try overwriting the fading style and setting it to a shorter duration .w3-animate-fading{ animation:fading 10s infinite }

Try using the code block system on the forums, so that your code doesn't get lost in the formatting. The error in the title would only come about if your connection errors out. What is the line of output before the title?

As far as I can see, the method W3Schools uses to remember data is through local storage (per-browser storage). This, unfortunately, means that progress can't be tracked between computers at the moment.

Yep! This would also be pretty simple! You'd just need to add a click event listener to your button, then go through all the accordions and simulate clicks on all of them. After all their mechanisms for clicking still work. If you wanted to make it 'Close Only' or 'Open Only' you'd just need to add a check for if the accordion contains the class "active", and click or don't click accordingly. Try something like this. <button id="toggle_button">Toggle All</button> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); acc[i].click(); } var toggle_all = document.getElementbyId("toggle_button"); toggle_all.addEventListener("click", function() { for (var j = 0; j < acc.length; j++) { acc[j].click(); } }; </script>

That's totally fine. Sometimes you just need a bit of light. In the code above, you can access the element in question with acc[ i ], to simulate a click on that element, we can do this acc[i].click(); Because this needs to be clicked after the eventListener has been added, we put it at the bottom of the for loop. <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); acc[i].click() } </script>

You've noticed the differences. That's good. That's what changes how it looks. Now in terms of making those changes a reality, lets look at what the JavaScript does right now. <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script> Well, we know that these changes manifest when you click on the accordion. As the loop adds the eventListeners we could try simulating a click. That will immediately open all the accordions when the JavaScript loads. This command should help you with that https://www.w3schools.com/jsref/met_html_click.asp There are other methods, but this was one of the quickest that came to mind. Do you know what to do?

Just had a look around. Would this be relevant? https://stackoverflow.com/questions/39750906/php-setcookie-samesite-strict

You could try using a regular expression using RLIKE SELECT City FROM Station WHERE City RLIKE '[aeiouAEIOU]$';

This'll be the main part of your script https://www.w3schools.com/jsref/prop_style_fontfamily.asp You might be able to use a variation of the example shown. var listValue = selectTag.options[selectTag.selectedIndex].text; document.getElementById("myP").style.fontFamily = listValue; You'd probably need to run this code when the value changes so this may also be of use to you. https://www.w3schools.com/jsref/event_onchange.asp

To start with them all open instead of closed, you can look at how the page considers the accordion as open. In this case, for the clickable part of the accordion (that darkens when opened) it requires a class of "Active" For the second part (the information to be shown) you can use your page inspector (which comes in most browsers) to see what's changed. Give it a try!

I wouldn't recommend iframes, they're quite old. And they do weird things. Alternative Below, skip post if not interested. ALTERNATIVE May I suggest JavaScript widget generation? It'll be lightweight and easier to control. The src will have a customer key that can be verified to make sure its being requested by the correct website. You might be able to create a settings area so that your customers can whitelist their domain for their account. You'll just need to make sure that the file_that_generates_widget.js is served with a cross-origin-header of * as well. <!--Start of Widget Script--> <script> (function(){ var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0]; s1.async=true; s1.src='https://yourdomain.com/file_that_generates_widget.js?customerID=uniqueKey'; s1.charset='UTF-8'; s1.setAttribute('crossorigin','*'); s0.parentNode.insertBefore(s1,s0); })(); </script> <!--End of Widget Script-->

Hi there! Do you think a modification of this would work? https://www.w3schools.com/howto/howto_css_modals.asp You know, change the trigger from a button to an image click. Add the image into that modal, add the buy button. What do you think?

You array is not being properly defined as associative. Its currently an array with 2 elements of strings. You need to move the quotes. <?php $options = array( 'lifetime' => 3600, 'samesite' => 'strict' ); ?>

Thank you for reporting this. I'm sorry you've experienced this. You might have some luck reporting the ad in question. Google ads have a small report/close button on them to report them as malicious. As long as you still have the offending page (not the pop-up) open, you should be able to report that ad. It might be tricky to track down which one exactly caused it.

Hi there, Check out the W3Schools XML tutorial to see if you can get an understanding of what's being asked. If you're still confused, by all means ask away.

Perhaps you could try including the rest of your code to see exactly what's going wrong. Try using the code block feature.

Perhaps a bit of code that shows the issue would be helpful. (Link to a somewhat obscure transfer site with a .rar file doesn't give me confidence.) Try using the code block section to display it correctly.

That may be a little tricky when your horizontal menu is being defined AS your header, and not inside it. You'll need to look at the HTML more than the CSS in this scenario.

That is a pretty nifty tutorial. This was a fun challenge, but I knew it was possible. Would this work? https://www.w3schools.com/code/tryit.asp?filename=G3KAF9EK8AKI <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial, Helvetica, sans-serif; } .flip-card { background-color: transparent; display: inline-block; perspective: 1000px; } .flip-card-inner { position: relative; float:left; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { width: 100%; height: 100%; backface-visibility: hidden; } .flip-card-front { background-color: #bbb; color: black; z-index: 2; } .flip-card-back { position: absolute; top: 0; background-color: #2980b9; color: white; transform: rotateY(180deg); z-index: 1; } </style> </head> <body> <h2>In this card, the picture is right but the grey background is too big. I'd like the card to only take up the same space as the picture</h2> <h3>Hover over the image below:</h3> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/07/29/29-steve-brule-check-it-out.w700.h700.jpg" alt="Avatar" style="width:200px;height:200px;"> </div> <div class="flip-card-back"> <h1>Dr. Steve Brule</h1> <p>for your health</p> <p>ya dingus</p> </div> </div> </div> <h2>In this card, the picture & background are correct</h2> <h3>Hover over the image below:</h3> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://ih0.redbubble.net/image.211529091.3871/flat,550x550,075,f.u1.jpg" alt="Avatar" style="width:300px;height:300px;"> </div> <div class="flip-card-back"> <h1>Hunk</h1> <p>cool guy</p> <p>spicy guacamole</p> </div> </div> </div> </body> </html>

This collapses just fine. Which tutorial are you trying this on?

You might want to include a snippet of code that shows your issue here. Try using the codeblock function.