I am using an SVG element on page A with a href link to page B-- page B has a script that calls the Trianglify api to generate the background.
However, if you navigate to page B by clicking this link, the script doesn't trigger. If you refresh the page on page B, the script triggers and the background works.
Can someone help me figure out how to trigger this script just on the click to the href element?
(application is written w/ express/node and handlebars)
This is how I am triggering it:
<div id="something"></div>
<script>
var f = function(e) {
console.log("ready");
var something = document.getElementById('something');
var dimensions = something.getClientRects()[0];
var pattern = Trianglify({
width: dimensions.width,
height: dimensions.height
});
something.appendChild(pattern.canvas());
}
$("document").ready(f);
</script>
and then here's the button on page A--
<a href="/contact" class="under animated fadeInRight">
<rect x="100" y="15" width="10" height="10"/>
<text x="117" y="25" style="opacity:.5;font-size:15px">CONTACT</text>
</a>
I have website and on it I have booking form. When you complete booking form fields you click proceed and go to third-party site that makes transaction and then you are redirected to /success page.
I have one account where I have set Google adwords campaign and another where I want to track conversions. I made conversion and set it with no value, just to record it. I put code of conversion in top of my /booking page.
<!-- Google Code for Tracking conversion Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 947106710;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "scPuCPe3ql4QlufOwwM";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/947106710/?label=scPuCPe3ql4QlufOwwM&guid=ON&script=0"/>
</div>
</noscript>
But I do not see any conversions.
Am I doing something wrong?
You must set conversions on the account where is your ad campaign.
I have developed a chrome extension which is supposed to have a scroll bar if the content in the popup is more than the specified height to the body of popup .
I am adding the contents of my popup.html
<!DOCTYPE html>
<head>
<title>Compare Hatke</title>
<script type='text/javascript' src='popup.js'>
</script>
<style>
body {
min-width:357px;
min-height: 500px;
overflow-x:hidden;
overflow-y:auto;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
</head>
<body>
Extension developed by Prashant Singh
</body>
</html>
Also the JS which is injecting data to the popup file
var len = currentArray.length;
var string = "";
for(i=0;i<len;i++){
if(tab.id==currentArray[i].tabID){
string += "<img src='" + currentArray[i].image + "' height='20px' max-width='100px'> " + currentArray[i].prod +"<br>";
}
}
document.write(string);
What could be the possible issue ? I am not getting scroll bar even if the data to be shown is much much greater that can be shown in one view.
Any explanation would be appreciated. Thanks !
Added a div in the popup.html page
<body>
<div id='showData'>
Extension developed by Prashant Singh
</div>
</body>
And replaced document.write by document.getElementById('showData').innerHTML and it worked in a flash. Any explanation. Why previous one was not working ?
In my HTML page I have 9 images for dialing numbers and one text box that shows the pressed numbers. I want each of those images to immediately play beep sound when users click on them. I tried to use embed with hidden property and navigate it's source to .wav sound.
It is working OK, but when I press the images one after another immediately, it cannot play sound and just bees once at the end.
Is there any faster way of playing a .wav sound on 'onclick' method?
If you only need to support recent browsers, then HTML 5 offers you the Audio object
to load/buffer your sound:
var snd = new Audio("file.wav");
to play the sound:
snd.play();
to re-cue it to the beginning (so that you can play it again):
snd.currentTime=0;
This answer https://stackoverflow.com/a/7620930/1459653 by #klaustopher (https://stackoverflow.com/users/767272/klaustopher) helped me. He wrote:
HTML5 has the new <audio>-Tag that can be used to play sound. It
even has a pretty simple JavaScript Interface:
<audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play();">Play
it</button>
Here's how I implemented his advice so that clicking on the Font Awesome icon "fa-volume-up" (located on the Web page after "mule.") results in "donkey2.mp3" sound playing (note: mp3 doesn't play in all browsers).
<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>
You can use embed element for play sounds, but you've to check the formats supported by the different browsers.
Embed element on MDN
<a onclick="playSound('1.mp3')">
<img src="1.gif">
</a>
<div id="sound"></div>
<script>
var playSound = function (soundFile) {
$("#sound").html("<embed src=\"" + soundFile + "\" hidden=\"true\" autostart=\"true\" />");
}
</script>
This code lets you put in a picture button; when click you get a sound. It works with Google Chrome and Microsoft Edge but I can't get it to work in Internet Explorer. I'm using html 5 codes; please copy and paste and add you own samples.
</head>
<body>
<script>
var audio = new Audio("/Sample.wav ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="file://C:/Sample.jpg" onclick="audio.play ( )">
</body>
</html>
more on codes look at
http://html5doctor.com/html5-audio-the-state-of-play/
Example based on accepted answer (Tested in Chrome 70), but I didn't need to re-cue:
<button onclick="snd.play()"> Click Me </button>
<script>
var snd = new Audio("/Content/mysound.wav");
</script>
This is what I would do to play sound effects:
<html>
<body>
<audio id="sfx"><source src="mysound.mp3"></audio>
<button onclick="playsound()" id="button">Play a sound!</button>
<script> function playsound() {
var sfx = document.getElementById("sfx");
sfx.autoplay = 'true';
sfx.load();}
Or you can run this snippet:
function playsound() {
var mysound = document.getElementById("mysound");
mysound.autoplay = 'true';
mysound.load();
}
button {
color: blue;
border-radius: 24px;
border: 5px solid red;
}
body {
background-color: #bfbfbf;
}
<html>
<body>
<audio id='mysound'><source src="click.mp3"><!-- "click.mp3" isn't a sound effect uploaded to the snippet, because I don't think you can upload sfx to snippets. (I'm new to stackoverflow, so there might be a way) But if you actually use a sound effect in that folder that you're using, it works. --></audio>
<button id='btn' onclick='playsound()'>Play a sound!</button>
</body>
</html>
See my code below, my problem is that if I go directly to the link (using SO as example), I will get the Facebook layout in French which is what I want, but if I go via the Like Box link, Facebook strips the locale and the destination displays in my browser's default language of English. How do I accomplish the destination in French without duplicating my Facebook page?
https://www.facebook.com/pages/Stack-Overflow/105665906133609?ref=ts&locale=fr_CA
<html><body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_CA/all.js#xfbml=1&appId=123456789";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-lang='fr_CA' data-href="https://www.facebook.com/pages/Stack-Overflow/105665906133609?ref=ts&locale=fr_CA" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</body></html>