We Keep Coding

JQuery not resizing div on window resize

So I have a JQuery function that is built to make column heights the same. It checks the screen size, and if it's on a medium sized device or bigger, it will resize the column to the same heights. This part of the function works great. However, if it gets resized to mobile size (or anything under 1025px) the height does not reset to the original size and stays at the increased size. If it starts on a small screen, it will appear correctly until it is resized to a large screen and then resized to a small screen again (then the same problem as above occurs).
Here is the code!
$(document).ready(function(){
matchColHeight('.intro-pic', '.intro-desc-container');
$(window).resize(function(){
matchColHeight('.intro-pic', '.intro-desc-container');
});
});
function matchColHeight(tallColumn, shortColumn){
shortOriginalHeight = $(shortColumn).height();
if (window.matchMedia('(min-width: 1025px)').matches) {
height = $(tallColumn).height();
$(shortColumn).css({
'height': height + 'px'
});
}
else{
$(shortColumn).css({
'height': shortOriginalHeight + 'px'
});
}
}
Note: I've also tried using the below function and it had the same issues:
function matchColHeight(tallColumn, shortColumn){
shortOriginalHeight = $(shortColumn).height();
screenSize = $(window).width();
if (screenSize > 1025){
height = $(tallColumn).height();
$(shortColumn).css({
'height': height + 'px'
});
}
else{
$(shortColumn).css({
'height': shortOriginalHeight + 'px'
});
}
}
Thanks in advance!

Ended up resolving my issue by changing the function to the following:
function matchColHeight(tallColumn, shortColumn){
if (window.matchMedia('(min-width: 40em)').matches) {
height = $(tallColumn).height();
$(shortColumn).css({
'height': height + 'px'
});
}
else{
$(shortColumn).removeAttr('style');
}
}
Instead of storing the original height and reverting back to it, I just removed the modified height when it isn't needed.

Parallax Effect Adjustment for individual DIVs

I created a parallax effect, as it was described here:
Is there a way to make parallax work within a DIV
This method works pretty well, but I have a problem with it. My page is basically composed of alternating DIVs. White DIVs with text and DIVs with a picture in it, which moves with the parallax effect. This works pretty well, unless, that I have to manually adjust the position of each picture DIV. Here is the code from the header:
<script type="text/javascript">
$(window).scroll(function () {
parallax();
});
function parallax() {
var ev = {
scrollTop: document.body.scrollTop || document.documentElement.scrollTop
};
ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
render(ev);
}
function render(ev) {
var t = ev.scrollTop;
var y = Math.round(t * 2/3) - 100;
$('#ff-section01').css('background-position', 'center ' + y + 'px');
$('#ff-section03').css('background-position', 'center ' + (y - 1000) + 'px');
$('#ff-section05').css('background-position', 'center ' + (y - 1700) + 'px');
$('#ff-section07').css('background-position', 'center ' + (y - 2750) + 'px');
}
</script>
As you can see, each section got another vertical position in the background-position value at the bottom. 0, 1000, 1700, 2750. This works well so far, but as soon as the intermediate Text DIVs change in height, this method doesn't work, as the value is always calculated from the top of the page. The HTML of one section looks like this:
<div class="ff-section03" id="ff-section03"></div>
So very simple, and combined with the CSS:
.ff-section03 {
width: 100%; height: 550px;
position: relative;
background: url('system/urbansolutions.jpg') center -300px no-repeat;
}
Also very simple. What can I do, that the calculations are not dependent of the page height? I basically don't want to subtract a superficial number from the background-position, so that the parallax effect works, not dependent of the location on the website.
Thanks a lot!
Sebastian

Magnify image using only one image

I'm trying to achieve a very simple objective which is to magnify an image. After some searching on the net, it seems like most of the js scripts out there required two image ( one for thumbnail size and another one for zoom-ed size). I'm wondering if I am only having one image, is it still possible to achieve the zoom effect?
I wish to achieve something like this link jQuery ImageZoom with only one image, of course, in a free edition.

I've recently wrote Magnifier.js, if you don't provide the large image the thumbnail will be used instead

