I'm doing my own portfolio website (2 language TH/EN).
The buttons for changing languages. I can do it.
But I think if I change the page, the language button must have problems
because new page loads.
My question is
What should I do?
When I changed the page The language I chose from the beginning is still active.
Example :
The default language is Thai. But I click changed to English.The information in the home page changes to English.
If I click on another menu like About Us, the information on that page is displayed in English.
$("html").each(function () {
if ($(".lang-select.th").hasClass('active')) {
$('.lang-select').parents('html').attr('lang', 'th');
$('.content-th').show();
$('.content-en').hide();
} else if ($(".lang-select.en").hasClass('active')) {
$('.lang-select').parents('html').attr('lang', 'en');
$('.content-th').hide();
$('.content-en').show();
}
});
$(".lang-select.th").click(function () {
$(this).addClass("active");
$(".lang-select.en.active").removeClass("active");
$('.lang-select').parents('html').attr('lang', 'th');
$('.content-th').show();
$('.content-en').hide();
});
$(".lang-select.en").click(function () {
$(this).addClass("active");
$(".lang-select.th.active").removeClass("active");
$('.lang-select').parents('html').attr('lang', 'en');
$('.content-th').hide();
$('.content-en').show();
});
.lang-select {
width:30px;
height:30px;
background:#eaeaea;
cursor:pointer;
}
.lang-select.active {
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box-language">
<span class="lang-select th active">TH</span>
<span class="lang-select en">EN</span>
</div>
<h1 class="content-th">ภาษาไทย Thailand</h1>
<h1 class="content-en">ภาษาอังกฤษ English</h1>
</body>
</html>
If I understand correct, you don't want to pass the language information to the server-side.
If you want to use pure jquery/javascript you should pass the language information to the URL. Once you have it there you should use some javascript method to parse URL. I found this method, which may help you:
How to read GET data from a URL using JavaScript?
Good luck!
Related
I am programming a web app where clicking on a bit of text should toggle the line-through css style. This works on Firefox, but the click event seems not to fire in Chrome once the style has been applied.
HTML:
<script>
$(document).ready({
$(".liner").click(toggleStrikethrough);
});
<div class="liner">
Hello World
</div>
JS (note that I've used jQuery because that's what I'm using in the app, but a vanilla solution would be acceptable as well):
function toggleStrikethrough()
{
if($(this).css("text-decoration") != "line-through")
$(this).css("text-decoration","line-through");
else
$(this).css("text-decoration","");
}
JS Fiddle
In CSS3, text-decoration has multiple parts. In your particular case, the read $(this).css("text-decoration") returns line-through solid rgb(0, 0, 0).
Instead, try changing the if condition to $(this).css("text-decoration-line") to get only the line style part of the text decoration.
I tried to solve your problem using different way. I think it was succeeded. you can use below mention code to get same output that you want.
$('div').bind('click',function(){
$(this).toggleClass('liner');
});
.liner{
text-decoration:line-through;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Exzmple</title>
<style>
</style>
</head>
<body>
<div class="liner">Hello World</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I used bind , toggleClass methods for this. As a result js code was simple and it could run efficiently.
I have a WordPress based site with good visitor. I want when anyone click on my site a new link open in a new tab. I am not expert on coding. So, which code i use and where i put it?
Find your anchors links into your WP template, should look like this
Link
add target="_blank" so it looks like :
<a target="_blank" href="http://your_url_here.html">Link</a>
Inside your <a> tags, you can add target="_blank" to do this.
In question title he mention Anywhere, which derived to following solution
<!doctype html>
<html>
<head>
<title>This is the title</title>
<script type="text/javascript">
function mainWindowLoaded()
{
console.log("Main windwo is loaded");
document.getElementById('wholebody').addEventListener('click', clickedInBody);
}
function clickedInBody()
{
console.log("log added");
window.open('https://www.google.com', '_blank');
}
window.addEventListener('load', mainWindowLoaded);
</script>
</head>
<body >
<div
id='wholebody'
style="background-color:rgba(255, 0, 255, 0.3); position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1">
</div>
<h1> Your website content goes here </h1>
</body>
The key idea here is to add an overlay div of which z-index is higher than the whole page content. a click action is added to this div, which silently catch all the click events.
I want to create a template based site(like weebly) where users can change the text on the page just by clicking on it.
I have created the page having that functionality.But it just shows on the editor's browser as localStorage store the change on browser storage area.I want the changes made visible to every visitor on that page.
Here is the code
<html>
<head>
<meta charset="UTF-8">
<title>My Tasks</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
body{
background:url(chobi.png);
}
</style>
</head>
<body>
<h1 id=hi contenteditable=true>My Tasks</h1>
<p>Start typing in your list, and the browser will store it for you. When you reload it will still be here.</p>
<ul id=myTasks contenteditable=true>
<li></li>
</ul>
<script>
$(document).ready(function(){
$("#myTasks").blur(function() {
localStorage.setItem('myTasData', this.innerHTML);
});
if ( localStorage.getItem('myTasData') ) {
$("#myTasks").html(localStorage.getItem('myTasData'));
}
$("#hi").blur(function() {
localStorage.setItem('hiData', this.innerHTML);
});
if ( localStorage.getItem('hiData') ) {
$("#hi").html(localStorage.getItem('hiData'));
}
});
</script>
</body>
</html>
How can I do that.
you should use php (a server side scripting language) or any other like ASP etc or a database MySQL (to store your data) you cant do it with only client side scripting :)
PhP and MYSQL are very easy
your php would be as
<?php
$content = #some cotent from database
echo "<div contenteditable='true'> ". $content."</div>" #now user can easily change the contant loaded from database
?>
and add one button then when user click on that button then all the changes will submit
on database then it will available for any one :)
*Update: Ultimately I've decided that accomplishing exactly what I want here isn't possible due to the issues it poses to security. Kalle's answer below gives a solution that is closest to what I want to accomplish.
In order to solve my problem I've created scripts on both pages and will use a sort of push notification that is routed through the server in order for them to communicate.
Thanks for the help!! *
I have two pages. Both windows already exist independently. Page two has a function declared in JS.
I would like to be able to call the function in window two by clicking a link in window one.
Page 1:
<html>
<head>
<title>This is a title!</title>
</head>
<body style="background: lightblue">
Click Me!
</body>
Page 2:
<html>
<head>
<META HTTP-EQUIV="Window-target" CONTENT="my_target" />
<title>This is a title!</title>
<script type=text/javascript>
function clicked() {
alert('test');
}
</script>
</head>
<body style="background: lightblue">
</body>
Since it is on the same domain you can get this to work but would have to change the way you were doing it a little.
First off you would have to open it in a popup using this syntax rather than a new tab:
newwindow=window.open(url,'name','height=200,width=150');
and then you could simply call newwindow.clicked() after the popup is called.
update
just did a quick test and this will open it in a new tab. (sorry its been a while since I used the open function.
newwindow=window.open(url,'name');
Just noticed also that you should wait for the popup to load. So in my Example it would look a little something like this (with jQuery):
var newwindow = window.open('http://www.tylerbiscoe.com/vb/new.html');
$(newwindow).load(function(){
newwindow.clicked();
});
Ok, brand new answer. I hope this is what you were thinking. This is however, when you open page 2 from page 1.. So basically, page 1 would know who page 2 is..
Online example: http://kopli.pri.ee/stackoverflow/6832271.php
Page 1
<html>
<head>
<title>Page 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.ajaxlink {color: blue; cursor: pointer; border-bottom: 1px dotted blue;}
</style>
</head>
<body>
<span id="open_page_2" class="ajaxlink">Open new window</span>
<br>
<br>
Click Me!
<script>
$('#open_page_2').click(function(){
child = window.open('test2.php','page_2','width=600,height=600');
});
$('a[target=my_target]').click(function () {
child.SecondPageFunction();
return false;
});
</script>
</body>
</html>
Page 2
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Your seeing page 2!</h1>
<script>
function SecondPageFunction () {
alert('Second page action got triggered!');
}
</script>
</body>
</html>
The script must be a part of the page you're opening in the new window. You're absolutely correct about it being a security flaw if it was elsewise allowed.
You could add some query string argument that could be picked up onload by javascript in the page you are opening and call your function if the query string arg is present.
I am trying to use the prototype framework to hide a '< div >' based on a particular URL. I don't have access to server side - so I have no choice but to do this using prototype [restriction of platform using prototype].
Wondering if someone could tell me how to do this in prototype framework ?
i.e. I tried to do this but doesn't work
Event.observe(window, 'load',
function() {
var url = document.location.href;
if (url.indexOf('registered') >=
0) {
$$('#side-menu-right').hide(); }
if (url.indexOf('login') >= 0)
{ $$('#side-menu-left').hide();
}
});
Love some help ?
P.S - Never used Prototype [jQuery man right here yo!]
I just made a test case on JS Bin which complains:
Exception thrown: $$("#hello").hide is not a function
Caused by line (23/21): $$('#hello').hide();
(using latest version of Prototype)
When using:
$('hello').style.display = "none";
it works correctly, see example.
EDIT: I adjusted the example on JS Bin to conditionally add a class name to the body before the involved element is reached. Using
.registered-user #hello { display: none; }
The element doesn't show up at all. It's not the most neat solution, as you have to throw some script in the middle of your document, but it works. If someone knows a better solution, please tell.
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.registered-user #hello { display: none; }
</style>
</head>
<body>
<script>
if (document.location.href.indexOf('registered')>=0)
$$('body')[0].addClassName('registered-user');
</script>
<p id="hello">Hello World</p>
</body>
</html>
Change
$$('#side-menu-right').hide();
to
$('side-menu-right').hide();
Hope this helps.
Reason
1) As you can see, JQuery uses CSS notation while Prototype is straight Javascript (so no #side-menu-right for div with an ID).
2) Struts and Prototype uses $ and not $$.