Why is it that the javascript works fine in Firefox for the gallery on the page below, but doesn't seem to be functioning properly in Chrome and Safari?
In Chrome, the big image isn't displaying but the thumbnails are, and in Safari nothing shows up at all.
Could the issue potentially be related to the css? I'm not sure...
Any assistance would be greatly appreciated. If I manage to figure out the solution, I'll make sure to update this post. Ugh!
There is an issue with the following line of code:
document.images.src = img[imgNumber];
To correct it, you should use:
document.getElementById('images').src = img[imgNumber];
The same problem exists in this line as well:
document.images.src = img[this.id];
You need to update it to:
document.getElementById('images').src = img[this.id];
After making these adjustments, the slideshow functioned correctly when I tested it on a local version.
Currently, I am retrieving <img src="" id="images"> without any source specified.
Let's try triggering an alert using alert(document.images.src); to see if it is undefined.
Alternatively, we can use
document.getElementById("images").srcvar NumberOfImages = 9
var img = new Array(NumberOfImages)
img[0] = "Susielookbook-561.jpg"
img[1] = "Luxe Deluxe W11 (9).jpg"
img[2] = "Luxe Deluxe W11 (10).jpg"
img[3] = "Luxe Deluxe W11 (13).jpg"
img[4] = "Luxe Deluxe W11 (19).jpg"
img[5] = "Susielookbook-259.jpg"
img[6] = "Susielookbook-293.jpg"
img[7] = "Susielookbook-431.jpg"
img[8] = "Susielookbook-613.jpg"
var imgNumber = 0;
function setupImages(){
document.images.src = img[imgNumber];
for(var x=0; x < img.length; x++){
var thumb = document.createElement('img');
thumb.setAttribute('src', 't_'+img[x]);
thumb.id = x;
thumb.onclick = function(){
document.images.src = img[this.id];
imgNumber = this.id;
alert(document.images.src); // <-- here
}
document.getElementById('thumbnailholder').appendChild(thumb);
}
}
function NextImage() {
imgNumber++;
if (imgNumber == NumberOfImages){
imgNumber = 0;
}
document.images.src = img[imgNumber];
}
function PreviousImage() {
imgNumber--;
if (imgNumber < 0){
imgNumber = NumberOfImages - 1;
}
document.images.src = img[imgNumber];
}
I've been struggling to set up a React project, as the create-react-app my-app command doesn't seem to be working. Can anyone offer some assistance? Here are the commands I'm using: npm install -g create-react-app create-react-app my-app ...
Is there a way to determine if a new tab with target set to "_blank" was opened from the current page using JavaScript or jQuery? I want to increment a counter in the original window every time a background tab is opened. For example, if a link is clicked ...
Is it possible to search across multiple categories? For example, I have 4 dropdown menus: 1. City 2. Area 3. Month 4. Products/Services When a user visits my site, they will see a static page with 4 dropdown lists and a "search" button. After the user ...
My FlatList allows me to drag and move it in all directions (up/down/right/left) even though it appears vertically due to styling. The scroll bar still shows horizontally, which I want to disable. How can I achieve this? This is the code snippet for using ...
I am attempting to utilize the componentWillMount hook to fade out a canvas element that is not a child of the transitioning <Home> component. The animation of the <Home> itself is functioning as expected. <ReactCSSTransitionGroup transitio ...
I currently have a Node.js server up and running as the API server for a service that I am developing for a company. The dates stored in the MySQL server that it connects to are related to event start times. Insertion of these dates is flawless, and when ...
Showing different inputs based on an array looks like this <div data-ng-repeat="n in langInput.values"> <input type="text" id="auction_name_{{n.selected}}" class="form-control" name="auction_name_{{$index}}" ...
I'm currently working on an ngoninit function that contains four methods. Two of these methods are responsible for retrieving data from the API, while the other two are intended to load this data when the page loads. ngOnInit(){ getname(); getsubjects ...
I'm facing a challenge in creating a responsive webpage with multiple divs. Here is the structure I am trying to achieve: <div id="container"> maximum width of 1200 and height of 1000 <div id="vertically-static-top">20 pixels high< ...
Is there a way to make it so that when I click on a checkbox, only that specific todo's edit button is disabled? Currently, clicking on a checkbox disables all edit buttons in the todo list. Any suggestions? class App extends Component { state ...
I have implemented the useForm hook from https://www.npmjs.com/package/react-hook-form. However, I am encountering some inconsistent behavior where it sometimes works immediately, sometimes requires a page refresh to work, and sometimes doesn't work a ...
Currently, I am utilizing react-formik for my form implementation. I have encountered an issue with checkbox-based conditions where the checked status of a checkbox determines whether two hidden fields are displayed or hidden. If the user checks the checkb ...
I am currently using AngularJS and encountering an issue when trying to call filePicker.pickAndStore from my Upload controller. Every attempt to use a filepicker.io API function triggers an "Unsafe Javascript attempt" error: The frame requesting access ...
While working through the steps outlined in Getting started with Postgres in your React app, specifically when processing and exporting the getMerchants, createMerchant, and deleteMerchant functions, I encountered an error that says: "TypeError: Cannot rea ...
import Link from "next/link"; import Image from "next/image"; import { Text, useColorModeValue } from "@chakra-ui/react"; import { styled } from "@emotion/styled" const LogoBox = styled.span` font-weight: bold; font ...
I have a question that may seem simple, but I'm curious about the best way to use vue script on pages individually without declaring it globally. For example, I have multiple pages in Laravel Blade such as the home page, category page, and product pag ...
Having an issue with a jqm function that I need help with. <span class="smaller gray">[ <span class="blueonly"><a href="javascript:void(0)" rel="nofollow" onclick="javascript:jQuery(\'#s ...
Is there a way to ensure the textarea element dynamically adjusts its height to fill the space between the header and footer without causing a scroll bar when using bootstrap 4? Here is the HTML code snippet I've been working with: #container { ...
Currently, I am working on a calendar project where I utilize an ajax request upon page load to fetch data from the rails database. Initially, the ajax call successfully retrieves the object during the page load event. However, when I attempt to retrieve ...
Can anyone assist me? I'm having trouble with the res.json() function in my code. It seems to work after the first request, but not after the second. Right now, my application is quite simple - it scrapes user data from social media platforms like Twi ...