I'm having an issue where text in my div only appears on the second click, instead of the first. What could be causing this problem?
$('#fPaperCirclePic').on('click', function () {
$('#fPaperCircleText, #isargebla, #moq10k').css('visibility', 'visible');
$('#fPaperCircleText, #isargebla, #moq10k').fadeToggle("slow", "linear");
});
erase this line in js
$('#fPaperCircleText, #isargebla, #moq10k').css('display', 'none');
and replace visibility:hidden with display:none in the css
fadeToggle switches the display property
$(document).ready(function() {
$('#fPaperCirclePic').on('click', function() {
$('#fPaperCircleText, #isargebla, #moq10k').fadeToggle("slow", "linear");
});
});#fPaperCircleText,
#isargebla,
#moq10k {
display: none;
}
#fPaperCirclePic {
background: red no-repeat;
height: 100px;
width: 100px;
margin-top: 10px;
margin-left: 85px;
cursor: pointer;
}
#fPaperCircleText {} #isargebla {
font-size: 19px !important;
font-weight: bold;
}
#moq10k {}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fPaperCirclePic"></div>
<span id="fPaperCircleText">
asdasasd <br />დამოუკიდებელი სისტემა</span>
<span id="isargebla">ისარგებლა</span>
<span id="moq10k"> <h3>10 000</h3> -ზე მეტმა მოქალაქემ </span>Revise your CSS to
#fPaperCircleText, #isargebla, #moq10k {
display: none;
}
Delete the CSS modification from your JavaScript code.
$('#fPaperCirclePic').on('click', function () {
$('#fPaperCircleText, #isargebla, #moq10k').fadeToggle("slow", "linear");
});
Replace the visibility:hidden property with display:none
I'm working with a jQuery script that shows and hides an element on hover. How can I keep the element displayed if I click on it? $(selector).hover(function(){ //show element on mouseover $(element).show(); $(element).click(function(){ ...
I am struggling with a form that has 5 radio buttons, including an "other" option where users can manually enter text. The issue I'm facing is that the form only returns the manual entry text and not any of the preset radio values. I need it to work f ...
Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...
Understanding the Root.js File const Root = () => ( <HashRouter> <div> <Route exact path="/" component={Main}/> <Route path="/main/:page" component={Main}/> <Route path="/detail ...
I am having an issue with extracting an integer value from a JSON response. Below is the code snippet causing the problem: public ActionResult GetCartCount() { int cartItemCount = shoppingCartManager.GetCartItemsCount(); return Json(new { name = c ...
Hey there! I'm currently experimenting with a public api from wunderground (you can find more information at [http://wiki.wunderground.com/index.php/API_-_XML][1]) for use on a web page. I'm actually working on creating a widget for a phone, but ...
Let's dive in, I may be completely off track here. I am currently working with Wordpress. On a page I am creating an HTML select menu (Main Menu) with options that correspond to each page on the site. This menu is visible on the page. In addition, ...
For my ASP.NET generated hyperlink that says "select location", when the user clicks on it, they are redirected to a new page where they can choose a different location at /change-location/default.aspx. This could be any country, state, or city in the worl ...
I have been working on a project that involves using Datatables and encountered an issue with column export. The column displays successfully on the webpage but fails to display after using render as shown below: this._dataTable = this.$mainTable.DataTa ...
I have integrated tinyscrollbar into my project. One of the options available is contentPosition (Number, indicating the position of the content relative). Yet, I am struggling to modify it as needed. This is how my current JavaScript code looks: $(do ...
After days of trying to solve a specific issue, I have realized that I cannot do it without some help. The task at hand is to enable the functionality of clicking on a table row to reveal more details, but in my case, these additional details are presented ...
When I try to display a message using react toaster and then redirect to another page using history.push('/'), the toaster fails to work properly. Instead, the page immediately redirects to the homepage without displaying the toast message first. ...
Utilizing the MVC approach, within my javascript code, I am encountering a discrepancy. Upon using console.log(data.msg) in the success function, the desired result is achieved. However, when attempting to employ $('#res').text("".data.msg), an ...
How can I create HTML and CSS columns that stick together without manually specifying the "left:" parameter every time? The current example in the fiddle achieves what I want, but requires manual setting of the "left:" value. Is there a way to make this m ...
My use of Bootstrap 5 for styling a table has encountered an issue. Even with the border-radius set on the table-dark class, the thead element's border does not change. I am looking for a way to address this problem. Any suggestions? .table-dark { ...
When it comes to declaring variables when requiring modules in nodejs, there are different styles followed by well-known developers. For instance, TJ Holowaychuk uses a style like this: (method1) var connect = require('connect') , Router = req ...
I am looking to implement a search bar button similar to the one on airbnb using bootstrap 5, like this example: https://i.sstatic.net/oIIzv.png Here is an example of HTML code that you can use: <button type="button" class="btn btn-ligh ...
Although there are numerous posts discussing this topic, my situation is unique. In my case, I have a collection of colors represented by circles. When I click on a circle, I add content in the form of a check mark by including a class selector with an af ...
I have a question that might sound silly, but I am trying to retrieve the HTML content from this particular website using JavaScript. The data I'm interested in is located at the center of the page within a dynamic table which does not change the URL ...
Can I compare the start and end times in the Yii2 client/ajax validation for my form? This is how my view file code looks: <?php foreach ($model->weekDaysList as $index => $value) : ?> <div class="row"> <div class="col-sm ...