how do I move the image to half the div? - javascript

Ok so I have this Page and as you can see if you scroll down below the map you will see the logo and header for "Barinos Market"...if you click on the read more link the text expands ..which is exactly what i want. The problem I am trying to resolve is when the user clicks read more I need the barinos market image on the left to scroll down with the text and be half way down the div....here is the code...
<div id="barino_info">
<div id="barino_header"></div>
<div class="info_body">
<div id="barino_left_body">
</div>
<div class="right_body">
<div class="right_body_outer">
<ul class="play_navigation">
<li class="active">The Story</li>
<li>The Video</li>
<li><a onclick="show_gallery('barino');" href="#" class="navlinks barino_gallery_bottom" ref="bottom_barino_gallery">The Gallery</a></li>
<li>The Equipment</li>
</ul>
<div class="right_body_inner tab_content">
Barino's Market is an ......
The image is a background url on #barino_left_body
Any ideas on a strategy on how to achieve this..i was thinking of maybe jquery offset or something like that
I am using this plugin to do the expanding...here is my jquery to do it
$('.right_body_inner, .doughboy_right_body_inner, .haw_right_body_inner, .river_right_body_inner, .vib_right_body_inner, .barino_equipment, .dough_equipment, .river_equipment, .haw_equipment, .vib_equipment').expander({
slicePoint: 355, // default is 100
expandEffect: 'fadeIn',
expandSpeed: '8', // speed in milliseconds of the animation effect for expanding the text
userCollapseText: '(less..)' // default is '[collapse expanded text]'
});

After the "read more" is clicked, you can calculate the height of the surrounding <div> and add (or animate) the top margin of #barino_left_body to half the surrounding <div> height plus half the height of #barino_left_body.
$('.read-more').click(function(event){
var parentHeight = $(this).parents('.info_body').height();
var imageHeight = $('#barino_left_body').height();
var centerImage = (parentHeight-imageHeight)/2;
$('#barino_left_body').animate({"marginTop": centerImage}, 250);
event.preventDefault();
});
P.S. I'm curious as to why you made it a background image.

Try this code on for size, I might get some references wrong with those parent/prev, if you can't figure it out, post the errors.
JS
$('.right_body_inner, .doughboy_right_body_inner, .haw_right_body_inner, .river_right_body_inner, .vib_right_body_inner, .barino_equipment, .dough_equipment, .river_equipment, .haw_equipment, .vib_equipment').expander({
slicePoint: 355, // default is 100
expandEffect: 'fadeIn',
expandSpeed: '8', // speed in milliseconds of the animation effect for expanding the text
userCollapseText: '(less..)', // default is '[collapse expanded text]',
afterExpand: function($thisElement) {
$thisElement.parent().prev().height($thisElement.height())
},
onCollapse: function($thisElement, byUser) {
$thisElement.parent().prev().css('height','');
}
});
I add 2 callbacks basically.
The first one afterExpand sets the height to the height of the expanded div. The CSS you have already sets the position of the image properly.
The second one onCollapse sets removes my previous definition for height, returning to the div to it's CSS definition and bringing the layout back to it's original design.
Used .css() in the second function just so you can see the different approaches to setting height, you can decide between the two.

I'm not sure if you can move a background image with jQuery. I think you cannot. However you do can move a normal image, so that's what I would do.
I would select the image through jquery and then use animate() to set the new position of it. css() would work too. The top will be ((the total size of the div) - (the size of the image))/2
var h1 = $("#barino_left_body").height();
var h2 = $("#myimage").height();
var position = (h1-h2)/2;
$("#myimage").animate({"top":position},250);
You do this when expanding the text.
This should do the trick. But if you really need to use the image as background I don't know your answer. :(
I hope it helped.

Related

JavaScript replace content by sliding more content in without losing height

So i currently have a setup that allows for a button to be pressed, the current content is hidden, and more content scrolls in from the right. However my problem is that for the briefest of moments the footer, which sits below the content, moves up before moving back down below the content just loaded in.
This fiddle best illustrates the problem: http://jsfiddle.net/9Dubr/766/
My Code:
$('#rightButton').click(function(){
var toLoad = 'page.html #content';
$('#content').hide("fast", loadContent);
function loadContent() {
$('#content').load(toLoad,'',showNewContent);
}
function showNewContent() {
$('#content').show("slide", {direction: "right" }, 1000 );
}
return false;
});
Thanks for your help
The fiddle doesn't seem to work for me, but it sounds to me like your footer is simply trying to occupy the empty space left behind by the previous content. In which case, you can try giving the parent container of your content a fixed height just before hiding it. You can then unset the height once the next content is loaded, that way there isn't really any empty space for the footer to try and occupy.
Untested code:
$('#content').parent().css({height: $('#content').height()});
$('#content').hide("fast", loadContent);
...
function showNewContent() {
$('#content').show("slide", {direction: "right", complete: function() {
$('#content').parent().css({height: ''});
} }, 1000 );
}
If you'd like to make it more visually appealing, you can animate the height so the footer will get pushed/pulled more smoothly.
Hope this helps.
It may be because the page is allowed to resize the lengths of divs. A few suggestions that might work is:
Quick Fixes:
Hiding your footer until the person is at the bottom of the screen
Making your footer a static size and maybe even making the footer position final.
Adding a fixed size container around your objects as mentioned in a previous comment.
This way atleast it won;t bother the footer in any way.
Fix without changing footer:
It is obviously a load problem when the button itself is pressed. Because as I understand from your code when the button is pressed and then you are adding this new content to your page right before using the slide effect.
I would suggest you preload the content when first opening the page and then just use the .slide() when the button is pressed.

