I have an XHTML 1.0 Strict document in which I'm trying to make Shadowbox work.
<!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 name="Content-Type" content="text/html; charset=UTF-8" />
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
console.log('Howdy there!'); // displays, so no JS error in Shadowbox.init
</script>
</head>
<body>
<p>
<a href="image.jpg" title="Howdy" rel="shadowbox">
<img src="image.jpg" alt="Click to zoom." />
</a>
</p>
</body>
</html>
This document is completely valid according to my Firefox extension.
For some reason Shadowbox seems to do nothing. When I click the image link, the browser just opens the image as usual. No box at all.
I've tried not loading JQuery and only load Shadowbox but that didn't help, so it's not JQuery's fault either. This is with Shadowbox 3.0b by the way. Any ideas?
EDIT: I just got thinking... Shadowbox does some internal magic to figure out the path to it. However, this page is completely static and loaded directly from file on disk. Could this be the problem? Looking in the DOM, I see that Shadowbox.path is correctly set to "file:///C:/..." so maybe not?
You need to have (nebo have to have) all directories from showbox.zip in the directory with the file showbox.js, because showbox adds other scripts to the page.
Related
I use IE 11 with the scripting option enabled. Even on other browsers it does not work. Using notepad++ to code and run... I'm currently learning javascript. I have a .js and .html file - the html has 3 sets of headings/paragraphs where the paragraphs should only show if i click the headings. This does not work. I downloaded a copy of the java library as well... I assume it has something to do with the Doctype statement ?
Any thoughts:
mcode.js
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
myhtml.html:
<!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" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<h1>Heading two</h1>
<p>This is just some text for heading 2</p>
<h1>Heading three</h1>
<p>This is just some text for heading 3</p>
<!-- FIRST BELOW POINTS TO WHERE THE JAVA SCRIPT LIBRARY IS -->
<!-- SECOND IS MY JAVASCRIPT CODE THAT WILL BE USED -->
<!--<script type="text/javascript" src="jquery-1.8.0.min.js"></script>-->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
You have listed your javascript as mcode.js in the question, but referenced src="my_code.js". Change your src in the html to the correct file and it should work fine.
<script type="text/javascript" src="mcode.js"></script>
That should be what you are after :)
You have to add mcode.js in your html file. Add a script in your head linked to mcode.js.
I am trying to embed a tweet into my website through this method
But I am unable to get it right this is my HTML markup
<!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>
</head>
<body>
<blockquote class="twitter-tweet" lang="en">
<p lang="en" dir="ltr">Can you answer this? Tem como calcular a diagonal no Canvas? http://t.co/E8dD01jGKX #javascript</p>
— SO em Português (#StackOverflowPT) June 24, 2015</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
And all I am seeing in browser is this:
Merely just html, not style as Twitter embedded tweet box.
Please help.
The link to the Twitter's widgets.js is a so called protocol relative or scheme-less: it doesn't define its own URI scheme and uses whatever its host page happend to be opened on. This is useful to support both http and https schemes without changing the link in the source code.
Now, because you're testing with the local file, the scheme used is file, that is specifically created for files located on the same machine with browser. And so protocol-less //platform.twitter.com/widgets.js gets the file scheme and becomes a link to the local file widgets.js in the folder platform.twitter.com which probably you don't have on your machine.
To fix that, just add a scheme, http or https, like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<blockquote class="twitter-tweet" lang="en">
<p lang="en" dir="ltr">Can you answer this? Tem como calcular a diagonal no Canvas? http://t.co/E8dD01jGKX #javascript
</p>
— SO em Português (#StackOverflowPT) June 24, 2015
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- ^ -->
</body>
</html>
I've recently ran into a problem and I would really use a bit of help from the community. I'm trying to load a HTML file using jQuery load().
The index file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function restart(){
$("#wrap").load('new-content.html').hide().fadeIn('slow');
}
</script>
</head>
<body>
<div id="wrap">
<div id="content">Text before restart: 남성</div>
</div>
<br />
Restart
</body>
</html>
The new HTML file includes some simple HTML content and a call to a .js file (used for some animations). The new content file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="main.js" language="javascript" type="text/javascript" />
</head>
<body>
<div id="contentInner">Text after restart: 여성</div>
</body>
</html>
As you can see I've included the correct encoding charsets (for both files) and I've double checked and I can confirm that every file used for this part of the code it's encoded as "KOREAN" (checked in different apps like Dreamweaver, Notepad++, Sublime Text 2).
Yet still once I load the content the characters are not encoded properly; question marks appearing instead of characters.
Of course I made some searching before posting and I found a few helpful topics about this called the PHP header solution, but this isn't an options since it need to use HTML/JS/CSS only.
The same behavior occurs when I'm using the Japanese language too. In other latin based languages everything is working perfectly fine of course.
Any sort of input/advice/help would be much much appreciated.
Thank you!
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 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");
});
});