I'm in the process of designing this site http://www.parisgaa.org/parisgaels and have a problem.
The image slider on the homepage messes up sometimes. Most of the time it works and looks fine, but other times its positioning seems to get messed up and it appears underneath the content that should be below it (i.e. with that content overlapping the image). You should be able to replicate this in Chrome - just refresh a couple of times.
I'd appreciate any help at all.
You are going to have to edit a line in the slider file
js/slider.js
.wrap('<div class="bx-window" style="width:'+childrenMaxWidth+'px; height:'+wrapperHeight+'px; position:relative; overflow:hidden;"></div>')
.css({
height: '999999px',
position: 'relative',
top: '-'+(origTop)+'px'
});
Within his you will need to define a height that works for your images like
.wrap('<div class="bx-window" style="width:'+childrenMaxWidth+'px; height:400px; position:relative; overflow:hidden;"></div>')
.css({
height: '999999px',
position: 'relative',
top: '-'+(origTop)+'px'
});
The problem isn't your implementation rather the script you are using. You could try using a different script but hopefully this adjustment will do the trick for you!
It looks like it might be a problem with whatever jQuery plugin you're using for the image slider. The height of the .bx-window element isn't being evaluated correctly for some reason (for me it's in the ballpark of 20-30px instead of 420px). I would try out a different slider (there's ton's of jQuery image sliders out there, just google it), but if that's not an option, it would probably be fairly trivial to fix it yourself in their code. Good luck!
Try making the image slider position relative:
style = "position:relative;"
Related
So I'm trying to have a div slide in on pageload. It has an id of "#crazyslide" and is absolutely positioned to the right -800px in the css.
So I used this code in the head:
<script type="text/javascript">
$(document).ready(function() {
$("#crazyslide").animate( { right: '0px' }, 2000 );
});
</script>
Shouldn't this work?
No, you can't hide it off the edge of the screen. Devices like mobiles will let people scroll past the edge and it will look bad.
I recommend using this example of hiding and showing it with javascript.
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
Yes it should. I just tested with your exact code, and it worked fine. There are ways to prevent a parent element from showing scroll bars for offscreen content.
Check to be sure your div is properly named: (console.log($("#crazyslide"));
Be sure a parent element's css isn't preventing the div from being
shown at all, such as a strange body width or something.
Be sure the div has content, and a set width.
*This turned out to be a load order issue where jquery was not yet defined when the animation code was called.
I'm working with a jquery and I have this image that is the main problem. I googled it but came up with nothing. Here is my content for example.
And when the guy(in the picture above) is being click I want it to slide to the left side and will looked like this. Please see image below.
So what I'm thinking is
1. using addClass and removeClass using jquery or
2. just use jquery .slide or toggle function?
If there's a solution as such how could it be done? Since I only know is using addClass tho. And also what I'm planning is when the image exceeds 800px then the girl(in the image) will be send to back of the guy image.
What you are trying to do is create a mask around the guy. The scope of this question is beyond masking. Most methods of masking don't have large browser support at this moment so posting more on this would be disingenuous. But worth googling otherwise you can use the transform property to move the picture to the left. But you won't get the results you are looking for..
But there is the option of masking the picture in Photoshop and saving it as a PNG. And then utilizing the translate CSS method to move the image to left. This is your best option. But the details of either of these methods are out of scope for this question.
Cut this guy from image and put in another div at needed position. Put blue box between those two images and use slide function. You can cut the guy from his head i think.
Basically you need to have an html structure like this:
<div id='container'>
<div id='couple'></div>
<div id='mask'></div>
</div>
Initially in your css:
#mask {
display: none;
}
And, of course, you have to align horizzontally this two div.
Your jquery will have a behavior like this:
$('#couple').on('click', slide);
var slide = function() {
$target = $('#container');
$mask = $('#mask');
$mask.fadeIn();
$target.animate({
left: "+=50"
}, 500, function() {
/* callback on end*/
});
}
For complete documentation of animate check api jquery.
The bunch of code does seem to work, only thing is that the transition is not very smooth. Any Idea how to tweak up the code to make the effect more smooth? and also, when the image enlarges, all the content below and beside the image seems to be pushed away to make room for the enlargement, any idea how I can stop this and just make the image overlap the content around it on enlargement? Also, instead of inserting that code for each image every time I upload a new image and want that effect, how do I make the javascript code automatically apply to the new image instead of manually applying the javascript to it each time? Finally, how do I use this on videos/widgets instead of just images? (I’m using Dreamweaver CS5).
$("img").each(function() {
$.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
$(this).stop().animate({ height: $.data(this,'size').height*1.2,
width: $.data(this,'size').width*1.2 });
}, function() {
$(this).stop().animate({ height: $.data(this,'size').height,
width: $.data(this,'size').width });
});
If you want the image to overlap any surrounding elements upon resize you will have to play with the CSS to position the element either relative, absolute, or fixed, then set the z-index of the image to a value higher than the surrounding elements.
Sounds maybe like you should look into a jQuery Lightbox plugin. As for the specific issue with the enlarged image pushing your content around, it needs to be removed from the document flow (using position attribute)... but that's just the tip of an iceberg. There's a lot of moving parts to the task you're trying to achieve, that's why using an existing javascript plugin would be best - IMO, of course.
You might want to check out http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ and also http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts .
I realize there's already been several questions like this, but I think my case is a little different.
I have an div that I am absolutely positioning and floating on top of the page, and I'm setting an overlay behind it to grey out the rest of the page. I have it working okay until you scroll up and down the page.
The problem is, when the div appears, it is still populating with ajax data. So the height and width of the bg overlay has already been set, but once all the data loads into the floating div, it sometimes pushing the page down so the height increases. So, I can't calculate the height and width of the window or document because the floating div might not be fully loaded yet, and once it does, it pushes the screen down further, causing the bg overlay to not cover the whole page.
So for example, in the code it's going something like:
loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());
}
I verified this by adding an alert, so that by the time I've clicked the alert, the bg overlay was able to calculate the true page size, and it looks fine.
Sorry, if this sounds confusing but hopefully you get what I'm trying to achieve. I'm assuming this isn't too difficult, but I haven't been able to figure it out.
Any help would be appreciated, I'm using jquery.
Thanks
Overlay ;)
** update, setting position of all corners to 0 instead of using width/height 100% **
$("<div/>")
.css({
position:"fixed", // ze trick
background:"#000",
opacity:.5,
top:0,
bottom: 0,
left:0,
right: 0,
zIndex: 2999 // everything you want on top, gets higher z-index
})
.appendTo("body");
Or put the above css settings in a css stylesheet (opacity needs cross browser hacks).
$("#dark-overlay").show();
Here is the solution :
JQuery Show Loading Plugin
Don't try to invent the wheel !!!
Here is a demo :
Loading Demo
Now you just need to create a main container div for your page and just ask this simple plugin to do it for you.
Maybe you want to read the plugin source and find how it works...
So I know all about the problems with vertical-align: middle; and the different methods people have used to vertical align elements in CSS. But I haven't found one that works for what I need it to work for.
Basically my page has just one <div> on it, which I want positioned in the center of the page, both horizontally and vertically. Obviously the horizontal part is easy, but I'm getting hung up on the vertical part. My problem is that the height of the <div> is unknown; the content changes, so I can't specify a height for it.
Anyone have any tips for me? I'm willing to use JavaScript if necessary. Thanks!
Long story short, you need two divs to get CSS-only vertical centering.
With Javascript, you can do it with a single div, though.
As you said you don't mind using JS, here it is... (I generally never fallback to a JS solution, but if you're cool with it, then so am I)
If your CSS is
#element {
position: absolute;
top: 50%;
}
Then you could use my friend jQuery
$(document).ready(function() {
var height = $('#element').height();
$('#element').css({marginTop: '-' + (height / 2) + 'px'})
{);
Note, this is untested, but should be a start. Hopefully the height / 2 will work as expected, if not, try using parseInt();