Why caption disappear after some time?
Currently, if the user does not do anything in window caption disappear after some time.
How can I block caption to always visible?
Any idea I am new with fancybox3.
<!doctype html>
<html>
<head>
<title>fancyBox - touch enabled, responsive and fully customizable lightbox script</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<body>
<div class="hidden">
<a data-fancybox="cl-group" data-caption="zaid 1" data-thumb="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg"><img src="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="zaid 2" data-thumb="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" href="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_b.jpg"><img src="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="zaid 3" data-thumb="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" href="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_b.jpg"><img src="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="zaid 3" data-thumb="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_m.jpg" href="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_b.jpg"><img src="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="zaid 4" data-thumb="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" href="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg"><img src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="zaid 5" data-thumb="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" href="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg"><img src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="zaid 6" data-thumb="http://farm8.staticflickr.com/7353/8998818196_ec7c900bf6_m.jpg" href="http://farm8.staticflickr.com/7353/8998818196_ec7c900bf6_b.jpg"><img src="http://farm8.staticflickr.com/7353/8998818196_ec7c900bf6_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption=" (dSavin)" data-thumb="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_m.jpg" href="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_b.jpg"><img src="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="The Trail (Msjunior-Check out my galleries)" data-thumb="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg"><img src="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="First light (Jan Linskens)" data-thumb="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_m.jpg" href="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_b.jpg"><img src="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="Color of Autumn (fukui_norisuke)" data-thumb="http://farm9.staticflickr.com/8067/8219961599_be412f62dd_m.jpg" href="http://farm9.staticflickr.com/8067/8219961599_be412f62dd_b.jpg"><img src="http://farm9.staticflickr.com/8067/8219961599_be412f62dd_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="Assunção - Santo Tirso...a New Dimension... (Alex Matos)" data-thumb="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg"><img src="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="Cummeengeera Settlement/Rabachs Glen. (alancronin02)" data-thumb="http://farm8.staticflickr.com/7065/7058141285_064170310e_m.jpg" href="http://farm8.staticflickr.com/7065/7058141285_064170310e_b.jpg"><img src="http://farm8.staticflickr.com/7065/7058141285_064170310e_m.jpg" alt=""></a>
<a data-fancybox="cl-group" data-caption="1968 Dodge Charger R/T - Solaris (1968 Dodge Charger R/T)" data-thumb="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_m.jpg" href="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_b.jpg"><img src="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_m.jpg" alt=""></a>
</div>
<script>
</script>
</body>
</html>
By default caption disappears after 4 seconds. To disable this behavior set idleTime option to false:
$('.fancybox').fancybox({
idleTime: false
});
It's possible in CSS, just add
.fancybox-caption{
visibility: visible;
direction: ltr;
opacity: 1;
position: absolute;
z-index: 99997;
}
You can also control the behaviour from the <a> tags using data-options.
In the example above it would be :
<a data-fancybox="cl-group" data-options='{"idleTime" : "false"}' data-caption="zaid 1" data-thumb="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg"><img src="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" alt=""></a>
If some one facing this problem then there is a way to handle caption directly you need to change fancy box JS lib.
I just remove fancybox-caption class form JS lib and all fix. :)
Find fancybox-caption class and remove it from removeClass function.
Or add
$('.fancybox').fancybox({
idleTime: false
});
Related
I am having trouble creating a drop down that can sort my search results, any help is welcome. I have tried a couple of different methods that I have found from the internet but so far none have worked (I have no doubt in my mind that it is user error as others seem to have had success using those methods.) I apologise in advance for my being new at coding.
I have put my new code into this post if you could assess it and explain to me why it is not working I would be eternally grateful to you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jenewan Pets</title>
<link rel="icon" type="image/gif/png" href="img/Logo.png"/>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<body background="img/bckgrnd.png">
<div id="container">
<div id="header">
<img src="img/Header.png" style="position: absolute; top: 0px;"/>
<h1>
<img src="img/logo.png" alt="logo" height="100px" width="100px" border="0px" style=position:relative; />
<div class="box">
<div class="container-1">
<form method="get" action="searchresults11.php" id="searchForm">
<input type="text" id="searchBox" name="q" placeholder="Let's Sniff it Out...">
<div class="search-icon">
<img class="search-icon" img src="img/PawSearch.png" width="18" height="18" alt="search icon" />
</div>
</div>
</div>
</h1>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href="/index.php">Home</a></li>
<li>Dogs</li>
<li>Cats</li>
<li>Birds</li>
<li>Reptiles/Exotic</li>
<li>Aquatics</li>
</ul>
</div>
<div id="Results">
<h2>We sniffed and we found...</h2>
<?php
$con=mysqli_connect("localhost","root","","catalog");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if(isset($_GET['q'])){
$searchq = $_GET['q'];
}
$q = mysqli_query($con,"SELECT * FROM final_dog_catologue_full where
keywords LIKE '%$searchq%' OR brand LIKE '%$searchq%' OR name LIKE '%$searchq%' LIMIT 0, 40") or
die(mysqli_error("Sorry we lost the scent..."));
echo "<table border='2'>
<tr>
<th> </th>
<th id='Name_Header'>Item Name</th>
<th>Brand</th>
<th id='Price_Header'>Price</th>
</tr>";
while($row = mysqli_fetch_array($q))
{
echo "<tr>";
echo "<td><img src='img/".$row['Picture']."'></td>";
echo "<td headers='Name_Header'>" . $row['Name'] . "</td>";
echo "<td headers='Brand'>" . $row['Brand'] . "</td>";
echo "<td headers='Price_Header'>£" . $row['Retail_Price_With_Delievery'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
<script type="text/javascript">
var table = $('table');
$('#Name_Header, #Price_Header')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});
</script>
</div>
</div>
<div id="footer">
Copyright © 2017 Jenewan Pets
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
As you can see I'm a giant noob when it comes to javascript.
I'm creating a practice job interview for students.
What I'm trying to achieve is 5 interview questions appearing one after the other (3 mins each) which redirects the page at the end of the 5th question.
There is also a looping video which has a 3 minute countdown.
I'm trying to add a button which enables the user to move to the next question, which also resets the video timer.
Any help would be much appreciated!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css"/>
<link rel="stylesheet" href="../css/stylesheet.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<img src="../images/banner.jpg">
</header>
<div id="jobInterview">
<h1>Allied Health Assistant Job Interview</h1>
<img src="../images/panelinterview.jpeg" alt="interview panel">
<h2>Answer the questions provided</h2>
<p>Note: when the timer finishes it will reset for the next question until the interview is finished</p>
<h2 id="message"></h2>
<video id="myVideo" width="160" height="120" autoplay loop>
<source src="../videos/timer.mp4" type="video/mp4" >
Your browser does not support the video tag.
</video>
<script>
var questions = [
"Question 1 <br> What interests you about this job?",
"Question 2 <br>What new skills are you looking to develop as an allied health assistant? ",
"Question 3 <br>Tell me about a successful team project that you have been involved in. What was your role and what made it a success?",
"Question 4 <br>What is your greatest strength?",
"Question 5 <br>What are you passionate about? "
];
var vid = document.getElementById("myVideo");
$( document ).ready(function() {
function showQuestion() {
if (questions.length == 0) {
window.location.replace("../finish.html");
}
else {
$('#message').html(questions.shift()).fadeIn(500).delay(180000).fadeOut(500);
}
}
});
function nextQuestion() {
$('#message').html(questions.shift()).fadeIn(500).delay(180000).fadeOut(500);
vid.currentTime=0;
}
</script>
<button id="next-question" onClick="nextQuestion()">Next Question</button>
</div>
</div><!-----CLOSE WRAPPER DIV------>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Choose your own career adventure</title>
<link rel="stylesheet" href="../../css/normalize.css">
<link rel="stylesheet" href="../../css/stylesheet.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<header id="theheaderhasissues">
<img src="../../images/banner.jpg">
</header>
<div id="jobInterview-no-recording">
<h2>Allied Health Assistant Job Interview</h2>
<img src="../../images/panelinterview.jpg" alt="interview panel">
<!--<h3>Answer the questions provided</h3>
<p>Note: when the timer finishes it will reset for the next question until the interview is finished</p>-->
<h2 id="timer">Timer</h2>
<video id="myVideo" width="160" height="120" autoplay>
<source src="../../videos/timer.mp4" type="video/mp4" >
Your browser does not support the video tag.
</video>
<blockquote class="triangle-isosceles">
<h3 id="message"></h3>
</blockquote>
<script>
var questions = [
"Question 1 <br> What interests you about this job?",
"Question 2 <br>What new skills are you looking to develop as an allied health assistant? ",
"Question 3 <br>Tell me about a successful team project that you have been involved in. What was your role and what made it a success?",
"Question 4 <br>What is your greatest strength?",
"Question 5 <br>What are you passionate about? "
];
$('#message').hide();
showQuestion();
function showQuestion() {
var vid = document.getElementById("myVideo");
if (questions.length == 0) {
window.location.replace("../../finish.html");
}
else {
vid.currentTime=0;
vid.play();
$('#message').html(questions.shift()).fadeIn(100).delay(180000).fadeOut(100, showQuestion);
}
}
function nextQuestion() {
var vid = document.getElementById("myVideo");
if (questions.length == 0) {
window.location.replace("../../finish.html");
}
else {
vid.currentTime=0;
vid.play();
$('#message').html(questions.shift()).fadeIn(100).delay(180000).fadeOut(100, nextQuestion);
}
}
function reload() {
location.reload();
}
</script>
<ul id="buttons">
<li><button onclick="reload()">Start Again</button></li>
<li>Finish</li>
<li><button id="next-question" onclick="nextQuestion()">Next Question</button></li>
</ul>
</div><!--CLOSE SETTINGS NAVIGATION DIV-->
<footer>
<ul>
<li><a href="javascript:history.back()"><img src="../../images/left-arrow.png"></li>
<li><a href="../../index.html"><img src="../../images/home-button.png"></li>
</ul>
<br>
<br>
<p>© Can Stock Photo Inc. / goldenKB , http://www.canstockphoto.com/job-interview-26160264.html</p>
</footer>
</div><!-----CLOSE WRAPPER DIV------>
</body>
</html>
i have a onsenui sliding menu. when i click one of the menu option (electronics), it takes me to page 1. from page 1 i use the navigator push method to navigate to page 2. In page 2 i do see the sliding menu, but nothing happens when i click or swipe the sliding menu. But when i navigate back to page 1, it works.
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/onsenui.css">
<link rel="stylesheet" href="./css/onsen-css-components.css">
<script src="./js/angular/angular.js"></script>
<script src="./js/onsenui.js"></script>
<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<ons-navigator var="myNavigator">
<ons-page>
<ons-sliding-menu main-page="main.html" menu-page="menu.html" var="menu" swipeable=true max-slide-distance="200px">
</ons-sliding-menu>
</ons-page>
</ons-navigator>
<ons-template id="main.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Navigator - Main Page</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<ons-button modifier="light"
ng-click="myNavigator.pushPage('page1.html', {hoge: 'hoge'})">
Push Page 1
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-page>
<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('main.html', {closeMenu: true})">Clothes</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">Electronics</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 1</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Page 1</h1>
<ons-button modifier="light"
ng-click="myNavigator.pushPage('page2.html', {title: 'Page'})">
Push Page
</ons-button>
<ons-button modifier="light"
ng-click="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Page 2</h1>
<ons-button modifier="light"
ng-click="myNavigator.pushPage('page2.html', {title: 'Page'})">
Push Page
</ons-button>
<ons-button modifier="light"
ng-click="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
</body>
The parent element in your code is an ons-navigator and you have a sliding-menu as its direct child. You can see the navigator as a frame that change its content every time you push or pop a page. Therefore, with its default content, the sliding menu, you are able to use it normally. Actually this sliding menu is another frame that contains your main.html. The problem is that, when you push to "page 2", you are using the navigator's method to change all its content, including that sliding menu.
You can invert the order of your navigator and sliding menu, so when you change the content of the navigator, the sliding menu will remain as the outer frame.
Hope it helps.
Here's what I got... for some reason when I click the image map links they open up the page outside the iframe (as in it opens up as it's own page)
I've messed with it for a couple hours and went through about 20 pages but none of them specifically deal with image map links and none of them are helping.
The live link is here, I'm using firefox.
http://www.penumbra-productions.com
<!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>Penumbra Productions</title>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#dropshadow").hide();
setTimeout(function () {
$("#dropshadow").fadeIn(1000)
}, 1500);
});
</script>
<link href="CSS/Penprocss.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
body {
background-color: #CCC;
}
</style>
</head>
<body>
<div id="dropshadow">
<div id="wrapper">
<div id="header">
<a href="Index.html">
<img src="Images/PenproFull.jpg"
width="309" height="199"
alt="Penumbra Productions"
longdesc="http://penumbra-productions.com/Index.html"/>
</a>
<br/>
</div>
<div id="navigation">
<img src="Images/Navigation.jpg" width="1200" height="50" border="0" usemap="#Map"/>
<map name="Map" id="Map">
<area shape="photography" coords="29,5,252,43" href="photo.html" target="content"/>
<area shape="videography" coords="319,6,516,43" href="video.html" target="content"/>
<area shape="portfolio" coords="572,9,761,44" href="port.html" target="content"/>
<area shape="contact" coords="801,9,981,42" href="contact.html" target="content"/>
<area shape="about" coords="1020,9,1185,43" href="about.html" target="content"/>
</map>
</div>
<iframe id="content" src="main.html" width="1200" height="620" frameborder="0"></iframe>
<div id="footer"></div>
</div>
</div>
</body>
</html>
ok... all that needed to happen was to add the name="content" attribute to the iframe so the image map links could target it
Instead of using the target attribute of the area tag, try using an onclick handler.
...
<area shape="contact" coords="801,9,981,42" href="#" onclick="loadNow('contact.html')" />
<area shape="about" coords="1020,9,1185,43" href="#" onclick="loadNow('about.html') />
...
function loadNow(url) { document.getElementById('content').src=url; }
I'm trying to remove the counter from the google +1 button, but am getting this result:
there is no attribute "g:plusone:count"
Here is the code:
<div id="add" class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button" href="http://www.addthis.com/bookmark.php">
<img src="/images/add.jpg" width="32" height="32" alt="Share" /></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_google_plusone" g:plusone:count="false"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d766a8d31dffc91"></script>
<script type="text/javascript">
var addthis_config = {
services_exclude: 'print'
}
</script>
Anyone know how I can keep the counter off and still validate in xhtml strict?