Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does BigText work with <a href> links? #107

Open
mercenarri opened this issue Apr 21, 2016 · 1 comment
Open

Does BigText work with <a href> links? #107

mercenarri opened this issue Apr 21, 2016 · 1 comment

Comments

@mercenarri
Copy link

mercenarri commented Apr 21, 2016

Hey man, loving this BigText JS. I've got it to work with your "span" demo but when I change the span to "a" anchor points it seems to break. Can I get it to work with a-href links?

Using "p" paragraphs instead of spans seems to work fine when I set the child selector to "> p". But changing it to "> a" as shown below doesn't want to work. The same happens if I try to use "ul" lists with links in them. Any help would be appreciated!

<div id="bigtext">
         <a href="#">project one</a>
         <a href="#">project two</a>
         <a href="#">project three</a>
         <a href="#">project four</a>
         <a href="#">project five</a>
</div>

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/js/bigtext.js"></script>
<script>
    $(function() {
        WebFont.load({
            custom: {
                families: ['Oswald'], // font-family name
                urls : ['/css/main.css'] // URL to css
            },
            active: function() {
                $('#bigtext').bigtext({
                    childSelector: '> a'
                });
            }
        });
    });
</script>
@mercenarri
Copy link
Author

Figured it out!

I nested the span inside the anchor which seems to have worked. Then I called > a span on the child selector.

<div id="bigtext">
        <a href="#"><span>project one</span></a>
        <a href="#"><span>this is project two</span></a>
        <a href="#"><span>example of three</span></a>
        <a href="#"><span>and four</span></a>
        <a href="#"><span>project five too</span></a>
        <a href="#"><span>maybe number 6</span></a>
</div>

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/js/bigtext.js"></script>
    <script>
    $(function() {
        WebFont.load({
            custom: {
                families: ['Oswald'], // font-family name
                urls : ['/css/main.css'] // URL to css
            },
            active: function() {
                $('#bigtext').bigtext({
                    childSelector: '> a span'
                });
            }
        });
    });
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant