I need to be able to set, in javascript, all html page links to open in a new tab, how can I do that?
Can it be attributed to the div "links"?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Negócios</title>
<script type="text/javascript">
</script>
</head>
<body>
<div id="links">
<p>MARINGÁ - NEGÓCIOS</p>
<p>MONTES CLAROS - NEGÓCIOS<br>
</p>
<p>Sucesso Empresarial</p>
</div>
</body>
</html>
I need to do that without using the target attribute in the HTML. I have too many links, also, I want to learn how to do that.
You can append the target to all of your links within the "links" div by doing this:
Javascript:
window.onload = function(){
var a = document.getElementById('links').getElementsByTagName('a');
for (var i=0; i<a.length; i++){
a[i].setAttribute('target', '_blank');
}
}
or jQuery:
$(document).ready(function(){
$('#links a').attr('target', '_blank');
});
You can achieve that without JS using base tag.
<base target="_blank">
By using the target property.
For example,
Sucesso Empresarial
See other options in here.
Related
I would like to add a class to the root html tag at the top of the page when a button is pressed. The only code I have come across is for adding classes to div elements with ids.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="THIS IS WHERE I WANT THE CLASS TO BE ADDED" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
Start presentation
I have tried to adapt this code but nothing works ;
<script type="text/javascript">
$("#addClass").click(function () {
$('para1').addClass('presentation-started');
});
$("#removeClass").click(function () {
$('#para1').removeClass('highlight');
});
</script>
If I understand you correctly, you can use:
$('html').addClass("someclass")
to add a class and
$('html').removeClass("someclass")
to remove it.
If you have a button with id="mybutton" then you would use like this:
$('#mybutton').click(function(){
$('html').addClass("someclass")
});
If your code does not follow the button element on the page, you also need to wrap your jQuery in a DOM ready handler (otherwise the click handler will never be connected):
$(function(){
$('#mybutton').click(function(){
$('html').addClass("someclass")
});
});
This is just a handy shortcut version of $(document).ready(function(){...}):
Update using your new example
So, using your existing example, it would be:
<script type="text/javascript">
$(function(){
$("#addClass").click(function () {
$('html').addClass('presentation-started');
});
$("#removeClass").click(function () {
$('html').removeClass('highlight');
});
});
</script>
I have come across http://redactorjs.com which is a very nice wysiwig editor that has on air ability. In other words, in one single line you can turn a static div into an editable text area on the fly.
I -do not- want to pay for it (for some reasons I won't disclose) hence I am looking for an alternative.
Have you ever used a lightweight wysiwig jquery based editor that is easily usable on the fly?
I am looking for something I would use as follow:
$("#edit_btn").click(function({
$("#my_div").turnIntoEditor();
}));
$("#save_btn").click(function({
$("#my_div").post_content("http://target");
$("#my_div").turnIntoStatic();
}));
Please do not mind the post_content thingy and other function names as they are just given for reference to show the kind of usage I am looking after.
Thank you
I finally went for ckeditor. I could use it easily as follow (poc):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#edit").click(function(){
$( '.editable' ).ckeditor();
});
$("#save").click(function(){
var editor = CKEDITOR.instances['editor'];
if (editor) { editor.destroy(); }
alert($('#editor').html());
});
});
</script>
</head>
<body>
<span id="edit">EDIT</span> <span id="save">SAVE</span><br/><br/>
<div class="editable" id="editor">
Some useless content
</div>
</body>
</html>
I am developing an application where I have the next JS code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/var/www/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover(function() {
$(this).attr("src","/var/www/JSPROBAK/button-hover.png");
}, function() {
$(this).attr("src","/var/www/JSPROBAK/button.png");
});
});
</script>
</head>
<body>
<img src="/var/www/JSPROBAK/button.png" alt="My button" class="button" />
</body>
</html>
The directory where I have button.png, button-hover.png and jquery.js is the one specified in the code. The code is supposed to turn a gray button (button.png) into a red button (button-hover.png) when putting the mouse over the gray button. The browser initially shows the image of the gray button but doesn't turn red when putting the mouse over it so I am assuming jquery.js is not being loaded correctly, any idea?
It would appear that you are referencing the server file location not the website relative location. if you are hosting the website from the www dir then I would try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover(function() {
$(this).attr("src","/JSPROBAK/button-hover.png");
}, function() {
$(this).attr("src","/JSPROBAK/button.png");
});
});
</script>
</head>
<body>
<img src="/JSPROBAK/button.png" alt="My button" class="button" />
</body>
</html>
Looks like you are referencing the file from the server's physical path, not the virtual one. Try remove var/www/ from the URLs, and if your HTML-file already resides in /JSPROBAK/ you can specify the paths as straight out relative paths like <img src="button.png" />.
jsFiddle( http://jsfiddle.net/ZWxEg/10/ )
If this code doesn't work for you, then you're not loading jQuery correctly.
-- Edited -- Using hover at gdoron's request :D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/var/www/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover( function ()
{
$(this).attr("src","http://www.google.com/logos/2012/sovereignty12_hp.jpg");
},
function ()
{
$(this).attr("src","http://www.google.com/logos/2012/sundback12-hp.jpg");
});
});
</script>
</head>
<body>
<img src="http://www.google.com/logos/2012/sundback12-hp.jpg" alt="My button" class="button" />
</body>
</html>
you won't be able to fade like this, if its just a solid colour you can do it with https://github.com/jquery/jquery-color
otherwise create <a> container with position relative (or another element if its not supposed to be clickable)
inside have 2 absolutely position images, one on top of the other
the underneath one is the hover and should have a lower z-index set (set z-index on both)
on the <a> hover event fadeOut the one with the highest z-index
on animation complete swap the z-indexes
I am trying to open a simple link in a new tab. I have tried searching on google, and stackoverflow but the result says, we need to change settings in browser. Is there a way to do the same using javascript?
Here is the sample script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function gotoNewtab(){
document.forms[0].target="_blank";
document.forms[0].method = "post";
document.forms[0].action = "http://www.google.com";
document.forms[0].submit();
}
</script>
</head>
<body>
<form name="frm">
<p> click the below link to open the page in new tab </p>
<p> <a href="##"
onclick="javaScript:return gotoNewtab();">
click here </a>
</p>
</form>
</body>
</html>
You don't need Javascript.
Just write
...
Write the following JavaScript code to open a new tab
window.open("http://www.targetdomain.com", '_blank');
If you want to use HTML to do it, write the following code:
Click here to open a new tab
The noopener noreferrer attribute is to make sure the new tab doesn't mess around maliciously with the tab that opened it.
This behaviour is up the the specific browser settings. If the IE settings are set to tab-usage, they may be used, unless you specify that the links should open in a new window.
I wrote this very simple background chooser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<title>jQuery Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="Normal.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#StyleContrast").click(function() {
$("link[media='screen']").attr("href", "Contrast.css");
});
$("#StylePrint").click(function() {
$("link[media='screen']").attr("href", "Print.css");
});
$("#StyleNormal").click(function() {
$("link[#media='screen']").attr("href", "Normal.css");
});
});
</script>
</head>
<body>
<h1>Choose A Style:</h1>
<ul>
<li><a id="StyleContrast" href="#">Contrast</a></li>
<li><a id="StylePrint" href="#">Print</a></li>
<li><a id="StyleNormal" href="#">Normal</a></li>
</ul>
</body>
</html>
I have:
Normal.css
Print.css
Contrast.css
in the same folder with a very basic:
body {background-color:#000000;}
When I go to the URL it chooses Normal.css (as it should)
Then it changes to just fine to Print.css or Contrast.css (as it should)
But then it doesn't ´t go back (doesn't ´t choose) Normal.css again?
Can you help me spot what's wrong with the code?
$("#StyleNormal").click(function() {
$("link[#media='screen']").attr("href", "Normal.css");
});
Should be
$("#StyleNormal").click(function() {
$("link[media='screen']").attr("href", "Normal.css");
});
Also, I would update the version of jQuery you're using to 1.4.2
You used [#media='screen'] instead of just [media='screen']
In jQuery 1.4.2 (and I think in jQuery 1.3) # for attribute selection is deprecated. Notice that you had it right in the first two calls of your code, just not the last one. :D
If you want to optimize, you could add a class (say "switcher") to your links, and change your jQuery to this:
$(function(){
$(".switcher").click(function() {
$("link[media=screen]").attr("href", $(this).text() + ".css");
});
});