Dual Content Single HTML

dafyre

CSS would not be involved no matter what. It's JavaScript that enables it if done in HTML, it's PHP that would do it if done on the server.

jQuery would make this really easy.

hobbit666

@dafyre said:

jQuery would make this really easy.

But still mean reading tutorials and books to work it out lol

scottalanmiller

@hobbit666 said:

@dafyre said:

jQuery would make this really easy.

But still mean reading tutorials and books to work it out lol

Probably still easier than building your own system for this, though.

hobbit666

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

dafyre

@hobbit666 said:

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

There's a hosted version of jQuery...

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

You should be able to include that at the top of the html and be done.

scottalanmiller

@hobbit666 said:

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

That's good, keeps you from uploading things that you shouldn't

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>