Позицианирование div с текстом

Вопрос: Позицианирование кнопки и обтекание ее текстом, шрифты

Добрый ночь.
Возникла проблема: не получается сделать так, как на картинке 1.
что есть:

Код HTML5

<div class = "description">
    <input type = "button" value = "Read more" class="btn">
        <p class="post_text"> 
        <a href="#"> Vestibulum id ligula porta felis euismod </a> semper. 
                            Etiam porta sem malesuada magna mollis euismod. </p>
 </div>

Код CSS

.description {
        position:relative;
    margin-left:92px;
    width: 483px;
    height:92px;
    background-color:#f8f8f8;
    box-shadow: inset 1px 0 0 0 #3f8cdb ;
}
 
.btn {
    color:#ffffff;
    border:none;
    width:113px;
    height:32px;    
    background-color:#001e3c;
    position:relative;
    top:51px;
    bottom:9px;
    left:18px;
    margin-right:18px;
    float:right;    
}
 
.post_text {
    padding-top:15px;
    margin-left:22px;
    font: "Signika Negative";
    color:#5a5a5a;
    font-size:12px;
    line-height: 1.5;
}
 
.post_text a {
    color: #0e57a1;
}
 
.post_text a:visited {
    color: #0e57a1;
}

проблема в том, что текст игнорирует существование кнопки, проходит под ней, хотя его состояние не абсолют, а релатив. при нет такой хрени не должно быть. но текст на этом не остановился. он игнорирует применяемый у нему стиль шрифта. причем любой, нагло и напрочь. код назначения шрифта копировал из кода, где он работал и это было проверено. заранее спасибо

Ответ: user20011993, можно сделать красивее. достаточно кнопке добавить

Код CSS

1	margin-left: ЧИСЛОpx;

А тексту который кнопку обтекает

Код CSS

1	text-align: justify;

Читать все 12 сообщений

Вам также можеть быть интересно:

Ищу стажировку HTML - верстальщик

Контент по приоритетнсти

Стиль активной и неактивной кнопки

Cкрыть текст под ссылкой, чтобы он отображался только при наведении на неё

Case и random

Вопрос: Раскрывающийся список с объемными текстами

Есть набор ссылок, пусть будет "Ссылка 1", "Ссылка 2" .... и т.д. При клике на "Ссылка 1" под ней раскрывается текст - "Текст 1". При клике на эту же ссылку уже раскрытый текст скрывается. "Текст 1" так же может быть скрыт при клике на любую другую ссылку например "Ссылка 2". При этом под ссылкой "Ссылка 2" раскрывается "Текст 2" и т.д.

Проблема в том, что если текст объемный, то скрываясь вышестоящий "Текст 1" уезжает вверх страницы, а заголовок "Текст 2" так же уезжает за ним и "Текст 2" получается открыт с середины. Чтобы его прочитать нужно скролить страницу. Как решить эту проблему. КОд ниже.

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
    $(".accordion h3:first").addClass("slow");
    $(".accordion ul").hide();

    $(".accordion h3").click(function(){

        $(this).next("ul").slideToggle("slow")
        .siblings("ul:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
     });
 
 });

</script>

<div class="accordion"> 
  <h3><a href="#" onclick="return false">Ссылка 1</a></h3>
  <ul>Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1 Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1 
  </ul>   

  <h3><a href="#" onclick="return false">Ссылка 2</a></h3>
  <ul>Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 
  </ul>  

</div