You can use one image to zoom with Magic Zoom - you just reference the same large image in both the src and the href and you use width and height to force the img smaller to the size you want.
For example:
<img src="your-big-image.jpg" width="300" height="150">
This approach is fine, though it isn't recommended because it creates a delay while the large image downloads.
You can use the trial version of Magic Zoom free of charge if you don't mind the message shown in the corner.

there is not any complex codes to be written for this purpose
you only need consider these steps
1.create magnifier glass element and set the image that you want to be magnified as background image then set scale(1.5) or 2 for that(you should consider that your glass element can be say 50px in 50px while your background image is 500px in 500px that is help us do the trick)
2.when your mouse pointer come in picture box the magnifier glass should pursue the pointer thats where jquery come in
3.you should get offset of the pointer then change the background-position of
the magnifier glass at same time.
jquery code would be something like this
$(".mpboxpic").mouseenter(function () {
$("#zoombox").css({ "background": "url('" + $(this).attr("src") + "') no-repeat" })
//با این کد تصویر پس زمینه دارای سایز یکسانی خواهد شد
$("#zoombox").css({ "background-size": $(this).width() + "px " + $(this).height() + "px" })
}).mouseleave(function () {
$("#zoombox").hide()
var tg = $("#zoombox").css("background-image")
px = 0;
py = 0;
})
$(".mpboxpic").mousemove(function (p) {
if (px==0) {
$("#zoombox").fadeIn(200)
}
//با کد های زیر مرکز دایره دقیقا در زیر موس قرار میگیرد
px = p.pageX-$("#zoombox").height()/2
py = p.pageY - $("#zoombox").width() / 2
$("#zoombox").css({ "top": py + "px", "left": px + "px", "position": "absolute" });
var my = p.pageY - ($(this).offset().top + $("#zoombox").height() / 4)
var mx = p.pageX - ($(this).offset().left + $("#zoombox").width() / 4)
var coord = "-" + mx + "px " + " -" + my + "px"
$("#zoombox").css({"background-position":coord})
})
and css
#zoombox{
display:none;
position:absolute;
border:5px solid rgba(248, 243, 243, 0.72);
top:25%;
left:25%;
z-index:5;
height:50px;
width:50px;
border-radius:100px;
pointer-events:none;
transform:scale(2);
}
that mpboxpic is your main picture and zoombox is your html tag as magnifier glass
<div id="zoombox">
</div>

jQuery.ScrollTo - how to make bg to scroll slower than the rest?

i'm new to coding , and to this site, i hope you'll help me! so i'm making horizontal website, i want to add scrolling background, that scrolls with other elements clicked, but slower
like for example http://hotdot.pro/en/ . How do i do that, where do i put code lines?
or maybe i could use better plugin?
Thanks for any help!
!!i'm putting script code here just because website says that my post is not informative enough. sorry
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
or
where?

jQuery Parallax Plugin is probably what you are looking for.
See demo here: http://ianlunn.co.uk/plugins/jquery-parallax/
Source code and documentation here: https://github.com/IanLunn/jQuery-Parallax
"or maybe i could use better plugin" - rule of thumb is: whenever it is possible to use already written code (and not to write your own), you should do so. Except the cases, when writing a code is an academic exercise.

How to Scroll layers with multiple rate on website

I found this website with an effect that I would like to replicate. To see what I am talking about go here:
http://www.rowtothepole.com/
When scrolling through the webpage you can see that the iceberg layer scrolls at a different rate as the text box on top of it. I would like to know how they are doing this.

In their http://www.rowtothepole.com/release/includes/js/parallax.js
there are code to shift the body's background image and an outer div's background image, which are for the icebergs and for the clouds:
Event.observe(window, "scroll", function() {
var offset = document.viewport.getScrollOffsets();
$(document.body).setStyle({
'backgroundPosition': 'center -' + (offset[1] / px_scroll_amt) + 'px'
});
if (xhr_support) {
$("outer").setStyle({
'backgroundPosition': 'center -' + (offset[1] / (px_scroll_amt / 3)) + 'px'
});
}
});