My website features content in two local languages, but all the titles are currently only in one language. I would like to have titles in both languages alternating, with title1 displaying for 3 seconds before automatically switching to title2. This means that each title will switch between two different languages.
<div class="col-md-4">
<div class="cont">
<h1> title 1 </h1>
<h1> title 2 </h1>
</div>
</div>
After making some adjustments to @Melissa Skywalkz's response, it seems like you are looking to continuously swap images.
$(document).ready(function(){
function swapImages(){
var img1 = $('#img1');
var img2 = $('#img2');
if(img1.css("display") == "block")
{
img1.slideUp(500); //500 ms animation time
img2.slideDown(500);
}
else
{
img1.slideDown(500);
img2.slideUp(500);
}
}
setInterval(swapImages,3000); // delay between image change
});#img1
{
display: block;
}
#img2
{
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img1" src="image1.jpg" alt="Image 1">
<img id="img2" src="image2.jpg" alt="Image 2">Utilizing jQuery offers a wide range of possibilities to achieve the desired effect, such as using the .slideUp method.
$("#1").fadeTo(1000, 500).slideUp(500, function() {
$("#1").slideUp(500);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="cont">
<h1 id="1"> title 1 </h1>
<h1> title 2 </h1>
</div>
</div>To apply this effect to all h1 elements, you can use .getElementsByTagName(), but keep in mind that this will be applied to all of them. It is recommended to still use the same class on all elements for better control :)
var h1 = document.getElementsByTagName("h1");
$(h1).fadeTo(1000, 500).slideUp(500, function() {
$(h1).slideUp(500);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
<div class="col-md-4">
<div class="cont">
<h1> title 1 </h1>
<h1> title 2 </h1>
</div>
</div>describe food option heredescribe juice option hereHow can I create a button using HTML, CSS, JavaScript, and Bootstrap that displays different images for food and juices when clicked? For example, clicking on "food" will display 3 different food images, w ...
I have successfully loaded content via AJAX, including a UL element with li items that each have tooltips. Now I want to load tooltip content via AJAX for each individual li item. How can I achieve this? Currently, I am making an AJAX call to load the li ...
I am facing a particular issue: The initial design is displayed in Picture 1: I am using Bootstrap 5 as my CSS framework. I attempted to utilize the pre-built columns feature, but so far, I have not been able to find a solution and am currently strugglin ...
My navbar element affixes prematurely when placed below my header element, making it seem as if the image in the header does not exist. The navbar is meant to affix only when it reaches the top, but currently, it is affixing earlier. The code I used sets ...
My HTML5 page includes an embedded SVG icon element. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> </head> <body> ...
Is there a way to hide the scroll bar using Jquery? I tried this code for Chrome but need a solution that works for all browsers. $ ::-webkit-scrollbar { display: none; } Any suggestions on how to achieve this cross-browser compatibility? ...
I'm trying to figure out how to display an image that starts inside a grid but scales to the left or right of the screen. The current issue is that the container limits the width, and I need it to allow the image to extend beyond the grid. If you hav ...
It seems that there are some style issues occurring in the production build hosted on Netlify for a specific component. The problematic component is a wrapper located at ./layout/FormLayout.tsx. Below is the code for this wrapper: const FormLayout: React.F ...
Looking to enhance my HTML page with a new feature. The page is responsive and currently using Bootstrap CSS and JS. My goal is to allow users to change the color of the page dynamically by selecting a background or text color. Check out this example link ...
I'm encountering an issue where opaque borders are overlapping each other, causing the alpha value to be twice as high as intended. This problem seems to only affect the first n-1 elements — the last child is rendering correctly. Check out the Cod ...
For implementing swipe support on my landing page carousel, I included jquery.mobile.custom.min.js. However, I am facing a challenge with adding swipe support to "close" the menu. Essentially, swiping left should have the same effect as clicking the butto ...
Struggling to optimize my web application for mobile devices, I've encountered challenges with consistent display across different browsers. My idea is to utilize device capability detection to adjust widths and font sizes dynamically based on screen ...
I have successfully implemented a fade-in/out animation using @angular/animation, but now I am looking to transfer this animation to CSS and eliminate the dependency on @angular/animation. Here is my current animation setup (triggering it with [@fadeInOut ...
I'm in the process of building a search box using Flask, MySQL, and ajax. I've managed to retrieve the search results in JSON format within the console, but now I want to dynamically add them to the options in my datalist element in the HTML. He ...
Trying to utilize a 1.5 component with AngularJS has presented some challenges for me. I have a service that fetches my JSON file using $HTTP and returns a promise. In the controller of my component, I resolve the promise and assign it to a value using thi ...
Although I have been using the Selenium web driver to test websites and obtain results, I now require a method to retrieve these results without actually opening any web pages. After conducting some research, I discovered that Selenium is unable to fulfill ...
I am currently working on an old webpage that contains JavaScript. However, there is a function that does not seem to work properly with newer browsers such as Mozilla, Chrome, and Safari. Interestingly, the page functions perfectly fine on Internet Explor ...
As the creator of the stackoverflow-readme-profile project, I dedicated extensive time and effort to crafting a personalized Stackoverflow profile in the form of an SVG image. Utilizing "native svg tags," I meticulously constructed elements such as: < ...
After a long day of searching and experimenting, I've finally arrived here. Initially, I attempted to create a simple table with 2 columns using Row and iterate over the object to populate the left column with its keys. However, I hit a roadblock when ...
Having an issue with a script that uses ajax to post text: <?php if (isset($_POST['q'])) { echo 'q is '.$_POST['q']; } else { ?> <!DOCTYPE HTML> <html> <head> <script ...