Right, this is slightly hard to explain but what I'm after is as follows:
I have a database of posts that will go into an HTML page. Obviously all these posts will be different sizes so the boxes containing them will be different sizes too.
What I'm after is a way to make these boxes all appear to fit nicely in with each other, as in the picture below for example. If the first post is a small one then it will begin a line of small boxes for example. And they won't necessarily all be the same height either. In the picture each post is numbered to show where it comes in the array of posts.
See the illustration I made here:
Is this possible? I'm assuming I'll need some Javascript in there probably, and JQuery is preferable.
Thanks for any and all help.
As you're willing to go with a Javascript solution, I've found that the jQuery Masonry plugin works really well for doing a "best fit" of differently shaped rectangles.
You set it up with markup like:
<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
You then float: left your .items, and attach the Masonry handler to the #container:
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
...
});
});
There's also a no-jQuery version if you're not already using jQuery at all
Related
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.
How can make a dynamic jQuery tooltip with .mousemove, as that when mouse enter on words Tooltip1 Or Tooltip2 Or Tooltip3 show contents same tooltip.
Here is a sample of my html: http://jsfiddle.net/JGx52/4/
<ul>
<li class="style">
<div class="tooltip" style="bottom: 406px; left: 565px; opacity: 0.9; display: none; ">
Simple or Rich A simple call such as $("img[title]").tooltip(); will enable tooltips by taking advantage of the element's title attribute. If you want complex tooltips with images, tables, forms and links that's possible by placing the tooltip element manually next to the trigger element. Configure design, timing and positioning Use CSS to create rounded borders, arrows, gradients or shadows. Big or small, high or low. Use the configuration to tweak pre and post-delays and positioning to your personal needs. Fading, sliding, dynamic Tooltip comes with two built-in effects: toggle, and fade and one separate effect, slide, and you can easily build your own effects. The dynamic plugin will dynamically change the tooltip's position so that it always stays in the viewport. File size: 1.10 Kb This tool has all the features and configuration options you'll possibly need, such as effect and a plugin framework, scripting API and an event model. A smaller codebase is easier to control and results in snappier behaviour. Without gzipping the size is 3.5 Kb.
</div>
ToolTip1</li>
<li class="style">
<div class="tooltip">
jQuery Lint (edge)
</div>
ToolTip2</li>
<li class="style">
<div class="tooltip">
Please read the documentation. For updates please follow our blog, tweets or become a fan.
</div>
ToolTip3</li>
</ul>
i think this is what you are looking for http://jsfiddle.net/jalbertbowdenii/QGTTN/10/
I'm not entirely sure how you want this presented, but with the provided CSS and markup, this works:
$('a.tool_tip').hover(function() {
$(this).prev('.tooltip').show();
}, function() {
$(this).prev('.tooltip').hide();
});
I'd like to create a slide effect using jQuery. I have several div's:
<div id='div_1'>content currently displayed</div>
<div id='div_2' style="display:none">content to be loaded</div>
<div id='div_3' style="display:none">content to be loaded</div>
The idea is that div_2 appears while sliding and "pushing" div_1 out of sight, a little like scrolling a window (horizontal or vertical). I think I can't use actual scrolling because the divs' content is loading via ajax, so I can't position it precisely before it's loaded.
Any idea?
TIA
greg
You mean like this:
$('#div_2').slideDown('slow', function(){
$('#div_1').slideUp('slow');
});
See the working demo here.
Greg, it sounds like you are looking for something like I have done here:
http://jsfiddle.net/2E5Qv/
If so, what you want to do is to contain all of those <div>s inside a parent, and then when you want to slide them, animate the top of each div up the correct number of pixels. The solution I provided above has each <div> more or less set to a fixed height of 20px (via line-height).
The parent <div> acts as a sort of window to show only the current content.
I took what Sarfraz provided and modified it slightly based on what I think you were looking for. For the sake of the demo, I also made it fire on the click event. You can find the working example here: http://jsbin.com/emowu3/3
$('#div_1').click(function(){
$('#div_1').slideUp('slow');
$('#div_2').slideDown('slow');
});
$('#div_2').click(function(){
$('#div_2').slideUp('slow');
$('#div_3').slideDown('slow');
});
$('#div_3').click(function(){
$('#div_3').slideUp('slow');
$('#div_1').slideDown('slow');
});
I need to create a set of CSS/JavaScript tab panels.
However, most the examples I have seen put the navigation in a separate DIV from the content. For example:
http://webfx.eae.net/dhtml/tabpane/tabpane.html
http://www.stilbuero.de/jquery/tabs_3/
Is there an CSS tab example where each tab navigation item is in the same div as its corresponding content?
Something like this:
<div id="tab-item=1">
<div id="tab-item-1-nav"> ... </div>
<div id="tab-item-1-content"> ... </div>
<div>
<div id="tab-item=2">
<div id="tab-item-2-nav"> ... </div>
<div id="tab-item-2-content"> ... </div>
<div>
<div id="tab-item=3">
<div id="tab-item-3-nav"> ... </div>
<div id="tab-item-3-content"> ... </div>
<div>
This is possible but, as is, pretty certainly isn't advisable (it's a work in progress and worked like a charm in IE7 yesterday and is broken today in this same browser ...).
The principle is to stick your tab-nav together so you have to remove from the flow your tab-content with position: absolute; (EDIT: you can't float them after the next tab-content).
Thus many problems arise: you can't have other content below your tab-content as you don't know anymore its height (except in JS of course or with max-height/height and a scrollbar created with overflow property). You can have content on the right pretty easily as you control the width of your content.
Here is a functional demo: http://jsfiddle.net/3skpt/1/ (using jQuery and jQueryTools, tested successfully in Fx 3.6.4, Saf 4.0.x, Op 10.54)
I'll update today the results of my IE7 debugging, whether successful or not.
The navigation isn't separated from the content here and is functional out of the box so a body.js class is used not to disrupt display when JS isn't functional.
Links in headings and the .js class shouldn't be hardcoded as in this already too long example but should be added via JS.
Now, though this example work at least in modern browsers with a few constraints (footer?), I'd reorganise the content when JS is functional in order to avoid the absolute positioning. It's pretty fast in jQuery to create a container before the first .tab-item container and then move every h1 in it. I believe it's far more robust ;)
I'm having some minor problems with some animations I'm trying to set up. I have a couple divs stacked on top of each other kind of like this.
<div id="div1">
Stuff...
</div>
<div id="div2">
More Stuff...
</div>
Each of these divs has a drop shadow applied to it via jQuery plugin (jquery.dropshadow.js).
The problem occurs when I expand one of the divs using some kind of animation. The shadow does not update with the size of the div. I can redraw the shadow in the callback of the animation but still looks pretty joggy.
Is there a way that I can update the status of my shadows periodically throughout the course of the animation or can anyone recommend a better drop shadow library that would fix the problem? It doesn't have to be jQuery plugin.
I think the only way to do this (at least with that particular drop shadow plugin) would be targeting both the element you want and all the drop-shadow "phantom" elements, in your animation. So, for example:
<style type="text/css">
#div1 { width: 50px; }
</style>
<div id="div1">
<p>Here is a lot of stuff. Stuff stuff stuff.</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#div1").dropShadow();
$("#div1").click(function() {
$("#div1, #div1 + .dropShadow .dropShadow").animate({ width: "400px" }, 1500);
});
});
</script>
This is based on the structure of the rendered code that the drop-shadow plugin produces... all the fuzzy copies of your original element get a class of .dropShadow and get grouped into a container element which also has a class of .dropShadow and gets stuck into the document right after the original element (thus the + selector).
As long as you apply whatever animation you're doing to all of these shadow elements, they all get animated (however, it is a bit jerky from all that processing... uffda).
I would suggest using CSS for your drop shadows, and not JS.
I have dealt with this exact problem in the past and I have completely stopped using JS for drop shadows. I have never seen animations with JS shadows look as smooth as pure CSS. Also, using too much JS to alter the page elements can cause performance issues.
Try to apply the same animation effects to the shadow element(s).
I don't know the exact technique used in jquery.dropshadow.js, but I suspect it creates copies of your shadow casting elements and styles them to achieve shadow like appearance. It is possible that these copies are siblings of their source elements, thus don't "follow" animation (as child elements would).
Ok, I still don't know how you animate, but I give you another example:
$('#foo').slideToggle().ready(function(){
$('#foo').dropShadow(options);
});
So, instead of slideToggle, just use whatever animation thingy you got.
Hope that helps.