ishan_shah

December 20, 2019

Hello @caleb1,
You should use the pseudo-class to be more effective and attractive UI effects. kindly refer to the following link for more reference and understanding.
https://www.w3schools.com/css/css_pseudo_classes.asp

December 13, 2019

Hi @vitalnet,
I have tried to code as per your requirement. Kindly check the same. Hope it will work for you.

<html lang="en">
<head>
    <title>Bootstrap 4 Tooltip Persists, Looks Terrible</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h3>Bootstrap 4 Tooltip Persists, Looks Terrible</h3>
        <br> "Other button disabled" scenario works fine.
        <br> First, hover over buttons. Look at tooltips while hovering.
        <br> Then, click button A to disable button B. Works fine:
        <br> - Button B is disabled, and no tooltip.
        <br> - Tooltip still works correctly on button A.
        <br> <br>
        <button type="button" id="button_a" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover"
            title="Disables Button B" onclick='change_button ("button_b", true);'>
            Button A
        </button>
        <button type="button" id="button_b" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover"
            title="Disabled by Button A">
            Button B
        </button>
        <br> <br>
        <hr>
        <br> "Same button disabled" scenario fails.
        <br> First, hover over Button C. Look at the tooltip.
        <br> Then, click button C to disable button C. Messes up:
        <br> - Button C is disabled, so that part is OK.
        <br> - But Button C tooltip persists, looks terrible.
        <br> <br>
        <button type="button" id="button_c" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover"
            title="Disables Button C" onclick='change_button ("button_c", true);'>
            Button C
        </button>
        <button type="button" id="button_d" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover"
            title="Enables Button C" onclick='change_button ("button_c", false);'>
            Button D
        </button>
        <br> <br>
        <hr> <br>
        So if a button is disabled while the cursor is hovering over it, the tooltip persists.
        <strong>
            Could you please explain how to make tooltip go away when Button C is disabled?
        </strong>
        I would prefer if tooltip went away when Button C disabled,
        since that is default behavior of bootstrap disabled buttons.
        And disabled button may later get enabled again, so I do not want to delete title attribute.
        Basically I want bootstrap to behave the same way as when Button B is disabled.
        I have looked around and cannot find how to fix this problem,
        and have tried various things, with no success.
        There are real instances where a button carries out an action,
        and then the button needs to be disabled, so I appreciate the help. Thanks
    </div>
    <script>
        $(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); });
        function change_button(button_id, bool_val) {
            if (button_id === 'button_c') {
                $('[data-toggle="tooltip"]').tooltip('hide');
            }
            var button_obj = document.getElementById(button_id);
            button_obj.disabled = bool_val;
        }
    </script>
</body>
</html>

December 6, 2019

Hello @leela52452,
dir attribute is used to set the direction of the text within an element in an HTML document.
If you set it as an RTL then it will display HTML from right to left. It generally used when language is like Arabic etc.
dir attribute is not a compulsory attribute so you can also skip this.

November 29, 2019

Hello @Pygmalion,
I prefer bootstrap. Because Bootstrap is the best framework for all kinds of modifications to existing dynamic code. Following is the link to learn bootstrap from basic to advance. Refer the same for the basic ideas.
Bootstrap 4 Tutorial

November 22, 2019

Hello @smus,
Simply you can use the element name separated by a comma as a selector in CSS. Following is the example of multiple tags as a single selector.

E.x.
h1, h2, h3 {
color:orange;
}

November 15, 2019

GET method is used to retrieve the data from the database while to insert data into the database, the POST method is used.

November 8, 2019

Hello @Yoni,
You should use the latest version of Angular as it supports the latest features and new functionalities. Using AngularJs is not a good way to build a new application.

November 1, 2019

Hi,
You can use the <figcaption> tag to fulfill your requirements. For further reference, you can use the following link:
https://www.w3schools.com/tags/tag_figcaption.asp

October 23, 2019

Hello @BigDemond,
Generally, when you use Bootstrap you should avoid the use of semantic elements. Bootstrap allows you to use its default class to implement the functionality you want.
So, as per my opinion, you should avoid the use of semantic HTML.

October 10, 2019

Hi @ughhope,
I have tried to code as per your requirement. I think you should try this once.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .container {
            position: relative;
            width: 50%;
        }

        .image {
            display: block;
            width: 100%;
            height: auto;
        }

        .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: #008CBA;
        }

        .container:hover .overlay {
            opacity: 1;
        }

        .text {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>Fade in Overlay</h2>
    <p>Hover over the image to see the effect.</p>
    <div class="container">
        <img src="https://www.roadtestreviews.com/wp-content/uploads/2014/11/mustang-batcave-017.jpg" alt="Avatar"
            class="image">
        <a href="https://www.google.com/" class="overlay"></a>
    </div>
</body>
</html>

I hope it will work as per your requirements. I have also added an anchor tag for your second query.

September 26, 2019

Hello @smeeks87,
I have tried your code and also I have made some changes in your code in <style>. I am attaching the file after solving your issue. Kindly check it.
Thank You.

2123815979_holman-bmw-ft-lauderdale-accordion-x7-page_v3nocarousel (1).html

September 19, 2019

Hi @Slevin,

According to me you should try following code. It will work as per your requirement. You just have to add following item into your CSS.

justify-items: center;

September 12, 2019

Hello @Rakibul Hasan,
For SEO purpose you have following tutorial sites for learning it from basic to expert level.

https://www.tutorialspoint.com/seo/index.htm
https://www.javatpoint.com/seo-tutorial

September 5, 2019

Hi @danh4648,
As much as I know, w3schools does not allow you to create account to learn the tutorials. But for forums you can create the account and learn more from this forums. w3schools does not provide any storage functionalities for your completed exercise.

August 28, 2019

Hello,
I have tried the following query. I hope it will work for you also.

select * from [table_name ]where SUBSTRING(col_name,len(col_name),len(col_name)) in ('a','e','i','o','u');

Or in case of case sensitivity, you should try following query.

select * from TABLE_NAME where SUBSTRING(COL_NAME,len(COL_NAME),len(COL_NAME)) in ('a','e','i','o','u','A','E','I','O','U')

I have tried other one query also. It is as follows:

select * from TABLE_NAME where (RTRIM(COL_NAME)) like '%a' or (RTRIM(COL_NAME)) like '%e' or (RTRIM(COL_NAME)) like '%i' or (RTRIM(COL_NAME)) like '%o' or (RTRIM(COL_NAME)) like '%u'

August 21, 2019

Hello,
You can give multiple styles using semicolons(;) to a single element. Following is the example of the same as an inline CSS.

<h1 style="color:blue; text-align:center"> Your Text </h1>

In case you want to apply internal CSS then your code will be as follows:

<h1 id="header1">Your Text</h1>

#header1 {
  color:blue;
  text-align:center
}

