I have a form, when textbox is focused (onfocus), it triggers a marquee tag (in this case 'name') from left of textbox using javascript. But after the modal is opened, the marquee tag disappears and when the text field is focused again(onfocus), the marquee text does not come to display.
NOTE - marquee functionality for my code only worked for Mozilla firefox. So please try the code in firefox.
Steps -
Click the text box.
'Name' flows out using marquee.
Click 'Open modal'.
'Name' disappears (as soon as modal opens).
Close the modal.
Click the text box again, the marquee text doesn't trigger.
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#vpass{
display:none;
}
</style>
<script>
function anim(field) {
document.getElementById(field).style.display = "block";
}
</script>
</head>
<body>
Open Modal
<div class="modal fade" role="dialog" id="modall">
<div class="modal-dialog">
<div class = "modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">MODAL</h4>
</div>
</div>
</div>
</div>
</br></br></br></br>
<table>
<tr>
<td width="90px"><label id="vpass"><marquee direction="left" behavior="slide">name</marquee></label></td>
<td>
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
</div>
</td>
</tr>
</table>
</body>
</html>
Thank you
Please notice that <marquee> is an obsolete HTML5 element and its usage has been discouraged by W3C Standards:
The <marquee> element is a non-standard element. HTML5 classifies it as a non-conforming feature.
The reason that you shouldn't use <marquee> its because you can't assure support by the browsers. This advice is also encouraged by Can I Use.
You'd better animate your text with CSS3 animations or JavaScript. This question has some good sources about how you can emulate <marquee> behaviour.
I refactored the code a bit to use CSS transitions instead, as they provide better performance. That way, the moving label is no longer affected by the modal window, at all. Take a look at the updated snippet below:
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
td {
position: relative;
}
#vpass {
position: relative;
left: 100%;
transition: left 0.8s ease-in-out;
}
#vpass.active {
left: 0%;
}
</style>
<script>
function anim(field) {
document.getElementById(field).className = "active";
}
$(document).ready(function() {
$('#name').on('blur', function() {
$('#vpass').removeClass('active');
});
});
</script>
</head>
<body>
Open Modal
<div class="modal fade" role="dialog" id="modall">
<div class="modal-dialog">
<div class = "modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">MODAL</h4>
</div>
</div>
</div>
</div>
</br></br></br></br>
<table>
<tr>
<td width="90px"><label id="vpass">name</label></td>
<td>
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
</div>
</td>
</tr>
</table>
</body>
</html>
I also added functionality to deactivate the element class on blur. Let me know if you have any questions!
Try replacing the following anim function with the existing function
function anim(field) {
document.getElementById(field).style.display = "none";
$('#vpass').html('<marquee behavior="slide" direction="left" scrollamount="10">name</marquee>').show();
}
If this solution helps, don't forget to accept this answer
Related
My goal is to build a dynamic FAQ page where the questions are visible, and when you click on the said question the div with the answer would appear. Once you click the div again it would toggle again.
I've tried a few things and the best result I've accomplished was toggling the first question's answer regardless of what question was clicked.
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link href="./img/favicon.png" rel="shortcut icon"/>
<meta charset="utf-8"/>
<meta content="width=1280, maximum-scale=1.0" name="viewport"/>
<link th:href="#{css/faq.css}" rel="stylesheet" type="text/css"/>
<link th:href="#{css/faq-new.css}" rel="stylesheet" type="text/css"/>
</head>
<body style="margin: 0;
background: rgba(255, 255, 255, 1.0);">
<input id="anPageName" name="page" type="hidden" value="faq"/>
<div class="faq">
<th:block th:insert="_header.html :: header"></th:block>
<div class="rectangle2">
</div>
<div class="justaskus">
Just Ask Us
</div>
<!-------========= FAQ =========------------->
<div class="faq-container">
<div class="th-start" th:block th:each="faqType, stats : ${faqTypeDaoList}">
<div class="q-type-wrapper">
<div class="type-header">
<h4 th:text="${faqType.faqTypeName}"></h4>
</div>
<!----========= Question ========--------->
<div class="th-wrap" th:each="question, stat: ${faqTypeDaoList[_${stats.index}_].faqList}">
<a href="#">
<div id="box" class="question-box">
<div class="bullet"></div>
<img th:src="#{img/artboard-copy-3-unnamed-3#2x.png}" class="arrow"/>
<img th:src="#{img/artboard-copy-3-unnamed-13#2x.png}" class="unnamed" style="display:none;"/>
<div class="questions" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].question}"></div>
<div id="answers" class="dropdown-answer" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].answer}"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#box').on("click", ()=> {
$(this).children[3].toggle();
});
});
</script>
That is my current code and it does absolutely nothing. Here are a few attempts I took
/* One attempt */
$('.questions').on("click",function(){
// "this" in $(this) --> means the current clicked element
// .find() will search the CHILDREN of the clicked element with the class "sub-nav"
$(this).find("dropdown-answer").toggle();
});
/* Another attempt. This one toggled only the first question's answer regardless if what button was clicked. */
var click = document.getElementById("dropdown-answer");
if(click.style.display === "none") {
click.style.display = "block";
}
else {
click.style.display = "none";
}
Is this even possible?
find() will find children inside the element you provide (so in this case you put this in it so .questions) but your .dropdown-answer is not a child of that element.
you can write it like this
$(this " + .dropdown-answer").toggle();
Or place the element inside the .questions element and get it like this
$(this).find(".dropdown-answer").toggle();
I am following this Tutorial.
Here is my code (I've excluded my table HTML):
#model IEnumerable<JMWebApp.Models.Job>
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Job Manager";
}
<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
<style scoped>
.form-group.required .control-label:after {
content:"*";
color:red;
margin-left: 4px;
}
</style>
<div class="modal-dialog" role="document">
<form class="modal-content form-horizontal" id="editor">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
<h4 class="modal-title" id="editor-title">Add Row</h4>
</div>
<div class="modal-body">
<input type="number" id="id" name="id" class="hidden"/>
</div>
<div class="form-group required">
<label for="reference" class="col-sm-3 control-label">Reference</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference" required>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" class="btn btn-default">Cancel</button>
</div>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(function($) {
var $modal = $('#editor-modal'),
$editor = $('#editor'),
$editorTitle = $('#editor-title'),
ft = FooTable.init('#editing-example',
{
editing: {
editRow: function(row) {
var values = row.val();
$editor.find('#id').val(values.id);
$editor.find('#reference').val(values.reference);
$modal.data('row', row);
$modal.modal('show');
$editorTitle.text('Edit row #' + values.id);
}
}
});
});
</script>
In my Layout file I define my scripts as so:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/footable.min.js"></script>
<link href="~/Content/site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/footable.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/footable.fontawesome.css" rel="stylesheet" type="text/css" />
</head>
I am having two issues with this. First of all the icons on the 'FooTable' are not displaying correctly, they just look like jumbled characters. I did read an answer before that there are a number of font files I needed to include.
I tried that but it didn't work, also I couldn't find any guidance on the FooTable website to include these icons.
Secondly I'm getting an error $modal.modal is not a function when I am attempting to edit the rows and show the modal. I also read a few answers to this in that my jQuery must be resolved before bootstrap, but as far as I can see in my Layout the scripts are loaded correctly.
I'd appreciate any help.
bootstrap.min.js will be helpful for you, kindly read the below
Modal is defined in bootstrap.js not jQuery. It's also important to note that bootstrap actually needs jQuery to define the modal function, so it's vital that you include jQuery before including bootstrap's javascript. To avoid the error just be sure to include jQuery then bootstrap's javascript before you call the modal function.
Source: https://stackoverflow.com/a/28173513/3397630
Hope it was helpful
Thanks
Karthik
I have 2 html pages application and on second page I open dialog by using css only.
1st page has one button:
<button onClick="redirectToDetails()">Go to details</button>
and JS:
function redirectToDetails(){
window.location = "second-page.html";
}
on second page I have button Back and button 'open dialog'
JS:
function goBack(){
window.history.back();
}
function openDialog(){
window.location = "#modal-one"
}
THE DEMO
My dialog content is:
<div class="gl-modal" id="modal-one" aria-hidden="true">
<div class="gl-modal-dialog">
<div class="gl-modal-header">
<h2>Modal in CSS?</h2>
×
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="gl-modal-footer">
Nice! <!--CHANGED TO "#close"-->
</div>
</div>
</div>
The problem:
When I go from 1st view to second view and open Dialog, back button doesn't work. It opens me dialog again because I use window.history.back();
I tried a lot of ways to clear history, to redirect back to main page - nothing works
How can i open dialog and do not record to history , so window.history.back(); will turn me to main view?
Can someone help me with that problem?
In my humble opinion, you should just stick to two technologies, not mix up hyperlinks and hashes and manual history manipulation. Use simple hyperlinks for navigation between views and use hash links for the modals. That way the standard browser back button even works as well.
This version works for me:
index.html
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Main view</h1>
Second view
</body>
</html>
second-page.html
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Second view</h1>
Back
<button onClick="openDialog()" >open Dialog</button>
<div class="gl-modal" id="modal-one" aria-hidden="true">
<div class="gl-modal-dialog">
<div class="gl-modal-header">
<h2>Modal in CSS?</h2>
× <!--CHANGED TO "#close"-->
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="gl-modal-footer">
Nice! <!--CHANGED TO "#close"-->
</div>
</div>
</div>
<script>
function openDialog(){
window.location.hash = "#modal-one"
}
</script>
</body>
</html>
Declare one function as below,
function closeDialog() {
window.history.back();
}
Now change your close tag as below
Nice!
New Second Html File
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Second view</h1>
</br>
Back
</br>
</br>
</br>
<button onClick="openDialog()" >open Dialog</button>
<div class="gl-modal" id="modal-one" aria-hidden="true">
<div class="gl-modal-dialog">
<div class="gl-modal-header">
<h2>Modal in CSS?</h2>
<a onClick="closeDialog()" class="btn-close" aria-hidden="true">×</a> <!--CHANGED TO "#close"-->
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="gl-modal-footer">
Nice! <!--CHANGED TO "#close"-->
</div>
</div>
</div>
<script>
function openDialog(){
window.location = "#modal-one"
console.log(window.location);
}
</script>
</body>
</html>
Alternatively, you can use checkbox to trigger the modal, thus you will not need to deal with the hash issue because it doesn't produce hash fragments, basically give both the checkbox display:none, style the label to look like a button.
Also the label must have for attribute to be tied to the corresponding checkbox even if there're other elements between them, it could wrap it too but using for gives you more freedom.
plunker
CSS:
.chkbx, .overlay {
/* hide all overlays and checkboxes */
display: none;
}
#chk1:checked ~ #over1 {
/*if checkbox#chk1 is checked, trigger the display of the div#over1 */
display: block;
}
HTML:
<label class="btn-label" for="chk1">open modal - using label (css only)</label>
<input type="checkbox" class="chkbx" id="chk1">
<div class="overlay" id="over1">
<div class="modal">this is modal
<p>close
and yes you can have another label to close the modal with no need for javascript
<p><label class="btn-label" for="chk1">close</label></p>
</p>
</div>
</div>
The ~ in #chk1:checked ~ #over1 will work only if overlay #over1 comes after (but not necessary right after it, other elements could be between them) the checkbox #chk1, both are siblings and having same parent (you can use chk1:checked + #over1 instead but then #over1 must come right after #chk1 with no elements between them)
I've got this form with bootstrap but I can't find why it's not working properly ant I've no idea why.
HEAD>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/corrections.css" rel="stylesheet" type="text/css"/>
<script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
--> code here
</body>
HTML >>
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Some label</label>
<input id="text" type="text" class="form-control" placeholder="Text here">
</div>
<button type="submit" class="btn btn-primary pull-right">Ok</button>
<div class="alert alert-danger" style="display:none">
<h4>Error</h4>
Required amount of letters is 4
</div>
<div class="success alert-success" style="display:none">
<h4>Success</h4>
You have the required amount of letters
</div>
</form>
</div>
JS >>
<script>
$(function () {
$("form").on("submit", function () {
if ($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return;
} else if ($("input").val().length > 3) {
$("div.form-group").addClass("has-success");
$("div.success").show("slow").delay(4000).hide("slow");
return;
}
});
});
</script>
the alert class shows everytime, any idea why?
The use of $("input") here is unusual. That selector will pull back all elements on the page that are <input>s, which is almost certainly not what you mean. (If there are other inputs on the page, you might get exactly what you're describing.) Use a more precise selector, like $("#text"), and maybe use debug to output the value of val().length so you know what you're evaluating.
(On a side note, "text" is not a very useful name for a text input, and your else-if seems redundant, but they probably aren't causing problems in your code.)
I am making a jeopardy game. When I click a div I want to do some effect on it. However, I can't even get a simple .hide to work. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jeopardy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customStyles.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/flip.js"></script>
</head>
<body>
<div class ="container">
<div class="row">
<div class="prizeAmount">
<div class="span2">
<h3 id="test">100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
</div>
</div>
</div><!--close container-->
</body>
</html>
javascript
$(function() {
$('#span2').click(function() {
$(this).hide(400);
/*$('#span2').hide(400); <--tried this also */
});
});
I've used jquery to animate navigation on a site before. Am i missing something obvious?
Your
$('#span2') // id selector
Should be
$('.span2') // class selector
Since it's a class
Your problem is that you are using the hash # which is the id selector instead of the class selector which is a dot ..
Try
$(function() {
$('.span2').click(function() {
$(this).hide(400);
});
});
You might want to read up more on the different jQuery Selectors on the official documentation
You dont have any elements with ID "span2", they are all CLASS=span2.
Try this:
$(function() {
$('.span2').click(function() {
$(this).hide(400);
});
});
Note: this will effect ALL elements with the class "span2" if you don't want that behavior, then use ID="span2" for a single element, and use unique names for each.