Ссылка на сайт внутри JQuery

Question

Я использую код, найденный на jsfiddle http://jsfiddle.net/mekwall/fNyHs/, поскольку он кажется лучшим для моей ситуации, когда мне нужен динамический текст, чтобы он соответствовал контейнеру (путем изменения размера шрифта).

(function($) { 
$.fn.textfill = function(maxFontSize, maxWords) { 
    maxFontSize = parseInt(maxFontSize, 10); 
    maxWords = parseInt(maxWords, 10) || 4; 
    return this.each(function(){ 
     var self = $(this), 
      orgText = self.text(), 
      fontSize = parseInt(self.css("fontSize"), 10), 
      lineHeight = parseInt(self.css("lineHeight"), 10), 
      maxHeight = self.height(), 
      maxWidth = self.width(), 
      words = self.text().split(" "); 

     function calcSize(text) { 
      var ourText = $("<span class='dyntextval'><a href='#' class='trigger'>"+text+"</a></span>").appendTo(self), 
       multiplier = maxWidth/ourText.width(), 
       newSize = fontSize*(multiplier-0.1); 
      ourText.css(
       "fontSize", 
       (maxFontSize > 0 && newSize > maxFontSize) ? 
        maxFontSize : 
        newSize 
      ); 
      var scrollHeight = self[0].scrollHeight; 
      if (scrollHeight > maxHeight) { 
       multiplier = maxHeight/scrollHeight; 
       newSize = (newSize*multiplier); 
       ourText.css(
        "fontSize", 
        (maxFontSize > 0 && newSize > maxFontSize) ? 
         maxFontSize : 
         newSize 
       ); 
      } 
     } 
     self.empty(); 
     if (words.length > maxWords) { 
      while (words.length > 0) { 
       var newText = words.splice(0, maxWords).join(" "); 
       console.log 
       calcSize(newText); 
       self.append("<br>"); 
      } 
     } else { 
      calcSize(orgText); 
     } 
    }); 
}; 
})(jQuery); 



$(document).ready(function() { 
$('.large').textfill({ maxFontPixels: 120, minFontPixels: 36}); 
$('.medium').textfill({ maxFontPixels: 32 }); 
$('.small').textfill({ maxFontPixels: 18 });   
}); 

Но у меня возникли проблемы с этой частью:

var ourText = $(""+text+"").appendTo(self), 

Дело в том, что мне нужна ссылка внутри там, который переключает другой раз щелкнул деление с.

тумблер:

$(".side-toggle").hide(); 
$('.trigger').click(function() { 
    $(this).closest('.group').find('.side-toggle').slideToggle(); 
    return false; //Prevent the browser jump to the link anchor 
}); 

$(".toggle").click(function() { 
    $(this).next(".group").slideToggle(); 
}); 

тумблер работает сам по себе, но не тогда, когда я также реализовать код заполнения кода текста.

HTML-:

<div class="quepasa"> 
    <div class="large artist"> 
    <span class="dyntextval"> 
     <a title="<?php the_title();?>" href="#" class="trigger"> 
     <?php if (get_the_title()) the_title(); else the_ID(); ?>+ 
     </a> 
    </span> 
    </div> 
</div> 

У меня нет достаточно знаний JQuery, чтобы знать, как: а) поставить ссылку на? b) Сохраняйте функцию переключения

Я надеюсь, что кто-то там может помочь мне.

Answer 1

решаемые, сдвинув курок тумблер в DIV окружая ссылка: HTML:

<div class="group"> 
<div class="large trigger"><a title="<?php the_title();?>" href="#" class="large"><?php if (get_the_title()) the_title(); else the_ID(); ?>+</a></div> 
<div class="side-toggle">Content of the toggle</div> 

Переключить сценарий:

$(".side-toggle").hide(); 
$('.trigger').click(function() { 
$(this).closest('.group').find('.side-toggle').slideToggle(); 
return false; //Prevent the browser jump to the link anchor 
}); 

Textfill сценарий:

