I want to put advertising in my site in a similar way as Google Display. I'm using iframe to insert the ads but I'm having problems with the size of it.
I don't know why the iframe are sized by default in 300 x 150 no matter the source size.
The adverts have a meta line with the size of it.
<meta name="ad.size" content="width=300,height=250">
I want to take this information and change the iframe size with javascript. I tryed:
$('#myiframe').load(function() {
var element = document.querySelector('meta[name="ad.size"]')['content'];
});
and the result is empty.
Please your help.
B/R
ok, I finally got it:
var adif= document.getElementById('myiframe');
var x= adif.contentWindow.document.getElementsByName("ad.size")[0].content;
I hope it helps someone else.
Related
I've tested "all" the answers i found in the internet on resizing the pictures within the blogger edit post. Some of them just resize the image dimension but not the actual resolution of the picture, while some of them are actually on that purpose I was looking for using javascript but...
It seems not to work.
so I was thinking maybe because the blogger updated something that it might not work anymore?
for example this solution > JavaScript for resizing photos in Blogger posts
and its posted in 2012.
so maybe I miss something out?
Please help me, thank you.
This code will replace your image src size /s72-c/ with newSize.
<script>
//<![CDATA[
var newSize = 500; // this is the new image size, you can change this
$("your img selector").each(function() {
$(this).attr("src", $(this).attr("src").replace("/s72-c/", "/s"+newSize+"/"));
});
//]]>
</script>
I tried but couldn't get it done.
I want the background of a div to cover full page according to the device width and it should change each time when page is load or refresh on same system.
I have tried many codes but none of them works for me.
Now the script that i am using is:
<script type="text/javascript">
window.onload=function(){
var thediv=document.getElementById("image");
var imgarray = new Array("../bgimages/1.png", "../bgimages/2.png", "../bgimages/3.png");
var spot =Math.floor(Math.random()* imgarry.length);
thediv.style.background="url("+imgarray[spot]+")";
}
</script>
The HTML code is as follows
<html>
<body>
<div id="image">
<div class = "container">
</div> <!--container ends-->
</div>
I want #image div background to cover full page.
This is the CSS i am using:
#image
{
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
Here is the link of the page: http://sahibfreelancer.hostzi.com/
No background image loading.
Please if i miss anything you can let me know. I hope i gave enough details. I am trying this from last one day.
Will be looking forward to your responses.
I spotted a typo :
var spot =Math.floor(Math.random()* imgarry.length);
... should be ...
var spot =Math.floor(Math.random()* imgarray.length);
... shouldn't it ? Does it work if you edit that ?
Since you have jQuery in the tags, I'm going to assume you're using jQuery.
But that being said you're not using the $ syntax in your code examples.
Here's how you can set the background with jQuery:
$('#image').css('background-image', 'url(' + imageUrl + ')');
Edit:
Looks like Ashugeo got it. Next time check the console for the output of your script, it would have been throwing an exception.
Also, if you are using jQuery, there's nicer ways to do what you're doing.
To make the image occupy the entire screen you can specify the viewport height in css like this #image {height:100vh}
Now for the javascript code everything looks fine to me if the images are in the specified url it should load them randomly. You can see a example here.
the only thing i've done is load the images over the web since i cant access them locally on fiddle. A different Image is loading every time.
As for the page load i've used a immediately invoking function which will fire when the contents are loaded but you can use onload as well.
I think its the path of your images.
I pasteD your code and change the url and it works http://jsbin.com/pozadujeca/edit?js,console,output
I am new to javascript, but I am currently using javascript in my head tag that changes images randomly on page refresh. This has been working great. The javascript can be seen below.
<script type="text/javascript">
function changeImg(imgNumber) {
var myImages = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
Now I want to take it one step further and make the images responsive. I've tried a number of different tags via media queries, but nothing seems to work 100%. This particular page has a top section with a height of 310px, which is also where the images are displayed - they also have a height of 310px. Is this something I can do with CSS or CSS3? Or will I need to add additional javascript?
Thanks for the help in advance... my brain hurts!
I have this code below:
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "http://test.captive-portal.com/jwplayer/player.swf",
file: "http://content.captive-portal.com/files/video/cirque-du-soleil/mob.mp4",
image: "http://content.captive-portal.com/files/video/cirque-du-soleil/mob.jpg",
height: 285,
width: 480,
});
</script>
The whole page is here (in case you need it): video page.
What I'm trying to do is to change the 4 lines: file: (...), image (...), height(...) and width (...) depending of the resolution of the window. I have managed to do this with css, so styles are applied correctly, but this is javascript and I don't really know how to modify it. I was trying to place 2 similar scripts on one page in divs and hide the small one in case of big screen or hide a big one in case of small screen but it didn't work. Video didn't play. I think this may be caused by some scripts in the flash player file.
Is there any way to set conditions for those 4 lines depending of the screen resolution?
Thank you very much for your help in advance.
Those parameters are simply an object.
So you should be able to create that object out of the jwplayer call, and simply pass it in. e.g
var params = {};
params.flashplayer = "http://test.captive-portal.com/jwplayer/player.swf";
if(!mobile){ //you need to handle checking for mobile devices
params.file = "http://content.captive-portal.com/files/video/cirque-du-soleil/desktop.mp4";
params.image = "http://content.captive-portal.com/files/video/cirque-du-soleil/desktop.jpg";
params.height = 570;
params.width = 960;
}else{
//set params in same way but with mobile settings
}
jwplayer("container").setup(params);
If you later want to just resize the player. JwPlayer has a 'resize' function that you can call: jwplayer.resize(width,height)
How do you auto resise an iframe after you've added content to a div in the code behind. I'm called
function resizeIframe() {
parent.document.getElementById('iframe2').style.height = document.getElementById('events_calendar').offsetHeight;
}
but i'm about 20 px short. BAsically i've got a calendar that renders whats on on a certain day. this can be n number of lines. after i've popuplated that div in C# code behind I'm call resizeIframe() and not getting anywhere. i've tired style.height, clientheight etc.
Thanks
Frames
What you really need is "outerheight".
see: Javascript/jQuery outerHeight()