Jump to content

Question

Posted

Is it possible to use string concatenation with the content property. I'm trying to display an image before every item in my list, but I want this image to be a link. Here's what I want to do, but I don't know how to do this. If anyone can help me out, that would be great. Thanks.


[code]
#side-nav ul li:before {
position: relative;
float:right;
top: 15px;
content: "<a href='http://url'>" + url('arrow.png') + "</a>";
}
[/code]

Share this post


Link to post
Share on other sites

10 answers to this question

  • 0

Posted

It's not possible, you can't insert anything but plain simple text using the CSS content property. Not even <a>'s.

Share this post


Link to post
Share on other sites
  • 0

Posted

No, you can't do it like this. CSS will not render the tags you input. Converts it to &lt;

What is the actual URL you want to link to?

It might be "better" to add a new anchor element in script rather than use CSS. After all, you are adding function rather than style.

Share this post


Link to post
Share on other sites
  • 0

Posted

Here's the script if you want it...

[CODE]
<script>

var figures = document.getElementsByTagName("li");
for (var counter = 0; counter < figures.length; counter++) {
var newLink = document.createElement("a");
newLink.setAttribute("href", "bob");
var txtNode = document.createTextNode("Hello. This is a new node.");
newLink.appendChild(txtNode);

figures[counter].insertBefore(newLink,figures[counter].firstChild)
}


</script>
[/CODE]

Ignore the naming convention, I had just written on my site and I have the figure element. You might have to extend the functionality so that other lists are ignored, but I can't be bothered to write that for free... :-)

Share this post


Link to post
Share on other sites
  • 0

Posted

Well if I use jquery can't I just do it all in jquery? Add both the image and the link after the certain element list item? Thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted

Css is rendered after the HTML so no :p
You can try js.

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='kman1985' timestamp='1358205648' post='595454364']
Well if I use jquery can't I just do it all in jquery? Add both the image and the link after the certain element list item? Thanks.
[/quote]

If you already have jQuery, you can change my code (which does the same thing) for jQuery. The selector part of it will be easier if you use jQuery.

[CODE]
var $newLink = $("<a />"),
$existingListItems = $("#side-nav ul li");
$newLink.attr("href","http://url")
.text("Here's my new item")
.css({
position: "relative",
float:"right",
top: "15px"
});
$existingListItems.prepend($newLink)
[/CODE]

Share this post


Link to post
Share on other sites
  • 0

Posted

Please don't use javascript for this. :s

Or if you do, at least consider what will happen if your user doesn't have js enabled. I don't see why
[CODE]
<ul>
<li><a href="somewhere"><img /></a><p>List element text</p></li>
...
</ul>
[/CODE]

Wouldn't work for you, though.

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='threetonesun' timestamp='1358277023' post='595456028']
Please don't use javascript for this. :s

Or if you do, at least consider what will happen if your user doesn't have js enabled. I don't see why
[CODE]
<ul>
<li><a href="somewhere"><img /></a><p>List element text</p></li>
...
</ul>
[/CODE]

Wouldn't work for you, though.
[/quote]

I was assuming he didn't have access to the code behind that renders these elements. Then again, I don't get why he would want a link in the side nav that isn't already there. It's a nav bar... why add an image link in there? If it's for visible purposes, then I would advise adding it as a background image.

Then again, it might help if he listed his actual problem rather than for just a solution to an isolation code issue.

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='lunamonkey' timestamp='1358277675' post='595456052']
I was assuming he didn't have access to the code behind that renders these elements. Then again, I don't get why he would want a link in the side nav that isn't already there. It's a nav bar... why add an image link in there? If it's for visible purposes, then I would advise adding it as a background image.

Then again, it might help if he listed his actual problem rather than for just a solution to an isolation code issue.
[/quote]

Fair enough. If there's already a link in a <li> and he can't get at the source, appending with js is probably the best way to go.

Share this post


Link to post
Share on other sites
  • 0

Posted

Thanks guys. Got it working with jquery. Heres the code I used.

[code]
$(document).ready(function() {
$('<img src="/images/big-arrow.png" alt="Arrow" width="22" height="22" border="0" />').appendTo('#side-nav ul li');

$('#side-nav ul li img').css ({
position: 'relative',
float: 'right',
top: '-30px',
left: '-5px'
});

});
[/code]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.