I am not a coder or developer and have hired a developer from Fiver to make some modifications to an html5 website template that I'm modifying as a game for my daughter so only she will see it. The developer is really struggling with a javascript image popup and I'm looking for help
What I want to happen
on button click Enter code box pops up. If user enters 1234 image max1.jpg pops up
on button click Enter code box pops up. If user enters 2345 image max2.jpg pops up
Below is the developers code which looks a bit clunky and does not work well - the images are cut off. Any help would be appreciated and do the images sizes need to be specified somewhere?
Button Code
<a class="btn btn-primary js-scroll-trigger" href="#about" id="but" onclick="myFunction()">CODE</a>
In Body
<img id="image1" src="assets/img/max1.jpg" width="100%" style="visibility: hidden;">
<img id="image2" src="assets/img/max2.jpg" width="100%" style="visibility: hidden;">
<img id="image3" src="assets/img/max3.jpg" width="100%" style="visibility: hidden;">
<script>
var modal = document.getElementById("myModal");
var m1 = document.getElementById("m1");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
function myFunction() {
var code = prompt("Enter Code:", "");
if (code == "1234")
{
// m1.style.width = "70%";
document.getElementById("image2").style.display = "none";
document.getElementById("image3").style.display = "none";
document.getElementById("image1").style.display = "block";
document.getElementById("image1").style.visibility = "visible";
// document.getElementById("image1").style.width = "100%";
// document.getElementById("image1").style.height = "100%";
modal.style.display = "block";
}
else if (code == "2345") {
// m1.style.width = "70%";
document.getElementById("image1").style.display = "none";
document.getElementById("image3").style.display = "none";
document.getElementById("image2").style.display = "block";
document.getElementById("image2").style.visibility = "visible";
// document.getElementById("image2").style.width = "100%";
// document.getElementById("image2").style.height = "100%";
modal.style.display = "block";
}
else if (code == "3456") {
// m1.style.width = "70%";
document.getElementById("image1").style.display = "none";
document.getElementById("image2").style.display = "none";
document.getElementById("image3").style.display = "block";
document.getElementById("image3").style.visibility = "visible";
// document.getElementById("image2").style.width = "100%";
// document.getElementById("image2").style.height = "100%";
modal.style.display = "block";
}
else if (code == "4567") {
window.open("Instructions.pdf", '_blank');
}
else if (code == "5678") {
window.open("Instructions.pdf", '_blank');
}
}
</script>
Related
i have a Drop Down it contains 5 items in it,if i select first one few text fields will display like so on..
at first based on drop down text fields will working fine but when after clicking on search and navigating to back page text fields not displaying according to the drop down value.
Please help me with even after navigating to back it should display correctly.
and i have tried this code.
Jsf Code For Drop down:
<h:outputText value="Report Type " />
<h:selectOneMenu value="#{customReportBean.reportType}" id="reportTypeField"
onchange="reportType()">
<f:selectItem itemValue="alerts" itemLabel="Alerts" />
<f:selectItem itemValue="violations" itemLabel="Violations" />
<f:selectItem itemValue="events" itemLabel="Events" />
<f:selectItem itemValue="threats" itemLabel="Threats" />
<f:selectItem itemValue="callhistory" itemLabel="Call History" />
<f:selectItem itemValue="msghistory" itemLabel="Message History" />
</h:selectOneMenu>
Java script:
<script>
function reportType() {
if(type == 'alerts') {
document.getElementById('custom-report-form:alertsFilterPanel').style.display = "block";
document.getElementById('custom-report-form:violationsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:eventsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:ucThreatsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:callHistoryFilterPanel').style.display = "none";
document.getElementById('custom-report-form:msgHistoryFilterPanel').style.display = "none";
} else if(type == 'violations') {
document.getElementById('custom-report-form:alertsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:violationsFilterPanel').style.display = "block";
document.getElementById('custom-report-form:eventsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:ucThreatsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:callHistoryFilterPanel').style.display = "none";
document.getElementById('custom-report-form:msgHistoryFilterPanel').style.display = "none";
} else if(type == 'events') {
document.getElementById('custom-report-form:alertsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:violationsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:eventsFilterPanel').style.display = "block";
document.getElementById('custom-report-form:ucThreatsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:callHistoryFilterPanel').style.display = "none";
document.getElementById('custom-report-form:msgHistoryFilterPanel').style.display = "none";
} else if(type == 'threats') {
document.getElementById('custom-report-form:alertsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:violationsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:eventsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:ucThreatsFilterPanel').style.display = "block";
document.getElementById('custom-report-form:callHistoryFilterPanel').style.display = "none";
document.getElementById('custom-report-form:msgHistoryFilterPanel').style.display = "none";
} else if(type == 'callhistory') {
document.getElementById('custom-report-form:alertsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:violationsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:eventsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:ucThreatsFilterPanel').style.display = "none";
document.getElementById('custom-report-form:callHistoryFilterPanel').style.display = "none";
document.getElementById('custom-report-form:msgHistoryFilterPanel').style.display = "block";
}
}
</script>
Search Button code:
<h:commandButton id="reports_search_filter_search" value="Search" action="#{customReportBean.showSearch}"/>
after Clicking on search will navigate result page then if i navigate to this main page text fields not displaying according to drop down value.
Thanks.
I'm actually creating a forum from scratch. This script create a popup when we click on remove, i make 2 button remove but only one work.
Code:
Html Code ->
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styletest.css">
</head>
<body>
remove
remove2
<div id="popup" class="popup">
<div class="popup_content">
<span class="close">×</span>
<p>Are you sure you wan't delete this categorie ?</p>
<button class="button_popup close_button">No</button>
<button class="button_popup close_button" onclick='document.getElementById("remove").submit()'>Yes</button>
</div>
</div>
</body>
</html>
JS:
var modal = document.getElementById("popup");
var btn = document.getElementById("remove_openpopup");
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close_button")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
span2.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
How can i make: when i click on remove it open my popup but remove2 open it too ?
Can you help me please ? :)
Just for a sample :)
In HTML, I changed id="remove_openpopup" to class="remove_openpopup"
remove
remove2
In <script>, I would do as below.
<script>
var modal = document.getElementById("popup");
var btns = Array.prototype.slice.call(document.querySelectorAll(".remove_openpopup"));
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close_button")[0];
btns.forEach(function(btn) {
btn.onclick = function() {
modal.style.display = "block";
}
});
span.onclick = function() {
modal.style.display = "none";
}
span2.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<aside class="side_article_content"><p id="defaultText">Chakras are blah blah blah</p>
<p id="baseChakraInfo" style="display:none;">Base Chakra blah blah blah</p>
<p id="sacralChakraInfo" style="display:none;">Sacral Chakra blah blah blah</p>
<p id="solarPlexusChakraInfo" style="display:none;">Solar Plexus Chakra blah blah blah</p>
<p id="heartChakraInfo" style="display:none;">Heart Chakra blah blah blah</p>
<p id="throatChakraInfo" style="display:none;">Throat Chakra blah blah blah</p>
<p id="browChakraInfo" style="display:none;">Brow Chakra blah blah blah</p>
<p id="crownChakraInfo" style="display:none;">Crown Chakra blah blah blah</p></aside>
</div>
<div class="main">
<ul>
<li>Base or Root</li>
<li><a id="sacral" href="javascript:void(0)" onClick="showSacral(this);" class="_sacral" >Sacral</a></li>
<li><a id="solarPlexus" href="javascript:void(0)" onClick="showSolarPlexus(this);" class="_solar">Solar Plexus</a></li>
<li><a id="heart" href="javascript:void(0)" onClick="showHeart(this);" class="_heart" >Heart</a></li>
<li><a id="throat" href="javascript:void(0)" onClick="showThroat(this);" class="_throat">Throat</a></li>
<li><a id="brow" href="javascript:void(0)" onClick="showBrow(this);" class="_brow">Brow</a></li>
<li><a id="crownChakra" href="javascript:void(0)" onClick="showCrownChakra(this);" class="chakra_crown" title="Crown Chakra">Crown Chakra - Pineal gland, regulates biological cycles, including sleep.</a></li>
</ul>
</div>
I had some javascript below which was really messy, and it worked almost to perfection. It worked if I click on each a tag from top to bottom, the text in each p tag displays and once the next one is clicked, the previous disappears - which is what I wanted. However, if I click each a tag from bottom to top, the text of each p tag is always present and it does not disappear. It also does not work if you click on each a tag at random. What I want is to be able to click on each a tag and only the corresponding p tag to appear. I did not want to post my JS code here cuz I am new to it and its really long and messy. If you need I can post it later
<script>
function showBase(text) {
if(text.id == "base") {
document.getElementById("baseChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("baseChakraInfo").style.display = "none";
}
}
function showSacralChakra(text) {
if(text.id == "sacralChakra") {
document.getElementById("sacralChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("sacralChakraInfo").style.display = "none";
}
}
function showSolarPlexus(text) {
if(text.id == "solarPlexus") {
document.getElementById("solarPlexusChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("solarPlexusChakraInfo").style.display = "none";
}
}
function showHeart(text) {
if(text.id == "heart") {
document.getElementById("heartChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("heartChakraInfo").style.display = "none";
}
}
function showThroat(text) {
if(text.id == "throat") {
document.getElementById("throatChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("throatChakraInfo").style.display = "none";
}
}
function showBrow(text) {
if(text.id == "brow") {
document.getElementById("browChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
}
else {
document.getElementById("browChakraInfo").style.display = "none";
}
}
function showCrown(text) {
if(text.id == "crown") {
document.getElementById("crownChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("crownChakraInfo").style.display = "none";
}
}
</script>
No worries. Everyone starts somewhere. I created a JS Fiddle that has the behavior you are looking for and greatly simplifies your JS. https://jsfiddle.net/
I hope this helps. Let me know if you have any questions
So I have this code that I will put in jsfiddle link bellow. Im making hide/show divs by clicking on links. Only problem is when I want to view a div (second, third or fourth div), lets say the third one, it doesnt show up on top but benith the first and second invisible divs. Anybody got any idea how to make this right and put any selected div on the top of the page?
<body>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="menu">
<li>Felge</li>
<li>Gume</li>
<li>Branici</li>
<li>Farovi</li>
</ul>
</div>
<div class="col-md-3">
<div class="div" id="content1">
<p>BBS</p>
<p>ENKEI</p>
<p>KONIG</p>
</div>
<div class="div" id="content2">
<p>Michelin</p>
<p>Hankook</p>
<p>Sava</p>
</div>
<div class="div" id="content3">
<p>AMG</p>
<p>Brabus</p>
<p>Original</p>
</div>
<div class="div" id="content4">
<p>Angel Eyes</p>
<p>Devil Eyes</p>
<p>Original</p>
</div>
</div>
`<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
function show(id) {
if (id == 'link1') {
document.getElementById("content1").style.visibility = 'visible';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'hidden';
}
else if (id == 'link2') {
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'visible';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'hidden';
}
else if (id == 'link3') {
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'visible';
document.getElementById("content4").style.visibility = 'hidden';
}
else if (id == 'link4') {
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'visible';
}
}
function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
a.onclick = show;
}
window.onload = init;
`
https://jsfiddle.net/4qq6xnfr/
visibility: hidden hides element but leaves the space occupied by it. You need to hide element with display: none:
document.getElementById("content1").style.display = 'block';
document.getElementById("content2").style.display = 'none';
document.getElementById("content3").style.display = 'none';
document.getElementById("content4").style.display = 'none';
Also, you can optimize you code a little. Maybe like this:
function show(id) {
var number = id.replace('link', '');
var blocks = document.querySelectorAll("[id^=content");
for (var i = 0; i < blocks.length; i++) {
blocks[i].style.display = 'none';
}
document.querySelector('#content' + number).style.display = 'block';
}
Demo: https://jsfiddle.net/4qq6xnfr/3/
Use:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
The most efficient way to achieve this is as follows:
Change all the links from javascript:show('link1'), javascript:show('link2'), etc. to just #content1, #content2, etc.
You can now remove all of the javascript code.
Create a new CSS stylesheet (or use the <style> tags), and in the stylesheet, write the following -
.div {
display:none;
}
.div:target {
display:block;
}
That's it! I hope this helped you.
the code so far
Now if you press a button, no matter which one, a div and a percentage will be shown. I've got that going for me, but if one div is toggled, and another one is pressed, the 66% div should be toggled and so on if two divs are shown and the third is toggled the 100% div should show up.
Basicly if you click a button, a div and a percentage div is revealed if you click aonther the percentage bar goes up. How do I do this? if two divs are toggled and if you press the button two diffrent divs are shown?
JS
function showhide()
{
var div = document.getElementById("lol");
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
if (div.style.display !== "none")
{
div.style.display = "none";
id3.style.display = "none";
}
else {
div.style.display = "block";
}
}
function showhide2()
{
var div2 = document.getElementById("lol2");
if (div2.style.display !== "none") {
div2.style.display = "none";
}
else {
div2.style.display = "block";
}
}
function showhide3()
{
var div3 = document.getElementById("lol3");
if (div3.style.display !== "none") {
div3.style.display = "none";
}
else {
div3.style.display = "block";
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div id="lol"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "5"><p>100%</p></div>
<!-- End your code here -->
</body>
</html>
Not entirely sure what you mean but I think it might be something like this?
http://liveweave.com/PcZ7vL
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div id="lol1"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "7"><p>100%</p></div>
</body>
</html>
JavaScript:
var one = 0
var two = 0
var three = 0
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
var id7 = document.getElementById("7");
var div1 = document.getElementById("lol1");
var div2 = document.getElementById("lol2");
var div3 = document.getElementById("lol3");
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "none";
function showhide()
{
if (div1.style.display !== "none")
{
div1.style.display = "none";
one = 0
}
else {
div1.style.display = "block";
one = 1
}
showper();
}
function showhide2()
{
if (div2.style.display !== "none") {
div2.style.display = "none";
two = 0
}
else {
div2.style.display = "block";
two = 1
}
showper()
}
function showhide3()
{
if (div3.style.display !== "none") {
div3.style.display = "none";
three = 0
}
else {
div3.style.display = "block";
three = 1
}
showper()
}
function showper()
{
var sum = one + two + three
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
if (sum == 1) {
id3.style.display = "block";
} else if (sum == 2) {
id5.style.display = "block";
} else if (sum == 3) {
id7.style.display = "block";
}
else {
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
}
}
EDIT:
A slightly neater way to do it would be this: http://liveweave.com/YAHn55.
Also, you should take a look at jQuery, makes things like this much simpler.
EDIT:
see example