Ответ: morzer,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .accordion {
    margin: 1000px 0;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>
<script>
$(function() {
    $(".accordion h3:first").addClass("slow");
    $(".accordion ul").hide();
    $(".accordion h3").click(function(event) {
        event.preventDefault();
        var h3 = $(this);
        h3.next("ul").slideToggle("slow").toggleClass("active")
        .siblings("ul").removeClass("active")
        .slideUp("slow", function() {
            var scrollTop = h3.offset().top;
            $("html, body").stop().animate({
                scrollTop: scrollTop
            }, 500)
        })
    })
});
</script>

<div class="accordion">
  <h3><a href="#" >Ссылка 1</a></h3>
  <ul>Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1  Текст 1
  </ul>

  <h3><a href="#" >Ссылка 2</a></h3>
  <ul>Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2
  </ul>

</div>


</body>
</html>

Читать все 5 сообщений

Вопрос: Смена текста при обновлении страницы

Добрый день. Пытаюсь реализовать через java смену текста при обновлении страницы на сайте.
Использую скрипт:

Javascript

<SCRIPT language="1javascript">
var howMany = 7 
var quote = new Array(howMany+1) 
quote[0]="Текст 1" 
quote[1]="Текст 2" 
quote[2]="Текст 3" 
quote[3]="Текст 4" 
quote[4]="Текст 5" 
quote[5]="Текст 6" 
quote[6]="Текст 7" 
quote[7]="Текст 8"
 
function rndnumber(){ 
var randscript = -1 
while (randscript < 0 || randscript > howMany || isNaN(randscript)){ 
randscript = parseInt(Math.random()*(howMany+1)) 
} 
return randscript 
} 
quo = rndnumber() 
quox = quote[quo] 
document.write(quox)
 
</SCRIPT>

Текст выводится, при обновлении страницы рандомно сменяется.
Проблема в том, что мне нужно вызвать действие при нажатии на этот текст, в моем случае - кликабельный номер телефона.
И возможно ли сделать альтернативу с принципом: пользователей с одним IP заходит на сайт - ему отображается один текст, заходит пользователей с другим IP - отображается второй текст и так рандомно.
Если подскажите, буду очень благодарен.

Ответ: maybess,

Так -> ??

Javascript

var howMany = 7 
var quote = new Array(howMany+1) 
quote[0]='<a href="tel:+7-900-999-00-99">Текст 1</a>'
quote[1]='<a href="tel:+7-900-999-00-99">Текст 2</a>'
quote[2]='<a href="tel:+7-900-999-00-99">Текст 3</a>'
quote[3]='<a href="tel:+7-900-999-00-99">Текст 4</a>'
quote[4]='<a href="tel:+7-900-999-00-99">Текст 5</a>'
quote[5]='<a href="tel:+7-900-999-00-99">Текст 6</a>'
quote[6]='<a href="tel:+7-900-999-00-99">Текст 7</a>'
quote[7]='<a href="tel:+7-900-999-00-99">Текст 8</a>'
 
function rndnumber(){ 
    var randscript = -1 
    while (randscript < 0 || randscript > howMany || isNaN(randscript)){ 
    randscript = parseInt(Math.random()*(howMany+1)) 
    } 
    return randscript 
} 
quo = rndnumber() 
quox = quote[quo] 
document.write(quox)

Читать все 4 сообщений

Вопрос: Отменить слетание выделения текста после выполнения функции

Добрый день.
Есть скрипт, который добавляет ссылку при копировании.

Javascript

function addLink() {
 
    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');
 
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
 
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
 
    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);
}
 
document.addEventListener('copy', addLink);

Но после того, как копирование произошло, в браузере слетает выделение ранее выделенного текста. Как я понимаю, это происходит из-за "selectAllChildren". Можно как-то этого избежать, чтобы выделение не слетало?
Заранее спасибо!

Ответ:

Сообщение от BANO

только если запомнить предедущее и опять его выделить

Да, я думал об этом варианте. Можно будет использовать addRange. Например вот:

PHPHTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-</title>
 </head>
 <body>
<script type="text/javascript">
function addLink() {
 
    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');
        
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
 
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
 
    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);
 
 var range = document.createRange(),
     elem = document.getElementById("sel_range");
 
     range.setStart(elem.firstChild, 0);
     range.setEnd(elem.firstChild, 15);
     selection.removeAllRanges();
     selection.addRange(range);
}
 
document.addEventListener('copy', addLink);
 
</script>
<p id="sel_range">текст текст текст</p>
<p>текст текст текст</p>
<p>текст текст текст</p>
<p>текст текст текст</p>
 </body>
