How to swap text in div using css

Question

I'm working on a data platform that has widget specific to the platform I'm using a widget called map that displays a map and the title linked to the map in the database. the map includes a div title:

<map>
<div class="title">Title</div>
other divs ..
</map>

When I code i don't have access to the div title because it's included in the widget. I want to change the text of the title using css.

I looked at these examples: How can I replace text with CSS?

And did:

First option

.title{ visibility:hidden }

.title:after{
```
content:"NewTitle" ;
visibility:visible;
```
}

But then "Title" is just hidden but still takes space so my "NewTitle" is not centered

Second option

.title{ text-indent: -9999px; line-height:0; }

.title:before{
```
text-indent:0;
content:'Welcome Back!';
display:block;
line-height: initial;
```
}

But then my NewTitle is not well displayed.

How can I do to just switch "Title" to "New title" in CSS or eventually in Javascript.

Thank you for your help

Edit: the beginning of the displayed page

Flexibilités etc... is the title

I dont have access to what is written below ods-map in the html code as the ods-map is a widget. I can only change the css.

margin-left: -272px with .title:after class didn't fix it? – deebs Jul 31 '15 at 19:21 — deebs, Jul 31 '15 at 19:21

messerbill · Answer 1 · 2015-07-31T13:45:41.883

1

JavaScript solution is the standard to do this:

$('.title').html("new title here"); // jquery
document.getElementsByClassName("title")[0].innerHTML = "new title here" // pure JS

fiddle:

https://jsfiddle.net/qpq45Luc/1/

edited Jul 31 '15 at 13:45

answered Jul 31 '15 at 13:24

messerbill

5,499
1
27
38

Thank you for your reply. I put the javascript code between in my html page but nothing changed. – morg Jul 31 '15 at 13:33
can you post how you did this please? – messerbill Jul 31 '15 at 13:33
I just wrote As a first line of my html page – morg Jul 31 '15 at 13:35
even before ? can you update your question and post your complete relevant html? – messerbill Jul 31 '15 at 13:43
I don't have access to the part as I use a data platform where some parts are already by default. I updated my post with the html page as it appears – morg Jul 31 '15 at 13:52
i cannot find the javascript there...i just see a – messerbill Jul 31 '15 at 13:56
edit with the script in the ng-scope class The platform is an open data platform – morg Jul 31 '15 at 14:00
errors in the console? try ` – messerbill Jul 31 '15 at 14:03
and i am not sure...but maybe you need to put this tag below the `title` element - but i am not sure, maybe it also works this way – messerbill Jul 31 '15 at 14:05
it still doesn't work, maybe i can't add javascript code in this platform but i doubt it. The platform code is built on AngularJS. – morg Jul 31 '15 at 14:05
did you try to put it below the title element? – messerbill Jul 31 '15 at 14:06
try to wrap document ready around it - `$( document ).ready(function() { .............. }` – messerbill Jul 31 '15 at 14:09
So I wrote but not success either – morg Jul 31 '15 at 14:12
Is there not a way to just cancel the div title and create a new one with the same attributes and at the same place? – morg Jul 31 '15 at 14:13
`$( document ).ready(function() {document.getElementsByClassName("title")[0].innerHTML = "new title here";}) ` – messerbill Jul 31 '15 at 14:13
let's continue this in the chat - http://chat.stackoverflow.com/rooms/84813/morg-help – messerbill Jul 31 '15 at 14:19
@morg - javascript will ultimately be best resolution if you can get a workaround. If not, see my updated answer. Use margin-left: -272px. – deebs Jul 31 '15 at 14:21
I'm on chat Messerbill – morg Jul 31 '15 at 14:22

Abhitalks · Answer 2 · 2015-07-31T13:58:16.123

Although your question is not tagged with css, your initial way of getting the text replaced was on the right track. You just need to explicitly set the display:block; on the pseudo-element. Then position the pseudo-element absolutely and with same padding on both the div and the pseudo-element to keep similar appearance.

Something like this:

div.title { 
    visibility: hidden; position: relative;
    padding: 4px; 
}

div.title::after {
    content: 'Replaced text';
    visibility: visible;
    display: block; position: absolute;
    padding: 4px; top: 0px;
}

<map>
    <div class="title">Title</div>
</map>

However, note that this is still a hack. Javascript is better way of doing this as, the text will be in your control.

When i do that the text is not displayed but the space it used to take is still there so my new title is not at the right place. — morg, Jul 31 '15 at 14:02

deebs · Answer 3 · 2015-07-31T14:19:27.037

0

It's kind of hacky, but going off of your first attempt just add margin-left: -272px (depending on your title). https://jsfiddle.net/jmser6yd/2/

.title
{
  visibility: hidden;
}
.title:after
{  
  content: "New Title";
  visibility: visible;
  margin-left: -272px;
}

I still like a javascript / jQuery solution better, as @messerbill suggested

edited Jul 31 '15 at 14:19

answered Jul 31 '15 at 13:53

deebs

1,390
10
23

When i do that the text is not displayed but the space it used to take is still there so my new title is not at the right place. – morg Jul 31 '15 at 14:02
With the full title,
and subtitle (or whatever that is) try margin-left: -272px. This is a hack, but it sounds like you need to hack your way through those widgets. – deebs Jul 31 '15 at 14:20
Yes i pasted the answer because the same thing appears than with abhitalks suggestion! where should i put !important – morg Jul 31 '15 at 14:22
if needed, like this: "margin-left: -272px !important;". After I read what your title was, it sounds like the "!important" may not be necessary, but the different margin. – deebs Jul 31 '15 at 14:53

How to swap text in div using css

3 Answers3