I need to search and remove this span <span property="atom:tag" class="ktp-meta">nclex_rn_qbank</span> from the HTML below using XSLT. How would I do that?
My script is setup to only make this change on certain files, not all so I can't do a simple search and replace in all files.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" designation="" enumeration="">
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" title="default" href="../../assets/css/main.css" />
<title>n002001_ORG</title>
</head>
<body>
<ol class="ktp-question-set">
<li property="ktp:question" typeof="ktp:Question" class="ktp-question">
<section class="ktp-question-meta">
<section property="ktp:metadata" class="ktp-meta">
<span property="atom:content-item-name" class="ktp-meta"
data-value="n002001_ORG"></span>
</section>
<section property="ktp:tags" class="ktp-meta">
<span property="ktp:interactionType" class="ktp-meta">single-select</span>
<span property="atom:tag" class="ktp-meta">nursing</span>
<span property="atom:tag" class="ktp-meta">nclex_rn</span>
<span property="atom:tag" class="ktp-meta">nclex_rn_qbank</span>
</section>
</section>
</li>
</ol>
</body>
</html>
Have you tried like this:
<xsl:template match="span[#property='atom:tag' and #class='ktp-meta' and normalize-space(.) = 'nclex_rn_qbank']"/>
Related
I'm working on Django project with Materializecss design - Built a page with floating button for example.
Why is it not working?
I started using exactly the template from the website: https://materializecss.com/getting-started.html
and updated from the CDN part in the page:
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
And added at the bottom:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Thanks a lot!
The full HTML:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<i class="material-icons">add</i>
<ul>
<li><a href="#" class="btn-floating btn-large blue">
<i class="large material-icons">filter_drama</i></a></li>
<li><a href="#" class="btn-floating btn-large green">
<i class="large material-icons">insert_chart</i></a></li>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
After reading some posts, I use a suggestion to add the below, and it worked:
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
If someone know to explain the below, it'll be great:
Why the updated version of the files is not working?
What's the right way to install it for production?
The full HTML with the 'ADDED PART THAT MAKE IT WORK':
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<i class="material-icons">add</i>
<ul>
<li><a href="#" class="btn-floating btn-large blue">
<i class="large material-icons">filter_drama</i></a></li>
<li><a href="#" class="btn-floating btn-large green">
<i class="large material-icons">insert_chart</i></a></li>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
ADDED PART THAT MAKE IT WORK:
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
I followed the documentation for off-canvas use and it didn't work at all. F6 Forum returned 403 when I tried to create a post at theri forum :(.
Here is the HTML code I tried:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="app.css"/>
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<!-- Menu -->
<ul class="vertical menu">
<li>Foundation</li>
<li>Dot</li>
<li>ZURB</li>
<li>Com</li>
<li>Slash</li>
<li>Sites</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
Welcome !
</div>
</div>
<!-- Compressed JavaScript -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is only "Welcome' displayed, no off-canvas. What am I doing wrong here ? Thank you.
Are you sure there is nothing there?
It looks like you are just missing a click handler to open your off canvas content - as per the docs.
Try and adding:
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
within your
<div class="off-canvas-content" data-off-canvas-content>
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="0" class="active"></li>
<li data-target="Carousel" data-slide-to="1"></li>
<li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/Carousel/001.jpg">
</div>
<div class="item">
<img src="img/Carousel/002.jpg">
</div>
<div class="item">
<img src="img/Carousel/003.jpg">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
My bootstrap doesn't work for carousels neither does for Materialize. What could be the problem? Is the Javascript causing problem or what is it? I'm getting broken carousels. Ignore the images in the code.
The class of the <div>s around the images must be carousel-item, not just item. See the Bootstrap documentation for carousels.
I'm creating app in crystal-lang with kemal the web framework.
How can I use style.css or Bootstrap files in the app template in kemal?
myapp.cr location = src/myapp.cr
bootstrap located = src/public/css/bootstrap.css
layout file = src/views/layout/standard.ecr
I also tried the full path but this did not work, too. No style will be loaded.
Here is my standard.ecr (layout file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><%= title %> | Crystal Website</title>
<!-- Bootstrap -->
<link href="../public/css/bootstrap.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Crystal Website</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li
<% if env.request.path == "/" %>class="active"
<% end %>>Home</li>
<li
<% if env.request.path == "/about" %>class="active"
<% end %>>About</li>
<li
<% if env.request.path == "/contact" %>class="active"
<% end %>> Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<%= content %>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.js"></script>
</body>
</html>
By default your public folder should be in /public path and not in /src/public.
Here's the folder structure
- public
- css
- bootstrap.css
- src
- myapp.cr
- views
- layout
- standard.ecr
I am not sure why this basic reveal modal is not working... what am I missing?
<!DOCTYPE HTML>
<html>
<head>
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" />
<meta name="author">
<!-- Style Sheets -->
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/styles.css" />
<!-- HTML% shiv -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Lorem Ipsum</h2>
<p class="lead">Lorem ipsum lorem.</p>
<p>Lorem ipsum lorem ipsum lorem ipsum.</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.min.js"></script>
<script src="js/vendor/fastclick.js"></script>
<script src="js/vendor/modernizr.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
And here are the files:
Your anchor should have the attribute data-open="myModal" or data-toggle="myModal". Your close button should also be data-close.
It appears that you are using the Foundation 5 reveal, it has changed for Foundation 6.
I have reformatted your reveal codeblock below adding the data-open to your open anchor and data-close to the close button and, the reveal block to have class="reveal":
Click Me For A Modal
<div id="myModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Lorem Ipsum</h2>
<a class="close-button" data-close aria-label="Close">×</a>
</div>
Zurb Foundation 6 Reveal: http://foundation.zurb.com/sites/docs/reveal.html