(function($) { 
$.fn.textfill = function(maxFontSize, maxWords) { 
    maxFontSize = parseInt(maxFontSize, 10); 
    maxWords = parseInt(maxWords, 10) || 4; 
    return this.each(function(){ 
     var self = $(this), 
      orgText = self.text(), 
      fontSize = parseInt(self.css("fontSize"), 10), 
      lineHeight = parseInt(self.css("lineHeight"), 10), 
      maxHeight = self.height(), 
      maxWidth = self.width(), 
      words = self.text().split(" "); 

     function calcSize(text) { 
      var ourText = $("<span>"+text+"</span>").appendTo(self), 
       multiplier = maxWidth/ourText.width(), 
       newSize = fontSize*(multiplier-0.1); 
      ourText.css(
       "fontSize", 
       (maxFontSize > 0 && newSize > maxFontSize) ? 
        maxFontSize : 
        newSize 
      ); 
      var scrollHeight = self[0].scrollHeight; 
      if (scrollHeight > maxHeight) { 
       multiplier = maxHeight/scrollHeight; 
       newSize = (newSize*multiplier); 
       ourText.css(
        "fontSize", 
        (maxFontSize > 0 && newSize > maxFontSize) ? 
         maxFontSize : 
         newSize 
       ); 
      } 
     } 
     self.empty(); 
     if (words.length > maxWords) { 
      while (words.length > 0) { 
       var newText = words.splice(0, maxWords).join(" "); 
       console.log 
       calcSize(newText); 
       self.append("<br>"); 
      } 
     } else { 
      calcSize(orgText); 
     } 
    }); 
}; 
})(jQuery); 



$(document).ready(function() { 
    $('.large').textfill(120, 42); 
    $('.medium').textfill(90,24); 
    $('.small').textfill(24,18); 
}); 

CSS-:

.large, .medium, .small {text-align: center;white-space:nowrap; overflow: hidden;word-wrap: break-word;width:526px; max-width:526px; } 
.large{line-height:180px;} 
.medium {letter-spacing:2px; line-height:72px;} 
.small {letter-spacing:2px; line-height:18px;} 

Пример:http://jsfiddle.net/inTOWN/vxSze/10/

Только жаль, что я знал, как распространить текст больше, так что было бы заполнить весь контейнер

Answer 2

Что происходит с вашим переключателем - это перерыв в стеке Javascript, или просто ошибка на ранней стадии делает все остальное в ад.

Пример:

Допустим, это вызывает ошибку (не могу назвать bar на undefined)

var darth = $('#foo').data().bar;

Тогда в этом блоке Код: не

$('#threepeeoh').hide(); 
var darth = $('#foo').data().bar; 
$('luke').show('fade', 500); 

#luke не покажет потому что раньше была ошибка на линии. #threepeeoh смог спрятаться, потому что сделал это до того, как появился darth и обнаружил ошибку. И любой код, который после этого, скорее всего, не будет выполнен. (Это стоит погуглить «JS попробовать/поймать блоки»)

Итак, когда вы добавляете код textfill, он должен бросать ошибку и делает его кажется как ваш переключатель является FUBAR.

Что касается этой ошибки, вам нужно научиться использовать Javascript Debugger для своего веб-браузера и посмотреть, какая ошибка была выбрана. Насколько я могу судить, var ourText = $(""+text+"").appendTo(self) даже не в блоке кода, который вы отправили, ни в скрипке, поэтому я даже не знаю, о чем вы говорите.

Итак:

1. Go найти в консоли разработчика, чтобы использовать отладчик JavaScript с (Firefug популярностью, Chrome имеет один встроенный в, нажмите CTRL SHIFT J)
2. Refresh, то искать ошибку (скорее всего, в красном)
3. Редактировать свой вопрос (возможно, лучше спросить у нового) и отправить эту ошибку С кодом, близким к тому, где была заброшена ошибка (обычно указывается файл и номер строки)
4. Если возможно, загрузите образец своей работы на общедоступный сервер, который вы не планируете удалять, поэтому сообщество может ссылаться на него.