Here is the link to my code snippet.
$(".image").wrap("<a href=\"link.html\"></a>");
I am trying to add variables to links so that each picture has a unique link when it changes. Strangely, my buttons do not work on my computer but they work in the fiddle preview.
The first picture is constantly changing using an Interval function and I need some help troubleshooting this issue.
What do you think about organizing the images in this way:
let pictures = [
{source: "imagine this as an image", link: "http://www.google.com"},
{source: "and let's pretend this is another one", link: "http://www.yahoo.com"},
{source: "and here is one more to display", link: "http://www.stackoverflow.com"}
];
You could then update your html() function to include the pictures.source and pictures.link properties when creating the markup.
Feel free to experiment with the following code snippet:
HTML
<a href="link1.html" class="picture">imagine this as an image</a>
<div class="bullet">click here to change it manually</div>
jQuery:
$(document).ready(function () {
setInterval(function () { //change this to setInterval for continuous flipping
flip();
}, 2400);
});
var images = [
["imagine this as an image", "link1.html"],
["and envision this as another one", "link2.html"],
["here's one more for display", "link3.html"]
];
var idx = 1;
$(".bullet").click(function () {
flip();
});
function flip() {
if (idx == 3) {
idx = 0;
}
$(".picture").fadeOut(1000, function () {
$(".picture").html(images[idx][0]);
$(".picture").attr("href", images[idx][1]);
$(".picture").fadeIn(1000);
idx++;
});
}
Don't forget to view your updated JSFiddle.
I'm encountering an issue with adding a gutter between 2 columns on my website layout. I have a row that needs to be 1280px wide (based on a reference resolution of 1366x768 with padding of 43px on each side of the page), containing two sections that ...
Currently, I am working on developing a mobile application, and as I start adding styles, I notice a mysterious blank space that seems to be appearing out of nowhere. Can anyone provide any insights or suggestions to help me troubleshoot this issue? https ...
After attempting to include an array with dictionaries in a JSON file, I encountered multiple errors. This has led me to question whether it is feasible to add dictionaries directly into a JSON file without using Node.JS for data insertion. Here is an exa ...
Due to a certain condition I have, I am unable to load some CSS and JS in my HTML. As a solution, I've decided to dynamically pull them using $.get(). While I have successfully tested pulling and executing js remotely, I am facing some challenges when ...
I'm dealing with a frustrating issue and I just can't seem to figure it out. The error message I'm getting is Cast to string failed for value "{}" at path "post". { "confirmation": "fail", "message": { "message": "Cast to string fai ...
Is there a way in Orbeon forms to position input fields at specific coordinates, relative to a background image? I currently have a paper form that fills an entire page. My goal is to use the scanned image of this form as a background and then overlay inp ...
As a Discord.js developer, I am facing an issue with sending a message to all guilds/servers that my bot is in. Previous solutions provided were for outdated versions and do not work anymore. Can anyone offer assistance? The following code snippet does n ...
Despite numerous attempts, I have been unable to figure out how to effectively use the Sublime Editor for creating scss/sass files. ...
Seeking advice on how to optimize my website for mobile devices. I have two separate CSS files - one for the mobile version and one for the desktop version. Combining them in the head of my HTML file is causing issues, as the background style from the desk ...
I encountered an issue when styling a component imported from the Material-UI library using the styled API (@emotion/styled). Error:(19, 5) TS2589: Type instantiation is excessively deep and possibly infinite. Despite attempting to downgrade to typescript ...
<body> <nav class="navbar navbar transparent"> <div class="container-fluid logo"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img src="images/Logo.png" /> & ...
In my C++ application, I am attempting to create a rounded button by utilizing an external CSS file. Although I have successfully achieved a round button, there is still a pesky rectangular border that remains and I am struggling to figure out how to remo ...
A jQuery function is included in my code: $('#big-bad-bold-button') .on('click', aloha.ui.command(aloha.ui.commands.bold)); This function binds the click event. Is there a way to achieve the same binding without requiring a click? ...
I am working on creating a ListView that displays folder names. Each row in the ListView includes a TextView to show the folder name and a checkbox. Although the list is successfully created, I am encountering an issue with the checkbox states changing ran ...
I have multiple forms on a single page that are very similar in structure. Some of the forms contain elements with a css class that triggers an onchange event handler. This is in an ASP.NET MVC environment. $('.check-changes').on('change&apo ...
Utilizing the powerful combination of Angular 5 and Firebase, I have successfully implemented a feature to store and retrieve movie review information. However, an interesting issue arises when it comes to line breaks in the reviews. While creating and edi ...
Looking for a CSS-only solution to manage text within an image-defined box? The challenge is to place a button in the center if the text is shorter than the image, or cut it with ellipsis if longer. Also, the text should not exceed the box width. Any ideas ...
This is where you can find my special button: <body> <h3 class="paragraph">To remove duplicates in 2 Javascript arrays (refer to the readme), combine the results into a new array and display the unique names in an unordered list below ...
I'm not the best at explaining things, so I hope you all can understand my needs and provide some assistance here. Below is a view using ng-repeat: <div ng-repeat="item in allitems"> {{displaydata}} </div> In my controller, I have the f ...
I am looking to enhance certain words in a paragraph by adding a brushstroke image in the background, similar to this example: https://i.sstatic.net/KzjGn.png. I attempted to use a simple background for a span, but the image exceeded the padding and was cu ...