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>
Related
I am trying to create a search function for a FAQ that I am assembling.
I am very new to HTML, CSS, JS, etc., so please, I need help here! :-)
I created an HTML Code, grabbing from here and there from the Internet, until I managed to do something decent visually.
I don't know how to make searchable out my code, or I am not sure what to change, in order to use a JS file to be able to search and show me the Question and the Answer, of what's being searched on.
Here is my HTML Code
<!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.0">
<title>FAQ PAGE</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./accordion.css">
<link rel="stylesheet" href="./files/bootstrap.min.css">
</head>
<body>
<main>
<h1 class="faq-heading">FAQ'S</h1>
<div id="accordion_search_bar_container">
<input type="search" id="accordion_search_bar" placeholder="Search"/>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="faq-one">
<!-- faq question -->
<h1 class="faq-page">What is an FAQ Page?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>This is a FAQ test question</p>
</div>
</div>
<hr class="hr-line">
<div class="faq-two">
<!-- faq question -->
<h1 class="faq-page">Why do you need an FAQ page?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>You need a FAQ to help your users</p>
</div>
</div>
<hr class="hr-line">
<div class="faq-three">
<!-- faq question -->
<h1 class="faq-page">Does it improves the user experience of a website?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>It helps your users on a 24/7 basis</p>
</div>
</div>
</div>
</main>
<script src="./main.js"></script>
<script src="./script.js"></script>
<script src="./files/jquery.min.js"></script>
<script src="./files/bootstrap.min.js"></script>
</body>
</html>
This is my CSS
body{
font-family: 'Work Sans', sans-serif;
}
.faq-heading{
border-bottom: #777;
padding: 20px 60px;
}
.faq-container{
display: flex;
justify-content: center;
flex-direction: column;
}
.hr-line{
width: 60%;
margin: auto;
}
/* Style the buttons that are used to open and close the faq-page body */
.faq-page {
/* background-color: #eee; */
color: #444;
font-size: 20px;
cursor: pointer;
padding: 10px 20px;
width: 60%;
border: none;
outline: none;
transition: 0.4s;
margin: auto;
}
.faq-body{
margin: auto;
/* text-align: center; */
width: 57%;
padding: auto;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.faq-page:hover {
background-color: #F9F9F9;
}
/* Style the faq-page panel. Note: hidden by default */
.faq-body {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.faq-page:after {
content: '\02795';
/* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796";
/* Unicode character for "minus" sign (-) */
}
And this is a JS I found for search, but I cannot make it to work for my HTML code :'(
(function(){
var searchTerm, panelContainerId;
// Create a new contains that is case insensitive
$.expr[':'].containsCaseInsensitive = function (n, i, m) {
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$('#accordion_search_bar').on('change keyup paste click', function () {
searchTerm = $(this).val();
$('#accordion > .panel').each(function () {
panelContainerId = '#' + $(this).attr('id');
$(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
$(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
});
});
}());
Any help will be greatly appreciated.
Thanks a lot!
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.
Basiaclly, I am trying to make a upload form for my website. I was wondering if there is any CSS that would make this look much more pleasing and unique. The code below is only HTML. I only need the CSS but if you find any way to improve the HTML, let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" name="file1"/>
<input type="submit" value="send!"/>
</form>
</body>
</html>
One way you could improve is change the <input type="submit" value="send!"/> code to <button id="" class="" type="submit">Your Text Here</button>. Also for css codes for like buttons I reccomend use something like this
ButtonIDHere {
border-radius: 25px;
border: 4px solid blue;
padding: 10px;
}
and to make inputs a little nicer use something like this
.InputClass {
position: absolute;
width: 150px;
top: 150px;
left: 730px;
z-index: 4;
}
Also maybe change the border color and stuff.
yo so what do you actually wanna see I just made the form centred and added some colour.
do u want the buttons to look nicer?
https://jsfiddle.net/jqc05Ldk/5/
.container{
width: 50%;
margin: 0 auto;
padding: 24px 24px;
background-color: #57b3e4;
height: auto;
color: #BBDEF0;
border-radius: 25px;
}
input[type="submit"]{
border-radius: 25px;
border: 4px #00A6A6 solid;
background-color: #00A6A6;
color:#BBDEF0;
cursor:pointer;
}
input[type="submit"]:hover{
color: #00A6A6;
background-color: #BBDEF0;
}
For these type of file inputs you can use form control in bootstrap which does not include the external css that much because bootstrap is a css framework and the button styling also will be nice when we use bootstrap Try this code.This code also includes the alert that comes after send button.Try doing these type of forms with bootstrap
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<style>
.container{
width: 300px;
height: 150px;
border: 1px solid black;
border-radius: 25px;
}
</style>
<script type="text/javascript">
function showMessage(){
alert("Thanks Your papers have been evaluated");
}
</script>
</head>
<body>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<div class="container mt-4 mb-2">
<form>
<div class="form-group mt-2">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
<button type="submit" onclick = "showMessage()"class="btn btn-primary mt-2">send </button>
</div>
</form>
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.
I have created two slider using mootools,
basically it is two <div>, i am sliding it in one by one, but the problem is i am not able to set the position of , it comes one below the other, and what i want is both should come in one line, and the slider2 should start from the point were slider1 ends
my code is as follows,
<!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>Untitled Document</title>
<style type="text/css">
h3.section {
margin-top: 1em;
}
#test{
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
width:66px;
height:66px;
float:left;
}
#testing{
background: #D88888;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
width:66px;
height:66px;
float:left;
}
</style>
<script type="text/javascript" src="mootools-core-1.4-full.js"> </script>
<script type="text/javascript" src="mootools-more-1.4-full.js"> </script>
<script type="text/javascript">
window.addEvent('domready', function() {
var one = new Fx.Slide('test', {mode: 'horizontal'});
var two = new Fx.Slide('testing', {mode: 'horizontal'});
one.hide();
two.hide();
one.slideIn();
one.addEvent('complete', function() {
two.slideIn();
});
});
</script>
</head>
<body>
<div id="test">
</div>
<div id="testing">
</div>
</body>
</html>
can anyone help me please,
The problem is that each div processed by Fx.Slide will be wrapped by a div element. Therefore, to achieve what you want you could play a little with css, for example by adding a rule that will match test/testing wrapper divs
#container > div{
float:left;
}
/* note that I wrapped the 2 divs test and testing inside #container div */
Demo: http://jsfiddle.net/steweb/hGSdN/