I have a website which contains an iframe within a DIV. The width of the iframe should be dependent on the width of the browser.
Therefore I'm using a JavaScript function and a EventListener to get the width of the browser. That works fine.
Now I have to pass the determined width from JavaScript to my iframe and reload it. This is my HTML/PHP code with the iframe of the index.html:
<div id="scout">
<?php
$iframeWidth = "<script>document.write(iframeWidthFromJS)</script>";
echo "iframe width is " . $iframeWidth;
?>
<iframe src="http://cpcms.scout" width="<?php echo $iframeWidth; ?>" height="600"></iframe>
</div>
And this is my JavaScript, which does not work:
window.addEventListener('resize', getWindowSize);
window.onload(getWindowSize());
function getWindowSize()
{
var iframeWidthFromJS = 800;
if (typeof (window.innerWidth) == 'number')
{
// Get current browser width
width = window.innerWidth;
iframeWidthFromJS = width;
alert(iframeWidthFromJS);
// Reload the DIV to apply new iframe width
$( "#scout" ).load(window.location.href + " #scout" );
}
}
Determining the width works, but not passing it to the iframe.
Cant you simply use the width="100%"
modify your code in such a way that the parent div containing your iframe also gets the new width
<?php
$iframeWidth = "<script>document.write(iframeWidthFromJS)</script>";
echo "iframe width is " . $iframeWidth;
?>
<div id="scout" width="<?php echo $iframeWidth; ?>">
<iframe src="http://cpcms.scout" width="<?php echo $iframeWidth; ?>" height="600"></iframe>
</div>
Related
I need to set up an effect like this one:
http://kaceymorrow.com/slo-fi/#Julia_Audio
When you hover an image in that section, the image change its size to cover most of the screen but notice how the transition is very smooth: The large image's position coincides exactly with the thumbnail image, so it looks like the image "uncover" itself, instead of expanding.
I've tried several things with no success. I have nothing near the solution.
EDIT:
This is the best I have but again, not near the solution!
This script waits for hover on an image to display a DIV with the image as a background. Problem is, it seems like the image is expanding not "uncovering".
$(document).ready(function(){
$('.ejemplo').hover(function(){
console.log('hoveeeeer');
var img = $(this).data('img');
console.log(img);
$('.c1').css(
'background-image', 'url('+img+')',
)
$('.c1').show()
$('.c1').css(
'opacity', '1'
)
$('.ejemplo').css(
'opacity', '0'
)
$('.header_highlights').css(
'opacity', '0'
)
var audio1 = $(this).data('audio');
var stereo = document.getElementById(audio1);
//Example of an HTML Audio/Video Method
stereo.play();
}).mouseout(function(){
console.log('no hover')
$('.c1').hide()
$('.c1').css(
'opacity', '0'
)
$('.ejemplo').css(
'opacity', '1'
)
$('.header_highlights').css(
'opacity', '1'
)
var audio1 = $(this).data('audio');
var stereo = document.getElementById(audio1);
stereo.pause();
});
});
HTML:
<div class="container-flex w-container" style="">
<?php $behind_the_image_images = get_field( 'behind_the_image' ); $count= 0;?>
<?php if ( have_rows( 'behind_the_image' ) ) : ?>
<?php while ( have_rows( 'behind_the_image' ) ) : the_row(); ?>
<div data-w-id="50eadee3-1406-6c5c-563f-0957896a13d2" style="opacity:0" class="div-block-5">
<a id="hover-<?=$count?>" href="#" class="link-block-4 _1 link-<?=$count?> w-inline-block ejemplo" style="position:relative;" data-audio="audio-<?=$count?>" data-img="<?= get_sub_field('image'); ?>"></a>
<div class="header_highlights _2"><?= get_sub_field( 'title_image' ) ?></div>
<style>.link-<?=$count?> {background-image:url('<?= get_sub_field( 'image' ); ?>')!important;}</style>
<audio id="audio-<?=$count?>">
<source src="<?= get_sub_field('audio_hover'); ?>" type="audio/mpeg"></source>
<source src="nav.ogg" type="audio/ogg"></source>
</audio>
</div>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<div style="" class="c1"></div>
</div>
I ended up solving it trough clip-path and jQuery.
JS:
jQuery(document).ready(function(){
jQuery(".bimg").hover(function(){
jQuery(".bimg").attr("style","clip-path: inset(0 0 0 0);");
}, function(){
jQuery(".bimg").attr("style","clip-path: inset(30% 60% 35% 12%);");
});
});
CSS:
.bimg {
max-width:none;
position:absolute;
left:-60%;
padding:0px;
margin: 0%;
top:-650%;
}
HTML
<img src="<?= get_sub_field('image'); ?>" width="1000px;" style="-webkit-clip-path: inset(30% 60% 35% 12%);clip-path: inset(30% 60% 35% 12%);" height="650px;" class="bimg">
The image doesn't show perfectly, I need to add more CSS to display the image exactly as I want and I need to make it cross-browser compatible and responsive, but the basic idea is here.
Trying to delete 3 elements that are inside an iframe. Function "Delete" responsible for deleting the elements called on the element body onload doesn't run.
<html>
<script>
<?php
echo"function delete(){
var elem0=document.getElementById('".$_GET['id']."').contentWindow.document.getElementById('".$id."');
var elem1=document.getElementById('".$_GET['id']."').contentWindow.document.getElementById('".$id1."');
var elem2=document.getElementById('".$_GET['id']."').contentWindow.document.getElementById('".$id2."');
elem0.removeChild(elem0.childNodes[0]);
elem1.removeChild(elem1.childNodes[0]);
elem2.removeChild(elem2.childNodes[0]);
}"; ?>
</script>
<body onload="delete();">
<div>
<?php
$page=$_GET['id'].".html";
$id=down;
$id1=gerar1;
$id2=gerar;
echo '<iframe src="' .$page.'" id="'.$_GET['id'].'" frameBorder="0" width="70%" height="100%" align="left" scrolling="no" />';
echo '</iframe>';
?>
</div>
<div>
<?php
echo'<iframe src="../../galeria/frame2_galeria.html" frameBorder="0" width="29%" height="600px" align="right" scrolling="yes" />
</iframe>';
?>
</div>
</body>
</html>
delete() is a keyword thats why your function was not call
Use different function name instead of delete
So its Works ...!
I think the problem is that the iframe is not loaded done.
You just need to add the onload event handler to the iframe or something like setTimeout and put delete into it:
iframe.onload = function() { delete(); };
that should work.
I'm currently working on a page which loops some content. When you click on the image, more information appears in a javascript popup. I want to give every popup an unique link (with a $_GET). Any ideas how I can do this with PHP or Javascript (or both).
Pop-up script:
<!----- JAVASCRIPT FOR EACH ELEMENT ---->
<script type="application/javascript">
function openPopup<?php echo $persona->{'User ID'}; ?>() {
document.getElementById('<?php echo $persona->{'User ID'}; ?>').style.display = "block";
}
function closePopup<?php echo $persona->{'User ID'}; ?>() {
document.getElementById('<?php echo $persona->{'User ID'}; ?>').style.display = "none";
}
</script>
The pop-ups are created inside a foreach loop (PHP) with the onClicks in it.
Thanks in advance!
you can do like this:
<?php if (isset($_GET['my_get_var']) && !empty($_GET['my_get_var']) : ?>
<div class="my-popup">
<!-- my popup code -->
</div>
<?php endif; ?>
no need for js at all - just CSS, HTML and PHP
I'm giving the container #page-wrap the width that is combined width of the width of all the images inside of it using this code:
HTML
<div id="page-wrap" class="group">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="post">
<?php the_post_thumbnail('large'); ?>
</article>
<?php endwhile; endif; ?>
</div>
JS
var windowH = $(window).height();
var windowW = $(window).width();
if (windowW >= 751 && $('article img').length) {
$('article img').height(windowH -190);
$('article img').css('width', 'auto');
var allArticleWidth = 0;
$('article').each(function() {
allArticleWidth += $(this).width() + 10; //10 is margin of post
});
$('#page-wrap').width(allArticleWidth);
}
But it doesn't work when the window is vertical; the width of #page-wrap is smaller than it should be.
Thanks to Gren Duncan, I began to pay attention to what's in the stylesheet, and found out there was max-width:100% for img that came with the foundation framework I'm using. So the jQuery was somehow getting the css max width of the image which couldn't be wider than the window width, instead of the actual outputted image width. I deleted the max-width since I didn't need it, and it solved the problem.
I didn't really know how to set up the question without making it extremely long, so I will explain the thick of it in here.
Basically my code is pulling images from a directory on another server. I am using a jQuery pagination script I found online. The script works, but only after every single image loads on the page (there are a lot of images, so it takes a while to load).
What I'm wanting to accomplish is basically being able to load the page quickly by only showing 36 results at a time. I'd like the jQuery pagination to work, but what'd be even more ideal is just loading is as you scroll down. I've tried using a few different endless scrolling scripts on this, but for some reason it never works properly.
Hopefully I'm making it very clear on what I'm trying to do.
Here is the link to the page: http://habbolicious.com/v2/testing.php
...and here is the code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pages.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.holder").jPages({
containerID : "test",
perPage: 36
});
});
</script>
</head>
<div class="holder"></div>
<div id="test">
<?php
$url = "http://habbo.it/gamedata/external_flash_texts/0";
$data = file_get_contents($url);
$newlines = array("\n" ,"\r", "\r\n", ">", "<", "/");
$content = str_replace($newlines, "", html_entity_decode($data));
$Statushtml= '/badge_desc_(.+?)=/';
preg_match_all($Statushtml,$content,$Statusraw);
$badges = implode("-", $Statusraw[0]);
$badgevar = explode("=-badge_desc_", $badges);
$number = ($badgevar);
$badgevar2 = str_replace("=","",$badgevar);
$badgevar3 = str_replace("badge_desc_","",$badgevar2);
$number = count($badgevar3);
while ($number != 0) { ?>
<script>
$("img").error(function () {
$(this).parent().css({display:"none"});
});
</script>
<?php
$number = $number - 1; ?>
<?php
$imageUrl = "http://images.habbo.it/c_images/album1584/$badgevar3[$number].gif";
echo '<div class="derpy" style="width:10%; height:70px; line-height:10px; overflow:hidden; border-radius:5px; background:#eaeaea; color:#585858; float:left; margin:5px; padding:10px; text-align:center;"><img class="lazy" src="' . $imageUrl . '" onerror="this.style.display=none" /><br/>' . $badgevar3[$number] . '</div>';
if(file_exists($imageUrl))
{
} else {
}
}
?>
<div style="clear:both;"></div>
</div>
in your script:
$number = count(**);
and the 'while' make a countdown for the $number to the 0.
if you want only 36 pictures, then you need the line 10 "$number = 36;" , instead of "$number = ($badgevar);"