I have an div container that contains three div child element in which just first child div element is displayed on page load.
I just need to display subsequent child div element on button click. It means when i click button first time then it should display div containing text "Series Type2" and again when i click button then next child element "Series Type3" should be displayed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/div/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>On Demand | Vod Info</title>
</head>
<style>
body {
font-family: Arial;
font-weight: bold;
color: #FFFFFF;
}
#recording-container {
width:100%;
margin:0 auto;
background-color:#8E898F;
width:40%;
margin-top:10%;
height:100px;
}
#type {color: #fff; width: 100%}
#save {color: #fff; width: 100%}
.placeholder{
height:20px;
}
.spacer{
height:20px;
}
.margin-5{
margin-left:5%
}
.highlight {
/*-moz-box-shadow: 0 0 5px 4px red;*/
-webkit-box-shadow: 0 0 0px 0px #ad2eb2;
box-shadow: 0 0 3px 3px #ad2eb2;
border-radius: 3px;
}
.title{
background-color: #ad2eb2;
text-align: center;
}
.series {
height: 36px;
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.seriesType{
float: left;
height: 36px;
line-height: 36px;
margin: 0 5px;
padding: 0 10px;
text-align: center;
width:100%
}
</style>
<body>
<div id="recording-container">
<div id="title" class="title">Record</div>
<div class="placeholder"></div>
<div class="series highlight">
<div class="seriesType" id="series_0">Series Type1</div>
<div class="seriesType" id="series_1">Series Type2</div>
<div class="seriesType" id="series_2">Series Type3</div>
</div>
</div>
<input type="button" onclick="switchdiv()" name="Switch" value="Switch">
<script>
function switchdiv()
{
// Need to write code here
}
</script>
</body>
</html>
I see you are not using jQuery so this answer wont either.
There are a few ways to do this, here's a fiddle: http://jsfiddle.net/SP67E/
I would recommend using a list instead and not having each one overlay the other. Each list item would be hidden until it was needed to be shown.
But that is your choice, so the fiddle accommodates to that.
Fiddle Code:
var seriesId = 0;
var seriesCount = 3;
function switchdiv() {
// Stops last series from being hidden
if (seriesId >= (seriesCount -1)) return;
// Hides each element in turn
document.getElementById("series_" + seriesId).style.display="none"
seriesId++;
}
Edit: If you want to decrement here is the updated fiddle: http://jsfiddle.net/SP67E/1/
Maybe not the most elegant but this should work.
<script>
var nextSeries = 2;
function switchdiv()
{
$("#series_" + nextSeries).show();
nextSeries += 1;
}
</script>
Related
Why my javascript not work? When I change the innterHtml of an element, it didn't work?
here is my code:
html
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>403 没有权限！</title>
<style type="text/css" media="screen">
body {
user-select: none;
background-color: #eeeeee;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container { margin: 50px auto 40px auto; width: 600px; text-align: center; }
a { color: #4183c4; text-decoration: none; }
h1 { width: 800px; position:relative; left: -100px; letter-spacing: -1px; line-height: 60px; font-size: 160px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
p,m { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }
#suggestions {
margin-top: 35px;
color: #ccc;
}
#suggestions a {
color: #666666;
font-weight: 200;
font-size: 14px;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="container">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1><strong>403</strong></h1>
<p><strong>Request denied</strong></p>
<p><strong>请求被拒绝</strong></p>
<p>
If the file you are accessing is yours, please check your login information.
</p>
<m>You are now login as: </m><f id="ll"></f>
</div>
<script src="get.js"></script>
</body></html>
js
var datac
var user
function get(){
user = localStorage.getItem(datac)
if(user != null){
document.getElementById("ll").innerHtml = user
console.log(user)
}
else {
document.getElementById('ll').innerHtml = 'Please Login.'
}
}
function checklogin(){
$.getJSON('https://text-edit-api-default-rtdb.asia-southeast1.firebasedatabase.app/.json', function ( data ){
datac = data['data']['password']['localstorge']['code']
get()
})}
checklogin()
There is no any errors in console!
but if I get document.getElementById('ll').innterHtml I saw the change, but there is no changes in html!
This page is the 404 page of github page, I changed some codes.
I change innter to inner
Image
I use vscode
And chrome
It is weird you don't have errors in console. Be carfeully about the uppercase letters, the correct attribute is innerHTML instead of innerHtml
You have a syntax problem. Put innerHTML instead of innterHtml
Ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
I’ currently working on a website, where a user should be able to write and insert new songs with belonging chords into a database.
To sum things up, and get to the point pretty quick, here is my problem:
I have a div with the id “#textarea”, and the attribute contenteditable=“true”. On each enter/linebreak, I would like to create a new div with the class “.chords” and the attribute contenteditable=“false”. This ".chords" div should be placed right before the new line, like the image shows here:
The red color is the #textarea div, and the blue color the .chords divs
So my question is: how do I do this?
I’ve posted the code I've tried in the end of this post, but as you see if you run it, the .chords divs are positioned below the new line, so I’m now a bit stuck.. If any of you guys have an idea on how to do this, please let me hear from you!
$(function(e) {
$('#textarea').keydown(function(e) {
var i = 0;
// Check if the returnkey is being pressed
if (e.keyCode === 13) {
$("#textarea div:last-of-type").after("<div class=\"chords\" id=\"" + (i + 1) + "\" contenteditable=\"false\"></div>");
i = i + 1;
}
});
})
#textarea {
border: 1px solid black;
line-height: 50px;
font-size: 20px;
}
.chords {
height: 30px;
border: 1px solid black;
position: relative;
}
#textarea div:not(.chords) {
margin-top: 20px;
min-height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textarea" contenteditable="true">
<div class="chords" id="1" contenteditable="false"></div>
<div></div>
<!--End of #textarea-->
</div>
Similar Something like that
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#textarea {
border: 1px solid red;
line-height: 50px;
font-size: 20px;
min-height: 40px;
}
.chords {
height: 30px;
border: 1px solid black;
position: relative;
margin-top:5px;
}
#textarea div:not(.chords) {
margin-top: 20px;
min-height: 40px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(e) {
$('#textarea').keydown(function(e) {
var i = 0;
// Check if the returnkey is being pressed
if (e.keyCode === 13) {
$(this).after('<div class="chords" id="'+ (i + 1) +'" contenteditable="false"></div><div>'+$(this).html()+'</div>');
$(this).html("");
i = i + 1;
}
});
})
</script>
<div id="textarea" contenteditable="true">
</div>
<div class="chords" id="1" contenteditable="false"></div>
<div></div>
<!--End of #textarea-->
</body>
</html>
Check it out
https://jsfiddle.net/emarufhasan/66L2ohnp/?utm_source=website&utm_medium=embed&utm_campaign=66L2ohnp
I am trying to get a div to fadeIn() from white to the normal dark gray color. However, my attempt is failing and it is killing my other scripts on the page. What am I doing wrong?
function(){
$('.dark-gray').fadeTo(1200, 1);
}
.dark-gray {
height: 500px;
width: 100%;
background-color: #202020;
}
#dark-gray-container {
text-align: center;
padding: 150px 0;
}
#dark-gray-container-title {
color: #FFF;
font-size: 1.7em;
font-weight: bold;
}
#dark-gray-container-description {
color: #FFF;
font-size: 1.3em;
padding-top: 40px;
}
#dark-gray-container-button {
padding-top: 80px;
}
#dark-gray-container-button-span {
color: #FFF;
padding: 20px 25px;
border: 2px solid #FFF;
cursor: pointer;
transition: ease-in-out .3s;
}
#dark-gray-container-button-span:hover {
border: 2px solid #45a5ba;
transition: ease-in-out .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dark-gray">
<div id="dark-gray-container">
<div id="dark-gray-container-title">GET IN TOUCH WITH US</div>
<div id="dark-gray-container-description">Looking for advice or would you like to speak to a member of the OD team? Please hit the button below.</div>
<div id="dark-gray-container-button"><span id="dark-gray-container-button-span">CONTACT US</span></div>
</div>
</div>
UPDATE:
I want the function to start when the div is scrolled to. What about this?
$(function() {
var oTop = $('.green').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
fadeinGray();
}
});
});
function fadeinGray(){
$('.dark-gray').fadeTo(1200, 1);
}
check out a working example HERE
There were couple of issues. First your dark-gray class was always dark gray. You had to change the CSS opacity to something lower than 1 for the beginning. Then you were making it complicated to calculate the top offset.
this is how you can use fadeIn when mouseenter this is the code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
div.mystyle{
width:500px;
height: 500px;
border:2px solid black;
}
div.check{
width: 100%;
height: 100%;
background-color: gray;
display: none;
}
</style>
</head>
<body>
<div class="mystyle">
<div class="check">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".mystyle").mouseenter(function(){
$(".check").fadeIn(1000);
});
});
</script>
</body>
</html>
if you want call back function(when mouse leave) use this code also.
$(document).ready(function(){
$(".mystyle").mouseleave(function(){
$(".check").fadeIn(1000);
});
});
Okay, I change the appearance of links using JavaScript. When I change the content of a hard-coded link, it sticks in that the changed color and underlining remains when the cursor is not hovering above it. However, when the content of a DIV has been changed using JavaScript, the style changes do not stick.
Here is the HTML code:
<!doctype html>
<html>
<head>
<title>Bla bla</title>
<meta charset="UTF-8">
<link href="style/kim.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/Kim.js"></script>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="nav">
<div class="topNav">
<ul>
<li onClick="changeNav('design')">Design</li>
<li onClick="changeNav('code')">Programming</li>
<li onClick="changeNav('science')">Science</li>
<li onClick="changeNav('Kim')">Kim</li>
</ul>
</div>
<div id="subNav">
<script>changeNav("design");</script>
</div>
</div>
<div class="content">
<p id="mainText">Test</p>
</div>
</div>
</div>
</body>
</html>
Here is the JS code:
var topNavNames = ["design", "code", "science", "Kim"];
var subNavCode = ["<ul><li onClick=\"loadPHP('design/websites.php', 'sub0')\">Websites</li><li onClick=\"loadPHP('design/graphics.php', 'sub1')\">Graphics</li><li onClick=\"loadPHP('design/flash.php', 'sub2')\">Flash</li></ul>",
"<ul><li onClick=\"loadPHP('code/interactive.php', 'sub0')\">Interactive applets</li><li onClick=\"loadPHP('code/statistics.php', 'sub1')\">Statistics</li><li onClick=\"loadPHP('code/wings.php', 'sub2')\">Wings</li><li onClick=\"loadPHP('code/3D.php', 'sub3')\">3D</li></ul>",
"<ul><li onClick=\"loadPHP('science/3D.php', 'sub0')\">3D</li><li onClick=\"loadPHP('science/ssd.php', 'sub1')\">Sexual Size Dimorphism</li><li onClick=\"loadPHP('science/shape.php', 'sub2')\">Wing shape</li><li onClick=\"loadPHP('science/phylogenetics.php', 'sub3')\"><i>Drosophila</i> phylogenetics</li><li onClick=\"loadPHP('science/communitygenetics.php', 'sub4')\">Community Genetics</li><li onClick=\"loadPHP('science/biodiversity.php', 'sub5')\">Biodiversity</li></ul>",
"<ul><li onClick=\"loadPHP('Kim.php', 'sub0')\">Who is Kim?</li><li onClick=\"loadPHP('animals/horses.php', 'sub1')\">Horses</li><li onClick=\"loadPHP('animals/birds.php', 'sub2')\">Birds</li><li onClick=\"loadPHP('private/outdoors.php', 'sub3')\">Outdoors</li><li onClick=\"loadPHP('contact.php', 'sub4')\">Contact</li></ul>"];
function changeNav(target) {
for (var i = 0; i<topNavNames.length; i++) {
if (target == topNavNames[i]) {
document.getElementById("subNav").innerHTML=subNavCode[i];
document.getElementById(topNavNames[i]).style.color="#F7EDAA";
document.getElementById(topNavNames[i]).style.borderBottom="thin solid #F7EDAA";
}
else {
document.getElementById(topNavNames[i]).style.color="#EEE";
document.getElementById(topNavNames[i]).style.borderBottom="thin solid #111";
}
}
}
function loadPHP(url, target) {
for (var i = 0; i<10; i++) {
if(document.getElementById(target)!=null) {
if (("sub"+i) == target) {
document.getElementById(target).style.color="#F7EDAA";
document.getElementById(target).style.borderBottom="thin solid #F7EDAA";
}
else {
document.getElementById(target).style.color="#EEE";
document.getElementById(target).style.borderBottom="thin solid #111";
}
}
}
}
if I subsequently remove the:
else {
document.getElementById(target).style.color="#EEE";
document.getElementById(target).style.borderBottom="thin solid #111";
}
from the loadPHP function, it changes the style, but does not reset it when the next link is clicked.
I observed this behavior in FireFox, Internet Exploder and Chrome.
Added: CSS code:
body {
background-color: #111111;
color: #DDD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.wrapper {
overflow: auto;
}
.banner {
float: left;
position: relative;
width: 100px;
}
.main {
position: relative;
width: 80%;
left: 25px;
font-size: 14px;
font-weight: normal;
}
a {
text-decoration: none;
color: #EEE;
}
a:hover {
border-bottom: thin solid #F7EDAA !important;
color: #F7EDAA !important;
}
.topNav {
height: 45px;
position: relative;
left: 100px;
font-size: large;
border: thin solid #111;
}
#subNav {
height: 45px;
position: relative;
left: 100px;
top: 2px;
border: thin solid #111;
}
.topNav li, #subNav li {
float: left;
margin: 10px 15px;
}
.topNav ul, #subNav ul {
list-style: none;
padding: 0px 0px;
margin: 0px 0px;
position: relative;
left: -100px;
}
.content {
position: relative;
left: 15px;
padding: 0px 0px;
margin: 0px 0px;
}
.content p {
padding: 5px 5px;
margin: 10px 15px;
left: -100px;
}
In my opinion you´re using the wrong technology to achieve your goal. What you need to do is to write your styles in a css stylesheet, and then add or remove classes to your elements using js if you want. (You can also do this through something called specificity, a little far ahead from the scope of your question)
Also think that if there is some bug in your script, or a third party script called in your page, JS may break and it won´t process your styling changes.
So, add the basic styling to your elements through css in the initial markup, so you will be sure that your elements will have always a basic styling, and then if you want use the equivalent to .addClass or removeClass jQuery methods.
In that way you will be always sure that your frontend will have always a safe styling, won´t break if js is not loaded, and separation of concerns will be properly implemented.
Regards.
I figured it out. The following code does not do the right thing:
function loadPHP(url, target) {
for (var i = 0; i<subNavNames.length; i++) {
if (target == subNavNames[i]){
document.getElementById(target).className="selected";
} else {
document.getElementById(target).className="notSelected";
}
}
While this code does produce the right result:
function loadPHP(url, target) {
for (var i = 0; i<subNavNames.length; i++) {
if (target == subNavNames[i]) {
document.getElementById(subNavNames[i]).className="selected";
} else {
document.getElementById(subNavNames[i]).className="notSelected";
}
}
The difference is that in the first example, and in the example of the original question, I use the variable passed on in the method (target), to find the element. In the second, I use the appropriate element from a array that I have added to the list. I am not sure WHY this behaves differently, but it does.
I am attempting to write some javascript that will create textareas and when you click on a textarea to begin typing it grows and centers in the window until you click off of it where it shrinks back down.
Easy enough, until I wanted to add the .animate() and suddenly I have some serious problems that I am pouring too much time into trying to figure out.
While running some quality assurance I discovered a number of bugs...
-If I drop focus on the textarea that is animating its growth while it is still animating then the .blur() function fails to call.
-If I shift focus to another textarea while the first is still animating
then both may remain large failing to call the .blur() function.
-Finally there is just some really strange activity with the centering feature. .scrollTo() and .animate() perform poorly together especially when there are many textareas or I am picking a box that in the midst of many.
Is there a way to disallow any interaction with the website while an animation plays out?
Any ideas on how to remedy any of these issues?
the javascript... boxy.js
Code:
function growthearea() {
$('textarea.textfield').blur(function(){
$(this).animate({ height: "51" }, 500); //shrink the current box when lose focus
//$(this).height(51);
});
$('textarea.textfield').focus(function(){
$("*").off("focus,blur,click"); //turn off focus,blur,click while animating
var wheretoY = $(this).offset().top-73;
window.scrollTo(17,wheretoY);
// turn back on focus,blur,click after animation completes
$(this).animate({ height: "409" }, 1000, function(){("*").on("focus,blur,click")});
//$(this).height(409);
});
}
function newboxbtn()
{
var btn=document.createElement("textarea");
btn.setAttribute('class','textfield');
var textlocale = document.getElementById('locale');
textlocale.appendChild(btn);
$('textarea.textfield').on('keyup change', function() {
$('p.display').text('You are typing: ' + $(this).val()); //live update from focused textarea
});
growthearea(); //recall function for any new boxes to be acknowledged
};
function jsinit()
{
$('textarea.textfield').on('keyup change', function() {
$('p.display').text('You are typing: ' + $(this).val()); //live update from focused textarea
});
growthearea(); //call function for initial group of boxes
}
the html... boxy.htm
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="sty.css" />
<script src="./jquery.js"></script>
<script src="./boxy.js"></script>
<script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "fast" );
});
jsinit();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<div class="grid">
<div class="col-left" id="left">
<div class="module" id="scrollingDiv">
<input type="button" value="add" onclick="newboxbtn()" />
<p class="display">you are typing </p>
</div>
</div> <!--div class="col-left"-->
<div class="col-midd">
<div class="module" id="locale">
<textarea class="textfield" placeholder="begin typing here..." ></textarea>
<textarea class="textfield" placeholder="begin typing here..."></textarea>
</div>
</div> <!--div class="col-midd"-->
</div> <!--div class="grid"-->
</body>
</html>
the css... sty.css
Code:
.textfield {
width: 97%;
height: 51;
resize: none;
outline: none;
border: none;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px 1px #0044FF;*/
}
.textfielded {
width: 97%;
resize: none;
outline: none;
border: none;
overflow: auto;
position: relative;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px #FFDD00;*/
}
/*#postcomp {
width: 500px;
}*/
* {
#include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or #extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-left {
width: 13%;
}
.col-midd {
width: 43%;
}
.col-rght {
width: 43%;
}
.module {
padding: $pad;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
body {
padding: 10px 50px 200px;
background: #001235;
}
h1 {
color: black;
font-size: 11px;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
}
p {
color: white;
}
To check if something is animated: { quite weird for sure! }
if($('*').is(':animated').length) return;