</html>

Но есть несколько моментов:
1. При добавлении в JS-код части, отвечающей за повторное добавление выделения, перестает работать основной функционал - добавление ссылки при копировании. Пока не разобрался почему
2. В моём примере выделение задано конкретно, а надо, чтобы высчитывались значения произвольного выделения для вставки значений в setStart и setEnd. Пока тоже не пойму как это сделать...

Читать все 4 сообщений

Вопрос: Построковое появление текста в блоке

Суть такова: Есть блок который должен появится первый(затемнение и первая строка),в нем должен появляться построково текст(вторая строка,третья и т/д), постепенно, допустим с интервалом в 1 секунду, Так должно быть на разных страницах, суть в том что теги внутри блока разные. Сделал сначала. чтобы появлялся блок полностью и в первом примере хтмл попробовал поставить для каждой строки классы и задать в скрипте для каждого время+1 сек(результата не было). Во втором хтмл-примеров классы для текста не добавлял. Вот допустим:
1)

HTML5

<div class="tophead">
<div class="topheaddown">
<div class="text1"><p><i>Текст1</i> немного текста<br /> еще немного текста</p></div>
<div class="text2"><p><i>Текст2</i>  немного текста<br />еще немного текста</p></div>
<div class="text3"><p><i>Текст3</i>  немного текста</p></div>
<div class="text4"><p><i>Текст4</i>  немного текста<br />еще немного текста</p>
<button class="btnmenu call">ЗАКАЗАТЬ ЗВОНОК</button></div>
</div>
</div>

HTML5

<div class="tophead">
<div class="topheaddown">
<p>Текст1 <br />немного текста</p>
<i>Текст2</i> 
<button class="btnmenu zajavka">ОСТАВИТЬ ЗАЯВКУ!</button></div>
</div>

Стили вот, но думаю они не особо важны.

CSS

.tophead{
    font-family: 'Open Sans', sans-serif;
    color: white;
    vertical-align: top;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 3;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    text-align: center;
}
text1{
display: none;
}
text2{
display: none;
}
text3{
display: none;
}
text4{
display: none;
}

И сам скрипт

Javascript

<script type="text/javascript">
setTimeout(function(){$('.tophead').fadeIn('fast')},3000);
</script>
<script type="text/javascript">
setTimeout(function(){$('.text1').fadeIn('fast')},4000);
</script>
<script type="text/javascript">
setTimeout(function(){$('.text2').fadeIn('fast')},5000);
</script>
<script type="text/javascript">
setTimeout(function(){$('.text3').fadeIn('fast')},6000);
</script>
<script type="text/javascript">
setTimeout(function(){$('.text4').fadeIn('fast')},7000);
</script>

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

Ответ: Выводится только первая строка

Добавлено через 13 минут

Сообщение от AmateR62

Все нормально показывается

так оно не работает, потому что этот блок над видео и как бы затемняет его и на нем текст, Сделал по первому варианту и скрыл еще класс текст1 и начал перебор не с 2, а с 1. Спасибо, просто если со второго начинать то показывается текст 1 и текст2

Читать все 7 сообщений

Вопрос: Сократить текст с учетом переноса строк

Здравствуйте, подскажите пожалуйста кроссбраузерное решение для обрезания текста, если не вмещается в одну строку или если есть перенос строки выставить в конце многоточие.
Сейчас использую:

CSS

1	.text_overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

Все работает как нужно, но мне нужно еще учитывать перенос строки, данные выводятся из базы в таком виде:
текст текст текст<br>текст текст текст<br>, вот нужно обрезать все после первого тега <br> (текст текст текст ...)

Ответ: Fedor92, было бы здорово, с однострочним текстом проблем вообще нет, обрезается стилями если не вмещается. Раньше я не использовал перенос текста, перед занесением в бд вырезались все теги.
Было так:

CSS

1	.text_overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

HTML5

<div class="text_overflow"
onclick="text_overflow_show('#text_overflow_<?=$text['id'];?>');"
id="foo_text_overflow_<?=$text['id'];?>">
<?=textreale($text['text']);?>
</div>

