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.
Related
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 require assistance on hit detection in javascript. I have tried many scripts but they all do not work.
My current code:
function collision($div1, $div2) {
// nothing, this is where my collision detection needs to be
}
My divs:
<style>
/* CSS */
/* character */
#character {
position:absolute;
}
/* masses */
#bluemass {
position:absolute;
}
</style>
<center>
<div class="bluemass" id="bluemass">
<img src='./pic/bluemass.png' height='35' width='35' />
</div> </center>
<div class="character" id="character">
<img src="./pic/char.png" alt="info" height="90" width="90" />
<br>
<?
$v = $_GET["username"];
echo "<div style ='font:21px/21px Courier,tahoma,sans-serif;'>$v</div>";
?>
<?
echo "<div style ='font:21px/21px Courier,tahoma,sans-serif;'>$mass</div>";
?>
</div>
How would I detect if the div character collides/overlaps with the div bluemass? Thanks in advance, this is my testing site.
You can start with something like:
function collision($div1, $div2) {
//
var rect1={
"top":$div1.offset().top,
"left":$div1.offset().left,
"width":$div1.offset().width(),
"height":$div1.offset().height()
};
var rect2={
"top":$div2.offset().top,
"left":$div2.offset().left,
"width":$div2.offset().width(),
"height":$div2.offset().height()
};
// Standard rect-overlap checking code here
}
I wouldn't call this a complete solution because I know you need to additionally account for certain other things, like possibly page margins/padding/etc, but hopefully this will get you started.
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.
Many time i have found a lot of solution on this pages and thanks for every help! I hope i can found one more new! :-)
I need change logo in header,
Now, when js work make a new class, with css I make a new layout but the logo is in php file...
So: when the page scroll the header change, but i can not change the logo in the header because is in php and with the css i cann't found a solution
This is the php code:
<!-- header -->
<header class="header clear" role="banner">
<!-- logo -->
<div class="logo">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">
</a>
</div>
<!-- /logo -->
this is the js (i don't know if need to know)
$(document).ready (function () {
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 100) {
$('.header').addClass('cambio_header')
}else {
$('.header').removeClass('cambio_header')
}
})
})
Some one have idea how write the php?
(the web site is make whit Wordpress)
Thanks so much!
You could change the image in your javascript:
$(document).ready (function () {
var logo-top = '/url/to/logo.jpg';
var logo-scroll = 'url/to/logo-scroll.jpg';
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 100) {
$('.header').addClass('cambio_header').find('img.logo-img').attr('src', logo-scroll);
}else {
$('.header').removeClass('cambio_header').find('img.logo-img').attr('src', logo-top);
}
});
});
Or you could add both logos in the php file, and hide/show them with a css rule
<div class="logo">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="Logo" class="logo-img">
<img src="<?php echo get_template_directory_uri();?>/img/logo-scroll.png" alt="Logo" class="logo-img scroll">
</a>
</div>
.header .logo-img.scroll{
display:none;
}
.header.cambio_header .logo-img{
display:none;
}
.header.cambio_header .logo-img.scroll{
display:block;
}
I think that better way could be to place logo in CSS and in PHP will be only container for this logo. Then, when you will change the CSS, logo will be also changed.
<div id="logo-container"></div>
#logo-container {
width: logo_width;
height: logo-height;
background: url('path/ot/logo') cover;
}
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);"