Dual Content Single HTML

hobbit666

OK so not having the best of luck lol. This is what i need to do.
When you go to this site
http://www.somewebserver.com/index.html

you will see:-

Croeso i Aberdaron, rydym yn gobeithio y byddwch yn mwynhau eich ymweliad. I wneud eich ymweliad mor gyfleus â phosibl, rydym fel cymuned wedi darparu mynediad am ddim i'r rhyngrwyd i chi.

If you click on the ENG button or Flag (not decided yet), it will display:-

Welcome to Aberdaron we hope you enjoy your visit. To make your visit as convenient as possible we have provided you free access to the internet.

I can't upload any files or folders to the webserver i can only edit index.html code

scottalanmiller

Yup, we figured that that was what you needed. JQuery is the best way to do this.

dafyre

@scottalanmiller said:

Yup, we figured that that was what you needed. JQuery is the best way to do this.

Example blurb below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div id='divEnglish' style='display:none'>
Welcome to Aberdaron we hope you enjoy your visit.  To make your visit as convenient as possible we have provided you free 

access to the internet.
</div>

<div id='otherLanguage' style='display:none'>
Croeso i Aberdaron, rydym yn gobeithio y byddwch yn mwynhau eich ymweliad. I wneud eich ymweliad mor gyfleus â phosibl, 

rydym fel cymuned wedi darparu mynediad am ddim i'r rhyngrwyd i chi.
</div>

<a id='cmdEnglish' href='#'>Click Here for English</a><br><br><br><br><br><br><br><br>
<a id='cmdOther' href='#'>Click Here for Other Language</a><br><br>


<script>
//This is the javascript where the magic happens
$('#cmdEnglish').click(function () {
 $('#divEnglish').show()
 $('#otherLanguage').hide()
})

//This is the javascript where the magic happens
$('#cmdOther').click(function () {
 $('#divEnglish').hide()
 $('#otherLanguage').show()
})
</script>

hobbit666

@scottalanmiller said:

Yup, we figured that that was what you needed. JQuery is the best way to do this.

That's what i've been looking for but all the examples i was finding showed extra CSS files and .json files etc, so i got confused lol

hobbit666

@dafyre Thanks will have a play with that

dafyre

@hobbit666 said:

@scottalanmiller said:

Yup, we figured that that was what you needed. JQuery is the best way to do this.

That's what i've been looking for but all the examples i was finding showed extra CSS files and .json files etc, so i got confused lol

You can do CSS in the file as well if you really need to... just wrap it in <style> and </style> ...

dafyre

@hobbit666 said:

@dafyre Thanks will have a play with that

No warranty express or implied. Author holds no liability for breaking your coffee machine and/or starting a zombie apocalypse.

scottalanmiller

@hobbit666 said:

@scottalanmiller said:

Yup, we figured that that was what you needed. JQuery is the best way to do this.

That's what i've been looking for but all the examples i was finding showed extra CSS files and .json files etc, so i got confused lol

Yes, because best practice is to separate things out. Just merge them into one file.

hobbit666

@scottalanmiller Thanks for the tip Scott.
Been a VERY LONG time since i've done anything HTML so trying to get my head around structure and where everything needs to go in the single file lol

dafyre

@hobbit666 said:

@scottalanmiller Thanks for the tip Scott.
Been a VERY LONG time since i've done anything HTML so trying to get my head around structure and where everything needs to go in the single file lol

<!-- Comments are your friend!  -->
//in more ways than one!

/* 
yes,
they absolutely are!
*/

Sorry... I've been doing coding a bit lately, lol.

larsen161

@hobbit666 said:

Problem is i can't upload any extra files, all i can do is edit the source code of the HTML page.

you could always use a trusty 'ol <iframe> and then use all the json, css, html files you'd like elsewhere. also <object> <embed> is a potential option.

scottalanmiller

@larsen161 said:

@hobbit666 said:

Problem is i can't upload any extra files, all i can do is edit the source code of the HTML page.

you could always use a trusty 'ol <iframe> and then use all the json, css, html files you'd like elsewhere. also <object> <embed> is a potential option.

At that point he could just modify .htaccess and bypass the whole thing. Or even change the DNS entry

Carnival Boy

Just ditch Welsh and display everything in English. Problem solved

larsen161

You don't even need j 'anything', just some simple css styling
You can see it live in action at: http://smrtfcs.com/lang/

<html>
  <head>
    <style type="text/css">
      .cy > p[lang=en] {
        display: none;
      }
      .en > p[lang=cy] {
        display: none;
      }
    </style>
  </head>
  <body class="cy">
    <button onclick="document.body.className='en'">English</button>
    <button onclick="document.body.className='cy'">Welsh</button>
    <p lang="en">Welcome to Aberdaron we hope you enjoy your visit.  To make your visit as convenient as possible we have provided you free access to the internet.</p>
    <p lang="cy">Croeso i Aberdaron, rydym yn gobeithio y byddwch yn mwynhau eich ymweliad. I wneud eich ymweliad mor gyfleus â phosibl, rydym fel cymuned wedi darparu mynediad am ddim i'r rhyngrwyd i chi.</p>
  </body>
</html>

hobbit666

@larsen161 said:

You don't even need j 'anything', just some simple css styling
You can see it live in action at: http://smrtfcs.com/lang/

<html>
  <head>
    <style type="text/css">
      .cy > p[lang=en] {
        display: none;
      }
      .en > p[lang=cy] {
        display: none;
      }
    </style>
  </head>
  <body class="cy">
    <button onclick="document.body.className='en'">English</button>
    <button onclick="document.body.className='cy'">Welsh</button>
    <p lang="en">Welcome to Aberdaron we hope you enjoy your visit.  To make your visit as convenient as possible we have provided you free access to the internet.</p>
    <p lang="cy">Croeso i Aberdaron, rydym yn gobeithio y byddwch yn mwynhau eich ymweliad. I wneud eich ymweliad mor gyfleus â phosibl, rydym fel cymuned wedi darparu mynediad am ddim i'r rhyngrwyd i chi.</p>
  </body>
</html>

I love you

hobbit666

New problem.

That code works but as soon as a wrap it inside a DIV it stops. (why did I say yes to looking at this lol)

dafyre

@hobbit666 said:

New problem.

That code works but as soon as a wrap it inside a DIV it stops. (why did I say yes to looking at this lol)

If you are using @larsen161 's code, , you should put the <div> tag after body, and </div> tag before </body>, I think?

larsen161

@hobbit666 can you share the actual site url and we can take a look at the full code?

hobbit666

@larsen161 Can't as it's part of a WiFi portal, but just about to start from scratch and will post if i need help once i've got it in my head lol