I am using jQuery and Joomla. Sinca I need to use jQuery.noConlict() due to the use of other javascript libraries, I use jQuery instead of $
I have a set of tabs. I am using jQuery UI. I am using the fadein fadeout through opacity toggle, and the rotation (all working fine)
I want to change the file name of the img tag which is a child of the anchor tag in the tabs
tabs has typical structure (i.e. ul > li > a > img....</ul><div><the tab's content></div>)
(please, do not ask or suggest I change the image to be background image. I must keep structure this way)
With the code below, I am trying to add to the file name of the img, but it is not working. When the alert is triggered I continue to read the old file name, and of course, I see the old image
jQuery( "#tabs" ).bind('tabsshow', function(event, ui){
var image = jQuery(ui.tab).children();
image.attr("src").replace(".png","-active.png");
var liContent = image.attr("src");
alert(liContent);
}
);
It should be like this:
jQuery( "#tabs" ).bind('tabsshow', function(event, ui){
var image = jQuery(ui.tab).children();
image.attr("src",image.attr("src").replace(".png","-active.png"));
var liContent = image.attr("src");
alert(liContent);
});
Or Like this:
jQuery( "#tabs" ).bind('tabsshow', function(event, ui){
var image = jQuery(ui.tab).children();
var liContent = image.attr("src").replace(".png","-active.png");
alert(liContent);
});
Related
I find it a bit weird that the jQuery UI tabs don't have a built-in convenience method for making the tabs bookmarkable (change the URL hash). The following snippet kinda works for me
$("#tabs").tabs({
"activate": function(event, ui) {
window.location.hash = ui.newTab.context.hash;
}
});
The problem is, when the hash is appended to the URL, the page jumps to the corresponding anchor on the page. How can I prevent that from happening? All I want is for the URL address to change showing the currently selected tab, but not move the page vertically.
Update: Just to be clear, I am not wedded to my code above. I am just interested in being able to change the URL address bar with the selected tab's id so the user can bookmark or link the tab.
Replacing window.location.hash (which refreshes the page) with HTML5 history (which manipulates the URL address bar and the browser history stack without refreshing the page) did the trick for me. The following code worked for me
$("#tabs").tabs({
"activate": function(event, ui) {
var url = window.location;
window.history.pushState({
"html": "",
"pageTitle": title,
}, "", url.href.replace(url.hash, "") + ui.newTab.context.hash);
}
});
You could just store your current vertical scrolling distance to the page's top and reapply it afterwards, like this:
$("#tabs").tabs({
"activate": function(event, ui) {'use strict';
var scrollTop;
scrollTop = $(document).scrollTop();
window.location.hash = ui.newTab.context.hash;
$(document).scrollTop(scrollTop);
}
});
I have a dynamically created TinyMCE textarea (using an external toolbar), inside a container div. I'm trying to get it to be draggable, and resizeable (the whole text area).
jQueryUI's .draggable() works with tinyMCE, but if I use .resizable(), the tinyMCE external toolbar doesn't appear when I click on the area. If I use tinyMCE's resizing option in its settings, when I click to drag to size it, it breaks the draggable function of jqueryUI (the whole box follows the mouse as well as resizing, and won't let go).
I solved this problem using the handle option of jquery ui draggable and the drag function callback:
div.draggable.handle = "div[role=group], td.mceLast";
div.draggable.drag = function ( event, ui ) {
if ( $( event.srcElement ).is( '.mceResize' ) || $( event.originalEvent.target ).is( '.mceResize' ) ) {
return false;
}
};
This is solution
".mce-resizehandle" is class of tinymce resize button
$( ".selector" ).resizable({
cancel: ".mce-resizehandle,input,textarea,button,select,option",
});
$( ".selector" ).draggable({
cancel: ".mce-resizehandle,input,textarea,button,select,option",
});
I am using sortable from Jquery UI. Each time I get the value from resultPos, it gives me the last move, but rememebr the last order. I need to reset it.
For example, I have 3 elements:
Move 3rd element to 2nd position: end=1&end=3&end=2
Again ...
Move 3rd element to 2nd position: end=1&end=2&end=3
Again ...
Move 3rd element to 2nd position: end=1&end=3&end=2
I need to have something that return to me the following:
Move 3rd element to 2nd position: end=1&end=3&end=2
Again ...
Move 3rd element to 2nd position: end=1&end=3&end=2
Again ...
Move 3rd element to 2nd position: end=1&end=3&end=2
This is my code:
$( ".sortableChip" ).sortable({
revert: true,
containment: "#carousel",
axis: "x",
items: 'li.edited',
tolerance: 'pointer',
placeholder: 'draggin-space',
start: function(event, ui) {
var startPos = $('.sortableChip').sortable('serialize',{ key: 'start'});
},
sort: function(event, ui) {
ui.item.addClass('draggin');
$('.remove-chart').hide();
},
update: function(event, ui) {
var resultPos = $('.sortableChip').sortable('serialize',{ key: 'end'});
ui.item.removeClass('draggin');
}
});
every item in the jquery UI sortable is an LI, there are a few ways you can do it, one way is to to save a variable that has the sortable list contents when the page initially loads like in the document ready part. all its doing is rearranging the order of li tags that are inside of the ul tag.
<script type="text/javascript">
$(document).ready(function(){
$('#link').click(function(){
//this will empty out the contents of the ul
$('.sortableChip').html('');
/*this will replace the contents of the ul with
contents that were caputred
*/
$('.sortableChip').html(reset);
});
});
var reset = $('.sortableChip').html();
/*this is here at the bottom because you want to everything that is created
dynamically with jquery or javascript to be captured also.
*/
</script>
all you are basically doing is returning the right settings once the link is clicked and thats it, you actually don't need this line `$('.sortableChip').html('');
but I put it here so you know that its being emptied out and replaced
if they need to be sorted based on what you click you would save the states you want tohave as variables like reset and simply clear the contents and load the variables based on what the user clicks
I using tab's JQuery plugin UI each tab contains TextArea then are manage by TinyMCE librarie.
I want to do : When you click on tab "+" , that add new tab which contains textarea too.
To create new tab with textearea , it's good. The problem is : I can't edit textarea value and if i click on TinyMCE 's option ( like Bold ) : J is null error on Javascript console
My JS Code :
$('li > a.moretxt').click(function(){
// Number of element in tabs
var size = $( "#tabs" ).tabs("length");
// Content to add on new tab
var content = "<div id='divcontent"+size+"'><textarea id=\'txtcontent"+size+"'\' cols=\'60\' rows=\'5\'></textarea></div>";
// Some variable
var path = '#divcontent'+size;
var title = 'content'+size;
var idtxt = 'txtcontent'+size;
// Add new div Textarea before the end
$('div#morecontent').before(content);
//Add control ?
tinyMCE.execCommand('mceAddControl', true, idtxt);
// Add new TAB
$( "#tabs" ).tabs("add",path,title,(size));
var index = $( "#tabs" ).tabs("option", "selected");
});
The follow code , well add tab with tiny TextArea but it doesn't works ...
TinyMCE needs to have the object in the DOM to apply itself. I'm not sure why TinyMCE isn't working as you appear to be are adding the container prior to adding TinyMCE, however if you move the "addControl" to after you've added the new Tab it should work.
I can define icon for a jquery ui button in code like this;
$( ".selector" ).button({ icons: {primary:'ui-icon-gear'} });
but I would like to define button icon in HTML code. for example
button
this way I can only call..
$( ".selector" ).button();
in onready event and define icons in code. otherwise I need to call button() method for every button that have different icon.
You could use the Metadata Plugin.
button
And the script
$(".jqbutton")
.each(function(){
var data = $(this).metadata();
$(this).button({ icons: {primary:data.icon} });
});
I've never used this directly, but I have used it through its support in the jquery validation plugin.
The Metadata Plugin works fine, and you can even do more: you can also set ALL the init properties of a jQuery UI button (other widgets too):
<script type="text/javascript">
$(document).ready(function(){
$('.jq-button').each(function(){
var meta=$(this).metadata();
$(this).button(meta);
});
});
</script>
New item
Thanks, TJB - great idea! :)
You can set the icon after initializing the button using the "options" parameter
$(".jqbutton").button();
$(".jqbutton.ui-icon-gear").button( "option", "icons",
{primary:'ui-icon-gear'} );
http://jqueryui.com/demos/button/#option-icons
EDIT: the link isn't direct, so just look for the Options tab and select 'icons' then look # the section that says 'Get or set the icons option, after init'
The following code looks for "ui-icon-[icon-name]" in the class-attribute of all elements containing the class "jqbutton" and creates a button with an "ui-icon-[icon-name]" icon.
$(function() {
$(".jqbutton").each(function() {
var obj = $(this);
var icon = false;
var c = obj.attr('class');
var i1 = c.indexOf('ui-icon-');
if (i1 != -1) {
var i2 = c.indexOf(" ", i1);
icon = c.substring(i1, i2 != -1 ? i2 : c.length);
obj.removeClass(icon);
}
obj.button({
icons : {
primary : icon
}
});
});
});