My aim in this simple html file is to load a block of div that affiliates to someone who would like to log in. My div "loginProper" is that div I'm talking about. I've put an onClick function on my other divs which contains the name of the people who can login. My problem is nothing happens when I click those divs.
Here is the code, can you please check what is missing?
<!doctype html>
<html>
<head>
<title>Project Design Exhibit</title>
<script type="text/javascript">
function showLogin(loginType){
if (loginType=="a"){
document.getElementById("loginProper").innerHTML = "Administrator Login";
}else if (loginType="s"){
document.getElementById("loginProper").innerHTML = "Student Login";
}else if (loginType="g"){
document.getElementById("loginProper").innerHTML = "Special Guest Login";
}
}
</script>
</head>
<body>
<div style="margin:0 auto; width:1000px; border:1px solid black;">
<div style="width:1000px; height:50px; border:1px solid black;">
<div style="display:inline; border:1px solid black;" onClick="showLogin(a)">Admin</div>
<div style="display:inline; border:1px solid black;" onClick="showLogin(s)">Student</div>
<div style="display:inline; border:1px solid black;" onClick="showLogin(g)">Special Guest</div>
</div>
<div id="loginProper" style="margin:0 auto; width:500px; height:700px;"></div>
</div>
</body>
</html>
Try this:
you're missing quotes when passing 'a', 's', and 'g' to your
function
your javascript function is not using == when comparing
I also made it so your cursor turns into a 'hand' when hovering over your div ;-)
<head>
<title>Project Design Exhibit</title>
<script type="text/javascript">
function showLogin(loginType)
{
alert(loginType);
if (loginType == "a")
{
document.getElementById("loginProper").innerHTML = "Administrator Login";
} else if (loginType == "s")
{
document.getElementById("loginProper").innerHTML = "Student Login";
} else if (loginType == "g")
{
document.getElementById("loginProper").innerHTML = "Special Guest Login";
}
}
</script>
</head>
<body>
<div style="margin:0 auto; width:1000px; border:1px solid black;">
<div style="width:1000px; height:50px; border:1px solid black;">
<div style="display:inline; border:1px solid black;cursor: pointer" onclick="showLogin('a')">Admin</div>
<div style="display:inline; border:1px solid black;cursor: pointer" onclick="showLogin('s')">Student</div>
<div style="display:inline; border:1px solid black;cursor: pointer" onclick="showLogin('g')">Special Guest</div>
</div>
<div id="loginProper" style="margin:0 auto; width:500px; height:700px;"></div>
</div>
</body>
</html>
It'd be
onClick="showLogin('a')";
and
loginType=="g"
not
loginType="g"
Working Fiddle
That's because showLogin function is expecting a literal/string variable...
function showLogin(loginType){
if (loginType=="a") //<----THIS IS A STRING
Yet, you are passing in an object that doesn't exist...
onClick="showLogin(a)"
a is an object that can't be resolved. You should change the onclick handler to...
onClick="showLogin('a')"
Related
I am trying to make a div update in app script, but since the code is written in the html it can only be run once. Is there any way to refresh the div without page refresh?
var sheet=SpreadsheetApp.openByUrl(url).getSheetByName("Data1"),sheet2=SpreadsheetApp.openByUrl(url).getSheetByName("Data2");
function doGet(e){
var tmp=HtmlService.createTemplateFromFile("main");
tmp.list1=sheet.getRange(1,1,sheet.getRange("A1").getDataRegion().getLastRow(),1).getValues(),tmp.list2=sheet2.getRange(1,1,sheet2.getRange("A1").getDataRegion().getLastRow(),1).getValues();;
return tmp.evaluate().setTitle("WhatsUp");
}
.old{
background-color:lightgreen;
border-radius:10px;
}
.msg{
background-color:black;
color:white;
border-radius:10px;
padding:2px;
transition:1s ease;
margin:5px;
position:relative;
left:-100%;
}
<div class="old">
<h3>You</h3>
<? for(var i=0;i<list1.length;i++){ ?>
<div class="msg"><?= list1[i]; ?></div>
<? }?>
</div>
<br>
<div class="old2">
<h3>Other User</h3>
<? for(var j=0;j<list2.length;j++){ ?>
<div class="msg"><?= list2[j]; ?></div>
<? }?>
There are 2 web pages both save and read the data from an excel document, therefore I would like the div which displayes the messages to be updated periodically (add or remove the black divs) without page refresh.
Whatsup? 😁
Full code below
//code.gs
var url="https://docs.google.com/spreadsheets/d/mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm";
var sheet=SpreadsheetApp.openByUrl(url).getSheetByName("Data1"),sheet2=SpreadsheetApp.openByUrl(url).getSheetByName("Data2");
function doGet(e){
var tmp=HtmlService.createTemplateFromFile("main");
tmp.list1=sheet.getRange(1,1,sheet.getRange("A1").getDataRegion().getLastRow(),1).getValues(),tmp.list2=sheet2.getRange(1,1,sheet2.getRange("A1").getDataRegion().getLastRow(),1).getValues();;
return tmp.evaluate().setTitle("WhatsUp");
}
function send(msg){
sheet.appendRow([msg]);
}
function clearYouLast(){sheet.deleteRow(sheet.getDataRange().getValues().length);}
function clearUserLast(){sheet2.deleteRow(sheet2.getDataRange().getValues().length);}
function clearYou(){sheet.clearContents();}
function clearUser(){sheet2.clearContents();}
function clearAll(){clearYou();clearUser();}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.old{
background-color:lightgreen;
border-radius:10px;
}
.up{
border-radius:50%;
background-color:lime;
position:fixed;
top:70%;
right:10%;
height:100px;
width:100px;
cursor:pointer;
}
.msg{
background-color:black;
color:white;
border-radius:10px;
padding:2px;
transition:1s ease;
margin:5px;
position:relative;
left:-100%;
}
</style>
</head>
<body onload="load();">
<h1>WhatsUP</h1>
<form onsubmit="return send()">
<input type="text" placeholder="Message here" id="msg">
<button class="send" type="submit">Send</button>
</form>
<div class="old">
<h3>You</h3>
<!--This code needs to be reran-->
<? for(var i=0;i<list1.length;i++){ ?>
<div class="msg"><?= list1[i]; ?></div>
<? }?>
<!--As you may see when running the above it creates multiple div elements
with the class of (msg)-->
<!--What I mean by rerunning is that if the list1 contains less items the number of divs with class (msg) should reduce AND IF the number of items in list1 increases the number of divs with class (msg) should increase-->
<!--End-->
</div>
<br>
<div class="old2">
<h3>Other User</h3>
<? for(var j=0;j<list2.length;j++){ ?>
<div class="msg"><?= list2[j]; ?></div>
<? }?>
</div>
<button onclick="google.script.run.clearYouLast()">Delete</button>
<button onclick="google.script.run.clearYou()">Delete Your Messages</button>
<button onclick="google.script.run.clearAll()">Delete All Messages</button>
<!--<button onclick="google.script.run.clearUser()" >Delete Your Messages</button>-->
<img onclick="upload()" class="up" alt="Upload file" src="https://previews.123rf.com/images/sarahdesign/sarahdesign1509/sarahdesign150901050/44517597-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%B2%84%ED%8A%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%95%84%EC%9D%B4%EC%BD%98.jpg">
<script>
function send(){
google.script.run.send(document.getElementById("msg").value);
document.getElementById("msg").value="";
return false
}
function upload(){
if(confirm("Upload file and get Data Url send the url!")==true){
window.open("https://dopiaza.org/tools/datauri","","width=200");}
}
function load(){
var el=document.getElementsByClassName("msg");
for(let i=0;i<el.length;i++){el[i].style.left='0%';}
}
</script>
</body>
</html>
I have to make a set of buttons that appear and disappear.
How it is supposed to work:
I click on link 1 (link 2 is invisible at this point).
link 2 should then appear.
the problem here is there can be multiple elements of the same type with the same classes and I can't figure out how to distinguish between just showing the "link2"
that corresponds to the clicked "link1" without triggering the other "link2".
there is some code showing the progress I have made.
thank you in advance!
<style>
.hideaction{
visibility: hidden;
}
.showaction{
visibility: visible;
}
</style>
<script>
$(document).ready(function(){
$(".elem_action_showing").click(function(){
$(".elem_action_hiding").removeClass("hideaction").addClass("showaction");
});
</script>
</head>
<body>
<div class="elem_card card_set_click" style=" border: 1px solid black">
<div class="elem_hidden">
<p class="hideaction elem_action_hiding">%link2%</p>
</div>
<div class="elem_showing ">
<p class="elem_action_showing set_click">%link1%</p>
</div>
</div>
<div class="elem_card card_set_click" style=" border: 1px solid black">
<div class="elem_hidden">
<p class="hideaction elem_action_hiding">%link2%</p>
</div>
<div class="elem_showing ">
<p class="elem_action_showing set_click">%link1%</p>
</div>
</div>
</body>
The solution should work irregardless of how many ".elem_card" and ".hideaction" elements are there.
The issue is because you're selecting all .elem_action_hiding elements. To fix this use DOM traversal to find only the one which is related to the .elem_action_showing which was clicked. Try this:
$(".elem_action_showing").click(function() {
$(this).closest('.elem_showing').prev().find(".elem_action_hiding").toggleClass("hideaction showaction");
});
.hideaction {
visibility: hidden;
}
.showaction {
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elem_card card_set_click" style=" border: 1px solid black">
<div class="elem_hidden">
<p class="hideaction elem_action_hiding">%link2%</p>
</div>
<div class="elem_showing">
<p class="elem_action_showing set_click">%link1%</p>
</div>
</div>
<div class="elem_card card_set_click" style=" border: 1px solid black">
<div class="elem_hidden">
<p class="hideaction elem_action_hiding">%link2%</p>
</div>
<div class="elem_showing ">
<p class="elem_action_showing set_click">%link1%</p>
</div>
</div>
I'm working on a random wiki viewer, and its been a slog, but i'm finally at the point where i think that at least the UI's functionality is done. The only problem is that after i fade some text on the "random" button, and replace it with an iframe which is then removed when the button is clicked again, the text doesn't seem to fade back in. Any ideas?
https://codepen.io/EpicTriffid/pen/WOYrzg
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").animate({opacity:0});
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$("#cross1").fadeOut('fast');
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
};
};
});
You are emptying the HTML of .button1 when you do:
$(".button1").html(....
In order to get it back, you need to add:
$(".button1").html('<div class="b1text">Random</div>');
after
$('.randframe').remove();
Your button is missing the text Random
When you call:
$(".button1").html(...
you are replacing the inside html of the object with the iframe.
When you remove .randframe you need then re-add the text for your button.
Instead of:
$('.randframe').remove()
you can call this which will accomplish both:
$('.button1').html('random');
Efficiency tip: You did a good job of saving references to your jquery variables but and cross, why not use them?
but.html(...
cross.click(function (){...
This line effectively replaces whatever you have in the button 1 div
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
Your cross1.click function does not re-populate the button1 div, I would recommend
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$('.button1').html('Random');
$("#cross1").fadeOut('fast');
$(".b1text").animate({opacity:"1"});
});
Here you go with the solution https://codepen.io/Shiladitya/pen/WOLNpw
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").fadeOut();
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
but.removeAttr('style');
cross.fadeOut('fast');
$('.randframe').remove();
but.html('<div class="b1text">Random</div>');
});
};
};
});
//Search Button
var but2 = "closed"
$(".button2").click(function () {
var but = $(".button2");
var btext = $(".b2text");
var cross = $("#cross2");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
btext.fadeOut();
cross.delay(2000).fadeIn()
but2 = "open"
$("#cross2").click(function() {
$('.button2').removeAttr('style');
$('.b2text').fadeIn(1500);
$("#cross2").fadeOut('fast');
})
})
});
#spacer {
margin:0;
padding:0;
height:50px;
}
body {
min-height: 100%;
min-width: 1024px;
width:100%;
margin-top:4em;
padding:0;
background-color: teal;
}
h1 {
color:white;
font-family:"cabin";
text-align:center;
}
#cross1 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: left;
display:none;
}
#cross2 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: right;
display:none;
}
#randframe {
display:none;
}
.button1 {
position:absolute;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
.button2 {
position:absolute;
right:0;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Wiki Viewer</h1>
</div>
</div>
</div>
<div id="spacer"></div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="button1">
<div class="b1text">Random</div>
</div>
<div class="button2">
<div class="b2text">Search</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="text-center">
<i id="cross1" class="glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="col-xs-12">
<div class="text-center">
<i id="cross2" class="glyphicon glyphicon-remove"></i>
</div>
</div>
You need to keep the content inside the ".button1" to reuse after the iframe is removed.
Try using callbacks. So change your #cross1 fadout to
$("#cross1").fadeOut('fast',function(){
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
Also, this may not be affecting your code, but you're missing some semi colons after some variable declarations.
Not all methods have callbacks in JQuery, but when available, they are useful because basically it means that your code is not fired until the other thing is completely done. This happens a lot with fading and opacity.
I have to get the boxes to do the following:
Along the left hand side of the page have a number of boxes with different font names in them. When you click on those boxes have the font of the text in the middle box change. Do similar sets of boxes with changes associated for the right hand side and bottom of the page.
This is the coding I have so far:
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#textbook {
padding: 5px;
background-color:red;
}
</style>
<script language="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
function boxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100;100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100;100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
</script>
</head>
<body onload="boxes()">
<div id="box_group1">
<div id="box1">
First box
</div>
<div id="box2">
Second box
</div>
<div id="box3">
Third box
</div>
</div>
<div id="box_group2">
<div id="box4">
Fourth box
</div>
<div id="box5">
Fifth box
</div>
<div id="box6">
Sixth box
</div>
</div>
<div id="box_group3">
<div id="box7">
Seventh box
</div>
<div id="box8">
Eighth box
</div>
<div id="box9">
Ninth box
</div>
</div>
<div id="box_group4">
<div id="box10">
Tenth box
</div>
<div id="box11">
Eleven box
</div>
<div id="box12">
Twelve box
</div>
</div>
<div id="textbook">Textbook</div>
</body>
</html>
I've done the task with jQuery which is more easier to maintain.Used functions to get desired data and manipulated them to create boxes dynamically.
HTML :
<div id="topDiv"></div>
<div id="leftDiv"></div>
<div id="rightDiv"></div>
<div id="bottomDiv"></div>
CSS :
#topDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#leftDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#rightDiv div{
float : right;
padding:5px;
width:50px;
height:50px;
}
#bottomDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#topDiv{
padding-left : 33%;
}
#leftDiv{
padding-top : 30%;
}
#bottomDiv{
padding-top : 68%;
padding-left : 33%;
}
#rightDiv{
margin-top : -30%;
}
.changedFont{
font-size : 20px;
}
jQuery :
$(document).ready(function(){
//First declare an array of colors that will also indicate the number of boxes.
var colorArray = new Array("red", "green", "blue");
//Execute a loop to create the boxes styling them properly
for(var i = 1; i <= colorArray.length ; i++){
$("#topDiv").append("<div id=Box" + i + "></div>");
$("#Box"+ i).css("background-color", colorArray[i-1]);
$("#Box"+i).text("Box" + i);
$("#leftDiv").append("<div id=Box" + i+1 + "></div>");
$("#Box"+ i+1).css("background-color", colorArray[i-1]);
$("#Box"+ i+1).text("Box" + i+1);
$("#rightDiv").append("<div id=Box" + i+2 + "></div>");
$("#Box"+ i+2).css("background-color", colorArray[i-1]);
$("#Box"+ i+2).text("Box" + i+2);
$("#bottomDiv").append("<div id=Box" + i+3 + "></div>");
$("#Box"+ i+3).css("background-color", colorArray[i-1]);
$("#Box"+i+3).text("Box" + i+3);
}
//Define the handler for onclick events
$("#topDiv").children().click(function(){
$("#topDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#topDiv").children().eq(1).addClass("changedFont");
});
$("#leftDiv").children().click(function(){
$("#leftDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#leftDiv").children().eq(1).addClass("changedFont");
});
$("#rightDiv").children().click(function(){
$("#rightDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#rightDiv").children().eq(1).addClass("changedFont");
});
$("#bottomDiv").children().click(function(){
$("#bottomDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#bottomDiv").children().eq(1).addClass("changedFont");
});
});
jsFiddle Demo
I have two div tags in my html code as shown below. I want to change their float property depending on page UI culture ( Ui culture is en-US or fa-IR) ... I think I can use java script to do so. but I don't know how can I get the UI Culture through Javascript. I want a code in if condition to determine the Ui culture ... thx in advance for your help...
<div id="zone1" style="float: left;"><img alt="" src="~/IconArrow.png" /> </div>
<div id="zone2" style="float: left;"><img alt="" src="~/IconHome.png" /></div>
<script type="text/javascript">
if(/* ui culture is fa-IR*/)
{
document.getElementById("zone1").style.float = "right";
document.getElementById("zone2").style.float = "right";
}
</script>
Hello try this and let me know. if this solves your problem please don't forget to select correct answer
<script type="text/javascript">
function testfunc(g)
{
//alert("asd"+g);
if(g == "fa-IR")
{
alert("as");
obj = document.getElementById("zone1");
obj2 =document.getElementById("zone2");
obj.setAttribute("style", obj.getAttribute("style") + "; float:right; ");
obj2.setAttribute("style", obj2.getAttribute("style") + "; float:right; ");
}
}
</script>
=================================================================================
<div style="display:block; width:100%; height:100px; border:1px solid #333">
<div id="zone1" style=" float: left; display:block; width:20px; height:20px; background:#93F;"> </div>
<div id="zone2" style=" float: left; display:block; width:20px; height:20px; background:#F66;"> </div>
</div>
<input type="button" name="" onclick = "testfunc('fa-IR')" value="test" />