I'm trying to make a JS price calculator and I'm stuck on one part, where I do not find a solution for a couple of hours. I will appreciate your help.
This is what I'm trying to do:
Displaying part, where there are 3 product types (<input type="radio"). Clicking to one of them should appear with own LightBox and also hiding other parts of the <input> form.
<div>
<h2>Basic Price</h2>
<div id="singleSpotLB" style="display:block;">
<?php include "/Templates/singleSpotLightBox.php"?>
</div>
<div id="multiSpotLB" style="display: none;">
<?php include "/Templates/multiSpotLightBox.php"?>
</div>
<div id="photoSilkLB" style="display: none;">
<?php include "/Templates/photoSilk.php"?>
</div>
<label for="type">Transfer Type</label><br>
<div>
<label for="sSpot">
<input type="radio" name="type" id="sSpot" onclick="invisibleColors()"> SingleSpot
</label>
<label for="mSpot">
<input type="radio" name="type"id="mSpot" onclick="invisibleColors()"> MultiSpot
</label>
<label for="pSilk">
<input type="radio" name="type"id="pSilk" onclick="invisibleColors()"> PhotoSilk
</label>
</div>
</div>
Javascript part for hiding (by style.display = "none";) the divs which do not belong to the chosen product:
function invisibleColors() {
let sSpot = document.getElementsByName("type");
let singleSpotLB = document.getElementById("singleSpotLB");
let multiSpotLB = document.getElementById("multiSpotLB");
let photoSilkLB = document.getElementById("photoSilkLB");
if (sSpot[0].checked) {
document.getElementById('colorDiv').style.display = "none";
singleSpotLB.style.display = "block";
multiSpotLB.style.display = "none";
photoSilkLB.style.display = "none";
} else if (sSpot[1].checked) {
document.getElementById('colorDiv').style.display = "block";
singleSpotLB.style.display = "none";
multiSpotLB.style.display = "block";
photoSilkLB.style.display = "none";
} else if (sSpot[2].checked) {
document.getElementById('colorDiv').style.display = "none";
singleSpotLB.style.display = "none";
multiSpotLB.style.display = "none";
photoSilkLB.style.display = "block";
}
}
**The problem:
When I'm testing the code it works well at the beginning but after a couple of clicks the label texts change properly, but the images just don't load.
Thanks, and I hope someone could help.
P.S Content of the PHP files from where the LighBox is loaded:
<label for="type">SingleSpot</label>
<div class="masonry-thumbs grid-container grid-3 clearfix">
<a class="grid-item" href="http://ttransferhall.de/images/portfolio/4/1.jpg" data-lightbox="image">
<div class="grid-inner">
<img src="http://ttransferhall.de/images/portfolio/4/1.jpg" alt="Single Image">
<div class="bg-overlay">
<div class="bg-overlay-content dark">
<i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
</a>
</div>
Here is a video of the result
#Alexandar Dimov Your code in Html is owner than the code in javascript. add your style in other file CSS and try again.
I found that there is an ajax process loaded from the template, which conflicts with the plain JS script. Thank you all for your opinions and help.
Related
I have two embed code/sections on a single page. What I am wanting is to make the Social Media logo clickable and then the embed for the corresponding embedded social media will be visible and the other is hidden. I was able to do this with one section but the code was all html. The problem is that Twitter embed has a section in the middle of the embed and it is messing up the output when I do it the old way.
This is the old code that I have mostly working (minus the embed not show correctly)
<body onload="updateForm(media)">
<label>
<input type="image" src="\CST-WebPage\media files\social media\youtube.png" alt="YouTube" style="width:100px" name="media" value="ty" onclick="updateForm(this)">
</label>
<label>
<input type="image" src="\CST-WebPage\media files\social media\twitter.png" alt="Twitter" style="width:100px" name="media" value="tw" onclick="updateForm(this)">
</label>
<div id="SM"></div>
</body>
function updateForm(control) {
if (control.value == "tw") {
document.getElementById("SM").innerHTML = twitter;
}
else {
document.getElementById("SM").innerHTML = youtube;
}
}
var youtube = '<div>\
<iframe src="https://www.youtube.com/embed/videoseries?list=PLDNv6o8iIDrw6ETcAy8s3xHgn2UdjpZ-e" width="600" height="400"allowfullscreen scrollable="yes"></iframe>\
<p id="success"></p>\
</div>';
var twitter = '<div>\
<a class="twitter-timeline" data-lang="en" data-width="600" data-height="400" data-theme="dark" href="https://twitter.com/clanshocktac?ref_src=twsrc%5Etfw">Tweets by clanshocktac</a>\
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>\
</div>';
Instead of having <div id='SM'></div> I figure it would be easier to make it <div id='youtube'> and <div id='twitter'>
Thank in advance for any help or insight you can provide.
You can set or remove the hidden attribute to elements with id twitter or youtube.
function updateForm(control) {
if (control.value == "tw") {
document.getElementById("twitter").removeAttribute('hidden');
document.getElementById("youtube").setAttribute('hidden', true);
} else {
document.getElementById("youtube").removeAttribute('hidden');
document.getElementById("twitter").setAttribute('hidden', true);
}
}
Im trying to make a toggle menu, however when i insert a <button> tag instead of a <p> tag the whole menu doesn't work, but it works with <p>.
How can i solve this problem?
Snippet:
function toggleMenu() {
var menuBox = document.getElementById('menu-box');
if (menuBox.style.display == "block") { // if is menuBox displayed, hide it
menuBox.style.display = "none";
} else { // if is menuBox hidden, display it
menuBox.style.display = "block";
}
}
<div id="infobox2">
<form action="index.html" method="get">
<p onclick="toggleMenu()" id="menu"> Skapa konto </p>
<ul id="menu-box" style="display: block">
<li>Start</li>
<li>Animal</li>
<li>Pictures</li>
</ul>
</form>
</div>
The default behaviour of a button tag is to send the form. This is why the page is being reloaded. If you don't want the button to send the form, you have to specify a type attribute.
<button type="button">Toggle</button>
Further reading:
https://www.w3schools.com/tags/att_button_type.asp
Especially this part:
Tip: Always specify the type attribute for the element.
Different browsers may use different default types for the
element.
You have to prevent the default behaviour for the button . Just add return false in your function.
function toggleMenu() {
var menuBox = document.getElementById('menu-box');
if (menuBox.style.display == "block") { // if is menuBox displayed, hide it
menuBox.style.display = "none";
} else { // if is menuBox hidden, display it
menuBox.style.display = "block";
}
return false;
}
<div id="infobox2">
<form action="index.html" method="get">
<p onclick="toggleMenu()" id="menu"> Skapa konto </p>
<button onclick="toggleMenu()" id="menu1">Skapa konto1</button>
<ul id="menu-box" style="display: block">
<li>Start</li>
<li>Animal</li>
<li>Pictures</li>
</ul>
</form>
</div>
I'm trying to use Angular to write a page where I have a form divided into multiple sections, and only one form section is displayed at a time. When clicking the button at the bottom of the section, the current section is hidden and the next form section in the HTML is displayed -- so on and so forth for many sections.
Here's my code so far:
HTML:
<form>
<div class="form-section">
<!-- input fields -->
<a class="next">NEXT</a>
</div>
<div class="form-section">
<!-- input fields -->
<a class="next">NEXT</a>
</div>
<!-- more "form-section" divs -->
</form>
CSS:
/* hide all form sections */
.form-section {
display:none;
}
/* display first form section */
.form-section:first-child {
display:initial;
}
.next {
cursor:pointer;
}
I'm pretty new at Angular so I'm pretty lost as to how to achieve this.
So to get you started (besides the google link I originally put) this is a super basic example showing one way on how to show and hide divs using angular. If I was making an actual app, I would probably use routes for this part, but for sake of simplicity I didn't. This could get you started in the right direction.
https://jsfiddle.net/t76e8gt9/
HTML
<div ng-app="MultiStep" ng-controller="FormController">
<h1>
Step {{currentStep}}
</h1>
<div ng-if="currentStep == 1">
<label>Name</label>
<input type="text" placeholder="Name"/>
</div>
<div ng-if="currentStep == 2">
<label>Email</label>
<input type="email" placeholder="Email"/>
</div>
<div ng-if="currentStep == 3">
<label>Gender</label><br>
<labe>Male</labe><input type="radio" value="male" name="gender" /><br>
<label>Female</label><input type="radio" value="female" name="gender" />
</div>
<button ng-click="nextStep()">Next</button>
</div>
JS
var app = angular.module('MultiStep', []);
app.controller('FormController', function($scope) {
$scope.currentStep = 1;
$scope.nextStep = function() {
$scope.currentStep++;
}
});
Please, still look at some of the multistep tutorial
You need to call function on the anchor tag using angular ngClick. In that just change the $scope variable value true or false.
<div ng-controller="MainCtrl">
<form>
<div class="form-section" ng-if="firstForm">
<!-- input fields -->
<a class="next" ng-click="showForm('First')">NEXT</a>
</div>
<div class="form-section" ng-if="firstForm">
<!-- input fields -->
<a class="next" ng-click="showForm('Second')">NEXT</a>
</div>
<!-- more "form-section" divs -->
</form>
</div>
app.controller('MainCtrl', function($scope) {
$scope.firstForm = true;
$scope.secondForm = false;
$scope.showForm = function(param) {
switch(param){
case 'First':
$scope.firstForm = true;
$scope.secondForm = false;
break;
case 'Second':
$scope.firstForm = fale;
$scope.secondForm = true;
break;
default:
$scope.firstForm = true;
$scope.secondForm = false;
break;
}
}
});
Depends on what you mean by hide, you can either use ng-if or ng-show/ng-hide to selectively display stuff on screen.
ng-if will not render the DOM whereas ng-show/ng-hide will use CSS to set it's display as none.
You can have something like:
<form>
<div class="form-section" ng-if="condition == 'div1'">
<!-- input fields -->
<!--Some way to change value of condition-->
<a class="next" ng-click="showDiv('div2')">NEXT</a>
</div>
<div class="form-section" ng-if="condition == 'div2'">
<!-- input fields -->
<a class="next" ng-click="showDiv('div3')">NEXT</a>
</div>
<!-- more "form-section" divs -->
And have a JS function to change value of condition.
$scope.showDiv = function(divName) {
$scope.condition= divName;
}
I've code few line of jQuery for Hide/Show many elements on single click and it's working. But problem is; i've many more image class items, so my script going to long, my question is how to simplify or make short my script, i mean any alternatives or any new idea? please suggest.
HTML:
<div id="choose-color">
<span>
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- many many images -->
</span>
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
JS: live demo >
$("button.red").click(function(){
$(".images-red").show();
$(".images-blue, .images-pink").hide();
});
$("button.blue").click(function(){
$(".images-red, .images-pink").hide();
$(".images-blue").show();
});
$("button.pink").click(function(){
$(".images-red, .images-blue").hide();
$(".images-pink").show();
});
Please suggest for short and simple code of my script. Thanks.
You can do it by adding just a common class to those buttons,
var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
iTags.hide().eq($(this).index("button.button")).show();
});
The concept behind the code is to bind click event for the buttons by using the common class. Now inside the event handler, hide all the i elements which has been cached already and show the one which has the same index as clicked button.
DEMO
For more details : .eq() and .index(selector)
And if your elements order are not same, both the i and button's. Then you can use the dataset feature of javascript to over come that issue.
var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
iTags.hide().filter(".images-" + this.dataset.class).show()
});
For implementing this you have to add data attribute to your buttons like,
<button data-class="red" class="button red">Red</button>
DEMO
This works
$("#choose-color button").click(function(){
var _class = $(this).attr('class');
$("#choose-color i").hide();
$(".images-"+_class).show();
});
https://jsfiddle.net/455k1hhh/5/
I know this might not be the prettiest solution, but it should do the job.
$("button").click(function(){
var classname = $(this).attr('class');
$("#choose-color span i").hide();
$(".images-"+classname).show();
});
You're making future extensibility a little difficult this way due to relying on class names but this would solve your immediate need:
<div id="myImages">
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- Many many image -->
</div>
<div id="myButtons">
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
$("#myButtons button").click(function(){
var color = $(this).attr("class");
var imageClass = ".images-"+color;
$('#myImages').children("i").each(function () {
$(this).hide();
});
$(imageClass).show();
});
Here's a JSFiddle
Edit: Note how I wrapped the buttons and images in parent divs to allow you to isolate just the buttons/images you want to work with.
You can do the following using data-* attributes, because when you have more elements of the same color, using index of the button won't work. And simply using the whole class attribute won't work if you have to add more classes to the button in future.
$("button").click(function() {
var color = $(this).data('color');
var targets = $('.images-' + color);
targets.show();
$("span i").not(targets).hide();
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<br/>
<div id="choose-color">
<span>
<i class="images-red">Red Image</i>
<i class="images-blue hidden">Blue Image</i>
<i class="images-pink hidden">Pink Image</i>
<!-- Many many image -->
</span>
<br/>
<br/>
<button data-color="red">Red</button>
<button data-color="blue">Blue</button>
<button data-color="pink">Pink</button>
</div>
It would make sense to have all images share a single class (.image for example). Then you just use a shared class for the button and the image; in this example I used the color name. Now, when any button is clicked, you can grab the class name of the image you want to show.
Give this a try:
$("button").click(function(){
$(".image").hide();
var className = $(this).attr("class");
$("." + className).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/>
<div id="choose-color">
<span>
<i class="image red" style="">Red Image</i>
<i class="image blue" style="display: none;">Blue Image</i>
<i class="image pink" style="display: none;">Pink Image</i>
<!-- Many many image -->
</span>
<br/><br/>
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
You may try this:
<div id="choose-color">
<span>
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- Many image -->
</span>
<br/><br/>
<button class="colour red" onclick="myFunction(this)">Red</button>
<button class="colour blue" onclick="myFunction(this)">Blue</button>
<button class="colour pink" onclick="myFunction(this)">Pink</button>
</div>
JS: see here
$(".colour").click(function(){
var colors = ["red", "blue", "pink"];
for (i = 0; i < colors.length; i++) {
if($(this).hasClass(colors[i])){
$(".images-"+colors[i]).show();
}else{
$(".images-"+colors[i]).hide();
}
}
});
currently I have a method of showing / hiding a div based on a form checkbox field as per below. What I do want however is to not use a form to show hide rather just call the show / hide function based on a simple on a link . I hope this makes sense what I am attempting to do. Any help /advice would be really valued!
<!-- Show hide-->
<script language="JavaScript">
function showhidefield()
{
if (document.goform.areas.checked)
{
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
else
{
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
}
</script>
<form name="goform" id="goform" action="xxxx" method="post" enctype="multipart/form-data">
<label><input name="areas" type="checkbox" onclick="showhidefield()" value="1"> Yes </label>
</form>
<div id="areaone" style="display:none;">
Area One
</div><!-- / Hideable area -->
<div id="areatwo" style="display:block;">
Area two
</div>
Changing the above so that rather than using a form checkbox to showhide, have a toggle effect based on event e.g.
Show Areaone / Hide Areatwo
Show Areatwo / Hide Areaone
General Approach
The general approach is to use the onclick property of link tags. You can set this directly on the tag like this:
<a onclick="showhidefield()" href="javascript:void(0);">Show/Hide</a>
Example 1
Here's a full working example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="areaone" style="display:none;">
Area one
</div>
<div id="areatwo" style="display:block;">
Area two
</div>
<script type='text/javascript'>
function showOneHideTwo(){
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
function showTwoHideOne(){
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
</script>
<a onclick="showOneHideTwo()" href="javascript:void(0);">Show one / Hide two</a>
<a onclick="showTwoHideOne()" href="javascript:void(0);">Show two / Hide one</a>
</body>
</html>
Example 2 (Better!)
However, for a variety of reasons, it is preferable, if slightly less intuitive, to use javascript to set the onclick property instead of adding it to the html directly. Here is a better full working example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="areaone" style="display:none;">
Area one
</div>
<div id="areatwo" style="display:block;">
Area two
</div>
<a id='showOneLink' href=''>Show one / Hide two</a>
<a id='showTwoLink' href=''>Show two / Hide one</a>
<script type='text/javascript'> <!-- This allows for better placement of the script as well... -->
//Same functions as before
function showOneHideTwo(){
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
function showTwoHideOne(){
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
//this time, we set the onclick here
//this is better form- it keeps the content (html) and the scripting (javascript) seperate
document.getElementById("showOneLink").onclick = function(){showOneHideTwo(); return false;}
document.getElementById("showTwoLink").onclick = function(){showTwoHideOne(); return false;}
</script>
</body>
</html>