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 1
Oldest  Newest  Rating
+2 Bucky Roberts · September 23, 2014
Weird...I have never had a bug quite like that before. Did you try changing the display type? It may be causing the issue. 

http://www.w3schools.com/cssref/pr_class_display.asp
+2 Bucky Roberts · September 23, 2014
Haha what the heck? Did you try running this program on a different device? These are weird issues. 
+2 Bucky Roberts · September 23, 2014
What browser are you using?
+2 Phillip Drake · September 23, 2014
Just something to try:  Have you tried changing the parent container to position: relative?  Or if relative, change it to absolute?
+1 Yannis Sp · September 23, 2014
I think this 3 step photos will help you understand the problem better.

1)
/images/forum/upload/2014-09-23/96cc00177b425ae7fc7daeedb63df728.png

2)
/images/forum/upload/2014-09-23/eb93d80796ea372e8db17d3028ac4795.png

3)
/images/forum/upload/2014-09-23/b741da1081c4673a91e81b2f80ec65c3.png
+1 Yannis Sp · September 23, 2014
I changed the display of the main container and look what happened:
/images/forum/upload/2014-09-23/0a7341aedd2fd70ec643b1a43cd16c15.png
Buttons text dissapeared and the placeholder got crazy...Maybe is of paddings and because some elements have absolute position??WTF!!!!!!!
+1 Yannis Sp · September 23, 2014
I build my site locally with an apache server.Maybe is the browser?
+1 Yannis Sp · September 23, 2014
Fucking chrome v.37.0.2062.120 m
+1 Phillip Drake · September 23, 2014
Great!  Glad it's fixed.  I had a similar problem before that was causing a similar issue.  You always seem to have to readjust all of the padding and margins after you switch between relative and absolute but it's worth it!
+1 Yannis Sp · September 23, 2014
Yes these are huge lessons to learn! Thank you again buddy :)
And Bucky of course :)
  • 1
  • 2

Javascript

107,330 followers
About

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

Links
Moderators