I am trying to implement a lightbox in my website (http://fancyapps.com/fancybox/). I have this code in my index.php head tag.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>
And I have this javascript.
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
My main page is included in my index like this
<?php include 'pages/home.php'; ?>
And in the home.php there is this code.
<a class="fancybox" rel="group" href="images/logo.png"><h4>Title 2</h4></a>
When I click on the Title 2, it just opens a new tab with the correct image. Any idea about what is causing the problem?
check the doctype, in the fancybox website they use:
<!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">
Related
I am working on a java spring project and would like to add a static javascript file to an HTML page. here is what I currently have it seems to work for the css but not the js. the basic file structure is
i am trying to get static js from /static/js/pie-chart.js and put it into /templates/show/match.html here is what i currently have for the html.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!- css is working -->
<link rel="stylesheet" href="../static/css/main.css" th:href="#{/css/main.css}">
</script>
</head>
<body>
<!-- the script does not seem to be linking to the page -->
<script src="../static/js/pie-chart.js" th:src="#{/js/pie-chart.js}">
<body>
</html>
Well, the static folder can be treat as the root path.So you don't have to add this '../static/' prefix in your href. You can try as following to see if it works.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!- Delete the relative path-->
<link rel="stylesheet" href="/css/main.css">
</script>
</head>
<body>
<!- Delete the relative path-->
<script src="/js/pie-chart.js">
<body>
</html>
Use this in order to link your Js file in HTML Page :--
<script src="js/pie-chart.js">
This image in my sample boot project. you can using th:href="#{/your/js}".
like this :
readingList.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Reading List</title>
<link rel="stylesheet" th:href="#{/css/style.css}" />
</head>
<body>
<label>Reading List!!</label>
</body>
</html>
I'm new to jquery, and I've had a lot of trouble getting a full screen slideshow to work. I've tried downloading jquery 1.11.1. I've linked to 1.8, 1.9, and 1.11.1. The first image shows up with the numbers "123" on it, but it's not dynamic. The other two images aren't showing up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv = "Content-Type" content = "text/html; charset=iso-8859-1">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/superslides.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<style></style>
</head>
<body>
<div id="slides">//Slides container to control width
<div class="slides-container">//suggested form by superslides.com
<img src="images/dsc_0844-8x12.jpg" alt="">
<img src="images/dsc_0785-8x12.jpg" alt="">
<img src="images/dsc_0720-8x12.jpg" alt="">
</div>
</div>
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Additional superslides plug-ins
<script src="scripts/jquery.easing.1.3.js"></script>
<script src="scripts/jquery.animate-enhanced.min.js"></script>
<script src="scripts/application.js"></script>
<script src="scripts/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
//Initialize slideshow
<script type="text/javascript">
$(function() {
$('#slides').superslides({
animation: 'fade'
});
});
</script>
</body>
</html>
Your use of non-HTML comments is probably not helping, since you're essentially polluting the DOM with text nodes, and the slideshow script may not be resilient to that.
Comments in HTML look like this:
<!-- Initialise slideshow -->
not this:
// This is a JavaScript comment
I've been scratching at my head with this for a few days now and I cannot find any solution to this online or even with a professor.
I'm working on a system that requires some pages to be capable of dynamically generating new HTML content whilst running (JSF web project running on glassfish4 server)
I've found some resources on how to do this but it only worked when running on a standard HTML page. When I convert it to the XHTML standard the function no longer generates anything (although it is still being called, the alert box confirmed that).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1"></meta>
<title>Insert title here</title>
</head>
<body>
<SCRIPT type="text/javascript">
function addQuestion() {
alert('yay');
var exam = document.getElementById('divarea');
var temp = document.createElementNS('h', 'button');
temp.setAttribute('value', 'child');
exam.appendChild(temp);
}
</SCRIPT>
<div id="divarea">
</div>
<h:commandButton value="create new stuff" onclick="addQuestion()"/>
</body>
</html>
If anyone can shed some light on this issue it'd be greatly appreciated.
P.S.
Here are the resources I've been using to attempt troubleshooting.
Converting javascript to work with XHTML
Creating elements dynamically using javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1"></meta>
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<body>
<SCRIPT type="text/javascript">
function addQuestion() {
var oldcon=$("#divarea").html();
var newcon='<button>child</button>';
var updcon=oldcon+newcon
console.log(newcon);
$("#divarea").html(updcon);
}
</SCRIPT>
<div id="divarea">
</div>
<button onclick="addQuestion()"/>dff</button>
</body>
</html>
In the script below (live example is located at http://jsbin.com/aliket/1/ with source code located at http://jsbin.com/aliket/1/edit), I created two dialogs, where one (#dialog2) is a child within the other (#dialog1). If I create #dialog2 before #dialog1, open #dialog1 and then open #dialog2, the TinyMCE plugin no longer works. By not working, I mean TinyMCE's text box is shaded out and any previously entered HTML is gone. Is this a problem with the order of the two dialogs, or TinyMCE? Why is it happening? I do know how to fix it,however: just create #dialog1 before #dialog2. Thanks
<!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=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
</head>
<body>
<button id="click1">Click 1</button>
<div id="dialog1" title="dialog1"><div id="tinymce"></div><button id="click2">Click 2</button></div>
<div id="dialog2" title="dialog2">Hello</div>
</body>
<script>
tinymce.init({selector: "#tinymce"});
$(function() {
$('#click2').click(function(){$("#dialog2").dialog("open");});
$("#dialog2").dialog({autoOpen:false,resizable:false,height:300,width:240,modal:true});
$("#click1").click(function(){$("#dialog1").dialog("open");});
$("#dialog1").dialog({autoOpen: false,modal: true});
});
</script>
</html>
I think the problem here is that you did not shut down your editor instance before you opened another one with the same id. Use the mceCommand mceRemoveControl to shut such an editor instance down.
Hi I was doing a simple expanding slider with jquery
and somehow the slider would expand to the full-width
of the window, then shrink to the desired width I assigned it to do ..
(if you reload the page a few times, it comes up sometimes)
the problem seems to disappear switch the loading order
of the and between jquery and my external stylesheet
but I am not sure why, I am wondering if anyone knows ????
here is the code that's causing the problem
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">
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
css:
#slider{
width:10px;
height:20px;
background:#09C;
}
after switch the order of and
the expanding issue disappear:
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">
<head>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
css:
#slider{
width:10px;
height:20px;
background:#09C;
}
Because scripts should always be loaded after static assets?
Most browsers render line by line from top to bottom so a change made on one line can be changed again on the next line.
If one loads the script first then the style will change the script.