How can I go about making a sound clip play when an element is hovered over?
I'm using the latest Wordpress, and the parent theme I am using gives me an option to paste scripts which it will embed to the <head> section.
Is there a script which I can just add to my <head> that will play the sound when the cursor moves over my menu item class .menu li?
I spent several hours trying to figure this out the other day with no avail. I've done this before in a simple HTML website:
<head>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<li><span>Home</span></li>
Not sure how to deploy this on Wordpress though.
Related
This is the strangest programming issue I've ever come across... I'm working on a program that uses some audio encoded as base64. They are small audio files (less than 2k each) Here's a simplified version. If you run this exactly as is in your browser, you'll see a button that plays a click sound when pressed. GET READY FOR THE CRAZY PART.... I put this into phonegap and it didn't work... UNLESS I remove the two head tags <head> and </head> Try it, put the code into an html file called index.html and try it in phonegap. You'll see the button, but it won't play. But if you try it without the head tags it will play the click sound. Someone please explain!
function snd(s) {
aud = new Audio();
aud.src = document.getElementById(s).src;
aud.load();
aud.volume=1;
aud.play();
}
button {width:200px;height:60px;margin:20px}
<html>
<head>
</head>
<body>
<audio id="click" src="data:audio/mp3;base64,SUQzAwAAAAAAFgAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/82hQAAMoAu4AoAAAAKgCXK1AAAD/////+fKOOL///////hgTnwQKO///cXPk/4AAtASxAAAGQAAA3uMqQaQZUlUmU3Y65ndJ5vNy3f0ru8ckC8YWKEkV6dJ5Y7gl+mG27BlmS39csG5iMKANO2MNOb12M+28OKSL4IgJUg5agwsMiY47JsN9z1wVOEXUAVuaCgDSHA9VIgwIKgTJ5/9/+q2qvTAFjhQgOggTcVubuNDShuLF/vf///yzhdBJwvQ7bLUx3XWJHG6Q48LQ60AQVOfzn/////3/82hwnSYaI1+Px+AAASACXK2AAAB9Uf09TKVLtDSKu/QtEToVsnFg5YrttYGl8NzbdHgkP/z/5/4b/v/xVUMG8uTDx4AVSdRrpQQF6FHGmphrlh99GvRh+5ZLlO3dkboNehyX2P//5h///////c9cSviEDOoxMDQTtSTeNylYAENS+H0T1PpEJ5ISH9nHRqP89E1D2fvlE4zSyncppMMJP//////er95H///gAACyFEpMpJNTv/9tySSa67hNVvoIAdQz4sgPYS51Pc6dHcUyROGxOWfrTFr/82hwKhNZlWcrxDQAASACXK2AAAAMIXURJUUnRRnzZ0XJcmCaDDEpUpIyUpBzRE+ZUzEcpsSakzEvF6Y+1zQ6o3OIF4eSRrWqk/1IJ2pHy8mcZzq1mKCnW2+ivt6KqnTQdmSHsPJAxKrHTZJJFlautq93b1+o+GglUPPQECtg7xczY2/1J///4AAAkxFJk/HHVXbakkltIlnkR8knAUkdeqVZnkKPT11OZYuCKs2rDL9QsMMBVrd25Xxoi3atcSrWHFU3jRntKwmuuv/Xefn33C3quL4zrH//82hwTRah5WkbxDwCASACXK2AAAD8CJLPS2dxt1/1WLm3//+M+J399vPSk2q7o9rXFpGF6frF8Y//x//fbPveI9I0TVpWdUEqIVVSmjCYkO+rQU6y4//+cZ//+MUozxuwa+NUfv47yms775PQWFDbWhV1a0sCDXFaweKfFP//+AAA//////////////////////////4AQLAggQf/////////////////////////////////////////////////////////////////////////////////82hQVgJgAS4A4AAAAcACXOnAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/82hQ/xgAAS4AAAAAAKgCXKwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="></audio>
<button onclick="snd('click')">click</button><br><br>
</body>
</html>
I've been trying to build an image slide show / carousel using jQuery, and came across colorbox which I thing is really good, and does things the way I want to.
I'm stuck with how to build a slide show of images when using the ajax method they have.
I have six images per item that i'd like to load from the server, and run as a slideshow / carousel just like you see them when you click on the first link on this page under Elastic Transition.
I've succeeded in getting the images to the script using ajax, but i don't end up with a slide show. How can I do this? I currently end up with all the images below each other, and no forward or backward buttons etc.
Can you help?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".ajax").colorbox();
});
</script>
</head>
<body>
<p><a class='ajax' href="../content/ajax.html">Outside HTML (Ajax)</a></p>
</body>
</html>
ajax.html (pulls images and returns it to the script
<div>
<img class="gallery" src='/slide/content/ohoopee1.jpg'>
<img class="gallery" src='/slide/content/ohoopee2.jpg'>
<img class="gallery" src='/slide/content/ohoopee3.jpg'>
</div>
I just could not figure what to do more.
Desired
I would recommend using ajax to add the markup to your document, then assign and open Colorbox to those elements.
An example would be something like this:
<div id='pictures' style='display:none'></div>
<script>
$('.ajax').on('click', function(e){
e.preventDefault();
$.ajax(this.href, {
success: function(html) {
$('#pictures').html(html).find('img').colorbox({href: function(){
return this.src;
}, open:true});
}
});
});
</script>
I'm trying to link jquery and a css file to some HTML and I'm having no luck. The CSS for the page is not styling anything in my browser (Chrome). Also, I've tried putting the script tags in the body and the head (I know this is bad style, I just wanted to try) and I've got console.log()s in my script that aren't logging anything so I know they aren't being linked properly. Can anyone tell me why this isn't behaving?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WLE.css">
<title>w/Way Less Effort</title>
</head>
<body>
<img id="logo" src="WLE.jpg">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
console.log("pre-fade");
$(document).ready(function() {
console.log("fading out");
$("#logo").fadeOut("slow");
});
</script>
</body>
</html>
Replace script with this, abouve body tag :P css link is good but maybe css not work or name is not like u writed.
<script type="text/javascript">
alert("Ist work");
</script>
But and this work if i see good. http://jsfiddle.net/2Fv8f/
I think your code is correct
your file css should nam " WLE.css " i mean with capital letters and should be in the same directory with this html file
.
for JQuery it's linked correctly and its work for me and the Img fade out in my test .
and for test your linked files (images , css , js ) you can do that with any code you write . go to your page in Chrome and :
Click right > Inspecte element > Network (Tab) :
and Refresh the page if any images or files doesn't link correctly it will show in red color .
try and you will see .
I hope that's will help you .
I have a single page jQuery Mobile app with four "data-role='pages'" in place; so, essentially, it's one HTML doc with four "pages."
Each "page" also has a navigation footer that I am populating dynamically through javascript. I defined a variable called "theFooter," and assigned all my empty footer divs (with classes of "footer") like so:
$('.footer').html(theFooter);
Now, in order to get this to work properly, I have to populate those footers PRIOR to the page being created, otherwise jQuery Mobile won't apply it framework to make the footer bar look like a mobile app nav bar.
So I achieve that through this:
$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that the 'page' has been run
$('.footer').html(theFooter);
});
It works like a dream, the first time around. Let's suppose the pages are "about," "contact," "mission," and "calendar"…
You click "about"… perfect.
You click "contact".. perfect.
You can do this for each of the "pages," and each time the "pagebeforecreate" is fired and the footer looks GREAT.
HOWEVER, if now you click on, say, "about" again (or any of the ones that you've already visited), the page transitions and the content is in place, but there is NO JQUERY MOBILE FORMATTING. And it is not firing the 'pagebeforecreate' function again, which makes sense, because it has already been created the first time.
I've tried working with 'pageinit' and 'pagebeforeshow' firings, but have gotten nowhere.
I have tried .trigger() and .page() methods… and got nowhere.
Can someone explain exactly how to make that JQuery Mobile formatting stick?
If you call .trigger('create') on the parent element of the widget you can enhance it's markup at any point in time:
$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that the 'page' has been run
$('.footer').html(theFooter).trigger('create');
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
<title> Hello World </title>
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><h3>Broken Bells</h3><p>Broken Bells</p>Purchase album </ul>').trigger('create');
});
</script>
</head>
<body>
omt
<div>
<div id="omtList">
</div><!--/content-primary -->
</body>
</html>
I have a code like this
<script type="text/javascript" src="http://www.clipul.com/play/swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('http://montsmile.com/jwplayer/player.swf','mpl','480','380','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','310');
so.addVariable('width','470');
so.addVariable('file','http://localhost:81/newtip/<?=$videopath1?>');
so.addVariable('logo','http://localhost:81/newtip/ffmpeg/logo2.jpg');
so.addVariable("ClickURL", "http://www.google.com");
so.addVariable('captions','/upload/corrie.xml');
so.addVariable('link','<?=$full_url.'tip.php?vid='.$row_video['vid']?>');
so.addVariable('linkfromdisplay','true');
so.addVariable('linktarget','_blank');
so.addVariable('searchbar','false');
so.addVariable('skin','http://montsmile.com/jwplayer/player.swf');
so.write('player');
</script>
It is displaying a player and playing the video. If I Click on the Logo It has to go to www.google.com. But when I click on the logo it becomes pause.
Help me how to add clickable Logo on the player
Simply add the following line to your embed code:
so.addVariable('logo.link','http://www.google.com/');
Best,
Zach
Developer, LongTail Video