Please see this work in progress:
http://rawgit.com/jfix/cover-image-position/master/index.html
My goal is to allow drag and drop from the desktop onto this page, and following that to drag the image around as well as to resize it. You should be able to drop an image onto the page and to drag it around.
However, what doesn't work is the resizing of the image. There is no handle displayed at the frame around the image and it's impossible to resize it. No errors in the console.
The relevant code is here:
hdl.resizable({
aspectRatio: true,
autoHide: true,
alsoResize: "#coverimage",
handles: 'all',
resize: function(event, ui) {
cvr
.css('left', ui.position.left)
.css('top', ui.position.top);
}
});
where hdl is a short form for the $('#handler') in the assets/script.js file. I should note that this has been copied almost verbatim from this jsfiddle: http://jsfiddle.net/nL5ew/ where it works fine, obviously.
I can't seem to find the problem with my code. Thank you for any eagle-eyed insights you may have.
Having inspected #RRR's JSFiddle, and comparing it line by line with my code, I ended up discovering that I was not including one, as it turns out, vital CSS file from the JQuery UI suite. This is the line that was missing:
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
In all fairness the correct solution was provided by #RRR, unfortunately not in a full-blown answer but just in a comment.
use this syntax for better result:
$(selector, context).resizable({option1: value1, option2: value2..... });
Related
I've been looking all over and can't seem to find/figure out how to make the 'data-filter' search box any bigger. I would like to make it wider while still remaining its responsiveness to window resizing, is this possible? I've tried passing
filtering: [{ container: "#footableFilterBox", options: { style: { width: "75%" } } }]
but that either doesn't apply here or my syntax is incorrect?
I've also tried to add css width directly to the input-group that FooTable generates using
$(document).load(function() {
$('div#footableFilterBox').find('.input-group').css('width','75%');
});
But it doesn't seem to work. I've also tried to .addClass(); and customize my own css but that didn't work either.
Anyone have any ideas? This would be greatly helpful for the layout of my page. Thanks in advance!
Update
Here is the code used to initialize the FooTable plugin. It resides at the bottom of my HTML page. I'm using it in a rails application but that shouldn't make much of a difference, imo.
<script type="text/javascript">
jQuery(function($) {
$('#propertiesTable').footable({
filtering: [{
container: "#footableFilterBox"
}]
});
});
</script>
Code that worked
Based off of #gaetanoM's answer I was able to use jQuery Tree Traversal to navigate my way to finding the element that I needed. Code below:
$('#propertiesTable').on('postinit.ft.table', function(e, ft) {
$(this).closest('.clients-list').siblings('#footableFilterBox').find('.footable-filtering-search, .input-group').css('width','100%');
}).footable();
Thanks for all answers provided!
You may use:
postinit.ft.table: The postinit.ft.table event is raised after any components are initialized but before the table is drawn for the first time. Calling preventDefault on this event will disable the initial drawing of the table.
$('.table').on('postinit.ft.table', function(e, ft) {
$(this).find('.footable-filtering-search .input-group').css('width','75%')
}).footable();
The fiddle.
I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.
Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.
This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).
on my page I'm trying to apply jquery ui tooltip on a specific element:
<script>
$(function() {
$('.aticker').tooltip(); //works perfectly
});
</script>
but no options are working at all, so:
$('.aticker').tooltip({track: true}); // not working
$(document).tooltip(); //not working ( i have to use selector and not document)
$('.aticker').tooltip({tooltipClass:'rd'}); // not working
not sure what is wrong with it.
I found out that there was a confliction between bootstrap.js and jquery.js tooltip.
known issue
Tooltip conflict with jQuery UI #6303
I am not allowed to comment because of a lack of reputation, so I will post this as an answer. I created a jsfiddle based on your information. For me it seems to work perfectly well.
I used the links to the javascript files from your post and $('.aticker').tooltip({track: true}); works.
Could you please provide further information such as any errors shown in the javascript console?
I'd like to use the onScreen() plugin to control items when they enter or leave viewport (visible part of the screen). As a test a tried to add this line $(".block").fadeIn(6000); to "doIn" but it doesn't work. Is there a syntax issue or something? See http://jsfiddle.net/8E4FA/ Thanks
<script>
$(document).ready(function(){
$('elements').onScreen({
container: window,
direction: 'vertical',
doIn: function() {
$(".block").fadeIn(6000);
},
doOut: function() {
// Do something to the matched elements as they get off scren
},
tolerance: 0,
throttle: 50,
toggleClass: 'onScreen',
lazyAttr: null,
lazyPlaceholder: 'someImage.jpg',
debug: false
});
});
</script>
I'm the plugin developer. You were using the sample code from the plugin's site, meaning you had no matched elements using the $("elements") selector. I changed the selector to $(".block") and got rid of all the default values.
Here's the updated fiddle: http://jsfiddle.net/8E4FA/1/
Cheers!
I ran it with try and catch and it turns out:
ReferenceError: $ is not defined
My best guess is that you put the reference to the onScreen plugin before the JQuery reference, try reversing them.
However, I have a better guess that you did not include <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> in your HTML.
I'm a little new to javascript as I mostly just fool around with CSS styling when developing web pages.
I ran into a problem trying to integrate Fancybox with Cloudzoom. I've been trying to follow the directions as directed here: http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/
I'm able to get the effect to work perfectly except for one small error-- for some reason (all my images are in galleries for easier use scrolling through fancybox), the zoom only ever shows the first image in the series.
If someone could help me sort through this? Preview any of the galleries here: http://bit.ly/LaPzEH
Here's the tidbit I think is just slightly off - I think it has something to do with the href line in this code being off:
$j('a[rel=gallery]').fancybox({
padding: 0,
overlayColor: '#'+$j('#skin_color').val(),
transitionIn: 'fade',
transitionOut: 'fade',
overlayOpacity: .9,
onComplete : function(arg) {
$('#fancybox-img').wrap(
$('<a>')
.attr('href', $(arg[0]).attr('href'))
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
);
$('.cloud-zoom').CloudZoom();
}
});
Any an all help is greatly appreciated!
Edit: Got it working by changing
$(arg[0]).attr('href')
to
this.href
As an aside (because I couldn't find many cloudzoom/fancybox threads) you can also change the position from inside to right/left etc. by editing the JS code for fancybox to have the fancybox-inner display as visible rather than hidden.
If the idea is to wrap the #fancybox-img selector with an anchor with class="cloud-zoom" and with the same href attribute of the anchor that opened fancybox like
<a href="{same as anchor}" class="cloud-zoom" rel="position: 'inside'">
<img id="fancybox-img" src="{big image}" alt=" " />
</a>
... so Cloud Zoom can work on the specific image, then I would re-write the onComplete callback like :
'onComplete' : function(){
$('#fancybox-img').wrap(
$('<a />')
.attr('href', this.href) // this.href gets the "href" of the current image
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
); // wrap
$('.cloud-zoom').CloudZoom();
} // onComplete
(not idea what the heck onComplete : function(arg) would do but in any case it would be better to use 'onComplete' : function(currentArray, currentIndex) for the sake of standard fancybox code)
SIDE NOTES:
You are loading two versions of jQuery (1.4.2 and 1.7.1) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.
You are using fancybox v1.3.0 ... it wouldn't hurt to upgrade at least to v1.3.4
Set all your fancybox API options between quotes like
"padding": 0, // it's OK 0 without quotes (integer and Boolean values go without them)
"overlayColor": '#'+$j('#skin_color').val(),
"transitionIn": 'fade',
"transitionOut": 'fade',
"overlayOpacity": .9,
"onComplete": ...etc
there are known issues (mostly with IE) because that (fancybox v1.3.x)