I recently launched an online tutor.
I need a function when someone done with watching video lesson next button should populate until that it should remain hidden.
Any help much appriciated
Here's the code I am trying:
const video = document.querySelector('video'); video.addEventListener('ended', (event) => { const div = document.getElementsByClassName("tutor-single-course-content-next"); div.style.visibility = "visible";
});
<div class="tutor-single-course-content-next"> <a class="tutor-btn tutor-btn-secondary tutor-btn-sm" href="yield4learning.co.uk/courses/bank-guarantee/lesson/lesson-7"> <span class="tutor-mr-8">Next</span> <span class="tutor-icon-next" area-hidden="true"></span> </a> </div>
.tutor-single-course-content-next{ Visibility: hidden; }
I would like hide the Next button until video is not completed.
can you use jQuery? if so, you can intercept the "ended" event and show up the next button like this width the jQuery show() function:
$("#video-id").on("ended", function (e) { $(".tutor-single-course-content-next").show(); }
Related
please I am trying to create a FAQ like functionality, I have some elements hidden so when I click on a button it opens and hides it. I have been able to do this but I am not getting what I actually want. I might have done something wrong I suppose. So, there are 5 elements with the same className, this will help me target them all and run a for loop to kind of break them apart. However if I click on this button to open one of the element the other ones open.
const openBtn = document.querySelectorAll(".openBtn")
const openContent = document.querySelectorAll(".openContent")
for(btn of openBtn) {
btn.addEventListener('click', () => {
for(content of openContent) {
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
content.classList.add('flex')
} else {
content.classList.remove('flex');
content.classList.add('hidden')
}
}
})
}
So as you can see, If I click on the chevron icon for just one of the wither About Us, Careers or just any of the 5 every other one opens. How do I fix this ?
Since you aren't going to post even the most general version of your HTML, here is a general outline.
First, each button gets a data attribute for target,then each FAQ div gets an ID attribute that matches the data target attribute.
I attach the click handler to the document and look for openBTN on the clicked element. Then I loop through every OPENED div to close it. Then I get the target data attribute and add the appropriate classes.
document.addEventListener("click", function(e) {
if (e.target.classList.toString().includes("openBtn")) {
let opened = document.querySelectorAll(".openContent.flex");
opened.forEach(function(el) {
el.classList.add("hidden");
el.classList.remove("flex");
});
let target = document.querySelector(e.target.dataset.target)
target.classList.remove("hidden");
target.classList.add("flex");
}
});
.hidden {
display: none
}
<button data-target="#faq1" class="openBtn">OPEN</button>
<div id="faq1" class="openContent hidden">1</div>
<button data-target="#faq2" class="openBtn">OPEN</button>
<div id="faq2" class="openContent hidden">2</div>
<button data-target="#faq3" class="openBtn">OPEN</button>
<div id="faq3" class="openContent hidden">3</div>
<button data-target="#faq4" class="openBtn">OPEN</button>
<div id="faq4" class="openContent hidden">4</div>
I am building a site with a search bar, but there is too much search content and I need a way for people to toggle it being hidden
<div class="search">
<ul>Bash Shell Emulator</ul>
<ul>How to use bash shell </ul>
much more to this. But how can I toggle it being hidden and it being shown with JS and <span>?
Thank you very much,
Ring Games
Hi you can use toggle to add and remove a class, and with the class you can hide the elements inside the search, this is an example:
const searchElement = document.getElementById("search");
const toggleElement = document.getElementById("toggle-visibility");
toggleElement.addEventListener("click", toggleSearchVisibility);
function toggleSearchVisibility() {
searchElement.classList.toggle("hide-element")
}
.hide-element{
display: none;
}
<div id="search">
<ul>Bash Shell Emulator</ul>
<ul>How to use bash shell </ul>
</div>
<span id="toggle-visibility">Click me!</span>
I would strongly suggest you use the JQuery library. Its super easy, all you need to do as add the following script to your <head> tag:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
Then it would be simple as:
$("#clickedElementThatWillHide").click(function(){
$("span").hide();
});
For more examples checkout W3Schools
Here is Vanilla Javascript without using big library
<p>
<a class="toggle" href="#example">Toggle Div</a>
</p>
<div id="example">
<ul>Bash Shell Emulator</ul>
<ul>How to use bash shell </ul>
</div>
<script>
var show = function (elem) {
elem.style.display = 'block';
};
var hide = function (elem) {
elem.style.display = 'none';
};
var toggle = function (elem) {
// If the element is visible, hide it
if (window.getComputedStyle(elem).display === 'block') {
hide(elem);
return;
}
// Otherwise, show it
show(elem);
};
// Listen for click events
document.addEventListener('click', function (event) {
// Make sure clicked element is our toggle
if (!event.target.classList.contains('toggle')) return;
// Prevent default link behavior
event.preventDefault();
// Get the content
var content = document.querySelector(event.target.hash);
if (!content) return;
// Toggle the content
toggle(content);
}, false);
</script>
Need to write a JS or jQuery that when the first button is clicked it scrolls down to an <a> tag and then clicks that <a> tag. Any help greatly appreciated. HTML below:
Reserve Now
<div class="spacerDiv"></div>
<a id='secondClick' href="http://www.google.ca" target="_blank">Click here again</a>
Use href="#secondClick" to automatically scroll the page, than simply perform a click() on the desired Element:
const EL = sel => document.querySelector(sel);
EL("#reserveButton").addEventListener('click', () => {
// Page is already scrolled at this point since we used #hash href
// So just perform a click...
EL("#secondClick").click();
});
Reserve Now
<div class="spacerDiv" style="height: 200vh;">some space... scroll down</div>
<a id='secondClick' href="https://www.google.ca" target="_blank">Click here again</a>
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
If you want to use a better UX (animation) you could use JS's Element.scrollIntoView()
const EL = sel => document.querySelector(sel);
const el_reserve = EL("#reserveButton");
const el_second = EL("#secondClick");
el_reserve.addEventListener('click', (evt) => {
evt.preventDefault(); // Prevent default browser action
el_second.scrollIntoView({behavior: "smooth"});
el_reserve.__is_clicked = true;
});
new IntersectionObserver((entries, obs) => {
if (el_reserve.__is_clicked && entries[0].isIntersecting) {
el_second.click(); // Perform a click when element is in viewport
el_reserve.__is_clicked = false; // reset
}
}).observe(el_second);
Reserve Now
<div class="spacerDiv" style="height: 200vh;">some space... scroll down</div>
<a id='secondClick' href="https://www.google.ca" target="_blank">Click here again</a>
jsBin live example
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
I have 4 links. When I click the first link div 1 should be displayed and the other 3 hidden.
When I click link 2, div 2 should be displayed and the other 3 hidden, and so on...
What I did:
With CSS I've set the class of the 4 divs to display: none
Created 4 functions with javascript that set the display property of the correct div to block and the 3 others to none
Call the function when clicking the link
When I click a link, the div is shown for a quarter of a second but then it disappears again
CSS:
.CatDiv {
display:none;
}
JS function:
function showKadoballonnen() {
document.getElementById("Kadoballonnen").style.display = "block"
document.getElementById("Geschenkmanden").style.display = "none"
document.getElementById("Pampercadeaus").style.display = "none"
document.getElementById("OrigineleVerpakkingen").style.display = "none";
}
Calling the function:
Kadoballonnen
Div that has to be called:
<div id="Kadoballonnen" class="CatDiv">TEST</div>
function showKadoballonnen(e) {
e.preventdefault();
document.getElementById("Kadoballonnen").style.display = "block";
document.getElementById("Geschenkmanden").style.display = "none";
document.getElementById("Pampercadeaus").style.display = "none";
document.getElementById("OrigineleVerpakkingen").style.display = "none";
}
.CatDiv {
display: none;
}
Kadoballonnen
<div id="Kadoballonnen" class="CatDiv">TEST</div>
<div id="Geschenkmanden" class="CatDiv">TEST</div>
<div id="Pampercadeaus" class="CatDiv">TEST</div>
<div id="OrigineleVerpakkingen" class="CatDiv">TEST</div>
What am I missing?
All is easier than you think. In your tag you got "href" with empty parameter. It makes your page reloading while pressing on it.
So all you should do is to write "#" as a parameter.
Kadoballonnen
You should avoid empty href attribute on a link. Use a button instead.
If it still does not work, attach your method to window object. Also, I don't recommend this approach, you should handle it in your Javascript by targetting at your DOM elements using an ID for example and adding your event listener from here.
document.getElementById('myelement').addEventListener('click', showKadoBallonnen);
You have a few errors in your code, and you also need to stop your link (<a>) firing.
On your link, add return false;:
Kadoballonnen
<!-- ^ Also, add href="#" so you don't have an empty href -->
Also, add semicolons to the end of each line of your javascript:
document.getElementById("Kadoballonnen").style.display = "block";
document.getElementById("Geschenkmanden").style.display = "none";
document.getElementById("Pampercadeaus").style.display = "none";
document.getElementById("OrigineleVerpakkingen").style.display = "none";
I was running into this problem while writing some coffeescript in a rails application. Another answer helped me.
The solution is the event.preventDefault() as shown below:
app/views/posts/index.html.erb:
<%= link_to "Some link", '#', id: 'some-link' %>
<div class="some-div">
<h4>Some list</h4>
<ul id='some-list'>
<li>cats</li>
<li>and</li>
<li>dogs</li>
</ul>
</div>
app/assets/javascripts/posts.coffee:
$(document).on 'turbolinks:load', ->
$('#some-link').click (event) ->
event.preventDefault()
$('#some-list').toggle()
I managed to make it working: https://jsfiddle.net/ke81koj6/
function showKadoBallonnen() {
document.getElementById("one").style.display = "block";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "none";
document.getElementById("four").style.display = "none";
}
EDIT
Edited the fiddle and now works with the press on a button. It's better to use a button than an anchor with a empty href.
HTML:
<button id="button" onclick="showKadoBallonnen()">click here</button>
JS:
document.getElementById("button").onclick = showKadoBallonnen;
I want to only show the menu phrases "music, newsletter, contact" fixed at the bottom of the screen. On hover I want them to slide up and reveal hidden content. here's exactly what I mean:
http://sorendahljeppesen.dk/
See the bottom of the screen. Anyone know how this would be accomplished? Thank you.
P.S. also, would anyone know what type of MP3 player that is?
Put your hidden content into a div such as;
<div class="hiddenContent">...</div>
Then give your links at the bottom of the page a class such as;
Music
Then tell the Jquery to show the hidden content when you hover over the link;
$('.bottomLink').hover(
function () {
// Show hidden content IF it is not already showing
if($('.hiddenContent').css('display') == 'none') {
$('.hiddenContent').slideUp('slow');
}
},
function () {
// Do nothing when mouse leaves the link
$.noop(); // Do Nothing
}
);
// Close menu when mouse leaves Hidden Content
$('.hiddenContent').mouseleave(function () {
$('.hiddenContent').slideDown('slow');
});
Try this code:
ASPX section,
<div id="categories-menu" class="hover-menu">
<h2>Categories</h2>
<ul class="actions no-style" style="display: none">
<li>//Place your content here that should show up on mouse over</li>
</ul>
</div>
JQuery section,
<script type="text/javascript">
$(document).ready(function() {
function show() {
var menu = $(this);
menu.children(".actions").slideUp();
}
function hide() {
var menu = $(this);
menu.children(".actions").slideDown();
}
$(".hover-menu").hoverIntent({
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 50, // number = milliseconds for onMouseOver polling interval
over: show, // function = onMouseOver callback (required)
timeout: 300, // number = milliseconds delay before onMouseOut
out: hide // function = onMouseOut callback (required)
});
});
</script>
Hope this helps...
I have found this great article with live demo and source code to download, the article show how to make a slide out menu from bottom.