Теперь в бд добавляются переносы строк и смайлы и начались танцы с бубном.

Добавлено через 3 минуты
Не знаю на сколько я правильно сделал, перед внесением в бд валидация:

PHP

function validetext($text){
       $text = str_replace('<br>', '*br*', $text);
       $text = str_replace('<b>', '*b*', $text);
       $text = str_replace('</b>','*bb*', $text);   
       $text = str_replace('<img class="smile_add_block" src="','*smile*', $text);    
       $text = str_replace('">','*smilesmile*', $text);
       $text = strip_tags($text);
       $text = str_replace('&nbsp', '', $text);
       $text = str_replace('<', '', $text);
       $text = str_replace('>', '', $text);
       $text = str_replace('$', 'y.e', $text);
       $text = str_replace(';', '', $text);
       $text = str_replace('"', '', $text);
       $text = str_replace('\'', '', $text);
       $text = str_replace('`', '', $text);
return $text = trim($text);
}

Вывод из бд:

PHP

function textreale($text){
       $text = str_replace('*br*', '<br>', $text);
       $text = str_replace('*b*', '<b>', $text);
       $text = str_replace('*bb*', '</b>', $text);
       $text = str_replace('*smile*', '<img class="smile_add_block" src="', $text);
       $text = str_replace('*smilesmile*', '">', $text);
       return $text = $text;
}

Добавлено через 12 минут
Я использую редактируемый div вместо textarea и следующий js переноса строки и отправки формы

HTML5

1	<div contenteditable="true" id="comment" onkeydown="keyCodeEvent(event,'comment')"></div>

Javascript

function keyCodeEvent(e,fun){
var keyCode = e.keyCode || e.charCode || e.which;
if (keyCode == 10 || keyCode == 13){
            if (e.ctrlKey){
                var selection = window.getSelection()
                    ,range = selection.getRangeAt(0)
                    ,br = document.createElement("br")
                    ,textNode = document.createTextNode("\u00a0")
                    ;
                range.deleteContents();//required or not?
                range.insertNode(br);
                range.collapse(false);
                range.insertNode(textNode);
                range.selectNodeContents(textNode);
                selection.removeAllRanges();
                selection.addRange(range);
                return false;
}else{
window[fun]();
}            
return false;
}
}

Добавлено через 3 минуты
Вообще по хорошему проверять бы как нибудь количество строк, если более например трех 3, то показать 3 строки следующие скрыть и добавить ссылку показать, подобие вк комментариев.

Читать все 19 сообщений

Вопрос: Как перетащить текст в поле input и записать его в value?

Всем привет , подскажите плиз нубу.
есть список li (может быть бесконечное количество) и есть несколько input
полей (может быть бесконечное количество), как перетягивая мышью li в input записать содержимое li (текст) в value input в который перетянули, и так любой другой текст из этого списка li в любой другой input? Важно после перемещения текста из li в input удалить перемещенный li, а input в который переместили заблокировать от изменений, что бы в него не переместили другой li из списка но оставить возможность перемещать оставшиеся li в другие input ?

<ul>
  <li>Текст 1</li>
  <li>Текст 2</li>
  <li>Текст 3</li>
  <li>Текст 4</li>
  <li>Текст 5</li>
  <li>Текст 6</li>
  <li>Текст 7</li>
  <li>Текст 8</li>
  <li>Текст 9</li>
  <li>Текст 10</li>
</ul>

<form>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
</form>

Ответ:

Сообщение от laimas

Каким образом ее вернуть на место, если ранее было условие "Важно после перемещения текста из li в input удалить перемещенный li"?

ок, давайте скрывать а не удалять )))

Читать все 10 сообщений

Вопрос: Блок div по ширине своего текста

Здравствуйте,
есть такой кусок кода:

Код:

<div style="position: relative; display: inline-block; vertical-align: middle; width: 100%;">
Текст 1

<div style="width: auto; display: none; position: relative;">Текст 2</div>

</div>

Я стили обрезал, но проблема такая, что блок с содержанием "Текст 2" растягивается полностью по ширине первого div (где "Текст 1")
как сделать чтоб второй блок, растягивался только, по объему который нужен для "Текст 2"....

Ответ: Mavrikii
Ещё такой вопрос по тегу <div/>
если написать код так:

Код:

<div ...>
<div style="margin-right: 10px; display: inline-block;">Текст 1</div>
<div style="display: inline-block;">Текст 2</div>
</div>

По идее, результат должен быть таким:

Код:

Текст 1(пробел 10px)Текст 2

но получается:

Код:

Текст 1(пробел 10px) Текст 2

т.е. справа Текст 2 появляется пробел (невидимый, но увеличивает промел между тегами <div/> с содержанием текста.

Получилось убрать пробел, поставив код так:

Код:

<div ...>
<div style="margin-right: 10px; display: inline-block;">Текст 1</div><div style="display: inline-block;">Текст 2</div>
</div>

Вопрос: Этот пробел является реакцией переноса div на новую строку? Его можно как-то скрыть или чтото с ним сделать? просто я привел пример с малым куском, а у меня используется очень длинный код, и если всё ставить в строчку, становится неудобно управлять исходником.

Читать все 20 сообщений

Вопрос: Вывод текста в зависимости от выбранного радио переключателя

Всем доброго времени суток!
Я совсем новичок, бьюсь над задачей второй день и не чего не получается. Пожалуйста подскажите или пните в нужное направление.

Стоит следующая задача: есть некая форма с радио переключателями, сама форма помещена в таблицу из двух колонок, радио переключатели в одной колонке, формируемый текст в другой колонке и в зависимости от того какой переключатель выбрал пользователь рядом формируется "налету" текст.

В интернете массу примеров, но все они сводятся к обработке одной группы радио переключателей. Мне же надо достичь следующего, например:

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Работа с Radio Button в JQuery - Snipp.ru</title>

</head>
<body style="font-size: 14px; position: relative; padding: 15px 20px;">
    <table width="200" border="1">
<tbody>
<tr>
<td>
        <p>
    <label><input type="radio" name="radio" value="1"> Radio Button 1</label><br>
    <label><input type="radio" name="radio" value="2"> Radio Button 2</label><br>
    <label><input type="radio" name="radio" value="3"> Radio Button 3</label>
</p>
        </td>
<td>
        <div class="block-text" id="block-1">
    Блок текста №1
</div>

<div class="block-text" id="block-2">
    Блок текста №2
</div>

<div class="block-text" id="block-3">
    Блок текста №3
</div>
        </td>
</tr>
<tr>
<td>
        <p>
    <label><input type="radio" name="radio1" value="4"> Radio Button 4</label><br>
    <label><input type="radio" name="radio1" value="5"> Radio Button 5</label><br>
    <label><input type="radio" name="radio1" value="6"> Radio Button 6</label>
</p>
        </td>
<td>
         <div class="block-text" id="block-4">
    Блок текста №4
</div>

<div class="block-text" id="block-5">
    Блок текста №5
</div>

<div class="block-text" id="block-6">
    Блок текста №6
</div>
         </td>
</tr>
</tbody>
</table>



<style type="text/css">
.block-text {
    display: none;

}
</style>

<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script>
$('input[name="radio"]').click(function(){
    var target = $('#block-' + $(this).val());

    $('.block-text').not(target).hide(0);
    target.fadeIn(500);
});
</script>
</body>
</html>

С первым блоком радио переключателей (Radio Button 1, Radio Button 2, Radio Button 3) скрипт справляется замечательно и в ячейку таблицы рядом выводит текст в зависимости от выбора этих переключателей.
Но вот как заставить скрипт так же обрабатывать и давать результата со второй группой радио переключателей (Radio Button 4, Radio Button 5, Radio Button 6)?

Ответ: GORKOMXO3

Цитата:

что бы передавался текст блока для дальнейшей обработки.

зачем, если он статический? вы и так передаете id блока на сервер, ну так храните и там копию текста.
иначе текст должен быть в hidden элементе, ну или с jquery можно обрабатывать перед отправкой и копировать в него показываемый текст. но не вижу смысла в этом.

либо, если текст уже в textarea, то можно просто выставлять атрибут disabled невидимым элементам - в данной ситуации они не будут отправлены на сервер.

Читать все 8 сообщений

Вопрос: Клик по div. Открыть окно, вписать текст, подсветить код

Сайт на Wordpress. Там плагин подсветки кода Crayon Syntax Highlighter.
Моя задача такая, чтобы при клике на определенный текст, открывалось окно и в него вписывался подсвеченный код.

Я этот текст под клик, вгоняю в тег <div></div>, после чего создаю для него событие на "клик мыши", в котором вызываю функцию, где открывается окно и в это окно вписывается текст.

Моя проблема в том, что текст должен быть в виде HTML с подсвеченным кодом, а я получаю обычный текст.
Ниже рисунки, показывающие проблему.

Так я получаю текст из файла в переменную. Файл на сервере.

Код PHP

1
2
3

<?php
  $arr[] = str_replace('</script>','</s" + "cript>',htmlspecialchars(addslashes(file_get_contents("MyFile.php"))));
?>

Так я делаю функцию, которая должна открыть окно и вписать в него текст, внутри которого должна сработать подсветка.

Код Javascript

<script type='text/javascript' >
   function MyFunc(S){
      var NewWin=window.open('','','...');
      NewWin.document.write(S);  
   }
</script>

И так я делаю событие "клик для div" (я не знаю как это называют).

Код HTML5

<div id="id2" >
 Кликни меня<br />
<script type='text/javascript'>  
document.getElementById("id2").onclick = MyFunc.bind(null,<?php echo json_encode($arr[0]); ?>);
</script>
</div>

текст файла

<HTML><body>
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>

<link href='http://ci-plus-plus-snachala.ru/syntaxhighlighter_3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://ci-plus-plus-snachala.ru/syntaxhighlighter_3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://ci-plus-plus-snachala.ru/syntaxhighlighter_3.0.83/scripts/shCore.js' type='text/javascript'></script>
<script src='http://ci-plus-plus-snachala.ru/syntaxhighlighter_3.0.83/scripts/shBrushCpp.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.all();
</script>


<pre class='brush: cpp'>
#include <iostream>

using namespace std;

int main(){
setlocale(LC_ALL,""
int Height,Weight;

cout<<"Введите Ваш рост и вес:\n";
cin>>Height>>Weight;

cout<<"Ваш рост: "<<Height<<endl;
cout<<"Ваш вес: "<<Weight<<endl;

}
</pre>

</body></HTML>

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

Ответ: Чтобы как-то было проще мне помочь, сделаю вот что.
Чистый WordPress на локальный ПК. (Полагаю, многие имели опыт работы с этой cms).
Там плагин для работы с php
И одна папка, в которой файл. Текст этого файла должен отобразиться в новом окне, а листинг из того файла должен подсветиться.

Я использую xammp.
Прикрепляю 2 файла.
1 - это сам wordpress с плагином и моим файлом.
2 - это бд (для импорта).

ну и текст может покорежится, поэтому вот это весь текст в записи:

Код HTML5

<?php
  $arr[] = str_replace('</script>','</s" + "cript>',htmlspecialchars(addslashes(file_get_contents("MyFiles/MyFile.php"))));
?>
 
<script type='text/javascript' >
   function MyFunc(S){
      var NewWin=window.open('','','...');
      NewWin.document.write(S);  
   }
</script>
 
<div id="id2" >
 <b>Кликни меня</b><br />
<script type='text/javascript'>  
document.getElementById("id2").onclick = MyFunc.bind(null,<?php echo json_encode($arr[0]); ?>);
</script>
</div>

Все, что мне нужно, это чтобы сработала подсветка в открываемом окне.

Читать все 10 сообщений