Geek Answers Handbook

How to wrap a lesson around the first half of the title?

I'm trying to wrap a class around the first or second half of the header so that I can create more dynamic and cool headers using jQuery.

Theoretically, I want to find all the gaps in the sentence and divide it into two parts. If the title contains an unequal number of words, the script should detect this and also add a class to the nearest word.

+5
source share
4 answers

Nice one @lashleigh. You can see a working example here:

http://jsfiddle.net/johnhunter/KRJdm/

@Tony, I implemented what you need as a jquery plugin. You call it in the header you want to format:

$(function() {
    $('h1').splitWords();
});

... html- :

:

<h1>This is a long headline</h1>

, :

<h1>
    <span class="wrap-1">This is </span>
    <span class="wrap-2">a long headline </span>
</h1>

:

, , , . , ( , ). :

$('h1.a').splitWords();   // Split these words equally
$('h1.b').splitWords(1);  // Split these after the first word
$('h1.c').splitWords(-2); // Split these after the second last word

http://jsfiddle.net/johnhunter/KRJdm/

+3

. javascript splice. Splice . , .

jQuery, , html. , , , , "dynamic":

var header = $("h1.dynamic").text();
    => "Header with some other stuff"
var header_as_array = header.split(" ")
    => ["Header", "with", "some", "other", "stuff"]
var first_half = header_as_array.splice(0, header_as_array.length/2)

, , :

first_half = ["Header", "with"]
header_as_array = ["some", "other", "stuff"]

:

var first = '<span class="first_half">'+first_half.join(" ")+'</span>';
var second = '<span class="second_half">'+header_as_array.join(" ")+'</span>';

var finished =  first+" "+second;

, jQuery:

$("h1.dynamic").html(finished);

, , . , :

var splice_location = Math.ceil(test_as_array.length/2);
var first_half = header_as_array.splice(0, splice_location);

, , .

+4

<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var headlineText = $('h1.mainHeader').text();
            var headlineWords = headlineText.split(' ');
            var headlineLength = headlineWords.length;
            var headlineMidPoint = (headlineLength / 2) + 1;

            var headlineFirstHalfText = headlineWords.slice(0, headlineMidPoint).join(' ') + ' ';
            var headlineSecondHalfText = headlineWords.slice(headlineMidPoint).join(' ');

            var d = document;
            var headlineFirstHalf = $(d.createElement('span')).addClass('headlineHead').text(headlineFirstHalfText);
            var headlineSecondHalf = $(d.createElement('span')).addClass('headlineTail').text(headlineSecondHalfText);
            var headline = $(d.createElement('h1')).addClass('mainHeader').append(headlineFirstHalf).append(headlineSecondHalf);

            $('h1.mainheader').replaceWith(headline);
        });
    </script>
    <style type="text/css">
        h1 { font-size:18px;}
        span.headlineTail {font-size:1.2em;}
    </style>
</head>
<body>
<h1 class="mainHeader">This is a dynamic headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</body>
</html>
0

lashleigh , , jQuery - . . PHP, Python , , . , , . , .

PHP.

<?php 
        $headline = "This is a headline  of epic proportions";
        $split = explode(' ', $headline);
        $a = array_slice($split, 0, (count($split)/2));
        $b = array_slice($split, (count($split)/2));
        $headline = '<span class="whatever">'. join(' ', $a) . '</span>' . join(' ', $b);
        print $headline;
?>
-1

More articles:


All Articles