Thank you in advance for your help.
We have a row of buttons that reveal hidden content blocks, similar to a toggle. However, when someone clicks off the button, into empty space, the content block disappears. We want the content block to remain visible until only another button is clicked. I know this is probably an easy fix but I'm not a programmer. Here's the button code:
Sales & Use Tax Services
<script>
function gfSalesUseServ() {
var x = document.getElementById("gfSalesUseServ");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}</script>
I tried a few addEventListener options but couldn't dial it in.
Related
im actually new to scripting and i am planning to do my own blog site (with my own touch) but it seems i've stumbled upon a roadblock..
the thing is, i wanted a button that changes the text that shows up on screen, and i have successfully did that by using a code that i borrowed from w3schools lol..
here is the code that i used: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_text
it swapped the text by clicking on a button.. now the question is, would i be able to change the swapped text with another text just by clicking on the same button again? cuz that's what i am initially going for.
You have to use else if statement continuously
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Hello") {
x.innerHTML = "Swapped text!";
} else if (x.innerHTML === "Swapped text"){
x.innerHTML = "Some another text...";
} else if (x.innerHTML === "Some another text..."){
x.innerHTML = "Again some text";
}
}
Like this you have to continue, if you have multiple texts
I hope you understood and am a beginner in these.
Thank You
I'm using a web page which contains a form loaded with an external script using the command 'script src'.
I created a function to populate some fields from url parameters and also hide some of them.
Here is the code.
<script type="text/javascript">
<!-- Hide Form Field -->
function hideFormField(name) {
var list = document.getElementsByName(name);
for (i = 0; i < list.length; i++) {
list[i].style.display = 'none';
list[i].style.visible = 'false';
list[i].type = 'hidden';
}
}
<!-- Customize form -->
function CustomizeForm()
{
// Set Field Value
hideFormField('custom_11');
hideFormField('custom_12');
hideFormField('custom_13');
hideFormField('custom_14');
hideFormField('custom_15');
}
// call it
CustomizeForm();
</script>
The fields are populated but not hidden.
When I debug, the form fields appear to disappear briefly but then they reappear.
It looks like the form is being refreshed afterwards.
To hide fields, which specific command is best and should I use out of those three? I'm tried them separately but it didn't seem to solve my problem.
field.style.display = 'none';
field.style.visible = 'false';
field.type = 'hidden';
Where should I put the call to the function to hide fields?
Assuming I don't control where the code is being added exactly in my designer (only in which section: header, body or footer), is there another alternative that would work every time? For example, can I attach to an event (which one) that might get called after all the loading and refresh is done.
Can I somehow debug or trace what is happening and why the fields do reappear?
Thank you in advance!
it's visibility not visible, try:
list[i].style.visibility = "hidden";
I am trying to have a popup only display when I click the .add-to-cart button using jQuery/javascript.
Let's say my popup is "#popup", and the button which will trigger the popup is ".add-to-cart", how do I go about this? I am fairly new to javascript, but I've managed to change a div's color and background the moment a user scrolls 200px, I tried using the same method to make it change properties by clicking without any luck.
The idea here was to change the property of the popup from "display:none" to "display:block" to use that in my problem here.
Also, inside the popup there is a button which when clicked, closes that popup again, we'll call it ".continue"
Is this the right way to do it, or is there other ways to display/close this popup?
I would post my code but it's not gonna help much in solving this as I believe this is simple for the experts on here. But here is the javascript i used for my other function that I mentioned which changes properties based on scroll. I suspect I can modify this to be used in this instance as well?
var mybutton = document.getElementById("backBtn");
var mytext = document.getElementById("tilbakeP");
var myarrow = document.getElementById("arrow");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
mybutton.style.position = "fixed";
mybutton.style.top = "20px";
mybutton.style.backgroundColor = "rgba(0,0,0,0.4)";
mytext.style.color = "#fff";
myarrow.style.borderColor = "#fff";
} else {
mybutton.style.position = "absolute";
mybutton.style.top = "";
mybutton.style.backgroundColor = "#fff";
mytext.style.color = "#333";
myarrow.style.borderColor = "#333";
}
}
I figured it out, if anyone comes across this, this worked by settings the popup to "display:none" in css, and using this code to make it display, by pressing add-to-cart CTA:
$('.button.el-button.cta.normal-btn.add-to-basket').click(function(){
$('.installation-popup').show();
});
So I have a mobile webpage that needs to get some content from the web to be displayed in a modal. The modal itself is created via Javascript which is a div container which is set to display:none when closed.
<body>
Display this content:
<button onclick="displayModal()">display</button>
<script type="text/javascript">
var htmlContents = "<div>some pretty heavy content</div>";
var modal = //some code to create the modal div element.
modal.style.display = 'none';
function displayModal() {
modal.innerHTML = htmlContents;
modal.style.display = 'block';
}
</script>
</body>
Then the user clicks a button, then we populate the innerHTML of the div with some HTML and then switch the modal to display: block
The problem here is that the contents we're adding to innerHTML may be pretty heavy. Lots of images and css which may take some time to render (1 or 2 seconds on old devices). However, they start poping up into the view one by one. So the user may see images and divs out of place while things render.
Is there any way to switch the modal to visible ONLY after all the contents have been rendered offscreen.
P.S: This is written on pure javascript (no jquery or any other library since performance is a concern).
I think there are a couple of ways you could do this. I think if you move the modal.innerHTML = htmlContents out of the displayModal() function you could get the images and modal contents to load before the user clicks on it. So it would look like this:
<body>
Display this content:
<button onclick="displayModal()">display</button>
<script type="text/javascript">
var htmlContents = "<div>some pretty heavy content</div>";
var modal = //some code to create the modal div element.
modal.style.display = 'none';
modal.innerHTML = htmlContents;
function displayModal() {
modal.style.display = 'block';
}
</script>
</body>
I also found this jQuery library that may help, it seems like a lot of people are using it:
https://github.com/desandro/imagesloaded
I have 4 'headers' (they are a div tag with a link that opens up the hidden area of each header... this is to neatly organize everything for a mobile device while still having alot of content) Point is i'm getting at here... these headers are all the same sized collapsed, but NOT when they are expanded.
What I need to be able to do is to click a link and the header moves up, click another link and it would move down. So i have 1,2,3,4... I click 'up' on 2, and now 2 is where 1 was, and 1 is where two was.
Currently, I have header 1 at the top, then I have content that will be edited quite frequently, then I have the other 3 headers. I just want to add an 'up' link and a 'down' link that'll swap the entire div with the one above/below it
EDIT: Right now, I have
function toggle() {
var ele = document.getElementById("toggleText");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
for each of my headers (so 4 seperate javascript functions)
and in short this is what my page is like:
--Nav Links--
~~Header 1~~
content
~~Header 2~~
~~Header 3~~
~~Header 4~~
Theres a only a break tag seperating them while they are collapsed. I want to add a link to each header so when I click it, it will swap positions with the one above/below it.
Does this help explain it any better?
And i'd prefer to stick to Javascript if at all possible
This sounds like a combination of a tab and accordion pattern. Take a look here:
http://docs.jquery.com/UI/Accordion
I just want to make sure I'm on the right track with this. I doubt I could do this in vanilla Javascript so I used jQuery. Here's a fiddle of what I believe you want?
http://jsfiddle.net/jT2gS/3/
Something like this would work for you, proof of concept using document.getElementsByClassnNme
var elements = document.getElementsByClassName('container');
for (var i = 0; i < elements.length; i++) {
elements[i].onclick = function() {
var bodies = document.getElementsByClassName('body');
for (var j = 0; j < bodies.length; j++) {
bodies[j].style.display = 'none';
}
this.children[1].style.display = "block";
}
}
NOTE: no IE8 or below support for getElementsByClassName
Or with jQuery:
jQuery('#list1a').accordion();