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

It kills css import src #78

Closed
saturday1 opened this issue Aug 27, 2015 · 2 comments
Closed

It kills css import src #78

saturday1 opened this issue Aug 27, 2015 · 2 comments

Comments

@saturday1
Copy link

Hello! I tried to implement this into our site. The problem (I know this is not semantically right) is that we have style elements inside the body element, with import. We have to use this solution within our solution in some cases.

This is what the script do with a file import:

<style media="screen" type="text/css"> @import url("<a class="linkified" target="_blank" cdn.axiell.com="" arena="">//cdn.axiell.com/arena/instagram-feed.css")</a>; </style>

As you can see it pushes the a-tag inside the import which kind of kills the look of different parts on the page.

In other words, this solution does not work:

<div class="arena-columns-1-2-1-2-1">
Linkify this link: www.i-should-be-linkyfied.com

But this is HTML and should not be linkyfied:
<style media="screen" type="text/css">
@import url("//cdn.axiell.com/arena/instagram-feed.css");
</style>
</div>
<script src="//cdn.axiell.com/arena/linkify.min.js"></script>
<script src="//cdn.axiell.com/arena/linkify-jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
    jQuery('.arena-columns-1-2-1-2-1').linkify({
        target: "_blank"
    });
});
</script>

Anyone know how to solve? :)

@saturday1
Copy link
Author

I thought that I figured out the solution, so I tried this. The script seems right (The console.log shows that there is only one style element in the HTML above). But still it linkyfies the import src anyway, like it runs after the each and if statement:

jQuery(document).ready(function(){
    // LOOP THROUGH EVERY ELEMENT IN WITHIN BODY
    jQuery('body *').each(function(){
        // IF THE ELEMENT IS NOT(!) STYLE OR SOME SOME SPECIFIC IDS, LINKYFY IT
        if(!jQuery(this).is('style, #instagram-feed, #twitter-feed, #facebook-feed')){
            jQuery(this).linkify();

            // JUST FOR TESTING
            console.log("Not style element");
            // jQuery(this).addClass("no-style");
        } else {
            console.log("style element");
            // jQuery(this).addClass("i-am-style");
            // / JUST FOR TESTING

        };
    });
});

@nfrasser
Copy link
Owner

This has been partially addressed in #106 with the new validate option. #57 should also be fixed before this is closed.

@nfrasser nfrasser mentioned this issue Apr 17, 2016
5 tasks
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

2 participants