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.
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.
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>
I would like to match the height of class "project_region" each 4 elements,
<div class="grid_new inner_each_pr" onclick="location.href='/region/agroproject/33'">
<div class="inn_pr">
<p class="project_region"><b>Московская область</b><br>Животноводство, Строительство сельскохозяйственных объектов | Молочное скотоводство</p>
<p class="project_name">Строительство животноводческой фермы</p>
<div class="info_project_down">
<div class="block_rub inline">
<p>406 <span>млн. р.</span></p>
</div>
<div class="block_time">
<p>8<span>лет</span></p>
</div>
</div>
</div>
</div>
The HTML-Code above is inside a class="row", and all class="inner_each_pr" are set inline, I tried to do, but it get's me the max height of all elements, I need need to set max height each 4 element.
Any idea?
Try
$(document).ready(function() {
var maxHeight = -1;
$('.inner_each_pr').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.inner_each_pr').each(function() {
$(this).height(maxHeight);
});
});
check this link for details Div is mysteriously moving down after displaying first 3 rows properly
The width and and height of my google map is very small. I need 400px width and height. But I am getting 256px. The map_canvas div have 400px width and height.How can I change the width and height of Google map. Please help me.
<form id="overlay_form" style="display:none" style="width:500px;height:500px;">
<img src="<?php echo base_url();?>img/x.png" id="close"/>
<div id="map_canvas" style="width:100%; height:100%;"></div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".popup").click(function(){
$("#overlay_form").fadeIn(1000);
positionPopup();
});
$("#close").click(function(){
$("#overlay_form").fadeOut(1000);
});
});
function positionPopup(){
if(!$("#overlay_form").is(':visible')){
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position:'absolute'
});
}
$(window).bind('resize',positionPopup);
</script>
AFAIK google's map_canvas div doesn't supports height and width in %, you'l need to explicitely specify in pixels only. So change your code as follows:
<form id="overlay_form" style="width:500px;height:500px;">
<img src="<?php echo base_url();?>img/x.png" id="close"/>
<div id="map_canvas" style="width:500px; height:500px;"></div>
</form>
I've also removed style="display:none" from <form ..>. So that it will show map on screen.
See this, to understand issue of height/width in % for google map.
Here is documentation
Well, I'm running ISOTOPE. So I have to set the DIV's height and width through jQuery. It's a photographer's portfolio, so I have thousand of photos with different sizes.
HTML
<div class="element metal cesco1 " data-symbol="Hg" data-category="transition">
<span>
<a class="fancybox" href="fotos/full/full01.png" data-fancybox-group="gallery">
<img src="fotos/thumbs/thumb01.png"/>
</a>
</span>
</div>
<div class="element metal cesco1 " data-symbol="Hg" data-category="transition">
<span>
<a class="fancybox" href="fotos/full/full03.png" data-fancybox-group="gallery">
<img src="fotos/thumbs/thumb03.png"/>
</a>
</span>
</div>
JavaScript:
<script type="text/javascript">
var width = 0;
$('.cesco1 img').each(function() {
width += $(this).outerWidth( true );
alert(width);
});
$('.cesco1').css('width', width + 0);
</script>
I'm using the same JavaScript for height as well.
The first thumb width is 300px and the second is 200px.
So I get the a 500px width div.it adds up.
I would like to set the width for each DIV at the time.
I'm a newbie, sorry if it's dumb.
Use the .closest() method to access the DIV that contains the image.
$('.cesco1 img').each(function() {
width += $(this).outerWidth( true );
alert(width);
$(this).closest('.cesco1').css('width', width);
});
If the image is always an immediate child of the DIV, you can use the more efficient selector .cesco1 > img and .parent() instead of .closest('.cesco1').
Try this:
<script type="text/javascript">
$(function(){
$('.cesco1').each(function() {
var width = 0;
$(this).children('img').each(function(){
width += $(this).outerWidth( true ); // reset the width
});
$(this).css('width', width);
});
});
</script>