I am using Colorbox 1.3.6 with jQuery 1.4.2. Somehow the folowing code did not work for me:
$(document).ready(function() {
$.colorbox({href: "something.htm", open: true});
});
which won't show up automatically, but this one works:
$(document).ready(function() {
$("#some_element").colorbox({href: "something.htm", open: true});
});
I tried attaching to $("head") which also works! And then I checked the generated elements, it seems that colorbox just added class="cboxElement" to head element and other things all in the body.
But I do not sure if this is a good way to do it (auto popup when the page is loaded) and I can't figure out why $.colorbox did not work!
Please help!
The problem is that the documentation you're seeing is for a newer version, not 1.3.6 that you're using. To do what you want with 1.3.6, try this instead this:
$(function() {
$.fn.colorbox({href: "something.htm", open: true});
});
If you look at version 1.3.6, you'll see this in the source:
cboxPublic = $.fn.colorbox = function (options, callback) {
It's not until this commit for 1.3.7 that $.colorbox shows up:
cboxPublic = $.fn.colorbox = $.colorbox = function (options, callback) {
So $.colorbox() does work...but only for version 1.3.7+, as of the time of this answer the current version is 1.3.9, so if you want to use $.colorbox() instead of $.fn.colorbox() just upgrade :)
To be honest, I have used ColorBox before in the same method with successful results. I'm unsure why it wouldn't work as you have it set up.
Since jQuery was updated from 1.4.1 to 1.4.2, apparently a lot of different plugins have had issues with it. I do not know if ColorBox has been proven to work perfectly with 1.4.2. You could always try to download 1.4.1 to give a try. That could be the problem.
Related
Anyone knows how can I upgrade the following line of dojo code? The problem is in dijit.popoup.close() that the dijit/popup.close() which is the upgraded of it doesn't work there
var findContent = "<div class='findTTheader' ><span class='findTTheaderLabel'>Find " + curMapLyr.layerInfos[layerID].name + "</span><img class='closeToolTip' src='../genCode/images/Close16.png' onclick='dijit.popup.close()'></div>";
I'm not actually sure where to download a copy of Dojo 2.0 to test this, but I think one of these will work for you:
First up, try the "stupid version":
onclick="require('dijit/popup').close()"
If that doesn't work, then you'll have to add the click handler in JavaScript rather than HTML - so render your div without any onclick attribute, and then do something like this in JS:
require(['dojo/query', 'dijit/popup'], function (query, popup) {
query('img.closeToolTip').on('click', function() {
popup.close()
});
})
That's might not be exactly correct syntax, but it should give you the idea.
Update - this variation might actually work better than the above. Try it out and let me know:
require(['dojo/query', 'dijit/popup'], function (query, popup) {
query('img.closeToolTip').on('click', popup.close);
})
I've found a few similar posts through searches but none of their fixes seem to work for me.
I'm trying to change pages on swipe with jquery. The page url is getting updated on swipe, however it isn't bringing me to the new page. Instead it remains on the same page and only the url gets updated.
If anyone can take a quick look and suggest some possible fixes it'd be a huge help.
here's my code:
$(function(){
$( "div.sw_box" ).on( "swipe", swipeHandler );
function swipeHandler( event ){
$.mobile.navigate("/test2.php");
}
});
thank you!
There's an official example of swipe-to-navigate here: http://demos.jquerymobile.com/1.3.0/docs/examples/swipe/swipe-page.html
You should try $.mobile.changePage instead of $.mobile.navigate; that seems like the most significant difference between the docs and your code
$mobile.changepage is deprecated and will be removed by JQuery mobile 1.5.
This should work fine:
function swipeHandler( event ){
$(':mobile-pagecontainer').pagecontainer('change', 'page.html', {
transition: 'flip',
changeHash: false,
showLoadMsg: true
});
}
in your case you'll need to change 'page.html' to 'test2.php' or you can use '#pageID' if pages are in the same document.
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 am using tabify http://unwrongest.com/projects/tabify to show tabs.
I am struggling to figure out how to change the tab programmatically.
Here is one working example: http://jsfiddle.net/S78Bt/
$(document).ready(function(){
$('#menu').tabify();
});
Although I know that using JQuery UI tabs I can acheive this behavior, but due to some unavoidable circumstances I need to use tabify.
The project you are using seems dead, it hasn't received updates lately, it does not have documentation.
I've taken a look at the source code, there is no API to access tabs for you directly.
The only solution is to hack indirectly by seeing how the library expects the tabs to change:
function changeTab(name) {
location.hash = name + '-tab';
}
This works on my example.
I'm not sure if it's the best way, but it works at least.
If we look at source code of tabify plugin you will see:
function getHref(el){
hash = $(el).find('a').attr('href');
hash = hash.substring(0,hash.length-4);
return hash;
}
function setActive(el){
$(el).addClass('active');
$(getHref(el)).show();
$(el).siblings('li').each(function(){
$(this).removeClass('active');
$(getHref(this)).hide();
});
}
You may use similar approach: jsfiddle
I have added the JQuery plugin Isotopte to my site.
It works but only after the browser resizes. The images just seem to stack up on each other before hand.
My code to is:
$(function(){
$('#isotopecontainer').isotope({
itemSelector: '.frontitem',
masonry: {
}
});
});
I've tried adding columnWidth as the site suggests but this makes no difference.
Im really not sure what is going on. Can anyone help me out at all?
I don't know exactly where your issue is but I got a working solution.
Working solution (JSFiddle)
$(document).ready(function(){
$('#isotopecontainer').isotope({
// options
itemSelector : '.frontitem',
masonry : {}
});
}
);
It has all of your options but I can't seem to find exactly where your code is wrong. I did use the document ready callback that jquery supplies however I don't think that was the issue.
Also make sure you include jquery before isotope.