hola a todos.
Resulta que tengo un problema raro (creo yo) al incluir dos plugins jquery en la misma pagina.
las llamadas:
Código:
<script src="plugins/jquery.sidecontent.js" type="text/javascript"></script>
<script type="text/javascript">$('a.titulos').textOverflow();</script>
La pagina.php que hace uso de ambos:
Código PHP:
<div class="sidecontent" title="notas">
<div class="lista-cuerpo">
<?php
for ($j=1;$j<=$i-1;$j++)
{
?><div class="fila">
<div class="col_titulo_nota"><a class="titulos" href="#" id="<?php echo $idnota[$j];?>"><?php echo $titulo[$j];?></a></div>
</div><?php
}
?>
</div>
</div>
y los plugins jquery:
Código:
(function($)
{
var classModifier = "";
var sliderCount = 0;
var sliderWidth = "400px";
var attachTo = "rightside";
var totalPullOutHeight = 0;
function CloseSliders (thisId) {
// Reset previous sliders
for (var i = 0; i < sliderCount; i++) {
var sliderId = classModifier + "_" + i;
var pulloutId = sliderId + "_pullout";
// Only reset it if it is shown
if ($("#" + sliderId).width() > 0) {
if (sliderId == thisId) {
// They have clicked on the open slider, so we'll just close it
showSlider = false;
}
$("#" + sliderId).animate({
width: "0px"
}, 1500);
if (attachTo == "leftside") {
$("#" + pulloutId).animate({
left: "0px"
}, 1500);
} else {
$("#" + pulloutId).animate({
right: "0px"
}, 1500);
}
}
}
}
function ToggleSlider () {
var rel = $(this).attr("rel");
var thisId = classModifier + "_" + rel;
var thisPulloutId = thisId + "_pullout";
var showSlider = true;
if ($("#" + thisId).width() > 0) {
showSlider = false;
}
CloseSliders(thisId);
if (showSlider) {
$("#" + thisId).animate({
width: sliderWidth
}, 1500);
if (attachTo == "leftside") {
$("#" + thisPulloutId).animate({
left: sliderWidth
}, 1500);
} else {
$("#" + thisPulloutId).animate({
right: sliderWidth
}, 1500);
}
}
return false;
};
$.fn.sidecontent = function (settings) {
var config = {
classmodifier: "sidecontent",
attachto: "rightside",
width: "300px",
opacity: "0.8",
pulloutpadding: "5",
textdirection: "vertical",
clickawayclose: false
};
if (settings) {
$.extend(config, settings);
}
return this.each(function () {
classModifier = config.classmodifier;
sliderWidth = config.width;
attachTo = config.attachto;
var sliderId = classModifier + "_" + sliderCount;
var sliderTitle = config.title;
sliderTitle = $(this).attr("title");
if (totalPullOutHeight == 0) {
totalPullOutHeight += parseInt(config.pulloutpadding);
}
$(this).wrap('<div class="' + classModifier + '" id="' + sliderId + '"></div>').wrap('<div style="width: ' + sliderWidth + '"></div>');
$("#" + sliderId).before('<div class="' + classModifier + 'pullout" id="' + sliderId + '_pullout" rel="' + sliderCount + '">' + sliderTitle + '</div>');
if (config.textdirection == "vertical") {
$("#" + sliderId + "_pullout span").css({
display: "block",
textAlign: "center"
});
}
$("#" + sliderId).css({
position: "absolute",
overflow: "hidden",
top: "0",
width: "0px",
zIndex: "1",
opacity: config.opacity
});
if (attachTo == "leftside") {
$("#" + sliderId).css({
left: "0px"
});
} else {
$("#" + sliderId).css({
right: "0px"
});
}
$("#" + sliderId + "_pullout").css({
position: "absolute",
top: totalPullOutHeight + "px",
zIndex: "1000",
cursor: "pointer",
opacity: config.opacity
})
$("#" + sliderId + "_pullout").live("click", ToggleSlider);
var pulloutWidth = $("#" + sliderId + "_pullout").width();
if (attachTo == "leftside") {
$("#" + sliderId + "_pullout").css({
left: "0px",
width: pulloutWidth + "px"
});
} else {
$("#" + sliderId + "_pullout").css({
right: "0px",
width: pulloutWidth + "px"
});
}
totalPullOutHeight += parseInt($("#" + sliderId + "_pullout").height());
totalPullOutHeight += parseInt(config.pulloutpadding);
var suggestedSliderHeight = totalPullOutHeight + 30;
if (suggestedSliderHeight > $("#" + sliderId).height()) {
$("#" + sliderId).css({
height: suggestedSliderHeight + "px"
});
}
sliderCount++;
});
return this;
};
})(jQuery);
$(document).ready( function () {
$(".sidecontent").sidecontent({ "width": "400px", "pulloutpadding": "100", "opacity": "0.9" });
});
Código:
(function ($) {
var style = document.documentElement.style,
hasTextOverflow = ('textOverflow' in style || 'OTextOverflow' in style),
domSplit = function (root, maxIndex) {
var index = 0, result = [],
domSplitAux = function (nodes) {
var i = 0, tmp;
if (index > maxIndex) {
return;
}
for (i = 0; i < nodes.length; i += 1) {
if (nodes[i].nodeType === 1) {
tmp = nodes[i].cloneNode(false);
result[result.length - 1].appendChild(tmp);
result.push(tmp);
domSplitAux(nodes[i].childNodes);
result.pop();
} else if (nodes[i].nodeType === 3) {
if (index + nodes[i].length < maxIndex) {
result[result.length - 1].appendChild(nodes[i].cloneNode(false));
} else {
tmp = nodes[i].cloneNode(false);
tmp.textContent = $.trim(tmp.textContent.substring(0, maxIndex - index));
result[result.length - 1].appendChild(tmp);
}
index += nodes[i].length;
} else {
result.appendChild(nodes[i].cloneNode(false));
}
}
};
result.push(root.cloneNode(false));
domSplitAux(root.childNodes);
return $(result.pop().childNodes);
};
$.extend($.fn, {
textOverflow: function (str, autoUpdate) {
var more = str || '…';
if (!hasTextOverflow) {
return this.each(function () {
var element = $(this),
// the clone element we modify to measure the width
clone = element.clone(),
// we save a copy so we can restore it if necessary
originalElement = element.clone(),
originalText = element.text(),
originalWidth = element.width(),
low = 0, mid = 0,
high = originalText.length,
reflow = function () {
if (originalWidth !== element.width()) {
element.replaceWith(originalElement);
element = originalElement;
originalElement = element.clone();
element.textOverflow(str, false);
originalWidth = element.width();
}
};
element.after(clone.hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible',
'max-width': 'inherit'
}));
if (clone.width() > originalWidth) {
while (low < high) {
mid = Math.floor(low + ((high - low) / 2));
clone.empty().append(domSplit(originalElement.get(0), mid)).append(more);
if (clone.width() < originalWidth) {
low = mid + 1;
} else {
high = mid;
}
}
if (low < originalText.length) {
element.empty().append(domSplit(originalElement.get(0), low - 1)).append(more);
}
}
clone.remove();
if (autoUpdate) {
setInterval(reflow, 200);
}
});
} else {
return this;
}
}
});
})(jQuery);
Creo q no hacia falta copiar ambos codigos por completo (si es asi, disculpad todo el "texto redundante"). Es decir, parece obvio que de alguna manera entran en conflicto, pero no entiendo por qué. Ambos funcionan por separado pero al insertar los 2, tan solo funciona "sidecontent".
He mirado por la red a ver que encontraba pero solo veo el tipico problema de estar utilizando dos librerias js diferentes (no es mi caso, solo utilizo jquery) o bien haber incluido varias veces la libreria jquery (tampoco es el caso). por lo demas, no encuentro nada...
No se si los tiros andaran por aquí pero lo comento por si acaso: el que funciona siempre (sidecontent) se dedica a "sacar"/mostrar un contenido inicialmente oculto mediante click de una pestaña (tipico slide de texto inicialmente oculto); concretamente titulos de mensajes. El segundo pone puntos suspensivos en caso de que dichos titulos sean muy largos. Es decir "un plugin actua sobre el contenido del otro plugin". La verdad, no creo q sea esto ya que tengo mas codigo jquery que actua sobre estos mismos titulos (mostrando los mensajes "clickados" en otro div) y no hay problema con eso.
Si alguien me echa un cable....
Muchisimas gracias y un saludo a todos.