I have medium and large images on a page and when my social links show up over these images I want to fade out the social links and fade back in when they are off the images. The amount of medium and large images will vary per page. You can see it working on a Medium.com post.
https://blog.fullstory.com/assess-customer-frustration-with-fullstory-rage-grade-497cf7b7aba1
The code below works just for the large images. When I try and add in medium images it doesn't work. My social links are fixed about 600px from the top. Thanks in advance!
var large_images = $('img[src*="#large"]'),
medium_images = $('img[src*="#medium"]'),
social = $('.social-share'),
$window = $(window),
showSocial = function() {
if (isHidden) {
isHidden = false;
social.fadeIn(200);
}
},
hideSocial = function() {
if (!isHidden) {
isHidden = true;
social.fadeOut(200);
}
},
isHidden = true,
scrollTop;
if (large_images.length) {
$window.on('scroll', function() {
var flag = false;
scrollTop = $window.scrollTop() + 400;
$.each(large_images, function(i, large_image) {
var $large_image = $(large_image),
offset = $large_image.offset().top;
if (offset < scrollTop && offset + $large_image.height() > scrollTop) {
flag = true;
return false;
}
});
if (flag) {
hideSocial();
} else {
showSocial();
}
});
}
Since you're only looping through #large images, you just need to also loop through #medium images. The logic you're using for #large should work fine with #medium images, assuming the only difference is the size.
You can replace your large_images, medium_images vars with all_images = $('img[src*="#large"],img[src*="#medium"]') and then change the other 2 references to large_images in your jquery to to all_images
Related
I'm working on a site for my friend, where the fixed footer should have a margin of the size of the big picture (that's used as a menu). I also want the content div to have the same margin. But for some reason when I first load the page, content div and the footer don't have any margin at all. When I re-load the page, everything works perfectly... But I want it to work on the initial loading of the page. Here's my code:
$(document).ready(function(){
var mainPicWidth = $('#navimg').width();
var mainPicWidth2 = mainPicWidth - 10;
$('#footer').css('margin-left', mainPicWidth2)
$('#content').css('margin-left', mainPicWidth)
var wholePageWidth = $('#content').width() + 15;
$('#footer').css('width', wholePageWidth)
I also have the follow part as means of making the site responsive. Could this conflict with my previous code somehow?
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* false to get page from cache */
}, 100);
});
if ($(window).width() <= 1100) {
$('#footer').css('width', "100%")
$('#footer').css('margin-left', "0")
$('#content').css('margin-left', "0")
});
}
if ($(document.body).height() != $("*").height()) {
$('#footer').css('position', 'fixed')
$('#footer').css('bottom', '0')
} else {
$('#footer').css('position', 'relative')
}
I am creating a website where when you scroll into an area, a gif appears. It only loops once; if you continue scrolling, it changes to another gif (which plays only once, too) If you scroll back, it changes to the first gif, restarting it so it can play again.
However, when the changing occurs, there is a blink that I do not want. Here is the fiddle. And here is the javascript:
$(window).ready(function() {
var v = 0;
$(window).on("scroll", function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 100 && scrollTop < 200) {
if ($('#container').attr('data-img') != 'http://i.imgur.com/Hhmt8.gif') {
++v;
$('#container').attr('data-img', 'http://i.imgur.com/Hhmt8.gif');
$('#container').css('background-image', 'url(http://i.imgur.com/Hhmt8.gif?v=' + v + ')');
}
} else if (scrollTop >= 200) {
if ($('#container').attr('data-img') != 'http://i.imgur.com/TUAwA.gif') {
++v;
$('#container').attr('data-img', 'http://i.imgur.com/TUAwA.gif');
$('#container').css('background-image', 'url(http://i.imgur.com/TUAwA.gif?v=' + v + ')');
}
} else {
$('.imageHolder').css('background', 'blue');
}
});
});
I tried removing the ?v='+v+' from the background-image but then it won't load everytime it changes... Is there a way to keep the functioning as it is without the blinking?
Preload the second image, the blinking comes from the remote fetching time of the image. If you had preloaded the same image at any point on this website before, the new image will be loaded directly from the browser's cache and will replace the previous one without any visible transition.
$(window).ready(function () {
var v = 0;
var image = new Image();
image.src = 'http://i.imgur.com/TUAwA.gif';
$(window).on("scroll", function () {
/* ... */
}
}
I'm having a issue with the website I'm creating. The truck image at the top is changing on scroll down, but while scrolling and changing the images there appears black space.
1) Images are 1400x600 JPG's, around 70kb each. I didn't lower the resolution because if someone accesses it from a 1920x1080 screen, the truck will be blurry and distorted.
2) The website is still not done, so it's on a free hosting now (000webhost.com), may this cause the images to load slower and the black space to appear?
Here is the website: http://denea.comeze.com/
Here's the script that changes the images, just in case:
var numberofscroll = 0;
var lastScrollTop = 0;
$(document).ready(function () {
var numberofscroll = 1;
var lastScrollTop = 0;
var totalImages = 4;
var dontHandle = false;
$("#home").scroll(function () {
if (dontHandle) return; // Debounce this function.
dontHandle = true;
var scrollTop = $(this).scrollTop();
(scrollTop > lastScrollTop) ? numberofscroll++ : numberofscroll--;
if (numberofscroll > totalImages) numberofscroll = totalImages;
else if (numberofscroll < 1) numberofscroll = 1;
change_background(numberofscroll);
lastScrollTop = scrollTop;
window.setTimeout(function() {
dontHandle = false;
}, 150); // Debounce!--let this handler run once every 400 milliseconds.
});
function change_background(num) {
$("#home").css("backgroundImage", "url('images/movie_" + num + ".jpg')");
};
});
Your Problem has to do with loading time.
Instead of loading the image, when the scroll begins, you can have the images you need already loaded in your page, that way you do not have any loading times, when swapping.
In HTML you have something like this:
<div class="headimg_container>
<img id="image_1" class="headimg" style="display: none" src=".......">
<img id="image_2" class="headimg" style="display: none" src=".......">
<img id="image_3" class="headimg" style="display:block" src"......">
</div>
I used headimg_container as a container element. The class should have a definitve height, so when hiding and showing your images, the container does not collapse.
And in JS you can do something like this:
function change_background(num) {
$(".headimg").hide();
$("#image_" + num).show();
};
The result would be smooth, since you can just swap the visibility of the image-tags, without any delay.
Another solution could be to use sprites, but with a few heavy images, you might want to stick with loading them separately as I suggested above.
Hope that helps!
I'm playing around with pure JavaScript, so I created a small fade in/out object, to adjust images opacity onmouseover and onmouseout. Fading works fine when the mouseover and mouseout actions are precise:
Start moving the cursor from the white background
Hover over an image
Hover back over the white background
The problem is, as soon as I start to move the mouse "naturally" from one image to another, the fading (or rather the script itself) freezes.
I'm not sure whether it's a animation-speed problem, or there's something I'm missing in the implementation.
If someone has the time to take a look, I would appreciate a peer check, so I can crack the issue and learn new stuff.
Here's a fiddle: http://jsfiddle.net/6bd3xepe/
Thanks!
As I see it, you have one INTERVAL for you FADER, you need one for each IMG.
My jsfiddle fixes this. I added an ALT-attribute to each IMG with "dome" content, so as to circumvent the jsfiddle working on non-cat-images .. ignore that part - commented out below.
There are some fundamental things wrong with the design - keeping track of objects & references is key. Usage of "this" & "that" aren't helping in the current implementation (see comments to OP). Also, on another note, the usage of "toFixed(2)" is not really required IMHO and you can shorten "o = o + 0.1" to "o += 0.1".
JS:
var fader = {
target: document.getElementsByTagName('img'),
interval: [],
speed: 25,
default_opacity: 1,
init: function() {
this.bindEvents();
},
// Get element's opacity and increase it up to 1
fadeIn: function(element) {
var element_opacity = this.getOpacity(element),
that = this,
idx = element.getAttribute('data-idx');
console.log("fI: "+idx+" "+element_opacity);
this.default_opacity = element_opacity.toFixed(2);
this.interval[idx] = setInterval(function() {
if (element_opacity.toFixed(2) < 1) {
element_opacity = element_opacity + 0.1;
element.style.opacity = element_opacity.toFixed(2);
} else {
clearInterval(that.interval[idx]);
}
}, that.speed);
},
// Get current opacity and decrease it back to the default one
fadeOut: function(element) {
var element_opacity = this.getOpacity(element),
that = this,
idx = element.getAttribute('data-idx');
console.log("fO: "+idx+" "+element_opacity);
this.interval[idx] = setInterval(function() {
if (element_opacity.toFixed(2) > that.default_opacity) {
element_opacity = element_opacity - 0.1;
element.style.opacity = element_opacity.toFixed(2);
} else {
clearInterval(that.interval[idx]);
element.removeAttribute('style');
}
}, that.speed);
},
// Get opacity of an element using computed styles
getOpacity: function(element) {
var styles = window.getComputedStyle(element),
opacity = parseFloat(styles.getPropertyValue('opacity'));
return opacity;
},
bindEvents: function() {
var that = this, count = 0;
for (var i in this.target) {
// the whole "dome" is just a fsfiddle hack - otherwise it sees 7 images instead of 4!
//if( this.target[i].alt == "dome" ){
console.log("COUNT: "+count);
this.target[i].setAttribute('data-idx',count);
this.target[i].onmouseover = function() {
that.fadeIn(this);
}
this.target[i].onmouseout = function() {
that.fadeOut(this);
}
count++;
//}
}
}
};
fader.init();
How do I auto-detect a screen resolution and change browser zoom with Javascript?
I was thinking of something more like this:
I've got the following code:
#warp with width: 3300% and a mask with width: 100%; and then, each .item has width: 3.030303% — with overflow hidden, otherwise it couldn't work as I want.
My point is: I've done this for at least 1280px wide screens.
What I want is if someone can write code that I could use toswitch the CSS file once viewed on a <1280px screen — them, I could do something like:
.item img { width: 80%; } and then, the result would be the same as "browser zoom out".
If you mean change the native browser zoom triggered by CTRL +/- then this isn't possible. You can adjust CSS properties/apply stylesheets but you cannot affect native browser controls. There are in fact CSS only options here depending on your target audience (and their browser choice) through the use of media queries, a couple of examples here and here. If these are not suitable then you can do various things with JavaScript to detect screen width/height and adjust accordingly.
Auto-detect a screen resolution
See this SO question
change browser zoom with javascript
This is not possible. See this SO question.
This will help to detect browser zoom tested on all browser
<script>
window.utility = function(utility){
utility.screen = {
rtime : new Date(1, 1, 2000, 12,00,00),
timeout : false,
delta : 200
};
utility.getBrowser = function(){
var $b = $.browser;
$.extend(utility.screen,$.browser);
utility.screen.isZoomed = false;
var screen = utility.screen;
screen.zoomf = screen.zoom = 1;
screen.width = window.screen.width;
screen.height = window.screen.height;
if($b.mozilla){ //FOR MOZILLA
screen.isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;
} else {
if($b.chrome){ //FOR CHROME
screen.zoom = (window.outerWidth - 8) / window.innerWidth;
screen.isZoomed = (screen.zoom < .98 || screen.zoom > 1.02)
} else if($b.msie){//FOR IE7,IE8,IE9
var _screen = document.frames.screen;
screen.zoom = ((((_screen.deviceXDPI / _screen.systemXDPI) * 100 + 0.9).toFixed())/100);
screen.isZoomed = (screen.zoom < .98 || screen.zoom > 1.02);
if(screen.isZoomed) screen.zoomf = screen.zoom;
screen.width = window.screen.width*screen.zoomf;
screen.height = window.screen.height*screen.zoomf;
}
}
return utility.screen;
};
window.onresize = function(e){
utility.screen.rtime = new Date();
if (utility.screen.timeout === false) {
utility.screen.timeout = true;
setTimeout(window.resizeend, utility.screen.delta);
}
};
window.resizeend = function() {
if (new Date() - utility.screen.rtime < utility.screen.delta) {
setTimeout(window.resizeend, utility.screen.delta);
} else {
utility.screen.timeout = false;
utility.screen = utility.getBrowser();
if(window.onresizeend) window.onresizeend (utility.screen);
if(utility.onResize) utility.onResize(utility.screen);
}
};
window.onresizeend = function(screen){
if(screen.isZoomed)
$('body').text('zoom is not 100%');
else{
$('body').text('zoom is 100% & browser resolution is'+[screen.width+'X'+screen.height]);
}
};
$(document).ready(function(){
window.onresize();
});
return utility;
}({});
</script>
Demo
RE: Auto-detect a screen resolution and change browser zoom with Javascript?
The question is perfectly possible and is in effect at our website here:
www.noteswithwings.com
JS detects the screen width and zooms out or in a little to fit the content on to the screen.
Further, if the user resizes the window the zoom is triggered.
This actually helps fit content on to tablet sized screens and screens as small as the iphone without adding extra stylesheets or having to detect an OS/ Browser..
var oldZoom = $(window).width();
var windowWidth = $(window).width();
check_window_size(windowWidth,1,bsr,bsr_ver);
$(window).resize(function() {
var windowWidthnow = $(window).width();
check_window_size(windowWidthnow,2,bsr,bsr_ver);
});
function check_window_size(size,init_var,bsr,bsr_ver)
{
/* Develop for resizing page to avoid grey border!
Page layout 1265px wide.
On page resize shift layout to keep central, zoom BG-img to fill screen
Zoom content down for smaller screens by 5% to keep content flow!
*/
//change this var for screen width to work with, in this case our site is built at 1265
var wdth = 1265;
//Change this variable for minimum screen;
var smallest_width=1120;
var varZoom= $(window).width()/wdth;
var s_size = $(window).width();
var scale_smaller;
var center = (s_size-wdth)/2;
var its_ie=false;
if(size<=smallest_width)
{
$("#old_browser").css("width","50%").css({"height":"40px","left": center+"px"});
if(!check_for_object(false,"moved_pages"))
{
if(center<-110)//margin width!
{
if(!its_ie)
$("#scroller").css("zoom",0.95);
$("#footer").css("zoom",0.9).css("left",120+"px");
$(".colmask").css("left",-110+"px");
if(check_for_object(false,"move_menu_loggedin"))
$("#move_menu_loggedin").css("right","110px");
if(check_for_object(false,"login_div"))
$("#login_div").css("left","-80px");
return;
}
$("#move_menu_loggedin").css("left","-"+center+"px");
$("#scroll").css("zoom","normal");
$(".colmask").css("left",center+"px");
}
else
{
/*Only pages that you do not want to move the colmask for!*/
$("#scroller").css("zoom",0.90);//.css("left","-50px");;
$("#footer").css("zoom","normal");
}
}
else
{
if(size>wdth)
$("#background").css("zoom",varZoom);
$("#scroller").css("zoom","normal");
$("#footer").css({"zoom":"normal","left":0});
if(!check_for_object(false,"moved_pages"))
{
$(".colmask").css("left",center+"px");
$(".colmask").css("zoom","normal");
var movelog = -center;
if(check_for_object(false,"move_menu_loggedin"))
$("#move_menu_loggedin").css("right",movelog +"px");
if(check_for_object(false,"login_div"))
$("#login_div").css("left","80px");
}
else
{
$(".colmask").css("zoom","normal");
}
}
}
-- check_window_size(windowWidth,1,bsr,bsr_ver); bsr & bsr_ver are detected using a php class.
-- #old_browser is a div containing information if you have an old web browser.
-- #background is a fixed image 100x100% of the screen.
As you can see we also move a few items which were not in the containing div scope.
Colmask is the containing div for most of the pages content (For us that sits underneath the header which is why we move some items manually)
Hope the code snippet can help someone else achieve this.