Making image buttons on select few - javascript

So I'm doing a site, where the viewers will be able to go in and look at dresses that are for sale. When they first load the page, an image is put into the div "Dress" and thats the front of the dress. Underneath is four buttons that each have a class and the background images for the buttons are other sides of the dress. I'm using a database to store all the image paths to get to the different images of each dress. But now, when you click the drop down, it wants to use it as an "Image button". This is my code.. I'm not sure how to explain it, but I don't want it thinking the drop down is another a href tag for an image, but now it is an actual link.
<button class="Front"></button>
<button class="Back"></button>
<button class="Side"></button>
<button class="Other"></button>
<div id="Dress"><img src="" alt=""/></div>
<script>
var a = document.getElementsByTagName("a"),
popup = document.getElementById("Dress"),
img = document.getElementsByTagName("img")[0];
for(i = 0; i < a.length; i++)
{
a[i].onclick = function(){
popup.style.display="block";
img.src = this.href;
img.alt = this.innerHTML;
return false;
}
}
I also have some of the drop down code.
<li>Prom</li>
<li>Ballgown</li>
<li>Special Occassion</li>
When these buttons are clicked to go to another page, in the div "Dress" it says the name of the link. Like Prom, or Ballgown, or Special Occassion. Is there a way I can edit my script maybe so it only checks these first four a href's?

This line:
var a = document.getElementsByTagName("a")
Is getting all of the a elements on the page including those in your drop down. You want to do something like this:
HTML:
<div id="DressButtons">
<button class="Front"></button>
<button class="Back"></button>
<button class="Side"></button>
<button class="Other"></button>
</div>
JavaScript:
var buttons = document.getElementById("DressButtons"),
a = buttons.getElementsByTagName("a")

Related

How do I refresh div contents on button click

I have a script inside a div which I want to refresh when someone clicks a button with a unique ID.
I have some data which will be displayed inside the div - which I need to refresh without refreshing the whole page.
I've found a solution which changes a border colour but I can't quite simplify it to what I need. Here's what I have so far
var storeColor = 'red';
$('#container').on('click', 'button', function() {
var $p = $('#content p');
var tmp = $p.css('border-color');
$p.css('border-color', storeColor);
storeColor = tmp;
});
</div>
<button type="button">Refresh DIV</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
Contents of div
</div>
I think there are a few problems with your code... The button is outside of the container and thats the reason the click listener doesn't work. Inside the click function you try to access a paragraph p inside some element with the id content which doesn't exist in your code
var storeColor = 'red';
$('#btnRefresh').on('click', function() {
var $p = $('#container');
$p.css('background-color', 'red');
$p.html('hello world');
});
<button type="button" id="btnRefresh">Refresh DIV</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
Contents of div
</div>
Why not try changing the entire inner content of the div dynamically using document.querySelector('.div').innerHTML = html string
The above will not refresh the page if used upon a button click. You may want to use the preventDefault in the button's event listener too.

Filter from duplicate when executing a function

Good afternoon, I have a script that searches for divs by content and changes it, the script is executed when I click on the button, after the click they are rendered or deleted, but if I click on the button, and the content of the div of the last button will match the content of the next button of the div of the past the buttons will not disappear, and because of this, the script will repeatedly try to change the contents of the past divs.
I need that when switching to a new button, the script does not touch the divs that were in the previous button. how to implement it please tell me.
My code:
const boxes = Array.from(document.getElementsByClassName("btn-default"));
boxes.forEach((box) => {
box.addEventListener("click", function handleClick(event) {
console.log("box clicked", event);
var textProp = "textContent" in document ? "textContent" : "innerText";
[].slice
.call(document.querySelectorAll("button"), 0)
.forEach(function (aEl) {
if (aEl[textProp].indexOf("All") > -1) {
function convert() {
var pageDivs = document.getElementsByClassName("product__price");
for (i = 0; i < pageDivs.length; i++) {
const exchange = 57;
let sum = document
.getElementsByClassName("product__price")
[i].innerText.replace("EUR", "USD");
sum = sum.split(" ")[0];
sum = sum / exchange;
document.getElementsByClassName("product__price")[i].innerHTML =
sum + " EUR";
}
}
convert();
}
});
});
});
The code scans the buttons by class, and when I click on them, the page content is updated, and the script changes the contents of the divs, and as I said, if the contents of the buttons match, they will remain on the page and the script will try to change them again, I need the script to not changed past divas, if they remained.
I click on this button
<button role="button" class="btn btn-default active" ng-class="{'active': cat.id === Store.categoryId}" ng-click="Store.setCategory(cat.id)">All</button>
After clicking, about 5-10 such divs are created with different numbers
<div class="product__price">
111 USD
</div>
<div class="product__price">
555 USD
</div>
After i click on the button again and several divs are created again, but the old div remain, and some old div disappear, I need my script to not change the divs that remained after the click.
When you click on the button, the divs appear in the DOM, on the next click, some of them disappear, some remain, those that remain should not be changed by the script on the next click.

Swapping images back and forth on click in multiple places

I'm creating an accordion with my own arrow icons (pngs) as the "toggle" so when you click on the down red arrow, the up blue arrow will show to collapse, and vice versa.
I got it to work with the below code, but I have multiple accordions with the same arrow icons, and I need them all to do this. When I add the same code to the other accordions (even if I changed out the ID to be unique and update it in the JS), it still only wants to toggle the first accordion.
Can anyone help me get this to work across multiple image sets (but the same images)?
HTML:
<img src="/wp-content/uploads/2019/08/accordion-open.png" alt="accordion icon" id="accordion" onclick="change();"></div>
JS:
var image_tracker = 'open';
function change(){
var image = document.getElementById('accordion');
if(image_tracker=='open'){
image.src='/wp-content/uploads/2019/08/accordion-close.png';
image_tracker='close';
}
else{
image.src='/wp-content/uploads/2019/08/accordion-open.png';
image_tracker='open';
}
}
If you're assigning the listener by ID it's only going to apply to the first one. Try using a class name instead.
<html>
<body>
<img class="accordion_icon" src="/wp-content/uploads/2019/08/accordion-open.png" />
<script type="text/javascript">
var open_src = "/wp-content/uploads/2019/08/accordion-open.png";
var close_src = "/wp-content/uploads/2019/08/accordion-close.png";
let accordion_icons = document.getElementsByClassName('accordion_icon'); // get all icons img tags
for (let i = 0; i < accordion_icons.length; i++) {
const element = accordion_icons[i];
element.addEventListener('click',(event)=>{ // set listener on each one
console.log('src was: ', event.currentTarget.src);
event.currentTarget.src = (event.currentTarget.src == open_src ? close_src : open_src) // change the src to the one it currently isn't
console.log('scr is now: ', event.currentTarget.src);
});
}
</script>
</body>
</html>
An alternative method could be also this one, if you still want to keep the even handler in the HTML:
<img src="/wp-content/uploads/2019/08/accordion-open.png" alt="accordion icon" id="accordion" onclick="change(this);"></div>
And in the JS:
function change(image){
image.src = image.src.endsWith("open.png")
? image.src.replace(/open\.png$/, "close.png")
: image.src.replace(/close\.png$/, "open.png");
}

Apply scrollIntoView function in to JQuery function

I am using JQuery show and hide function, it works like when you click on image it opens a information log. The information log opens at the top of the page, so I need to make that when you click on the image on bottom on the page it scroll you up to the content.
JQuery what I am using for my hide and show content:
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
Scrolintoview function that I tried to use:
function myFunction() {
var elmnt = document.getElementById("targetDiv");
elmnt.scrollIntoView();
}
Content from witch I am calling both functions:
<a onclick="myFunction()" class="showSingle" target="{$ID}">
//HTML content here
</a>
Content what I am calling to shop up at the top of the page:
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
I tried to combine this two JS function but only jQuery('.targetDiv').hide() works for me.
The problem is that your target div
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
has some id and the classes targetDiv and SlideDiv.
document.getElementById("targetDiv") tries to find an element with the id targetDiv but your element does not have this id, but is has a class with the same name.
You need to find the element by its class which can be done in a few ways:
1
var elem = document.getElementsByClassName("targetDiv")[0];
2
var elem = document.querySelector(".targetDiv");
3
var elem = $(".targetDiv")[0];

onmouseover function Javascript

I am having a problem with changing onmouseover and onmouseout attributes on dynamic pictures. The way i want it to work is whenever i put my mouse over images the images must change and when i take my mouse away it must be changed to the original picture. and whenever i select any image, that image must be changed to the image which was displayed while moving the mouse across the image. and when i select any other image the same process must take place but the previous image that was changed must be changed back to the original picture.
I have accomplished all of the above but my problem is when i select multiple pictures and put my mouse over images that were previously selected, those images do not change (onmouseover attribute does not work on them anymore).
<script language="javascript">
function changeleft(loca){
var od=''
var imgs = document.getElementById("leftsec").getElementsByTagName("img");
for (var i = 0, l = imgs.length; i < l; i++) {
od=imgs[i].id;
if(od==loca){
imgs[i].src="images/"+od+"_over.gif";
imgs[i].onmouseover="";
imgs[i].onmouseout="";
}else{
od = imgs[i].id;
imgs[i].src="images/"+od+".gif";
this.onmouseover = function (){this.src="images/"+od+"_over.gif";};
this.onmouseout = function (){this.src="images/"+od+".gif";};
}
}
}
</script>
<div class="leftsec" id="leftsec" >
<img id='wits' class="wits1" src="images/wits.gif" onmouseover="this.src='images/wits_over.gif'" onmouseout="this.src='images/wits.gif'" onclick="changeleft(this.id)" /><br />
<img id='city' class="city1" src="images/city.gif" onmouseover="this.src='images/city_over.gif'" onmouseout="this.src='images/city.gif'" onclick="changeleft(this.id)" /><br />
<img id='organise' class="city1" src="images/organise.gif" onmouseover="this.src='images/organise_over.gif'" onmouseout="this.src='images/organise.gif'" onclick="changeleft(this.id)" /><br />
<img id='people' class="city1" src="images/people.gif" onmouseover="this.src='images/people_over.gif'" onmouseout="this.src='images/people.gif'" onclick="changeleft(this.id)" /><br />
</div>
I'd say you don't need the lines that are resetting the onmouseover events.
There's no need to rewrite the onmouseover events - all you want to change is the img src attribute.
As Adam mentions, there's more modern ways to do this using jQuery - look at:
http://code.google.com/p/jquery-swapimage/
For example.

Categories