How to make Audio.js inline with text in moodle quiz - javascript

So I am using audio.js on my website. I customized audio.min.js that there would be only "PLAY/PAUSE" button visible. I want that button to appear at the left of the text. How can I do that?
Cause right now, text always appears bellow "play/pause" button, in a new line. I want it to be on the same line.
The code on my HTML page looks like this:
<audio>
<source src="https://www.website.com/voice/sample.mp3">
</audio>
<!-- This is the text I want to see on the same line as the audio tag which is in use with audio.js -->

You have to overwrite audiojs's css in order to modify, and try to add something like this css:
.audiojs {
float:left;
}
There is code: https://jsfiddle.net/qp5xjxb9/1/
I hope it helps

Related

How to make website go to another part of it (Like another website) using javascript (Make new code appear)?

I have a website project, I created buttons such as "About Me" "Other" when clicked it should lead the user to another part of the website that looks different but still be in the same website sort of like I would "display: none" and hide the rest of the content onclick of a button and let new code fill the page.
If I am getting your question correct, and you want the link to be the exact same but load different content inside the page, you may want to use jquery and the load function to change a div on your page. Normally though, for navigating to those types of pages, you would just change the page as they should be placed in the same domain (www.yourdomain.com\aboutme.html, www.yourdomain.com\other.html).
The pages need to be on the same domain for this to work, which is why I just have some js files showing in the snippet.
function load(link){
$('#contentarea').load(link);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="load('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js')">Load Jquery Script Text</button>
<button onclick="load('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js')">Load Flower</button>
<div id="contentarea">
</div>
I don't fully understand your question, but I think what you want is that when the user clicks a button, the browser scrolls to a chapter of the webpage.
You don't even need JavaScript or jQuery for this, just create an anchor tag.
with the href attribute referring to the id of the div or section (This works for any tag, not only div and section), assuming that the id is "aboutMe", you will be adding this:
About Me
And the div or section would be:
<div id="aboutMe">
...
</div>
The browser will scroll automatically so the viewport is displaying the section. You can also make it smooth by:
html {
scroll-behavior: smooth;
}
You may also add scroll padding just so if your navbar is too big, it doesn't show over the text.
html {
scroll-behavior: smooth;
scroll-padding: 70px;
}
I hope this is what you are looking for.

How can I change the color of the text in an editable iFrame?

I have an iFrame that is turned editable when the page loads, like this:
function iframeLoad() {
iframe.contentDocument.designMode = 'on';
}
The problem is, the background of the page is very dark, and the text inside of the iFrame is black, so the user has an extremely difficult time reading the text. Is there a way to change the text color inside the iFrame to white so the user can read it? I'm making a WYSIWYG editor, and it is all in pure JS with no separate frameworks.
HTML code:
<div class="frame-div">
<iframe frameborder="0" id="text-area-iframe"></iframe>
</div>
Also, eventually, I would like the user to have control over the text using an <input type="color"> element. If there is a way to have the default color to be white and then have a function or method to change the color thereafter, that would be amazing.
Thanks!
I would suggest you try this:
document.getElementById('text-area-iframe').contentWindow.document.body.style.color='white

Why this pop up is not shown?

I have a problem with a very simple JavaScript pop-up script.
I have this example page: http://www.onofri.org/example/example4/
At the end of this page there is a box containing some flags including the British flag that is reprsented by the #reportEng div (inside the engLink link).
What I want is that when the user clicks on this element a pop0up message will show.
So I have add to the page this simple script:
<script>
var test = document.getElementById('engLink');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
I have put the script inside the body section of the page and not in the head section because this is only a test page and the final result will be put into a page of a CMS in which I do not have access to the template (so I can't put the script in the head section).
The problem is that it does not work. If I click on the English flag the page is reloaded and the pop-up not shown.
Can you help me?
Thank you,
Andrea
I went a completely different approach. The addEventListener is pretty cool, but I'm a bit OLD and I've defaulted to nasty habits. This works just fine for me.
<script>
function myExample(){
alert("BaZing! It works!");
}
</script>
And for the HTML part...
<div id="reportEng" onClick="myExample()"></div>
I also want to point out that this 'fix' is a bit taboo (see here)
You don't prevent the link from being followed, so when you click the link which has an empty href, you simply reload the current page.
There are many ways to prevent the defaul link behaviour, but here is the old school way:
<div id="reportEng"></div>
Also on a side note I don't think a div element is allowed inside an a in HTML or XHTML.
FIDDLE
You are using a <a> tag, change it to use a <div> tag, or remove <a> tag at all
You can follow this to make div clickable.

How to load a video into a separate div when click on a link

I have these 2 divs - one contains the menu, where each element of the list will be a link to a video, and I want the corresponding video to be loaded into the div, which is right next to the first one.
I was thinking about forms, but this is not quite a good idea. And I have no knowledge in JavaScript or JQuery, so some solutions, provided with explanation how to use, will be really helpful.
On click of the Video URL, first if its an anchor, use preventDefault and block the click behavior, next bind your own onclick event on that element.
On-click of that element should actually use the next div's id and be able to play ur video in that div in whatever manner you want.
Something like this should work:
HTML:
http://youtu.be/Etst4t3ES8Y<br/>
http://youtu.be/Etst4t3ES8Y<br/>
http://youtu.be/Etst4t3ES8Y<br/>
<br/>
<div id="videoDiv"></div>
jQuery :
$('.link').click(function(event){
event.preventDefault();
var url =$(this).html();
$("#videoDiv").html('<iframe width="400" height="400" src="'+url+'?wmode=transparent" frameborder="0" allowfullscreen></iframe>');
})

jQuery HTML editor

For my current project i am creating a html editor.
How its needs to work
Elements Inside
Text Area - To type the HTML as text
Iframe - To show the typed HTML as real [rendering the string HTML to UI]
Some Buttons
Working Logic
A registered user typing something inside the text area :
ex :
<div style="border:1px solid red;">This is a div</div>
after that user clicks on a button [Converting to UI],so that we need to change the iframe content to the new value [value of text area]
after converting the iframe elements html will be
<html>
<head>
<style>
.mydiv{
}
</style>
</head>
<body>
<div class="mydiv" style="color:red">This is a div</div>
</body>
</html>
There is another button that which give back the iframe HTML to text area ,
All these works good [No big problems now except the firebug issue],But i need to integrate a better UI to customize the iframe content - >
ex : User clicks on a DIV on iframe ,so that time a pop up will arise to change the color and font of that div [it will be some color picker for choosing color and drop down for to choose font][i need to implement some more like this]. hope that it will not be a big pain.
So after that i need to get the modified value.
Ex: i changed the color of a div ,
so the returned value will be something like this
<html>
<head></head>
<body>
<div class="mydiv" style="color:gray;">Hello World !</div>
</body>
</html>
TO DO
Please note the style attribute [above ] ,its in inline style ,i
need to convert it into the class scope if the element have a class
defined
so i need to add/update the css class "mydiv" with new style's .
Assume that we are changing something on the body element of iframe ,body is a common element so i need to add/update the BODY scope in the css style block
ex:
BODY{
color:gray;
}
I hope that you guys got my idea,i need to implement something like this on my current project.
Is there anything slimier this ? [so that no need to worry ,i can use that]
or
How can i achieve this ? especially the grouping of css class.
I hopes that i need to use some kind of regular expressions ,but i am very weak on this.
Please help me to complete.
What i tried is here : http://jsfiddle.net/5PKXq/3/
Thank you.
Much as I think you're really reinventing the wheel here, I don't see what's keeping you from getting the contents of the textarea, and then just appending it directly to, I don't know, a container div (it doesn't even have to be an iframe, which I personally think is a bad way to go).
var $textarea = $('textarea'),
$container = $('div#container'),
$refresh = $('button#refresh'), // or something
;
$refresh.on('click', function () {
$container.empty()
.html($textarea.val())
;
// or something
});
Do note that that's untested code.

Categories

Resources