I want to use an HTML tooltip and also import some features from bootstrap. The problem is that when I add:
<link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>
Tooltips are not working anymore. I'm working in eXist-db and using exide, here is my HTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8"/>
<title data-template="config:app-title"> ...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta data-template="config:app-meta"/>
<link rel="shortcut icon" href="$shared/resources/images/exist_icon_16x16.ico"/>
<link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<script type="text/javascript" src="$shared/resources/scripts/jquery/jquery-1.7.1.min.js"/>
<script type="text/javascript" src="$shared/resources/scripts/loadsource.js"/>
<script type="text/javascript" src="$shared/resources/scripts/bootstrap-3.0.3.min.js"/>
<html>
<head>
<style>
.tooltip {
position: relative;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: white;
color: black;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
width: 240px;
bottom: 110%;
left: 20%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
visibility: visible;
}
</style>
</head>
<body id="body">
<div style="width: 20%; height: 90px; float: left; margin:10px">
<h4>Original Text:</h4>
<div data-template="letter:text_orig"/>
</div>
</body>
</html>
</html>
Here is my letter.xql where I use tooltip:
declare function letter:text_orig($node as node(), $model as map())
{
let $resource := collection('/db/apps/Tobi-oshki/data')
let $xml_id := letter:text_people('/db/apps/Tobi-oshki/data')
for $rs in $resource//tei:rs
for $id in $xml_id
return
if (data($rs/#key) eq $id)
then
<html>
<div class="tooltip">{$rs}
<span class="tooltiptext">{letter:text_lem(data($rs/#key))}</span>
</div>
</html>
else
("")
};
I'd recommend not relying on the bootstrap version that ships with shared-resources (which is deprecated since exist v 5.3.0) its outdated and unmaintained.
I would suggest packaging you own preferred dependencies and css. As a last resort you can experiment with replacing the js and css files inside shared resources with later versions, to see if that fixes your problem.
Related
I am using wordpress and I have a Iframe with a leaflet map inside it. But on the left there is a lot of white space. And I want that the leaflet map will cover the full widht. So this is the code of the iframe:
<!DOCTYPE html>
<html>
<html lang="en-us">
<head>
<title>GeoVerdeling</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Show geometric distribution">
<meta name="author" content="Victor Bom">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src=
"https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<style>
#peMap {height:1000px;
width: 100%;
background: rgba(76, 175, 80, 0.0);
border:5px double #000000}
div { margin-left:auto;
margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>
<script>
$(function()
{
var dlist=[
["aa en hunze",53.0104848,6.7495285,1320.00,7],
];
var maxBounds=[
[50.800,3.259], //Southwest
[53.565,7.335]]; //Northeast
var peMapOptios={'maxBounds':maxBounds, 'zoomSnap':0, 'zoomDelta': 0.5,
'wheelPxPerZoomLevel':120, 'minZoom':7.5, 'maxZoom':11};
var circleOptions={color:'red', fillColor:'#f03', fillOpacity:0.5};
var peMap=L.map('peMap',peMapOptios).setView([52.2,5.3],7.7);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution:'© OpenStreetMap'}).addTo(peMap);
L.control.scale().addTo(peMap);
var i;
for ( i=0;i<(dlist.length);i++ )
{ circle=L.circle([dlist[i][1],dlist[i][2]],dlist[i][3],circleOptions).addTo(peMap);
circle.bindPopup(dlist[i][0]+":"+String(dlist[i][4]));
};
});
</script>
</head>
<body>
<h3 style="text-align:center">Deelnemers per: 2022-05-27 </h3>
<div id="peMap"></div>
<br>
<p> Geregistreerde deelnemers: 3984, Bekende gemeenten: 331, Deelnemers toegekend aan gemeenten: 3161</p>
</body>
</html>
and this is how it looks like now:
So you see on the left there is a lot of space. And of course on a mobile phone it has to be rendering also correct.
So what I have to change?
Thank you
if I do it like this:
<style>
html, body
{
margin: 0px; padding: 0px
}
#peMap {height:1000px;
width: 100%;
background: rgba(76, 175, 80, 0.0);
div { margin-left:auto;
margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>
<script>
still on the left a lot of white space. Even on mobile
There isn't anything wrong with the code you've written. This just has to do with the interesting world of web development, where most browsers have a default stylesheet attached to web pages.
In your case, it has to do with the <body></body> element having a default margin: 8px. You'll simply need to override this with body { margin: 0px; }.
Here's some fun reading and discussion about this.
I'm trying to import an markdown file into an HTML.
I've used the iframe tag to do so but it is shortening the content inside a box.
As I'm using markdown to write the text thats going inside the main tag, so my intention is that it keeps the height of the text in markdow.
I also used the lib https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js but it didn't worked.
And a common import, and it didnt work it either.
The codes are the following:
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- CSS styles -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/solid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css"/>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<!-- Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js" integrity="sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/#webcomponents/webcomponentsjs#2/webcomponents-loader.min.js"></script>
<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#1/src/zero-md.min.js"></script>
<script type="module" src="javascript.js"></script>
<!-- Simply set the `src` attribute to your MD file and win -->
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
<title></title>
</head>
<body>
<header>Header</header>
<aside>
<div id="mySidenav" class="sidenav">
<p>nav bar</p>
</div>
<aside>
<main>
<!-- include my markdown file here -->
<!-- try 1 -->
<link href="mkd.md" rel="import" />
<!-- try 2 -->
<pre class="hljs"><code>
<link class="hljs rel="import" href="mkd.md">
</code></pre>
<!-- try 3-->
<div w3-include-html="mkd.md"></div>
</main>
<footer>Footer</footer>
</body>
</html>
CSS:
header{
background-color: #000000;
padding-left: 4%;
padding-top: 1%;
padding-bottom: 1%;
margin-top: -0.001%;
}
main{
padding-left: 4%;
max-width: 86%; // set maximum width of the container
white-space: wrap; // do not let text wrap
overflow: hidden; // do not let overflow out of container
text-overflow: ellipsis; // shorten all overflowing text
}
body, html,main {
height:100%;
width:100%;
}
iframe {
height:100%;
width:100%;
background:cyan;}
#mySidenav a {
position: fixed;
left: -230px;
transition: 0.3s;
padding: 15px;
width: 270px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
margin:0;
padding-top: 0;
padding-bottom: 0;
}
And I used a markdown available at https://markdown-it.github.io/
All the solutions I've found it I had to install a package, is there a way to do it just importing it ?
Edited:
There is a scroll bar and if I remove it doesn't show the whole content, and the markdown is plain, it not enhanced, as it should be since I'm using <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
Thanks you all guys!
I have been trying to place my Menu Div above my background, and it is failing to appear at all. Even in inspect element nothing appears when I try to show where the div is. I have already tried z-index and position relative/absolute/fixed.
I am trying to make a landing page for my website and have been stuck up on this for a long time now. I have tried rearranging the order of the Menu Div in front of the
This is My HTML Code
.body{
margin: 0;
padding: 0;
height: 100%;
}
.menu_top{
background-color: #ffffff;
position: relative;
top: 0;
width: 100%;
height: 100;
z-index: 5;
}
.home_logo_box{
z-index: 5;
}
.home_logo{
top: 30%;
position: absolute;
left: 42%;
}
<html>
<head>
<title>
Home
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="coincontrast_home.css">
<link rel="stylesheet"; style="text/css" href="style.css">
</head>
<body>
<div src="particles">
<div id="particles-js"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
</div>
<div src="menu_top">
<img src="https://image.flaticon.com/icons/png/128/33/33447.png" class="home_logo">
</div>
<div class="home_logo_box">
<img src="https://image.flaticon.com/icons/png/128/87/87386.png" class="home_logo">
</div>
</body>
</html>
There are no error messages
Your issue is because you are not giving the div elements an id or class.
<div src="menu_top">
Should actually be:
<div class="menu_top">
This means that it will also line up with your CSS. If you wanted to change the div element to an id it would look like this:
<div id="menu_top">
And you need to change your CSS from: .menu_top to #menu_top.
Also, as Thomas Byy said, you should move your <script> tags to outside of the <body> element, they could be moved to the <head> element or just before the closing </html> element.
This will help you
.body{
margin: 0;
padding: 0;
height: 100%;
}
#menu_top{
background-color: #ffffff;
position: relative;
top: 0;
width: 100%;
height: 100;
z-index: 5;
}
.home_logo_box{
z-index: 5;
}
.home_logo{
position: relative;
bottom:0;
left: 42%;
}
<html>
<head>
<title>
Home
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="coincontrast_home.css">
<link rel="stylesheet"; style="text/css" href="style.css">
</head>
<body>
<div src="particles">
<div id="particles-js"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
</div>
<div id="menu_top">
<img src="https://image.flaticon.com/icons/png/128/33/33447.png" class="home_logo">
</div>
<div class="home_logo_box">
<img src="https://image.flaticon.com/icons/png/128/87/87386.png" class="home_logo">
</div>
</body>
</html>
I think you shutdown your computer to solve that problem. Hehehe sorry just kidding, I think JackU was right when you name a class you should use a class element so that we you go to your css files you can easily call it. Because in your situation you didn't declare menu_top as a class name, Unfortunately, you make your menu top as a link or source from.
I have made an animation/version of something on Scratch of what I wish to include in my website.
Click here to view it
As you can see by the video, the text appears in one state but then changes when the mouse is hovering over it and then turns green (confirmed as your choice) when you click on one of the options.
The reason why I wish to have this feature on my site is to see how people interpret things differently. I wish to see how people perceive the Bible by having this option for certain key-terms and verses and allow people to select what they think it means.
I am using Wix to make my website and they have an add-on which allows you to insert HTML code into the site so if there is a way to make this idea possible, that would be awesome.
It would mean a lot if I am able to understand how to do this and I would be extremely grateful.
Thanks
Wrap the text within a span and give it an id. You store this ID within the css file. Within this css file, call the ID and give it the background-color of yellow. When you hover over it, you will need jQuery. Research the mouse-in and mouse-out functions of jQuery.
Please send a link to your site if any more help is required.
#nameofid{
background-color: yellow;
}
A working, BASIC example using jQuery and Tether.io.
<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<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>Choose an Option on Hover</title>
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" /> -->
<style type="text/css" media="all">
#selection {
position: relative;
background-color: yellow;
display: inline-block;
}
#selection .options {
position: absolute;
z-index: 2;
/* regulated using http://tether.io */
left: 0;
top: 100%;
display: block;
background-color: #454545;
padding: 1rem;
min-width: 150px;
}
#selection .options .option {
display: block;
background-color: black;
color: #fff;
padding: .35rem .7rem;
margin-bottom: .7rem;
cursor: pointer;
border: 1px solid transparent;
}
#selection .options .option:hover {
border: 1px solid #fff;
}
#selection .options .option.choice {
background-color: lime;
}
</style>
</head>
<body>
<h1>Choose an Option on Hover</h1>
<p>
This is an example of html which I
<span id="selection">
<span class="display">Would</span>
<span class="options">
<button class="option" type="button" value="Option 1">Option 1</button>
<button class="option" type="button" value="Option 2">Option 2</button>
</span>
</span>
like to make.
</p>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
var $selection = $('#selection');
var $display = $selection.find('.display');
var $options_container = $selection.find('.options');
var $options = $selection.find('.option');
$.each($options, function() {
$(this).click(function() {
var $choice = $(this);
$display.text($choice.val());
$choice.addClass('choice');
$choice.siblings().removeClass('choice');
$options_container.fadeOut();
})
});
$selection.mouseover(function() {
$options_container.fadeIn();
});
/*new Tether({
element: $selection,
target: $options_container,
attachment: 'bottom left',
targetAttachment: 'top left'
});*/
$options_container.fadeOut();
});
</script>
</body>
</html>
Seems a very strange problem to me, but the links on this site (www.dartsocialmedia.co.uk/bird) are disabled in internet explorer. It seems to work fine on all the other browsers I've tested. The problem seems to be that internet explorer doesn't recognise them as links.
Any ideas what the problem is?
Edit: also, form inputs are not recognised as such.
Here's the HTML header:
<!DOCTYPE html>
<html>
<head>
<title>bird</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/style.css" rel="stylesheet">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/font-awesome.min.css" rel="stylesheet">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/custom-responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/img/favicon.ico">
<meta name='robots' content='noindex,nofollow' />
<link rel='stylesheet' id='admin-bar-css' href='http://www.dartsocialmedia.co.uk/bird/wp-includes/css/admin-bar.min.css?ver=3.5.2' type='text/css' media='all' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.dartsocialmedia.co.uk/bird/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.dartsocialmedia.co.uk/bird/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.5.2" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>
</head>
It seams that z-index: 999 in your css file at line 5 cause the problem.
I suggest you change your CSS bacause body:before overlap the whole window:
1) Implements the border into the body element, add:
body {
border: 5px solid #dd127b;
width: auto;
margin: 10px;
}
2) Use the body:before to place the top border with fixed position to hide overflow when scrolling:
body:before {
border-bottom: 5px solid #dd127b;
display: block;
content: '';
position: fixed;
top: 0;
left: 10px;
right: 10px;
background: #111;
padding-top: 10px;
z-index: 999;
}
3) Use the body:after to place the bottom border:
body:after {
border-top: 5px solid #dd127b;
display: block;
content: '';
position: fixed;
bottom: 0;
left: 10px;
right: 10px;
background: #111;
padding-bottom: 10px;
z-index: 999;
}