I am working on a website and I have a div which is hidden when the page loads, but keeps a small gap between the top header element, and a form.
Under a certain condition, javascript is used to add a class the message div and show a message to the user, after a 5 second timer, the message is then faded out and the classes removed, with another class added to keep the gap between the header element and the form, however, this isn't working, instead when the message div is faded out, the form jumps to the position of where the message was.
Below is my StyleSheet
#message
{
height: 50px;
}
.messageBlank
{
width: 800px;
height: 50px;
background-color: transparent;
border: none;
margin-left: auto;
margin-right: auto;
}
.messageError
{
width: 800px;
height: 50px;
background-color: #ff5555;
border: solid red thin;
margin-left: auto;
margin-right: auto;
}
Below is my javascript which controls showing and hiding the message box
var timer = null;
var MessageTypeEnum = {"error":1, "workingOrComplete":2}
function showMessage(persistent, message, type)
{
clearTimeout(timer);
//$('#message').css({
// position:'absolute',
// padding: '10px',
// left: ($(window).width() - $('#message').outerWidth(true))/2
//});
$("#message")
.hide()
.html(message);
//if (type == "error")
if (type === MessageTypeEnum.error)
{
$("#message").addClass("messageError");
}
//else if (type == "workingComplete")
else if (type === MessageTypeEnum.workingOrComplete)
{
$("#message").addClass("messageWorkingComplete");
}
$("#message").fadeIn("slow");
if (!persistent)
{
timer = setTimeout("hideMessage()", 5000);
}
}
function hideMessage()
{
$("#message")
.fadeOut("slow", function()
{
$("#message").removeClass("messageError");
$("#message").removeClass("messageWorkingComplete");
$("#message").addClass("messageBlank");
});
}
Below is my HTML
<body>
<div id="container">
<header>
<img src="../images/header.png" alt="header" />
<span style="font-weight: bold; padding-left: 50px; color: white; top: 0px; position: absolute;">Boardies Bug Reporter</span>
</header>
<div id="content">
<div id="errorToolbox"> </div>
<div id="message" class="messageBlank"> </div>
<form action="javascript:validate();" novalidate>
<table>
<tr>
<td>Username: </td>
<td>
<input type="text" id="txtUsername" name="txtUsername" autofocus required placeholder="Username" />
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type="password" id="txtPassword" name="txtPassword" required placeholder="Password"
</td>
</tr>
<tr>
<td> </td>
<td class="buttonGroup">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</form>
</div>
If you want to keep a gap you should use fadeTo() method. For example to hidde element you can do:
$("#message").fadeTo( 200, 0, function()...
and to show
$("#message").fadeTo( 200, 1);
Where 200 is time in ms of how fast your animation should work.
This method will just change opacity of element and will keep it original height
Related
I have an input field and I want to be able to show the length of characters being typed in but I want it to be within the input box all the way to the end of the input box. I'm not even sure where to start to do this.
Not really sure where to start.
<label class="label is-capitalized">Description One </label>
<div class="field">
<div class="control is-expanded">
<input type="text" class="input size19" placeholder="description one" v-model="keyword">
</div>
<div>
var app = new Vue ({
el: '#app',
data: {
keyword: 'hello'
}
})
A counter within the input field pulled to the right edge
this can be handled in CSS in many ways
// Instantiating a new Vue instance which has preinitialized text
var app1 = new Vue({
el: '#app1',
data: {
keyword: 'hello'
}
});
.field {
margin: 1em;
}
.input {
padding-right: 30px;
}
.input-count {
margin: -30px;
opacity: 0.8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- App 2 -->
<div id="app1">
<div class="field">
<div class="control is-expanded">
<input type="text" class="input size19" placeholder="description one" v-model="keyword" />
<span v-if="keyword.length" class="input-count">{{keyword.length}}</span>
</div>
<div>
You'll have to use CSS to achieve this. Because you cannot get something like this within the input box:
some text in input 18
There has to another div overlapping your input box. See this:
var counter = document.getElementById ('counter'),
input = document.getElementById ('inp');
counter.innerHTML = input.value.length;
input.addEventListener ('keyup', function (e) {
counter.innerHTML = input.value.length;
});
.inline-block {
display: inline-block;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
#counter {
top: 0;
right: 0
}
<div class='container'>
<label class="label is-capitalized">Description One </label>
<div class="field">
<div class="control is-expanded relative inline-block">
<input type="text" class='input' id="inp" placeholder="description one" />
<div id='counter' class='absolute'>
</div>
</div>
<div>
</div>
You can add additional styling if needed.
Try this
<div id="app1">
<br>
<div class="holder">
<label>
{{keyword.length}}
</label>
<input type="text" class="input size19" placeholder="description one" v-model="keyword">
</div>
CSS
holder {
position: relative;
}
.holder label {
position: absolute;
left: 200px;
top: 26px;
width: 20px;
height: 20px;
}
.holder input {
padding: 2px 2px 2px 25px;
}
Check the below fiddle for the solution
https://jsfiddle.net/zr968xy2/4/
I have been working on creating a popup with some different functionality. It is being used as a pop for users to subscribe to my website. I have added in a form connected my DB, which is all working great. I am now trying to add some custom features.
I am trying to add some overlay (faded) to my background of the popup so my homepage is faded out in the background of the popup
I need to add in a input type field (if possible) to close my form. * I have added in a image with a X, if there is not input type option I will use this to exit the form
Here is my code:
JavaScript:
<script>
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') {
document.getElementById('ac-wrapper').style.display = "none";
}
else if(localStorage.getItem("popupWasShown") == null) {
localStorage.setItem("popupWasShown",1);
document.getElementById('ac-wrapper').removeAttribute('style');
}
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 0);
}
function hideNow(e) {
if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
}
HTML:
<div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
<div id="popup">
<img alt="#" class="close-image" src="Assets/images/Deep_Close.png" />
<form name="Mail_list" action="save.php" method="post">
<br/>
<h4>Subscription</h4>
<br/>
<div class="form-group">
<label for="first_name">First Name: </label>
<input type="text" name="first_name" id="first_name" size="25" placeholder="First Name" autofocus required />
</div>
<div class="form-group">
<label for="last_name">Last Name: </label>
<input type="text" name="last_name" id="last_name" size="25" placeholder="Last Name" required />
</div>
<div class="form-group">
<label for="email">User Email: </label>
<input type="text" name="email" id="email" size="25" placeholder="Email" required />
</div>
<br/><br/>
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
</form>
CSS:
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1001;
}
#popup{
position:absolute;
display:hidden;
top:300px;
left:50%;
width:500px;
height:auto;
margin-left:-250px;
background-color:white;
z-index:6;
padding:20px;
border:solid 5px #333333;
border-radius:5px;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-15px;
right: -15px;
height: 20px;
}
As you can see I have added in the 'Overlay' CSS already, I just am not sure how to implement this in my popup to make the functionality work.
Also, the 'close-image' CSS will be used to close the form if their is no input type available to close the form (which I haven't been able to find), How do I implement this is my JavaScript?
For the overlay, give it position: fixed and place it outside of your other elements. You want it to be 'fixed' to the body, so with 100% height and width it'll cover the full page, effectively.
Just build your overlay/ form to look how you want - with all elements visible, then handle the show/ hide afterwards in your JavaScript.
To close the form, just have a click handler to hide both the form and the overlay when the given element is clicked. See a brief example:
var closeImage = document.getElementById('close-image');
var overlay = document.getElementById('overlay-back');
var formWrapper = document.getElementById('ac-form-wrapper');
// Hide the elements & do other stuff you may want..
function hide() {
overlay.style.display = "none";
formWrapper.style.display = "none";
}
// Call this whenever you want to show stuff.
// In this case, it would go inside the setTimeout
// function also.
function show() {
overlay.style.display = "block";
formWrapper.style.display = "block";
}
// Click handler for the image element.
closeImage.addEventListener("click", function() {
hide();
}, false);
It may be better to change the close-image element to be an ID instead, it's easier to target in native JavaScript, and the element probably doesn't need to be a class anyway.
I have but zero appitude to code anything. I am trying to build a small simple website and am almost done but have one little issue left to solve. I know this has been asked here before and I have tried to figure out how to make there circumstance work for me but can't. I have even tried the easy jquery fade in and fade out methods but can't get the id's correct or something?
All I want to do is fade in and out between the divs when the links are clicked.
I have tried and reviewed many examples here and still can't get it to connect at all.
Any help would be appreciated.
I have three links on a page that loads three different divs into a container. Everything is on the same page and everything works great other than I can't get them to fade in and out when the links are clicked. I have no problem loading the jquery library and doing it that way if that works best.
<head>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
</script>
<style type="text/css">
#container1, #container2, #container3 {
display:none;
overflow:hidden;
background-color: #E6E1E6
</style>
</head>
<body style="background-color: #E6E1E6">
<div id="container" style="position: fixed; width: 100%; z-index: 200;" >
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
</div>
</body>
</html>
You mentioned using jQuery, this is a basic idea. Comments in code should explain what is happening. I altered the HTML a little by adding some classes and some data attributes.
$("#linkDiv").on("click", "a", function(evt) { //use event bubbling so there is only one click hanlder
evt.preventDefault(); //stop click event
var anchor = $(this); //get the link that was clicked on
if (anchor.hasClass("active")) { //If has the class, it is already is active, nothing to do
return;
}
anchor.siblings().removeClass("active"); //find previous selectd link and unselect it
anchor.addClass("active"); //add class to current link and select it
var showTab = anchor.data("tab"); //read the data attribute data-tab to get item to show
var visibleContainer = $(".tab-container:visible");
var complete = function() { //function to call when fade out is complete
$(showTab).stop().fadeIn(300);
};
if (visibleContainer.length) { //make sure w have something to hide
$(visibleContainer).stop().fadeOut(100, complete); //if we do, fade out the element, when finished, call complete
} else {
complete(); //if first time, just show it
}
}).find("a").eq(0).trigger("click"); //click on first link to load tab content.
.tab-container {
display: none;
overflow: hidden;
}
#container1 {
background-color: #E60000;
}
#container2 {
background-color: #00E100;
}
#container3 {
background-color: #0000E6;
}
a.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" style="position: fixed; width: 100%; z-index: 200;">
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
Here's a simple example using jQuery - Not sure what you're end product is meant to look like but this should set you on the right foot.
Here's a sample snippet of the JS:
$(document).ready(function(){ //Wait for DOM to finish loading
$('.navigation a').click(function(){ //When the a link is clicked
var id = $(this).attr('href'); //grab its href as the ID of the target object
$('.hidden-content').fadeOut(500); //Fade out all the divs that are showing
$(id).fadeIn(500); //Fade in the target div
return false; //Prevent the default action of the a link
});
});
Check out the jsFiddle here: http://jsfiddle.net/pavkr/7vc2jj5j/
Here is some quick script to do the fading, but i would suggest you to use jQuery for same since it will be cross-browser.
Just update your script block, and it will work, no need to change any other code
Vanilla JS
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
fadeIn(document.getElementById('container'+idInfo), 20);
}
function fadeIn(element, duration) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
//alert("here");
}, duration);
}
</script>
Using jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv(idInfo) {
$('#divLinks div').hide(200, function(){
//Show the clicked
$('#container'+idInf).fadeIn(200);
});
}
</script>
What I have?
A html-table which has a lot of rows.
A hidden (display=none) div which contains some input controls (lets call it "div-to-display"). Only one div-to-display in whole page.
What I'm trying to do?
When the mouse hovers on the first cell in each row - show the "div-to-display" below it (like tool tip).
But, I can't create a separated div-to-display div for each table row. All cells must use the same "div-to-display" element.
While showing the div-to-display div, it should be float. What it means is that it won't change the location of the other cells in the table. It will be above them.
Do you have idea how to do this with jquery`javascript`?
DEMO: http://jsfiddle.net/sBtxq/
JQuery
// Add our div to every td
$('td').append('<div class="div-to-display">yay</div>');
CSS
.div-to-display {
display: none;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid red;
background-color: #eee;
z-index: 10;
}
td {
position: relative;
}
td:hover > .div-to-display {
display: block
}
Updated (non-JS) version
CSS
td {
position: relative;
}
td:after {
display: none;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid red;
background-color: #eee;
z-index: 10;
content: "yay";
}
td:hover:after {
display: block
}
DEMO: http://jsfiddle.net/sBtxq/20/
use jquery offset() method to get position of hover of those elements and apply that as a left and top for the div. (Make sure to position the div as ABSOLUTE).
If you want a simple solution try using tooltip plugins. There will be loads available out there. One such is jquery UI tooltip plugin.
Style it on your own
#div-to-display{
position:absolute;
top:50px;
left:50px;
width:300px;
height:200px;
z-index:99999;
display:none;
}
add this class="toHover" to each or table rows whom on hover you want to show div
add this function
window.onload = function(){
$('.toHover').each(function() {
$(this).mouseenter(function(){ $('#div-to-display').show(); });
$(this).mouseleave(function() { $('#div-to-display').hide();});
});
}
Html For i.e.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
</table>
<div id="divInput" style="display:none;position:absolute;">
<input type="type" name="name" value=" " />
</div>
jQuery:
<script type="text/javascript">
var s = 'ss';
$('table tr').each(function () {
var this_tr = $(this);
this_tr.find('td:first').mouseenter(function () {
var this_td = $(this);
$('#divInput').css({ top: this_td.offset().top + this_td.height(), left: this_td.offset().left });
$('#divInput').show();
}).mouseout(function () {
var this_td = $(this);
$('#divInput').css({ top: this_td.offset().top + this_td.height(), left: this_td.offset().left });
$('#divInput').hide();
})
})
</script>
This should have been pretty straightforward using the DOM but I seem to be getting undefined errors.
Basically, I'm trying to say, when a user clicks a button hide one form and replace it with another. Hiding it should have been as simple as setting style.display : none; but it seems style is constantly undefined.
Here's the script
function hideTextForm()
{
var textForm = document.getElementsByClassName("my-text-form");
//var formContent = textForm.contentDocument;
console.log(formContent);
//textForm.visibility='false';
//textForm.visible(false);
//textForm.style.visibility = "hidden";
//formContent.display = "none";
formContent.style.display = "none";
console.log(textForm);
/*this returns:
<div class="my-list-form">
<form id="list-form" class="list-form" name="list-form">
<label>list form here</label>
</form>
</div>*/
console.log("Text form should be hidden");
}
This is only half the different attempts. My gut tells me that the way I'm calling the element is wrong with getElementsByClassName. I'm either calling the wrong element or trying to display it wrong.
Heres the HTML:
<div class="analysis">
<div class="analysis-columns">
<div class="analysis-static">
<table align = "left" border ="1" id="static-column-table" class="my-columns" >
<tr id="tr-static">
<th id="table-comment-head">
<b>Comments</b>
</th>
</tr>
<tr><td><button class="column-button" value="Page Description">Page Description</button></td></tr>
<tr><td><button class="column-button" value="Keywords">Keywords</button></td></tr>
<tr><td><button class="column-button" value="Files">Files</button></td></tr>
<tr><td><button class="column-button" value="Internal Links">Internal Links</button></td></tr>
<tr><td><button class="column-button" value="External Links">External Links</button></td> </tr>
</table>
</div>
<div class="analysis-custom">
<table border ="1" align="right" id="custom-column-table" class="my-columns" >
<tr id="tr-custom">
<th>Custom</th>
</tr>
<tr><td><button class="column-button" value="Page Description">Page Description</button></td></tr>
<tr><td><button class="column-button" value="Keywords">Keywords</button></td></tr>
<tr><td><button value="Add">Add New Field+</button></td></tr>
</table>
</div>
</div>
<div class="analysis-form">
<input type="radio" name="type-of-row" value="List" title="List" onclick="hideTextForm();"/> List</br>
<input type="radio" name="type-of-row" value="Text" title="Text" onclick="hideListForm();"/> Text</br>
<select>
<optgroup label="Type of Row">
<option>List</option>
<option>TextBox</option>
</optgroup>
</select>
</br>
<div class="my-list-form">
<form name ="list-form" class = "list-form" id="list-form">
<label>list form here</label>
</form>
</div>
<div class="my-text-form">
<form name="text-form" class = "text-form" id="text-form">
<label>text form here</label>
<!--<textarea cols="30" rows="2">Enter the name of your new Row here...</textarea>
<button value="Page Description" onclick="addRow()">New TextField</button>-->
</form>
</div>
</div>
</div>
And finally relevant CSS:
div.analysis
{
padding: 1px;
width: 100%;
border: .2em solid #ffcc00;
}
div.analysis-columns
{
/* border-style: solid;*/
border: .2em solid #900;
float: left;
width:55%;
/*border: 5;
border-color: #8a2be2;*/
display: inline;
}
div.analysis-static
{
margin: auto;
padding: 1px;
width:47%;
float:left;
border: .2em solid #0000ff;
/*border: 3;
border-color: #0000FF;*/
/*border-collapse:collapse;*/
font-family: Century Gothic, sans-serif;
}
div.analysis-custom
{
margin: auto;
border: .2em dotted #FFFFDD;
padding: 1px;
float: right;
width:47%;
}
div.analysis-form
{
margin: auto;
width:43%;
border: .2em ridge #b22222;
float: right;
}
div.my-list-form
{
display: inherit;
}
div.my-text-form
{
display: inherit;
}
If anyone is having trouble visualizing it or running it, basically I have a small panel called analysis. Within this panel, is 2 tables (left) and one changing form on the right.
my-list-form and my-text-form should be the only css to worry about.
I'm convinced I'm calling the element wrong so please take a look at document.getElem("my-text-form") and what it returns.
getElmentsbyclassname returns an array
check below link
https://developer.mozilla.org/en/DOM/document.getElementsByClassName
Have a look at the method you're calling -- getElementsByClassName. Look at what it returns. It is not a DOM element -- it is something called a NodeList. This is an object a bit like an array (though technically not an array) that contains all the elements with that class name. A NodeList doesn't have a style property, so you can't set it.
You need to get the first element in the NodeList (using the array notation [0]) and set the style property of that.
var textForm = document.getElementsByClassName("my-text-form")[0];
textForm.style.display = 'none';
formContent[0].style.display = "none".
If you are working with getElementsByClassName, you're always returned an array, so you want to use the first element of that array