Need a some small bits of code samples WordPress
I'm working on an Indiegogo project and I'd like to have translations of the project.
Indiegogo accepts html and I am wondering if it is possible to used a tabbed layout for our project.
I'm looking for a code layout that would have all the necessary code within one file. I'm not sure how it's referred to in the coding world but something along the lines of having the css within the html instead of having it hosted in another directory.
Is it possible to use js or jquery within the html file so that it is all together?
Like in the title, looking for some bits of code to play with and see if I can get this working. I've got the feeling that Indiegogo probably strips out js but I want to give it a go.
EDITED: Link to 1min video to show how to log into an account on indiegogo.
http://somup.com/c2VYI0nCE
Answers (4)
Balanean Corneliu answers:
You have tryed to do translations with a plugin? maybe qtranslate or something?
Doug Montgomery comments:
It's not a matter of doing the translations. They will be done by hand. It's a matter of having tabs and titles across the top of the listing and being able to switch between them.
Balanean Corneliu comments:
This tabs and titles have the fuction to change between languages or ? I meen you need for a new tab a new language? And the title of the tabs to be like name in english/italian/spaniol ?
Doug Montgomery comments:
Yes, a new tab shows a new language. But I just found some code and it's stripping the jquery.
http://jqueryui.com/tabs/
Balanean Corneliu comments:
Maybe you can use this code to make diferent tabs in diferent languages.
http://texcellency.wordpress.com/2011/10/29/jquery-ui-tabs-with-browser-back-button-support/
The function is for browser back button but i think can be used for your need to. Take a look.
Doug Montgomery comments:
Ok...but how would I implement that into one file? I haven't a clue how to do it.
Doug Montgomery comments:
This isn't a wordpress install. It's a simple html editor used to create Indiegogo campaign.
Balanean Corneliu comments:
ok... sorry my mistake i was think you are on wordpress.
Balanean Corneliu comments:
http://stackoverflow.com/questions/18656995/create-vertical-tab-using-html-css
Doug Montgomery comments:
How would I put that into one file? This is where I am lost.
Doug Montgomery comments:
Also, can the actual js code be put into the html file and not be called from another location?
Balanean Corneliu comments:
Yuo talk about this JS :
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$('#tabs')
.tabs()
.addClass('ui-tabs-vertical ui-helper-clearfix');
</script>
?
Doug Montgomery comments:
Yes, the .js code needs to be included in the file....not linked to http://code.jquery.com/
Doug Montgomery comments:
Link to 1min video to show how to log into an account on indiegogo.
http://somup.com/c2VYI0nCE
Firoja_Imtosupport answers:
Hi,
Yes we can do it in many ways, But writting whole js will just make page messy and difficult to understand if anyone else works on it,you will have to include the js file : in your template (which will be located at wp-content/themes/your theme name/) ,Please let me know if i can do it for you.
Doug Montgomery comments:
Thanks but this isn't a wordpress set up. It's a simple html editor but it strips our any linked jquery. I will be the only one working on it.
Firoja_Imtosupport comments:
Hi,
Ok, so you will have to comment or add line of code (editor.php), Can you tell me which editor or version you are using?
Firoja_Imtosupport comments:
Hi
Can you please share your skype Id with me, I can sort it out, I had worked for Tinymce,ckditor, fckeditor etc...
Doug Montgomery comments:
Link to 1min video to show how to log into an account on indiegogo.
http://somup.com/c2VYI0nCE
Doug Montgomery comments:
This is going to be an indiegogo campaign.
Link to 1min video to show how to log into an account on indiegogo.
http://somup.com/c2VYI0nCE
Firoja_Imtosupport comments:
Hi,
i had viewed your video, Please can you write folder structure of editor here
Doug Montgomery comments:
I do not have what you are asking for. I only have access to the editor on Indiegogo.
Firoja_Imtosupport comments:
Hi,
I have checked editor you are using is http://imperavi.com/redactor/. If you want to include javascript in editor , you will need access of folder by FTP or SSH login to edit file of that editor
If you have FTP details let me know and we can proceed either i will convey you do or i can do it for you.
Doug Montgomery comments:
We have no access via ftp. Is it possible to use jquery without access to ftp?
Doug Montgomery comments:
We have no access via ftp. Is it possible to use jquery without access to ftp?
Firoja_Imtosupport comments:
Hi,
Without FTP access its little bit difficult as Redactor has a function which restricts tags , You can find that function at http://imperavi.com/redactor/docs/security/ named function clear_tags($str), which we will have to modify
Doug Montgomery comments:
Then I'm guessing it can't be done and my solution would be to use links to place markers within the code so that with a click the page would pop-down to another part of the listing.
Doug Montgomery comments:
Thanks for working so hard to try to solve this problem. I've got to run out for a couple of hours now. If you can think of another way before I return, thank you. If not I'll mark this as a closed topic an vote when I get back.
Firoja_Imtosupport comments:
Hi,
Thanks, if you don't have FTP then I agree with your opinion : "Then I'm guessing it can't be done and my solution would be to use links to place markers within the code so that with a click the page would pop-down to another part of the listing."
And above could be acheived by using html, css to create Tabs and then link each Tab to other part.
Firoja_Imtosupport comments:
Hi,
Still i will be in search of functionality you need by redactor editor, Once i get will update you
Doug Montgomery comments:
Did you find anything on this?
Just Me answers:
Do you mean whatever code you put inside the text it will get removed?
would something like this work?
<iframe>
<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
</iframe>
if it does then you may be able to use just html and css to create the tabs
http://nontroppo.org/test/tab1.html
Doug Montgomery comments:
Quick vid on what's happening when I tried out the code you gave me and the source code from the nontroppo.org.
It's less than 2 minutes
http://somup.com/c2VYDAnC7
It's uploading and should be up by the time you see this.
Just Me comments:
Okay so a lot is removed from the code.
Are you able to add internal links?
If so you could do something like
<a href"#us">English</a><a href"#fr">French</a><a href"#ge">German</a>
<a id="us"></a>text in English
bla bla bla
<a href"#us">English</a><a href"#fr">French</a><a href"#ge">German</a>
<a id="fr"></a>text in French
bla bla bla
<a href"#us">English</a><a href"#fr">French</a><a href"#ge">German</a>
<a id="ge"></a>text in German
bla bla bla
<a href"#us">English</a><a href"#fr">French</a><a href"#ge">German</a>
It is probably not possible but if you are able to somehow insert a flash file you would have no limit to whatever layout you want.
Doug Montgomery comments:
Yes, I think internal linking is the way I'm going to have to do it. The question is, can tabs be created with internal linking? I don't think so.
I know the code you threw out there is pretty 'raw'. Can you clean it up a bit with page breaks or line breaks and or make it 'pretty'? As it is it doesn't do anything and outputs some pretty much just text that does nothing.
Just Me comments:
<code><a href"#us">English</a> - <a href"#fr">French</a> - <a href"#ge">German</a>
<a name="us"></a>text in English
bla bla bla
<a href"#us">English</a> - <a href"#fr">French</a> - <a href"#ge">German</a>
<a name="fr"></a>text in French
bla bla bla
<a href"#us">English</a> - <a href"#fr">French</a> - <a href"#ge">German</a>
<a name="ge"></a>text in German
bla bla bla
<a href"#us">English</a> - <a href"#fr">French</a> - <a href"#ge">German</a>
It should work now that I replaced id with name.
Doug Montgomery comments:
Somethings still not quite right
http://somup.com/c2VYqDnCs
Just Me comments:
<a href="#us">English</a> - <a href="#fr">French</a> - <a href="#ge">German</a><BR />
<a name="us"></a>text in English "Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
bla bla bla <BR />
<a href="#us">English</a> - <a href="#fr">French</a> - <a href="#ge">German</a><BR />
<a name="fr"></a>text in French bla bla bla </p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<BR />
<a href="#us">English</a> - <a href="#fr">French</a> - <a href="#ge">German</a><BR />
<a name="ge"></a>text in German bla bla bla "Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<BR />
<a href="#us">English</a> - <a href="#fr">French</a> - <a href="#ge">German</a>
Bob answers:
Try adding this
<style type="text/css">
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #aadfeb;
text-align: center;
font-family: helvetica;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
font-family: 'Roboto', helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
background: #08C;
padding: 15px;
color: white;
position: absolute;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
</style>
<div class="main">
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">tab 1</label>
<div id="tab-content1" class="tab-content animated fadeIn">
"tab 1 content tab 1 content tab 1 content tab 1 content tab 1 content tab 1 content tab 1 content tab 1 content tab 1 content tab 1 content tab 1 content tab 1 content tab 1 content tab 1 content "
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">tab 2</label>
<div id="tab-content2" class="tab-content animated fadeIn">
"Tab 2 Content Tab 2 Content Tab 2 Content Tab 2 Content Tab 2 Content "
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">tab 3</label>
<div id="tab-content3" class="tab-content animated fadeIn">
"Tab 3 Content Tab 3 Content Tab 3 Content Tab 3 Content Tab 3 Content "
</div>
</li>
</ul>
</div>