I'm trying to place multiple resizable and draggable div's on one page that move (vertically) inside their own parent div.
you can take a look at http://bit.ly/bCutBE
However, these div's act really strange when I want to resize them, especially from the north side, they kind of move out of the screen very fast, while they shouldn't be able to get outside the parent div.
I only want the div to be able to move and resize vertically inside it's parent, the dragging-part works pretty good, but the resize part give this problem.
I can't really describe it better than this, but take a look for yourself and it will be clear immediately when you try to resize one of the coloured div's: move it a little downwards and try to resize it from the north side.
the problem seems to be caused by the containment: 'parent', line of the resizable. when I delete this line it works fine, but then the coloured blocks don't stay in their parent, and I want them to stay inside their parent.
I hope someone can help me with this...
the jquery code I used:
$(document).ready(function(){
$(".move")
.draggable({
containment: 'parent',
grid: [50,50],
axis: 'y'
})
.resizable({
containment: 'parent',
grid: [50,50],
handles: 'n, s',
minHeight: 50
});
});
this seems to be a bug with draggable and sortable you will find a workaround here
Related
I have done the easy bit and actually added a "Download Image" anchor into the swipebox.js html and formatted it with the CSS to make it play properly with the caption/title.
My specific problem lies in trying to add in a new data attribute containing the naked directory url to the image file and using that info to append it to the href of my created anchor so that I can link to the original size for each image.
Most other JQuery lightboxes can do this, but I stuck myself with using Swipebox because it was easier at the time and now it is returning to bite me in the ass.
You can check out what I have done so far # http://kazenracing.com/?page=1964_Griffith
It is not as pretty as some of my other sites, but people will want the larger images.
You can see I am using timthumb for both the thumbnails and the viewed image, so things will run a bit faster on slower connections and so I do not have to create three separate images "by hand". If I did not care about load times and if my customer did not care about load times I would just have the full image be the viewed one and just use timthumb for the thumbnails alone.
You can also see a data-href attribute ready to go on everything except the videos, which I have already accounted for.
EDIT:
What I tried to do before was add in a function inside the swipebox JS called "setDownload" and tried many ways to pull the data-href into the href of the Download anchor.
The last one I tried that worked but only for the first image was:
setDownload : function () {
$('a[data-href]').each(function() {
$('#swipebox-download').attr('href', $('.swipebox').attr('data-href'));
});
},
I even tried following the logic of setTitle, but that got me nowhere.
EDIT: Okay, now it has become; Who has got a better idea than putting it in the title attribute? Like so:
title="Image Name <a id="swipebox-download" href="path/to/image.jpg">Download</a>"
It does accomplish what I want, but it just seems dirty and wrong.
Well I got off my lazy ass and just figured it out the way I wanted it in the first place.
The big problem I had was wrapping my head around using data attributes.
After I got my head around it I pretty much monkeyed the code in using brutaldesign's already existing code for attributes. I even added an option to change the text of the download link in case it is used for something completely different.
Here is the beef of the code I added:
setDownload : function ( index ) {
var datahref = null;
$( '#swipebox-download' ).empty();
if ( elements[ index ] !== undefined ) {
datahref = elements[ index ].datahref;
}
if ( datahref ) {
$( '#swipebox-download' ).append( plugin.settings.downloadText );
$( '#swipebox-download' ).attr( "href", datahref );
} else {
$( '#swipebox-download' ).hide();
}
},
All the changes are documented here on Github.
Well, I guess, thank you for not answering my question.
I found it way more fulfilling figuring it out on my own than having it handed to me.
Oh, and the forked project page is here, if anyone would like to use it.
I read about Masonry and after failing to get image appending to work was advised to switch to the successor Isotope. I was trying to improve or create variations on an album cover gallery, something I've done once or twice before using the same PHP classes.
I can get the basic functionality to work, but a button to click to add more images has always failed to work. I keep reading jQuery documentation and I've tried various JavaScript debuggers but I always end up with no images being added to my gallery when I click.
Trial and error is definitely required to get the best looking layout.
The biggest album cover seems to be 500 pixels with the smallest found in APIs was 75, choosing the right column width helps. I'm currently using 75 but 50 might have worked better. I just want to get adding images to work and be done with this little experiment.
I wanted to try something similar to this technique of appending more images to the bottom. I want to append more album covers which I fetch from various APIs (Amazon Product API, Last.fm, iTunes) using PHP. All the album covers come from APIs and I use PHP to find the URLs given the album title and artist. My code is running: http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php
I've changed the CSS rule many times, now I just have the default CSS suggested by the Isotope author.
PHP Code that loops and produces 10 divs with one image per div
$myAlbumCollection->randomMember();
$count = 0;
print('<div id="container">');
while ( $count < 10 )
{
// Check that current album is in Amazon
$buyLink = $myAlbumCollection->currentAlbumAmazonProductURL();
$imageURL = $myAlbumCollection->currentAlbumRandomImageURL();
if ( (strcmp($buyLink, '#') != 0) && (strcmp($imageURL, myInfo::MISSING_COVER_URL) != 0))
{
$count++;
print('<div class="item">');
print('<a href="' . $buyLink . '">');
print('<img src="' . $imageURL . '" />');
print('</a>');
print('</div>');
}
$myAlbumCollection->goToNextAlbum(); // This could loop forever if it doesn't find enough album covers, but in reality will timeout
}
print('</div>');
And lastly here is the javascript, the final problem is in here somewhere:
<script>
$(function(){
var $container = $('#container');
$('#insert a').click(function(){
var $newEls = $.get('./moreAlbumCovers.php');
$container.isotope( 'insert', $newEls );
return false;
});
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
</script>
The link gets called when clicked, I've stepped through it. The PHP produces DIVs As and IMG tags. I really am not sure what I'm doing wrong and repeated readings of the documentation isn't solving it. I've never really been a JavaScript guy. I'm not even a PHP guy, it seems right but repeated efforts to make it go have failed despite generous assistance and offering a bounty.
Thanks for the help.
Try adjusting the columnWidh value and width of item. Masonry aligns element with best fit column first layout. It works on mathematical equations. So a perfect, brick wall fitting is only hypothetical ideal case. It takes me a few tries on firebug and other tools to get the masonry working with ideally fitted layout. The key is to get the value of columnWidth and width, gutter etc in such a way that it solves the logic equations in good values.
:: EDIT ::
I found a link saved in my pockets page, of which i totally forgot about. It is a great tutorial. So i came back to give it here. Recommended to everyone who have trouble getting started with this plugin.
http://www.netmagazine.com/tutorials/get-started-jquery-masonry
Masonry isn't a very descriptive name for it. In fact it's an optimizing problem. It's something that is called np problem because there is too many permutations to check. Especially the masonry jquery plugin is a 1d bin-packing solver and it's arrange the bricks in vertical columns. Css by default arrange the bricks in horizontal order. In other words it's a depth-first sort of an adjacent tree model.
Update: Try adding masonry to your dummy div and delete everthing else:
$('#dummy').load('./moreAlbumCovers.php').masonry("reload");
I think you overthink it. The variable is empty because you assign it to a dom object. It's most likely become also an object and not usefull.
It's relly well explained here Jquery Masonry Seamless Responsive Image Grid + I would try to do exactly the same with isotope http://isotope.metafizzy.co/
edit:
I think isoptope and masonry just sorting out 1 dimensional bin packing, and what you are maybe looking after is 2 dimensional bin packing
like this http://codeincomplete.com/posts/2011/5/7/bin_packing/example/ (check complex case it fits all boxes perfectly )
and lib for that https://github.com/jakesgordon/bin-packing/
To get the more brick wall like effect you don't set an item width using CSS. This wasn't crystal clear given the instructions here. But a lot of testing seems to indicate that just specifying a columnWidth and then letting the browser and javascript do it's best gets closer to the performance I'm looking for. Will have to tweak and eventually try appending...
My layout is like the above.
1, 2, 3 and 4 divs can be dragged and dropped into any position 1-4 and in the dock. Now these are just php includes. When i drop them in the dock i use css to:
display:none;
This hides everything in the div except the title. Perfect. However the content is still being loaded in the "background" and i plan on having plenty of these "widgets" and i can see this becoming a serious issue with loading all these content.
What i would like to happen is:
If dropped into dock then don't load everything between:
<p><?php include('example.php'); ?></p>
But if dragged back into 1, 2, 3 or 4 then allow the content in the paragraph to be loaded.
I was thinking maybe getting the parent div using jQuery.
I just need a little push in the right direction in regards which language could solve my issue and maybe some simple examples. Now another thing would this be "dynamic" as in as soon as i drag it from the dock to 1, 2, 3 or 4. It would instantly update or would i need to constantly reload either the page or this div to allow the content to check its location and decide whether it is allowed to load or not.
Thank you.
If you want to find out what element you are landing in when you do the drop, it's ->
$('element').droppable({
//other logic
drop: function(event, ui){
//$(this) is now the element you just dropped nito
if($(this).prop('id') == 'dock'){
console.log("This is the Dock...We don't add content here.");
}else{
//function to pull data to your container...$.load() or whatever
}
}
});
so I have a jQuery accordion menu that I want to implement to my wordpress homepage, the problem is everytime I put the menu there, it extends my page way down like 1200 px height, and it`s the only one that does this.
How can I stop it from declaring that height and let me make it exactly how long the menu is extending, or even better go once with it. Again, I am talking about a wordpress plugin.
The theme I want to implement the menu in is : http://themeforest.net/item/celta-business-modern-corporate-wordpress-theme/full_screen_preview/218824?ref=lvraa
Left column
First you should try to set autoHeight to false , this will fix the height problem.
Then I could find the problem regarding HTML lists, I grabbed your HTML, put it locally and used the demo source for jQuery UI accordion (the section 3 have some HTML list inside) and it seems to work fine.
Hope it will Help :)
We all need your code to see the actual problem. You can jsfiddle it.
Also, try making the autoHeight to false.
$(".yourselector" ).accordion({ autoHeight: false });
When you initialize the accordion, include autoHeight: false in the options. It will then use the native heights specified in each div.
It is impossible to give you a sure answer without knowing which accordion plugin you are using. It would have been very helpful for you to give a URL that showcases your issue.
If you are using the jQuery UI Accordion, you can try:
initializing the accordion with autoHeight set to false.
explicitly set a height for the container of your accordion. for example:
< style>
#accordion {
height:200px !important;
}
< /style>
< div id="accordion">...< /div>
initialize the accordion with fillSpace set to true and then explicitly set the height of the accordion's parent element.
If you are using another library or if you developed the accordion functionality yourself, please tell us what library you are using and share your code with us.
You need to change autoHeight to false. Doing so may reduce the quality of animation, but should fix the height issue.
It is caused by the accordion taking the height of the largest div. Lots more about it here:
http://docs.jquery.com/UI/Accordion#option-autoHeight
$( ".selector" ).accordion({ autoHeight: false });
To overcome this issue, You must set two properties as below :-
$( ".selector" ).accordion({ autoHeight: false });
and
$( ".selector" ).accordion({ clearStyle: true });
Refer the - official jQuery accordion documentation
How would I go about displaying a tooltip when the user hover overs some text? These text are keywords. I don't want to manually add these tooltip for each keywords. I am looking for a way to create a script of some sort to automatically do this either on the client side or server-side. When a user hovers over these keywords, and if the keyword exists in the database or an array it should retrieve the information from the database.
Please let me know if there are any good tutorials available on how to solve this problem.
There are many useful plugins to create nice tooltips.
I know two of them that use the jQuery framework:
mb-tooltip: [http://pupunzi.open-lab.com/mb-jquery-components/mb-tooltip/]
jquery-plugin-tooltip: [http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/]
You have to surround your keywords with a span element and a class to apply the jQuery selector.
Maybe it's preferable to query for keyword presence server-side creating the ad-hoc html code for displaying the right tooltips, otherwise you have to create a tooltip in an AJAX way, handling the mouse hover event on the keyword.
You can also use YUI as an alternative to JQuery plugins. Here there is an example of what you want to do Simple Tooltip Example with YUI
You might consider using the HTML Global title Attribute. If you're looking for something simple that's already built in to HTML (and thus usable in PHP without addins) then that would be my go-to solution. I'm considering it's use in a project myself.
Use the jQuery tooltip plugin, which can be found here.
Code looks like:
$("img[title]").tooltip()
There is a very popular Jquery Plugin "Beauty Tips" for this:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
Example of Beauty Tips with options:
$('#example3').bt({
contentSelector: "$(this).attr('href')",
fill: 'red',
cssStyles: {color: 'white', fontWeight: 'bold'},
shrinkToFit: true,
padding: 10,
cornerRadius: 10,
spikeLength: 15,
spikeGirth: 5,
positions: ['left', 'right', 'bottom']
});