I'm trying to change the size of my window onload. It doesn't seem to work.
Here is the setup:
<script>
var w=800;
var h=600;
function changeScreenSize(w,h)
{
window.resizeTo(w,h)
}
</script>
<body onload="changeScreenSize(w,h)" style="background-image:url(Untitled.jpg)">
This solution is from php.org (somewhere) - works for windows DOM, Mac cracks.
Hide menubar and favs, percent (width,height) gets complicated:
http://css-tricks.com/snippets/html/top-bottom-halves-layout/
<script>
function changeScreenSize(w,h)
{
window.resizeTo( w,h )
}
</script>
</head>
<body onload="changeScreenSize(1200,260)">
http://ysdn2005-w11.wikispaces.com/Change+Browser+Window+Size+Upon+Loading
Yep, this page details method. Script above works.
function changeScreenSize()
{
w=window.open('','', 'width=800,height=600');
w.focus();
}
<body onload="changeScreenSize()">
Related
I got a stuck in this piece of code
The full code
<html>
<head>
<script>
function hide(kaka){
var temp=document.getElementById(kaka).visibility;
temp=(temp=='visible')?'hidden':'visible';
}
function remove(kaka){
var temp=document.getElementById(kaka).display;
temp=(temp=='block')?'none':'block';
}
</script>
</head>
<body>
<IFRAME id="kaka" SRC="ads.php" WIDTH=10000 HEIGHT=10000></IFRAME>
<script>
</body>
I'm trying to make the iframe to hide after someone's click
visibility and display are just text strings, so setting them to a variable, and then changing the variable, won't change the element.
function toggle(kaka) {
var temp=document.getElementById(kaka).visibility;
temp=(temp=='visible')?'hidden':'visible';
document.getElementById(kaka).visibility=temp;
}
I use a Modernizr media query in JavaScript to change an element margin and add a class "small". My Modernizr media query doesn't work when I resize my browser, but when I refresh the page then it works. I know I can solve this problem using the jQuery $( window ).resize() function, but I want to solve it using a media query. Can any one tell me how I can solve this problem?
<html class="no-js">
<head>
<title>Foundation 5</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="modernizr.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if (Modernizr.mq('(max-width: 767px)')) {
$("#secondary").addClass("small");
$("#secondary").css("margin", " 25px");
}
});
</script>
<style type="text/css">
#primary {
width: 300px;
height: 200px;
background-color: black;
}
#secondary {
margin: 0 auto;
width: 250px;
height: 150px;
background-color: white;
position: absolute;
}
</style>
</head>
<body>
<div id="primary">
<div id="secondary">
</div>
</div>
</body>
</html>
At the moment it runs once only (on page load), so of course it only changes when you refresh the page.
Solution: You need your code to run onload and when the browser/window resizes. :
e.g.
<script type="text/javascript">
var mod = function(){
if (Modernizr.mq('(max-width: 767px)')) {
$("#secondary").addClass("small").css("margin", " 25px");
} else {
// Clear the settings etc
$("#secondary").removeClass("small").css("margin", ""); // <<< whatever the other margin value should be goes here
}
}
// Shortcut for $(document).ready()
$(function() {
// Call on every window resize
$(window).resize(mod);
// Call once on initial load
mod();
});
</script>
Option 2
A common alternative I now use is to simply trigger a window resize event at the end of the onload (e.g. after the handler is connected).
<script type="text/javascript">
// Shortcut for $(document).ready()
$(function() {
// Call on every window resize
$(window).resize(function(){
if (Modernizr.mq('(max-width: 767px)')) {
$("#secondary").addClass("small").css("margin", " 25px");
} else {
// Clear the settings etc
$("#secondary").removeClass("small").css("margin", ""); // <<< whatever the other margin value should be goes here
}
}).resize(); // Cause an initial widow.resize to occur
});
</script>
Simple JSFiddle example: http://jsfiddle.net/TrueBlueAussie/zv12z7wy/
Great answer above in Option 2
Helped me immensely as I was having the same issue of not seeing my changes reflect on initial page resizes. Causing the initial window.resize saves the day.
Just to make the above solution in Option 2 a little cleaner I created a mediaQ variable which I store inside the if statement. This un clutters the if statement. I also store your #secondary id inside a variable.
$(window).resize(function(){
var mediaQ = Modernizr.mq('only screen and (max-width:767px)');
var secondaryId = $("#secondary");
// if mediaQ is true
if(mediaQ){
secondaryId.addClass("small");
secondaryId.css("margin", " 25px");
// if mediaQ is false
} else {
secondaryId.removeClass("small");
secondaryId.css("margin", "");
}
}).resize();
I have an HTML page which loads some content in an iframe with the help of remote JS. I want to replace the text "premium content" with something else.
What I am trying is:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://gaand.comli.com/no.js"></script>
<img src="psss" onerror="myFunction()"></img>
<script>
function myFunction() {
var x = document.getElementById("overlay_iframe");
var y = x.contentDocument;
y.document.body.innerHTML = y.document.body.innerHTML.replace('premium',
'newtext');
}
</script>
</body>
</html>
Is there any way to change it as soon as the page is loaded completely?
You can use jquery to have event when page loads, and then replace html content.
$( document ).ready(function() {
$( "#overlay_iframe" ).html( $( "#overlay_iframe" ).html().replace("premium","newtext"));
});
Unless the iFrame is on your server you cannot change it. I would suggest using PHP
file_get_contents()
and replacing it within the string.
You can try using the jQuery .contents() to return an object of the iframes contents and than manipulate that. jQuery .contents()
Edit, updated
Try
$.getScript("http://gaand.comli.com/no.js")
.done(function(script) {
s = setInterval(function() {
$("iframe").contents()
.find("body").text(function(_, o) {
return o.replace("premium", "newText");
}) && clearInterval(s);
}, 10);
});
jsfiddle http://jsfiddle.net/guest271314/whjqqtco/
I have one div when I click that div I want to open a child browser.I have the code for child browser but when I click the div it executes the javascript line and I didn't get any url from there.
Please check my code
Div code
<div class="box_padding " onClick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes);return false;" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
when I tried this nothing happening.
So I have tried one more way to solve this issue
function openwindow(){
w=open("myurl",'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
HTML:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
This is also not working.
If you have jquery available you can use this instead of this.href:
$('script').attr('src');
function openwindow(){
w=open($(this).find('script').attr('src'),'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
This seems to work in a preliminary test, native javascript. This would be trivial w/ jquery as a previous poster has shown.
Use the URL as a parameter in the div tag "srcVal".
<div class="box_padding " srcVal="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" onClick="openwindow()" id="column-c-box-1">click me</div>
or this way:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" id="scriptTag"></script>
</div>
Your function slightly modified:
function openwindow(){
var id = document.getElementById("column-c-box-1").getAttribute("srcVal");
//or
// var scr = document.getElementsByTagName('script');
//var id = scr[0].src; // use scr[scr - 1].src if have multiple scripts
var w=open(id,'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
I used "with" because that is in your original code, but I'd caution against it.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FStatements%2Fwith
Good Day!
is it possible when i open new window from parent window, a javascript will execute on the new WINDOW?
Like for example if the new window completely load, a textfield will change a value.
Thanks
get the parameter from new window onLoad() event to parent window, notifying that new window has been load.
I hope this will solve your question.
Here's an example for putting a function in a child window then let the child window runs it. The showTitle function will simply show the current document title. The child page will wait for a specific function and calls it when it arrives.
parent.html:
<html>
<head>
<title>parent</title>
</head>
<body>
<script>
function showTitle() {
alert('Page Title = '+this.document.title);
}
function childLoaded() {
showTitle();
var childWnd=document.getElementById('fchild').contentWindow;
if (!childWnd) return;
childWnd.newFunc=showTitle;
}
</script>
parent<br />
<iframe id=fchild src="child.html" width=300 height=300 onload="childLoaded()"></iframe>
</body>
</html>
child.html:
<html>
<head>
<title>child</title>
</head>
<body>
<script>
var waiter,newFunc=null;
function waitFunc() {
if (newFunc) {
clearInterval(waiter);
newFunc();
}
}
waiter=setInterval(waitFunc, 1000);
</script>
child
</body>
</html>