jQuery: Adjust the height of the overall container dynamically

http://dev.clickymedia.co.uk/rdicoursefinder/course-finder/
If you view the link, you will see that there are a number of filters acting at the same time. The overall height of the box is adjusted dependant on the amount of items showing by the filter plugin.
We then have a popup box when you click on each item. This also has a varying height, and pushes the next items down. We need the height of the container to adjust, taking into account the original height of the container before the item is clicked, and the popup box's height.
I have written some jQuery to do this, however, as you will see, each time it is adding the height of the blue popup box to the overall height again and again when you click the item to show the box, instead of once one is showing, adjusting the height of the container accordingly.
The jQuery I have used for the height is below:
var originalHeight = $('#filter-results').height();
var thisHeight = 70 + $('.resultsShowing').height();
var overallHeight = originalHeight + thisHeight;
$('#filter-results').height(overallHeight);
Any help would be much appreciated!
This line
var originalHeight = $('#filter-results').height();
will need to be outside your click() event, and should be done only once on $(document).ready()
This is because you're using the new height every time you're generating more height.
You need to move the originalHeight to one specific point, the first time you need it, and leave it alone there. Then, only thisHeight needs to get updated, and the result height should bet the former (static) + the latter (dynamic).
Remove this first of all
window.setInterval(function(){
///etc
}), 1);
It's killing my machine in Chrome.
if you want to know the blue element height before you display it, you should create it in memory:
var blueBox = $('<div />').html( ... );
var height = blueBox.height();
now you can add this height to the overall container and display blue element:
blueBox.appendTo('.overall');
ps. sorry about pseudo code

Scrolling div within bounds

I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?
You change the z-index using css:
div.class {
z-index: 60;
}
You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.
You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}

image gallery /slide with zoom

I wanted to do something similar to this.
In this case when the user click in the image, this images is showed with 100% of the browser height, and the user can go to the next/previous image. When the user clicks again the image is showed in a bigger size(may be in the real size) and the user can go up and down in the image, but with out scroll, just moving the mouse.
What I want to do is when the user click the first time in the image go right to the last step: The biggest image with up and down synchronized with the mouse movement, and the possibility to go to the next image. In other words a mix with the features of the first and the second step of the original case.
Where I can see a tutorial, or a demo?? or how can I do the this??
Thanks
Basically, there are three parts to what you want to do.
Clicking on the image will show the image with respect to browser height
You can go to the next image while you are in this mode
Click on that image again will go into a supersize mode where your mouse position dictates what part of the image you are looking at
I'm not going to write a whole fiddle to demonstrate this because it's a decent amount of work but I can tell you the basic ideas.
With #1, when you click on the image, you will create a new div with a z-index of some high number (like 9999). The position would be fixed, and you will create
$(window).resize(function() {
var windowheight = $(window).height();
$("#imgdiv").css("height", windowheight);
});
Which will resize the image if the user decides to resize your window, this way it's always taking up the full height of your browser.
With #2, the arrows just create a new img tag. And the idea is something like
function loadnew() {
// create the new image
var newimg = "<img id='newimg'></img>"
$("#imgcontainer").append(newimg);
// make sure it has the same classes as the current img
// so that it's in the same position with an higher z-index
// then load the image
$("#newimg").addClass( "class1 class2" );
$("#newimg").css( "z-index", "+=1" );
$("#newimg").css( "opacity", 0 );
$("#newimg").attr("src", "url/to/img");
// animate the thing and then replace the src of the old one with this new one
$("#newimg").animate( {
opacity: 1;
}, 1000, function() {
$(oldimg).attr("src", $("#newimg").attr("src"));
});
}
Now with #3, you will size the image with respect to the width. The div fixed positioned. So again, you need a
$(window).resize(function() {
var windowwidth= $(window).width();
$("#imgdiv").css("width", windowwidth);
});
to make sure it's always taking up the whole screen. And for the mouse movement, you need to have a mousemove event handler
$("#superimgdiv").mousemove( function(e) {
// need to tell where the mouse is with respect to the window
var height = $(window).height();
var mouseY = e.pageY;
var relativepct = mouseY/height;
// change the position relative to the mouse and the full image height
var imgheight = $("superimg").height();
$("superimgdiv").css("top", -1*relativepct*imgheight);
});
And that's it. Of course I'm leaving out a bunch of details, but this is the general idea. Hopefully this can get you started. Good luck.

image slide gallery with jquery

I'm try to create a sliding banner with jquery here.
I tried to code in this manner
.post(this,{ajax : 1}, function(data){
var oldImage = $('div.banner > img');
var newImage = $(data).insertAfter(oldImage).css('position','absolute').css('left',800);
newImage.load(function(){
oldImage.animate({left:-800},'medium',function(){}); newImage.animate({left:0},'medium',function(){
oldImage.remove();
});
});
});
return false;
However, the transition between the 2 images is not smooth, and there seem to have
a little gap between the 2 image when the old image slide away, and the new image
slide in. I assume is because there is a lag between the execution of image.
Do you guys have any tips on how I can better do this?
What you have should work alright. The perceived lag is probably the image not actually being 800px wide. Since you're animating 800px left and 800px right for the new/old image, if they aren't actually that wide, there'll be a gap in there.
You can either use the slide effect for this, or adjust the left amounts to be the correct size for the images, e.g. via .width().
For the gap "lag" and the width, you can see what I mean here. There's a large gap, but only because the left property of 800px is larger than the 275px image in the example.

Categories

Resources