What is wrong with this code?

Question

User-2071692902 posted

Hi,

According to the post below, i modified the code to enlarge the emoji to be as a sticker

https://forums.asp.net/t/2151064.aspx?

Here my new code 

<script>
         $(function () { 
           var d = new Date()
           var h12 = d.getHours();
           var h24 = d.getHours();
           var m = d.getMinutes();
           var s = d.getSeconds();
           if (s < 10) {
               s = "0" + s
           }
           if (m < 10) {
               m = "0" + m
           }
           if (h12 > 12) {
               h12 = h12 - 12
           }
           if (h12 == 00) {
                   h12  = 12
               }

           var timeStamp = h12 + ":" + m + ":" + s + " ";
           if (h24 > 11) {
               timeStamp += "PM";
           } else {
               timeStamp += "AM";
           }

           var userName = document.getElementById("myUserName").value;
           var img = $('<img width="100px;" height=" 100px">');
          $("div.dropdown-menu a").click(function () {
          $('#conDivID').append("<span style='color: red'>" + userName + ': </span>');
          $('#conDivID').append('</br>');
          $("#conDivID").append($(this).find("img").clone(true)); 
          $('#conDivID').append('</br>');
          $('#conDivID').append("<span class='timeSpan'>" + timeStamp + '</span>');
          $('#conDivID').append('</br>');
               
         });
         })
     </script>

 I want to change the size of the image from 20px[ as it in the given code in previous post] to 100px [as in my modified code above].

Thanks advanced

Answer 1

User-474980206 posted

you create a variable "img" that you never use. you clone an image, but don't change any properties of it.

Answer 2

User-2071692902 posted
Then how could I use my variable in the original code?

Answer 3

User753101303 posted

Hi,

You could add an id to your image and use $("#myId").css("width","100px"); to change the width. Currently you are using attributes which are outdated since long. Use CSS instead ie :

<img style="width:20px;heigh:20px"> rather than <img width="20p"x height="20"px>

Answer 4

User-2071692902 posted
You mean like this
var userName = document.getElementById("myUserName").value;
var img = $('<img width="100px;" height=" 100px">');
$("div.dropdown-menu a").click(function () {
$('#conDivID').append("<span style='color: red'>" + userName + ': </span>');
$('#conDivID').append('</br>');
$("#conDivID").append($(this).find("img id="imgId"").clone(true));
$("#imgId").css("width","100px");
$('#conDivID').append('</br>');
$('#conDivID').append("<span class='timeSpan'>" + timeStamp + '</span>');
$('#conDivID').append('</br>');

Answer 5

User839733648 posted

Hi Omanxp45-1,

According to your description, do you want someting like this?

I suggest you could just delete the image style, and just set the css to the image like:

        img .dropdown-menu{
            height:100px;
        }

Best Reagrds,

Jenifer

Answer 6

User-2071692902 posted
Sorry, but I want to keep images in tge dropdown menu as small as icons.

Answer 7

User753101303 posted

Yes like $("#imgId").css("width","100px"); 

When using $("<tagName>") you create a new element rather than retrieving an existing element (and it doesn't seems, you are using it at all). See http://api.jquery.com/jquery/ and note that you have jQuery(selector), jQuery(html) and jQuery(callback) $() being a shortcut for jQuery(). https://www.w3schools.com/jquery/jquery_css.asp could also perhaps help.

Answer 8

User-2071692902 posted

I tried to use it in .ready block of jQuery but it didn't work.

 <script >
$(document).ready(function(){
 $("#imgId").css("width","100px"); 

    
});     
     </script>

Answer 9

User839733648 posted

Hi Omanxp45-1,

I'm still confused that which image you want to change its width.

Is the image already created in the html or in the jquey code?

I've added extra image and set its width, it works well.

<img src="Images/test1.jpg" style="width:40px" id="testimg"/>

$("#testimg").css("width", "100px");

Best Regards,

Jenifer

Answer 10

User753101303 posted

And you are 100% sure that your img tag does have the "imgId" id ?

Answer 11

User-2071692902 posted
Hi,
I want when I press on any image(emoji) inside the dropdown-menu to be sent to the conversation box ('#conDivID') with its full size.

Answer 12

User839733648 posted

Hi Omanxp45-1，

Do you want the effect like this?

If it is, you just have to set the image's height in CSS style.

        #conDivID img {
            height:100px;
        }

Best Regards,

Jenifer