August 9, 2019

Hello,
You should use cellspacing attribute of the table element for spacing between two columns of the table. Following is the example code of the same.

<table cellspacing="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>100</td>
  </tr>
</table>

August 2, 2019

Hello,
You should try following code.

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masterclass Of Indigo | Udstillinger</title>
<link href="../main.css" rel="stylesheet" type="text/css">
<link href="../footer.css" rel="stylesheet" type="text/css">
<link href="../tablet768.css" rel="stylesheet" type="text/css">
<link href="../mobile400.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<style type="text/css">
       .rosenfeldt-box {
           height: 200px;
           background-color: #FF00D7;
           background-image: url("2017RosenfeldtMenu.JPG");
           background-size: cover;
           margin: 1%;
       }

.kulturnat-box {
height: 200px;
background-color: #FF00D7;
background-image: url("2018KulturnatMenu.jpg");
background-size: cover;
margin: 1%;
       }
</style>

</head>

<body>
<span> <a href="http://masterclassofindigo.art"><i class="fas fa-home" style="font-size:36px;color:white"></i> </a></span><a href="http://masterclassofindigo.art" style="
color: white;">
<span> <overskrift>  Udstillinger</overskrift> </span>

<hr>
</a><main><a href="http://masterclassofindigo.art">
       <span>
</span></a><div class="rosenfeldt-box"><a href="http://masterclassofindigo.art">
</a><h2><a href="http://masterclassofindigo.art">
</a><a href="2017Rosenfeldt.html">Rosenfeldt 2017</a>
</h2>
</div>
<span>
       <div class="kulturnat-box">
           <h2>
<a href="2018Kulturnat.html">Kulturnat Vordingborg 2018</a>
</h2>
       </div>
</span>
</main>
<hr>
<footer>
<p class="footerDisclaimer">2019 Copyrights - <span>All Rights Reserved - </span>MasterclasOfIndigo.art</p>
<p class="footerNote">Cookiefri hjemmeside | No Cookies</p>
</footer>

</body></html>

July 26, 2019

Hello,
JavaScript can be used to change the HTML content as well as mostly used for the validations of the input types. you can apply JavaScript in two ways. Either internal or externally.
When you write your JS code in between <script>, then it is called Internal JavaScript.
E.x.

<script> 
function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

When you write your JS code in a separate file and then give its path to src attribute in <script>, then it is called External JavaScript.
E.x.
Your Js File:

function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}

<script src="script.js"></script>

July 19, 2019

Hello,
You can simply use the between clause to find the records between the given dates. SQL query can be written as follows:

SELECT * FROM TABLE
WHERE Failure-Dates IS BETWEEN FROM_DATE AND TO_DATE

July 15, 2019

Hello,
You can do it with the use of bootstrap. Apply row class and then use two div in a single div which has row class.

July 9, 2019

Hello,
You may have given a <br> in between or it may be like there is a div tag in between navbar and that div.

July 5, 2019

Hello,
If you have simple if condition then you can use ternary operator instead of if condition. Syntax is as follows:

(condition) ? "code if condition is true" : "code if condition is false";

June 27, 2019

If you have only header tags in your HTML than you can use * as an universal selector. Or else you can give names if there are only few tags as you don`t want to give class to the all elements.

June 21, 2019

Hello,
You can directly use it as follows:
Go to YouTube.
Select Video.
Click on share button.
Select embed option.

Finally you will get a iFrame tag coding for video that you can directly post on your html code

Sign In

ishan_shah

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by ishan_shah

Hover Properties with Same Selector

Bootstrap 4 Tooltip Persists, Looks Terrible

why do we need dir Attribute if lang="en"

Which CSS framework to use to modify existing dynamic HTML code?

Universal selector

what is difference between get and post in php

Angular 2-7 is very missing

Text under Image

Where are the semantic HTML tags in BOOTSTRAP?

Two Questions regarding Image Hover Overlay Fade

CSS Issue Resulting in Grey Background

How to center a GRID itself?

SEO

Can I Create An Account?

Like error: Last character

How to put 2 "styles" in one text in HTML

space between columns of a table

Links not displaying the color I want

html java script

SQL Dates Between

Adding div side by side

Can Some One Help Me Out!

if statement

Universal selector

Iframe youtube embeding

Browse

Activity