I am trying to incorporate the google conversion tracking feature in my webpage but the little image that is supposed to show is not showing. Now google stresses to put the code within the body tags--
<html>
<body>
<!-- Google Code for Purchase Conversion Page -->
<script language="JavaScript" type="text/javascript">
<!--
var google_conversion_id = 1234567890;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
if (1.0) {
var google_conversion_value = 1.0;
}
var google_conversion_label = "Purchase"; //-->
</script>
<script language="JavaScript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<img height=1 width=1 border=0 src="http://www.googleadservices.com/pagead/conversion/1234567890/? value=5.0&label=Purchase&script=0">
</noscript>
</body>
<html>
Thank you
In the posted code, the img tag only gets rendered or "shows" if javascript is disabled. If javascript is enabled, the javascript in the conversion.js generates an iframe with the src url being similar to what you see in that noscript img src url, except for more detailed.
And as for when it "shows"... it's a 1x1 transparent pixel, so I hope you aren't trying to eyeball on your screen...
Related
I am making a website in HTML/PHP. I want the images to be different sizes depending on if your viewing on a mobile or PC. Weird part is on one of my pages both properties update the image on the screen when I type into the console, I forgot to add footer image related to pages that use the same image as a footer with the id footerimage.
Here is the HTML
<body onload="detectClient()">
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image" src="img/Websitebackground.png" alt="logo" width="1500" height="1000" id="headerimage">
</header>
...
and here is the javascript:
function detectClient() {
if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
console.log(navigator.userAgent);
document.getElementById("footerimage").width = "1500";
document.getElementById("footerimage").height = "1000";
} else {
console.log(navigator.userAgent);
document.getElementById("headerimage").style.width = "1500";
document.getElementById("headerimage").style.height = "450";
console.log(console.error());
console.log(document.getElementById("headerimage").height)
The console logging is for me to see in console if that code is executing correctly. I have thrown a jsfiddle together should work okay.
https://jsfiddle.net/9frpzy0k/
What's the reason for no using jQuery nowadays? Some things works better and probably in future you'll find also other advantages. Note I didn't verify if your if statement works for mobile.
On the other hand. resizing image doesn't crop it, but just resizes, which may look kinda ... weird. Instead, I suggest using background image that fits the div container using vanilla CSS. Using this approach you can simulate crop solution with pure CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image" src="https://placem.at/things?w=1500&h=1000&random=image_1&txt=Image+1500+1000" alt="logo" width="1500" height="1000" id="headerimage">
</header>
<script>
$(document).ready(function () {
let $headerImage = jQuery('#headerimage');
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
console.log(navigator.userAgent, 'mini');
$headerImage.width(1500);
$headerImage.height(1000);
} else {
console.log(navigator.userAgent, 'else statement');
$headerImage.width(1500);
$headerImage.height(450);
}
});
</script>
</body>
</html>
post scriptum
Also this should work in your code
let img = document.getElementById("headerimage");
img.style.width = '1500px';
img.style.height = '450px';
or
img.width = 1500;
img.height = 450;
I use iframes on most my projects. They embed things ranging from ads to sponsors to announcements. Allot of people have contacted me asking why the pages take so long to load, and I simply reply "technical issues". The actual pages content loads, it just stays loading. I also use some iframes with 0 width and height with no frameborder.
I am trying to make the page say its loaded, but load the iframe in the background. I have searched everywhere and not found an answer. The closest I have found is how to make the iframe the lowest priority in loading time.
I have tried this:
(function(d){
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;
// style the iframe with some CSS
iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";
doc.open().write('<body onload="' +
'var d = document;d.getElementsByTagName(\'head\')[0].' +
'appendChild(d.createElement(\'script\')).src' +
'=\'\/path\/to\/file\'">');
doc.close(); //iframe onload event happens
})(document);
I have tried this:
$(window).bind("load", function() {
$('#backup').prepend('<iframe src="https://web.archive.org/save/https://ppyazi.com/" width="0" height="0"></iframe>');
});
$(window).bind("load", function() {
$('#uggaustraliancollection').prepend('<iframe src="https://web.archive.org/web/20180314120100/https://www.instagram.com/uggaustraliancollection/" width="100%" height="400"></iframe>');
});
$(window).bind("load", function() {
$('#zuper').prepend('<iframe src="https://ppyazi.com/zuper/wall.php?username=quix" width="0" height="0"></iframe>');
});
<a href="https://www.instagram.com/uggaustraliancollection/" class="list-group-item list-group-item-action">
<?php $total = file_get_contents('stats.php') + 0.0001;
?>
<div id="uggaustraliancollection"></div>
<script type="text/javascript" src="//ylx-1.com/bnr.php?section=General&pub=315858&format=300x50&ga=g&mbtodb=1"></script> <noscript><img alt=" " src="//ylx-aff.advertica-cdn.com/pub_2hpya3.png" style="border:none;margin:0;padding:0;vertical-align:baseline;" /></noscript>
<span class="badge badge-dark">Advertisment</span>
</a>
Since you indicated that none of the linked answers worked, here is a snippet that I have tested and works for me. Putting up a target div, I use a jQuery script to append a whole iframe to its contents on page load.
In HTML
<div id="cool_thing"></div>
In jQuery script:
$(window).bind("load", function() {
$('#cool_thing').prepend('<iframe src="https://www.weather.gov/" width="680" height="380"></iframe>');
});
This is working starting point. I can imagine combining this with a static image that is replaced/removed when the function is running, and it will be hard to tell the difference.
I think this is what you want.
For multiple iframes:-
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body onload="iframeload()">
<iframe id="iframe1"></iframe>
<iframe id="iframe2"></iframe>
<script>
function iframeload() {
var iframe = document.getElementById("iframe1");
iframe.src = "pagename1.html";
var iframe = document.getElementById("iframe2");
iframe.src = "pagename2.html";
}
</script>
</body>
</html>
Single iframe:-
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body onload="iframeload()">
<iframe id="iframe"></iframe>
<script>
function iframeload() {
var iframe = document.getElementById("iframe");
iframe.src = "pagename.html";
}
</script>
</body>
</html>
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>
I would like to add this code:
<script type="text/javascript" src="http://www.formstack.com/forms/js.php?1134414-uqmj2UXxEw-v2">
</script>
<noscript>
<a href="http://www.formstack.com/forms/CampusEnterprises-chopped_greens_order_form__copy" title="Online Form">
Online Form - Chopped Greens Order Form - COPY
</a>
</noscript>
into the call of the isOpen() method at the end of the following javascript code:
<head>
<script type="text/javascript">
var theDate = new Date();
var dayOfWeek = theDate.getUTCDay();
// Returns true if the restaurant is open
function isOpen()
{
//I'll fill this in later, for now, return true
return true;
}
</script>
</head><body>
<script type = "text/javascript">
if(isOpen())
{
//ADD CODE HERE
}
</script>
</body>
However, when I try to just copy and paste the two together it doesn't work. I think it has something to do with nested tags but I'm not sure
You can write out the script into the document dynamically.
<body>
<script type = "text/javascript">
if(isOpen())
{
document.write('<script type="text/javascript" src="http://www.formstack.com/forms/js.php?1134414-uqmj2UXxEw-v2"></script>');
}
</script>
<noscript>
<a href="http://www.formstack.com/forms/CampusEnterprises-chopped_greens_order_form__copy" title="Online Form">
Online Form - Chopped Greens Order Form - COPY
</a>
</noscript>
</body>
As #Jared Farrish noted in the comments, you might as well use the noscript tag directly on the page.
So we can do:
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function exitpop()
{
my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
//my_window.document.write('somehow add JS');
my_window.document.write('<h1>Popup Test!</h1><br/>');
my_window.document.write('J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha} ');
}
</script>
<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>
but how to for example add to header of that html page with something like <script type="text/javascript" src="path-to-MathJax/MathJax.js"></script> to enable MathML and tex formulas rendering?
Yep, you just need to concatenate the script tags, like so: jsfiddle demo
The money-shot code sample is:
jswin = window.open("", "jswin", "width=350,height=150");
jswin.document.write("Here's your popup!");
jswin.document.write('<scr'+'ipt>alert("Here\'s your alert()!");</scr'+'ipt>');
Use javascript to create a node named script, and sets it's attributes with javascript. Then append the node to document.head.
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function exitpop()
{
var my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
var head = my_window.document.getElementsByTagName("head").item(0);
alert(head.innerHTML);
var script = my_window.document.createElement ("script");
script.src = "a.js";
head.appendChild (script);
alert(head.innerHTML);
}
</script>
<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>
You can consider using an iframe, you can set its head and body altogether, and you can put it in the window.