Jquery show() new element doesn't work properly

+1 Yannis Sp · September 23, 2014
I have a form with some elements in it and everything new is happening to input boxes(writting,deleting etc) is lagging:

Before writting to the details box(check the placeholder):

Before:/images/forum/upload/2014-09-23/27d46e343daea8419f1c5f36ec73530d.png

After writting to the details box(check again the placeholder):
/images/forum/upload/2014-09-23/8e29ae41fb56cd106ad11226e1e90c0f.png

Same thing happens if i want to display with ajax results(check that results are only 5% visible):
/images/forum/upload/2014-09-23/a4e0f08413651811246cd356fb1e64e6.png
After hover with the mouse on the results:
/images/forum/upload/2014-09-23/f9c01037e7e0864f5f0736e8ac8c1f5e.png

What is this kind of graphics "lag"?Anyone knows?

HTML CODE:


<form action="<?php echo $current_file; ?>" id="create_form" method="POST" enctype="multipart/form-data">
          <!-- input type=text elements etc -->         
</form>

Now i have a button which when i press i show() the #create_box div where i have the form with the elements

CSS CODE:


#create_box{
display:none;
position: absolute;
left:1101px;
top:55px;
bottom:5px;
background:white;
border:1px solid rgba(202, 202,202, 0.5);
-webkit-filter:drop-shadow(0 0 3px #A28AFF);
border-bottom-left-radius:5px;
border-top-left-radius:5px; 
width:262px;
height:550px;
}

#detail_input{ /*The details input box*/
font-size:12px;
padding:4px;
border-radius:3px;
border:1px solid rgba(202, 202,202, 0.5);
font:Tahoma;
background:#D4D4D4;
    color: gray;
width:150px;
height:50px;
margin-left:31px; 
margin-top:10px;
resize: none;
text-overflow:ellipsis;
}

#tags{ /*The tags input box*/
margin-left:74px;
padding:4px;
border-radius:3px;
border:1px solid rgba(202, 202,202, 0.5);
font:Tahoma;
background:#D4D4D4;
    color: gray;
width:150px;
}

#tags_box{
opacity: 0;
position: absolute;
top:300px;
left:84px;
max-height:43px;
width:158px;
background-color: white;
border:1px solid lightgray;
z-index: 3;
border-radius: 5px;
overflow-x:hidden;
overflow-y:scroll;
}

JQUERY CODE THAT HANDLES THE AJAX RESULTS:


$("#tags_btn").click(function(){
var tag = $("#tags").val();
$("#tags_box").empty();
$.post( "php/activity/create_activity/tag_search.php",{ tag:tag}, function() {


}).done(function(data) {
var result = eval(data);
if(result[0]==="No results were found"){
$("#tags_box").append('<div class="tag_result">No results found.</div>');
}else{
for (var i = 0; i <result.length; i++) {
var full_info = result.toString();
var tag_array = full_info.split(",");
var tag_id = tag_array[0];
var tag_name = tag_array[1];
    $("#tags_box").append('<div id="'+tag_id+'" class="tag_result">'+tag_name+'</div>');
}
}
$("#tags_box").css("opacity","1");
});
$("#tags_box").css("opacity","1");
});




Post a Reply

Replies

- page 2
Oldest  Newest  Rating
0 Yannis Sp · September 23, 2014
Yes actualy that fixed the problem!As i checked something with margins and paddings happened from the neighbour elements.I was not careful at all with margins,paddings etc.Now i have to do a lot of re-arrangement but hell the problem fixed!It was very mind blowing bug...
0 Phillip Drake · September 23, 2014
Anytime Yannis!
  • 1
  • 2

Javascript

107,001 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators