When setting this up I did not initially notice that the third var declaration had an incorrect method call. The page functioned as I hoped and all was well.
Later I noticed that there was an error clocked in the inspector. I take out the offending line and all should be good- but the script does not work anymore. Strange. So I fix it and change getElementId('close') to the correct getElementById('close') and it the script as a whole still does not work.
This indicates that the script needs the broken component to properly function.
Be aware that the part that does not work anymore is openModal(). The audio.setAttribute() and audio.play() are in the same block and still work, so that is good.
I do not actually need a var close since the closeFunc() is called automatically onclick.
My html:
<div id='myModal' class='modal'>
<div id='modal-content'>
<span onclick='closeFunc()' id='close'>close x</span>
<object id='pdf-enter' data='' type='application/pdf'><p id='fallback-text'>Your browser does not support this media. You can download it <a id='dl-link' href=''>here.</p></a></object>
</div>
</div>
<div class='aud'>
<audio id='paudio' src='../../music/Available Now.mp3' controls='controls' preload="metadata">Your browser does not support the <code>audio</code>element.</audio>
<p id='audio-metadata'></p>
</div>
. . .
<li><a href='#0' class='title'>Sassthefrass <i onclick='audiosass()' class="fa fa-play-circle-o fa-fw" aria-label='Listen to music.'></i> <i onclick='openModal(), sass()' class='fa fa-file-pdf-o fa-fw' aria-label='View the sheet music.'></i></a>
</li>
and the javascript
<script defer async>
var modal = document.getElementById('myModal');
var here = document.getElementById('dl-link');
var close = document.getElementId('close');
var pdf = document.getElementById('pdf-enter');
function openModal() {
modal.style.display = "block";
}
function sass() {
pdf.setAttribute('data', '../../scores/Sassthefrass Perusal.pdf');
here.setAttribute('href', '../../scores/Sassthefrass Perusal.pdf');
}
function closeFunc() {
modal.style.display = "none";
}
</script>
When correctly working, clicking on the pdf FA icon opens a modal with a pdf showing the sheet music. When the code is 'error free', it does not do this anymore.
This is a reduced version, but you can see the entire thing in action at cortlandmahoney.com/pages/comp/acoustic.html. Be aware the site is still in development, but is near completion.
Close is not defined as an ID.
You have to define as 'close x'
and at your javascript you can assign function like :
document.getElementById('foo').onclick=function(){
alert("You have clicked close");
};
I looked at your website link and there is one more exception regarding jquery.
In jquery you have to define as $('#id').onclick() function to assign onclick function.
Your code worked fine on my end with a little modification. Unless I don't I understand you.
<div id='myModal' class='modal'>
<div id='modal-content'>
<span onclick='closeFunc()'>close x</span>
<object id='pdf-enter' data='' type='application/pdf'><p id='fallback-text'>Your browser does not support this media. You can download it <a id='dl-link' href=''>here.</p></a></object>
</div>
</div>
<div class='aud'>
<audio id='paudio' src='../../music/Available Now.mp3' controls='controls' preload="metadata">Your browser does not support the <code>audio</code>element.</audio>
<p id='audio-metadata'></p>
</div>
. . .
<li><i onclick='audiosass()' class="fa fa-play-circle-o fa-fw" aria-label='Listen to music.'>audiosass</i> <i onclick='openModal(), audiosass()' class='fa fa-file-pdf-o fa-fw' aria-label='View the sheet music.'>open</i>
</li>
<script defer async>
var modal = document.getElementById('myModal');
var here = document.getElementById('dl-link');
var close = document.getElementById('close');
var pdf = document.getElementById('pdf-enter');
function openModal() {
modal.style.display = "block";
}
function audiosass() {
pdf.setAttribute('data', '../../scores/Sassthefrass Perusal.pdf');
here.setAttribute('href', '../../scores/Sassthefrass Perusal.pdf');
}
function closeFunc() {
modal.style.display = "none";
}
</script>
Related
I am trying to download cv as pdf on button click in my cv builder using JS but unfortunately, the function instead of being called on button click is called as soon as the page loads. I tried some other ways including the arrow function and onclick attribute of the button although after that downloading starts on the button click but the pdf turns out to be empty.
Code:
HTML:
<div class="container profile-box" id="f">
<!-- Code of whole cv template -->
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary" id="pdf" >Download Pdf</button>
</div>
JS:
var btnpdf=document.getElementById("pdf");
async function generatepdf(){
var downloading=document.getElementById("f");
let width1 = downloading.offsetWidth;
let height1 = downloading.offsetHeight;
var doc=new jsPDF('p','pt');
await html2canvas(downloading,{
allowTaint:true,
useCORS:true,
width:width1,
height:height1
}).then((canvas)=>{
//canvas convert to png
doc.addImage(canvas.toDataURL("image/png"),'PNG',10,10);
})
doc.save("cv.pdf");
}
btnpdf.addEventListener("click",generatepdf());
It works for me.
What error are you getting?
Did you include the jspdf?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
I'm trying to develop a simple mp3 player with play/pause toggle functionality where the play button turns to a "||" icon when music is playing and reverts to the play button when the music is paused by using purely vanilla Javascript. I have viewed other posts regarding this matter, but none of them have helped me with the way I currently have my code structured.
var playButton = document.querySelector('#play-button');
var firstSong = new Audio('CloudDance.mp3');
var trackList = [firstSong];
function currentSong() {
for(var i=0; i<trackList.length; i++) {
var songID = document.querySelector('#stateicon');
if (trackList[i].paused) {
songID.id = 'fas fa-pause';
trackList[i].play();
} else {
songID.addEventListener('click', ) = 'fas fa-play';
trackList[i].pause();
}
}
}
<body>
<div class="screen">
<div class="song-info-text">
<p class="song-artist">Some text</p>
<p class="song-name">Some more text</p>
</div>
</div>
<div class="mp3-buttons">
<button class="button" type="button" name="button"><i class="fas fa-step-backward"></i></button>
<button id="play-button" onclick="currentSong()" type="button" name="button"><i id="stateicon" class="fas fa-play"></i></button>
<button class="button" type="button" name="button"><i class="fas fa-step-forward"></i></button>
</div>
<script src="index.js" charset="utf-8"></script>
</body>
All you need to do is set the class name depending on what you want. Here is your example with the fix.
songID.className = 'fas fa-pause';
Here is the sample code used in the JSFiddle link below
var playButton = document.querySelector('#play-button');
var firstSong = new
Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3');
var trackList = [firstSong];
function currentSong() {
for(var i=0; i<trackList.length; i++) {
var songID = document.querySelector('#stateicon');
if (trackList[i].paused) {
songID.className = 'fas fa-pause'; // Notice how we set className
trackList[i].play();
} else {
songID.className = 'fas fa-play'; // Notice how we set className
trackList[i].pause();
}
}
}
I also updated font-awesome css url in html to make sure the fonts would work properly. This is another part of the fix
<header>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
</header>
JSFiddle Working Example
NOTE: You may end up running into issues later as you will end up playing multiple files at the same time with the way you have the for loop. So just keep in mind that you need to know which song it's currently playing so that you can properly pause or play that same song. And switch the current song when hit forward or backwards depending on the button pressed.
tl;dr: Here is a recording of my problem where I set a breakpoint, reload the page and step through the code: http://recordit.co/uNtqr31G0e
I created this code a few weeks ago and it's been working perfectly, but after checking the website today (and messing with some unrelated owl-carousel JavaScript) any elements on our product page moved with insertAfter or prependTo are showing twice in the new location once the JavaScript executes. This was working perfectly yesterday though.
Embedded is the stripped down version of the code from the product page that I'm modifying, but the code works fine using StackOverflows code editor & Codepen.io
$(document).ready(function() {
var shoppingCartIcon = $('.describe-list-icon .fa-shopping-cart');
var pricingDescribeList = shoppingCartIcon.closest('.describe-list');
pricingDescribeList.addClass('pricing');
pricingDescribeList.prependTo('.content');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
</div>
<div class="describe-list">
<div class="describe-list-icon text-center">
<i class="fa fa-shopping-cart"></i>
</div>
<div class="describe-list-content">
<p>$229.99</p>
<p></p><div id="book_button_partyz_id_73847" class="button_book" style="cursor:pointer; display:inline-block" onclick="if(navigator.cookieEnabled){if(typeof last_item_container_id != "undefined") { document.getElementById("container_" + last_item_container_id).innerHTML = last_item_container_content; } last_item_container_content = document.getElementById("container_partyz_id_73847").innerHTML; last_item_container_id = "partyz_id_73847"; document.getElementById("container_partyz_id_73847").innerHTML = "<div id=\"item_container\"> </div>"; ajax_link("item_container","store.item.calendar?root_path=&responsive=1&show_instructions=1&show_start_form=1&itemid=partyz_id_73847","post_info=1"); this.style.display = "none";}else{alert("Cookies are not enabled. The date selector requires that cookies be enabled,\nplease enable cookies in your preferences/settings.");}"><nobr>Add to Cart</nobr></div><br><p></p>
</div>
</div>
Codepen Link: https://codepen.io/CodeBradley/pen/oMYzoB
The product page I'm referring to: https://partyz.ourers.com/items/dunk_tank/
The actual JavaScript:
https://files.sysers.com/cp/upload/partyz/editor/full/main.js
I have a menu and I can open and close the menu clicking on a tag. It works.
Also I use OnBlur(). Actually it works too but When I click a div in the menu, OnBlur active, menu closes and div's onclick doesn't works. How can I fix this problem ?
In JavaScript Codes;
<script>
function Acc_Show() {
var q = document.getElementById("he-my");
q.style.display = "";
document.getElementById("my-account-btn").focus();
document.getElementById("my-account-btn").setAttribute("onclick", "Acc_Hide()");
}
function Acc_Hide() {
var q = document.getElementById("he-my");
q.style.display = "none";
document.getElementById("my-account-btn").setAttribute("onclick", "Acc_Show()");
}
</script>
In HTML codes;
<a id="my-account-btn" href="javascript:;" onclick="Acc_Show()" onblur="Acc_Hide()">My Account</a>
My Menu's Image;
http://i.stack.imgur.com/OMg6n.png
UPDATES Additional Codes From OP:
<div class="he-myac" id="he-my" style="display:none;">
<div id="my-account-wrapper">
<div class="myaccount" onclick="GoAdress('test.aspx')">Test</div>
<br/>
<div class="myaccount" onclick="GoAdress('settings.aspx')" >Settings</div>
<br/>
<div class="myaccount" onclick="GoAdress('log_out.aspx')">Log Out</div>
</div>
I have a feeling this line q.style.display = ""; in your Acc_Show() function is causing the issue. Try replace it with q.style.display = "block";.
When an onblur event is triggered, your Acc_Hide() function hides your <div> by calling q.style.display = "none";. Then the next click on my-account-btn triggers your Acc_Show() function, which set your q.style.display to an empty string. That doesn't unhide your <div> block.
i got a page on a site and there are several videos within blocs. When i play one video and then hit the close button or click on another box to open it, it works all just fine. But the problem comes when i add extra html markup around the videos, it breaks the close button behavior.
Here's the markup of a box (i've got multiples in my page):
<div class="box" data-size="660,605">
<div class="cunload2">
<div class="expandable">
<span class="simple">
<a class="cunload" href="javascript:;"></a>
</span>
<div class="exandable-vids-container">
<iframe ... ></iframe>
</div>
</div>
</div>
</div>
The cunload button is the one closing the box and unloading the video.
Here's the javascript (as seing at the vimeo api's page):
(function(){
var vimeoPlayers = document.querySelectorAll('iframe'), player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) { element.addEventListener(eventName, callback, false); }
else { element.attachEvent(eventName, callback, false); }
}
function ready(player_id) {
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id),
apiConsole = container.querySelector('.console .output');
function setupSimpleButtons() {
var unloadBtn = container.querySelector('.simple').querySelector('.cunload');
addEvent(unloadBtn, 'click', function() { froogaloop.api('unload'); }, false);
}
setupSimpleButtons();
$(".cunload, .box:not(.expanded)").click(function(){
//if (!$(this).is('expanded')) {
froogaloop.api('unload');
//}
});
}
})();
This works just fine, but when i add an extra <div> around the iframe (and i really need to) it doesnt work anymore.
Any clue?
EDIT: problem is more complicated, i added an <ul> and <li> tags around the iframes as such:
<div class="box" data-size="660,605">
<div class="cunload2">
<div class="expandable">
<span class="simple">
<a class="cunload" href="javascript:;"></a>
</span>
<div class="exandable-vids-container">
<ul>
<li><iframe ... ></iframe></li>
<li><iframe ... ></iframe></li>
</ul>
</div>
</div>
</div>
</div>
and modified the js line :
var container = document.getElementById(player_id).parentNode.parentNode
to:
var container = document.getElementById(player_id).parentNode.parentNode.parentNode.parentNode
and i got it working.
The problem is that i use the <ul> and <li> tags to call jcarousel and that it adds an extra 3 divs between my .exandable-vids-container and the <ul>. Moreover, sometimes i'll call this carousel and sometimes not, so i really can't go with adding extras .parentNode in the js. This would have to be dynamic and i think the solution has to be in that direction.