How to replace screen.width value with my own defined value?
I want to define a fake screen.width:
var screen.width = 1024;
in <head>
So that when the below code loads it will always display = <h1>test 2</h1> in any screen.width
I am using the following the code:
<script type="text/javascript">
if (screen.width>=1400)
{
document.write('<h1>test 1</h1>');
}else
{
document.write('<h1>test 2</h1>');
}
</script>
Hope I am clear to explain my issue.
Just for fun, you could make screen's properties mutable like this:
var tempScreen = {};
for (var obj in screen)
tempScreen[obj] = screen[obj];
tempScreen.__proto__ = screen.__proto__;
screen = tempScreen;
screen.width = 400;
console.log(screen.width); // -> 400
Related
I'm trying to get the position of an element by using Javascript. I have used clientTop, offsetHeight, window.getComputedStyle(box1).top and a few things in between but all I get when I console log it is 0. The element is placed almost in the middle of the page so it should be all but 0 in the result.
HTML:
<body>
<h1>Box placement</h1>
<div id='box1' class='box center green size200'>
</div>
</body>
JS:
let box1 = document.querySelector('#box1');
let browserHeight = window.innerHeight;
let browserWidth = window.innerWidth;
let boxHeight = box1.clientTop;
let boxWidth = box1.offsetLeft;
function printInfo() { //Result
console.log(browserHeight); //1185
console.log(browserWidth); //1266
console.log(boxHeight); //0
console.log(boxWidth); //0
console.log(window.getComputedStyle(box1).top); //auto
console.log(box1.offsetLeft); //0
}
printInfo();
Any ideas to where I might have gone wrong? Here is a fiddle with the CSS as well: http://jsfiddle.net/1f23v9nj/1/
That behaviour is caused by the less.js library. If you don't really need its features, then don't include it -- problem solved.
If you do need it -- for reasons not apparent from the code in your question -- then wait for the less.pageLoadFinished promise to resolve, as follows:
less.pageLoadFinished.then(function () {
'use strict';
let box1 = document.querySelector('#box1');
// ... etc
});
See updated fiddle
I'm adding Amazon Affiliate banners to my website, but because the banner code isn't responsive, the larger size banners break out of my container in the smaller sizes. I've created the following code so that when the page initially loads, it will load an appropriate sized banner in the correct space. However, I would like to set it so that when the browser window is resized, the DIV containing the banner code (bannerdiv) is refreshed and the script is re-executed.
I'm a novice at this, so your patience and idiot-simple instructions will be appreciated. I'm also sure this code is written in a painfully clunky manner.
NOTE: I've updated the code per suggestions in the comments, but it's still not working. Any suggestions?
<script type='text/javascript'>
function loadBanners() {
function lrgBanner() {
amzn_assoc_ad_type = 'banner';
amzn_assoc_tracking_id = 'livcouintheci-20';
amzn_assoc_marketplace = 'amazon';
amzn_assoc_region = 'US';
amzn_assoc_placement = 'assoc_banner_placement_default';
amzn_assoc_linkid = 'AC2XN3SJ34RJMGYK';
amzn_assoc_campaigns = 'outdoorrecreation';
amzn_assoc_p = '48';
amzn_assoc_banner_type = 'category';
amzn_assoc_isresponsive = 'false';
amzn_assoc_banner_id = '1XTRE8BRWXGWQJTWPJ82';
amzn_assoc_width = '728';
amzn_assoc_height = '90';
}
function medBanner() {
amzn_assoc_ad_type = 'banner';
amzn_assoc_tracking_id = 'livcouintheci-20';
amzn_assoc_marketplace = 'amazon';
amzn_assoc_region = 'US';
amzn_assoc_placement = 'assoc_banner_placement_default';
amzn_assoc_linkid = 'OTLU2UB6UY5JMUHP';
amzn_assoc_campaigns = 'outdoorrecreation';
amzn_assoc_p = '26';
amzn_assoc_banner_type = 'category';
amzn_assoc_isresponsive = 'false';
amzn_assoc_banner_id = '0CDY3FGJ2PD68NJXFKG2';
amzn_assoc_width = '468';
amzn_assoc_height = '60';
}
function smlBanner() {
amzn_assoc_ad_type = 'banner';
amzn_assoc_tracking_id = 'livcouintheci-20';
amzn_assoc_marketplace = 'amazon';
amzn_assoc_region = 'US';
amzn_assoc_placement = 'assoc_banner_placement_default';
amzn_assoc_linkid = 'G7YQZ5D43772NXLC';
amzn_assoc_campaigns = 'outdoorrecreation';
amzn_assoc_p = '42';
amzn_assoc_banner_type = 'category';
amzn_assoc_isresponsive = 'false';
amzn_assoc_banner_id = '1VHGPZ2J9GDJGYKD5G82';
amzn_assoc_width = '234';
amzn_assoc_height = '60';
}
var winwidth = window.innerWidth;
if (winwidth >= 1200) {
lrgBanner();
} else if (winwidth < 980 && winwidth >= 920) {
lrgBanner();
} else if (winwidth >=980 && winwidth < 1200) {
medBanner();
} else if (winwidth >= 600 && winwidth < 920) {
medBanner();
} else {
smlBanner();
}
}
loadBanners();
</script>
<div id="bannerdiv">
<script id="bannerscript" src='//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1'></script>
</div>
<script type="text/javascript">
function amznScript() {
var banDiv = document.getElementById('bannerdiv');
var oldScript = document.getElementById('bannerscript');
var newScript = document.createElement('script')
newScript.type = 'text/javascript';
newScript.src = '//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1';
newScript.id = 'bannerscript'
banDiv.replaceChild(newScript,oldScript);
}
</script>
<script type="text/javascript">
function adBanner() {
loadBanners();
amznScript();
}
window.addEventListener("resize", adBanner);
</script>
Found something related to Amazon banners here:
Amazon Associates Site
I don't have experience with this particular library, but I'll share some thoughts just looking at your code:
Do the docs say the numeric variable settings need to be strings or numbers? (amzn_assoc_width, amzn_assoc_height, etc). Usually, number should be without the quotes (amzn_assoc_width = 234 instead of amzn_assoc_width = '234')
Take the lrgBanner, medBanner, and smlBanner functions OUT of the loadBanners function. You have them defined inside of it. loadBanners will work fine with them outside.
Because you're defining the variables inside of functions, they may not be getting set where the Amazon script can see them (the global space). In your browser, after the page loads, open the browser console and type in the name of any of the variables in the console and it will output whatever the variable is set to. If it outputs undefined, either you're doing something wrong in the console or the variables aren't being set in the global space. Additionally, try typing window.variableName in the console to double check.
Related to the previous bullet, try prefixing all the variable definitions in your functions with window. to explicitly set them in the global space, which is where the Amazon script is probably expecting to find them.
If you can't use responsive banners for your category, try just dynamically loading the banners using the iframe banners. Here's an example using jQuery
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script language="javascript">
$(window).on('load resize', function() {
winWidth = $(window).width();
if ( winWidth >= 1200) {
$('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=48&l=ur1&category=home&banner=1T8X6QB60F8G26A33RG2&f=ifr&linkID=WHAOQICV37C7EWOX','width':'728','height':'90'})
} else if (winWidth >= 600 && winWidth < 1200) {
$('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=26&l=ur1&category=home&banner=017THAMGVS89AQ891982&f=ifr&linkID=5ORSSCSEHTUJ6JZS','width':'468','height':'60'})
} else {
$('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=42&l=ur1&category=home&banner=1VCFP7EH9H4CBCD6ADR2&f=ifr&linkID=IHZPNRGMTYWEIYAS','width':'234','height':'60'})
}
});
</script>
</head>
<body>
<iframe id="myBanner" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
</body>
Using a blank iframe for the initial load helps to prevent the banner from changing while the page is loading.
Hope that helps!
I have this site:
link
I have two pages that contain the same divs... on a page I want to be a calculation (to div) on another page another calculation..,
CODE JS:(NEW)
jQuery(document).ready(function ($) {
var windowsizecontact = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
console.log("ecran contact:",windowsizecontact);
var stanga= jQuery('.contact-stanga').outerWidth();
console.log("latime-stanga:",stanga);
var dreapta= jQuery('.contact-dreapta').outerWidth();
console.log("latime-dreapta:",dreapta);
var contentcontactwh=windowsizecontact-stanga-dreapta;
console.log("rezultat",contentcontactwh);
$('.contact-container #primary').css{('cssText', contentcontactwh'!important')}; //here I want to overide this div
});
This is old code (which must remain and apply only on certain pages)
jQuery(document).ready(function ($) {
var latime= Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var _stanga= jQuery('#secondary').outerWidth();
var selectat= jQuery('.selectat').outerWidth();
var calcul=latime-_stanga-selectat;
$('#primary').css('width', calcul);
});
My problem is that the new code (from above) does not apply to div on the contact page because old code ... and I need to do to be unique. (Old code should remain as )
It can override somehow?
EDIT:
jQuery(document).ready(function ($) {
var windowsizecontact = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
console.log("ecran contact:",windowsizecontact);
var stanga= jQuery('.contact-stanga').outerWidth();
console.log("latime-stanga:",stanga);
var dreapta= jQuery('.contact-dreapta').outerWidth();
console.log("latime-dreapta:",dreapta);
var contentcontactwh=windowsizecontact-stanga-dreapta;
console.log("rezultat",contentcontactwh);
console.log("------------------");
if ($("#primary").hasClass("content-contact")) {
alert("ggg");
$('.content-contact').css("width:",contentcontactwh); //here now is problem
}else
{
var latime= Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var _stanga= jQuery('#secondary').outerWidth();
console.log("latime-stanga:",_stanga);
var selectat= jQuery('.selectat').outerWidth();
console.log("latime-stanga:",_stanga);
var calcul=latime-_stanga-selectat;
$('#primary').css('width', calcul);
}
});
I tried the first option suggested ... but now not only apply div width of my.
I've done wrong syntax?
var app = app || {};
app.readyFunction = function () {
// normal
};
// on website you want to overwrite
app.readyFunction = function () {
// altCode
};
// and in document ready just call
$(function () {
app.readyFunction();
});
If al the rest works and if the problem is only in this line then lets change this line a bit.
this
$('.content-contact').css("width:",contentcontactwh); //try removing the : after width
to
$('.content-contact').css("width",contentcontactwh);
Also please provide the console error message if this does not work.
I have an iframe on a document. Using javascript, I can get the iframe's width and height and the document's width and height. I now need to get the x,y position of the iframe on the document from within the iframe.
Code is something like:
<html>
<iframe>
var documentWidth = parent.window.innerWidth;
var documentHeight = parent.window.innerHeight;
var iframeWidth = window.innerWidth;
var iframeHeight = window.innerHeight;
var iframeX = ????
</iframe>
<html>
I've tried window.offsetTop/Left, parent.window.offsetTop/Left, window.clientTop, etc and anything else I can find but keep getting 'undefined'.
Both are on the same server so I don't think I have a cross domain issue.
Any ideas?
BTW I can't use JQuery for this. JS Only.
Here is a bit more detail:
<html>
<body>
<div>
<iframe name="iframe/123/Test">
<html>
<body>
<script src="same domain"></script>
</body>
</html>
</iframe>
</div>
</body>
</html>
The script looks like this so far:
// JavaScript Document
var documentWidth = parent.window.innerWidth;
var documentHeight = parent.window.innerHeight;
var iframeWidth = window.innerWidth;
var iframeHeight = window.innerHeight;
var iframeName = window.name;
var iframeX = window.parent.document.getElementsByName(iframeName).offsetLeft;
//Var Dumps
document.write("Document Width: "+documentWidth+"<br>");
document.write("Document Height: "+documentHeight+"<br>");
document.write("Iframe Width: "+iframeWidth+"<br>");
document.write("Iframe Height: "+iframeHeight+"<br>");
document.write("Iframe X: "+iframeX+"<br>");
I get the following results on page in the iframe:
Document Width: 1566
Document Height: 652
Iframe Width: 300
Iframe Height: 250
Iframe X: undefined
Since both files are on same server, so you dont have cross domain issue, You can try following solution:
Main Html
<html>
<body>
<iframe src='iframe.html' name='iframe_name' id='iframe_id'></iframe>
</body>
</html>
Iframe Code [iframe.html]:
<html>
<body>
<script type="text/javascript">
var documentWidth = parent.window.innerWidth;
var documentHeight = parent.window.innerHeight;
var iframeWidth = window.innerWidth;
var iframeHeight = window.innerHeight;
// Get Left Position
var iframeX = window.parent.document.getElementById('iframe_id').offsetLeft;
// Get Top Position
var iframeY = window.parent.document.getElementById('iframe_id').offsetTop;
</script>
</body>
</html>
window.parent.document.getElementsByTagName('iframe') will reference every iframe in the parent's window. From there you can find your specific iframe by looping through and checking the src attribute.
Once you have your iframe, you can get it's dimensions and locations with the properties from element.getBoundingRect().
var iframes = window.parent.document.getElementsByTagName('iframe');
var yourURL = 'test.com';
var iframe;
for (var i = 0; i < iframes.length; i++) {
if (iframes[i].src == 'test.com') {
iframe = iframes[i];
break;
}
}
var rect = iframe.getBoundingClientRect();
Is there a way to get the a users screen size/resolutions using javascript? I figured you probably can't use PHP to do this as it's server-side, but as javascript is client-side I thought it may be an option.
Yes, you can use the following to print out the resolution for example:
<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>
Might not work in older browsers, but will in most recent ones.
More info here:
http://www.javascriptkit.com/howto/newtech3.shtml
Yes i have used the following code and it works well.
var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
screenW = screen.width;
screenH = screen.height;
}
else if (navigator.appName == "Netscape"
&& parseInt(navigator.appVersion)==3
&& navigator.javaEnabled()
)
{
var jToolkit = java.awt.Toolkit.getDefaultToolkit();
var jScreenSize = jToolkit.getScreenSize();
screenW = jScreenSize.width;
screenH = jScreenSize.height;
}
document.write(
"Screen width = "+screenW+"<br>"
+"Screen height = "+screenH
)
Courtesy: http://www.javascripter.net/faq/screensi.htm