I am currently struggling with implementing the jQuery scrollTo plugin to work in a horizontal manner. To demonstrate the issue, I have created a jsfiddle for reference.
Initially, the page displays images (img 1, img 2, etc) without any issues. However, upon adding the jQuery script, the functionality stops working as expected.
Your assistance on this matter would be highly appreciated!
After considering your feedback:
I am looking to have each image scroll horizontally and seamlessly replace the previous one, similar to this: jsfiddle.net/P9B5y. However, I want there to be a cutoff point where only one image is visible at a time, instead of having multiple images show simultaneously.
It seems like the scrollTo plugin may not be the best fit for what you're seeking. Instead, creating a viewport and animating a list behind it might achieve the desired effect, as demonstrated here: http://jsfiddle.net/7SLrL/1/:
HTML:
<div id="viewport">
<ul>
<li>
<img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" />
</li>
<!-- Insert additional <li> elements with respective image sources -->
</ul>
</div>
<div id="nav">
<ul>
<li>
<img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" />
</li>
<!-- Insert corresponding navigation images within <li> elements -->
</ul>
</div>
JQuery
$('#nav li').click(function(){
var _this = $(this);
$('#viewport ul').animate({
left: -1* _this.index() * $('#viewport ul li').eq(_this.index()).children('img').width()
},500);
});
CSS:
#viewport {
width:350px;
height:350px;
overflow:hidden;
margin-bottom:10px;
border:1px solid #000;
}
#nav {
width:350px;
height:40px;
}
#viewport ul {
padding:0;
margin:0;
width:1400px; /* Adjust width according to number of images */
position:relative;
}
#viewport img {
width:350px;
height:350px;
}
#nav img {
width:40px;
height:40px;
cursor:pointer;
}
li {
float:left;
}
With some help, I've made it this far on my project. However, I need to take one more step to achieve my goal. I want to group data based on an attribute that is currently passed through an ng-click action. Is there a way to automatically do this on p ...
After successfully developing a single page application using JavaScript, I incorporated a few jQuery commands and Twitter Bootstrap for added functionality. The method used to load my page is demonstrated below: $('#contact').click(function () ...
I am encountering an error while running the following code. public void GetCategoriesSelenium() { string javascript = System.IO.File.ReadAllText(@"GetCategory.js"); CrawlerWebSeleniumJS.ExecuteScript("var finished;"); ...
When attempting to use the jQuery plugin "livequery" to highlight certain words within dynamically generated search results, the highlighting does not appear to work! Strangely, adding an alert() function before executing the code causes the highlighting ...
As I work on creating my website, I have come across an issue with lag when scrolling through a certain viewport that contains a canvas element. To address this problem, I am looking to analyze the browser's performance, specifically focusing on the f ...
Is it possible to change the cursor from default to pointer when the mouse enters the specific rectangle area (50, 50, 100, 100) of the body? The dimensions are in pixels. Instead of defining a separate div and setting the cursor style on it, I'm loo ...
I am encountering an issue with the date field. Whenever I try to create a new record or update an existing one, the date field is being saved as 000-00-00. Even when using the datepicker and selecting a specific day, it gets stored in the table as (0000- ...
I've encountered a bit of a noob-question despite having a few years of experience in web development. Despite searching Programmer Stack Exchange and Google, I haven't found an answer, so here goes. Currently, I'm working with the Express ...
I've been working on a blog using a responsive template on Blogger. The logo looks fine when viewed on a computer, but appears blurry on an iPhone. I've tried editing the logo and replacing it with a different one, but the issue remains... You c ...
Greetings! I've been trying to match an array of objectIds in Mongoose using Node.js, and although I achieved the desired result in the Mongo shell, I'm facing difficulties when implementing the same in my code. Here's a snippet from my col ...
When validating text fields in an HTML form, I am looking to check two conditions. Currently, the code below checks if the phone number entered is in the correct format and displays a message 'Enter a valid mobile number' if it is incorrect using ...
My current project involves utilizing Bootstrap to design a webpage featuring two fixed sidebars and a footer. Although I have successfully positioned the sidebars and footer, I am encountering issues with preventing the #content section from overlapping t ...
Every time I attempt to install npm packages, I encounter the same error message indicating "3 high severity vulnerabilities." When I execute the command npm audit fix, I consistently receive this: https://i.stack.imgur.com/3oJIB.png I have attempted to ...
I've been attempting to overlay a transparent color on top of a background image. While the background image is displaying correctly, I'm having trouble getting the color to show up. I noticed that this question has been asked before. I tried im ...
I am looking to create a simple menu where a div called "test" is initially hidden, and when I click on a div labeled "trig", the test div is shown. If I click on trig again, the test div should hide. However, I am running into an issue where each subseque ...
I am currently attempting to combine two tables into one using jQuery in the following manner: var table = document.createElement("table"); table.id = "mergedTable"; $("#mergedTable > tbody:last") .append($("#csvInfoTable2 > tbody").html()) ...
I'm struggling to articulate this question clearly, and the documentation isn't providing the answers I need. Essentially, in my dataset, I have an array with two values that represent the day of the week index. I want to create a custom range c ...
My current challenge involves implementing form validation using JavaScript. The goal is to prevent the form from being sent to the server if any errors are found. I have made sure that my JavaScript function returns false in case of an error, like so: ...
My Bootstrap navbar is floating in the center on WordPress and I'm not sure why. Can anyone help me with this issue? Could it be related to WordPress or my stylesheet problems? (Will update my code here if you need) https://i.sstatic.net/vxVv4.jpg ST ...
const [Heroes, setHeroes] = useState([]) useEffect(() => { API.findFavorites().then((res) => { console.log(res) setHeroes([...Heroes, res]); console.log(Heroes) }) }, []); I am struggling ...