5
क्या पाठ इनपुट के ऊपर स्वत: पूर्ण परिणाम सेट प्रदर्शित करने का कोई तरीका है?पाठ इनपुट के ऊपर स्वत: पूर्ण मेनू कैसे रखें?
समस्या यह है कि मैं इसे एक लाइटबॉक्स एप्लिकेशन में उपयोग कर रहा हूं। पृष्ठभूमि तत्व पृष्ठों की ऊंचाई और चौड़ाई के 100% पर सेट किया जा रहा है, यह स्वाभाविक रूप से इसकी सामग्री के साथ विस्तार नहीं करेगा। इसलिए यदि टेक्स्ट बॉक्स के ऊपर की सामग्री इतनी बढ़ जाती है कि इनपुट को पृष्ठ के निचले हिस्से में मजबूर किया जाता है, और उसके बाद उपयोगकर्ता इसमें कुछ टाइप करता है, तो स्वत: पूर्ण मेनू प्रकट होता है, और इनपुट पृष्ठ के अंत में होता है, मेनू स्क्रॉलबार को
चूंकि पृष्ठभूमि तत्व (काला रंग) इसे समायोजित करने के लिए विस्तार नहीं करेगा, क्योंकि मेनू पूरी तरह से स्थित है, यह दृष्टि से बदसूरत दिखता है कि पृष्ठ का निचला भाग सफेद दिखाई देता है (वास्तविक पृष्ठ के रंग के साथ संगत) जबकि पेज के शीर्ष अंधेरे।
तो यह पूरा करने के लिए वैसे भी है, कि स्वत: पूर्ण मेनू से पहले, इनपुट की स्थिति की जांच की जानी चाहिए। यदि यह है, तो शीर्ष पर 300px से अधिक पर, मेनू इनपुट के ऊपर दिखाई देना चाहिए?
<!DOCTYPE html>
<html>
<head>
<title>Filter</title>
<link type="text/css" href="ui/ui.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.js"></script>
<style>
div.filtertab { display: inline-block; height: 30px; background:url(filter.png); border-radius: 5px; position: relative; margin: 10px 45px 10px 8px; cursor: pointer; -moz-user-select: none; box-shadow: 4px 2px 2px #aaaaaa; }
div.filtertab span.filtertext { position: relative; margin-top: 4px; margin-left: 11px; margin-right: 1px;font-family:cursive,"Comic Sans"; font-size: 0.9em; float: left; display: inline-block; }
span.arrow { display: inline-block; border-top: 5px solid transparent; width: 0px; height: 0px; border-bottom: 5px solid transparent; border-right: 8.66px solid transparent; border-left: 8.66px solid #333333; margin-left: 7px; margin-top: 10.5px; }
.dateheaders { background: url(select.png); width: 120px; height: 28px; position: absolute; top: 0px; left: 0px; border-radius: 5px; cursor: pointer; display: inline-block; z-index: 55; }
.toheader { left: 183px }
.spandatew { font-weight: bold; position: relative; top: 2px; left: 6px; color: white; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-weight: bold; color: white; font-size: 0.8em; }
div.arrow { height: 0px; width: 0px; position: absolute; display: inline-block; border-bottom: 5px solid transparent; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid white; right: 8px; top: 12px; }
input#from,input#to {width:107px;height:20px; position: relative; top: -30px; opacity: 0.01; cursor: pointer; }
input#from { left: 22px; }
input#to { left: 79px; }
div#ui-datepicker-div { left: -10px; }
div#diva1 { width: 190px; position: absolute; display: none; z-index: 10; outline: none;}
div#diva2 { width: 190px; position: absolute; display: none; z-index: 10; outline: none;}
#datecontainer { position: relative; width: 400px; height: 30px; background: red; left: 10px; }
.inpdiv { position: relative; margin-top: 6px; margin-left: 7px; background: #E2E6FF; border-radius: 3px; margin-bottom: 5px; display inline-block; float: left; margin-right: 3px; }
.inpdiv span.content { position: relative; top: 1px; left: 2px; padding: 2px 5px 6px 2px; font-size: 0.9em; display: inline-block; font-family: cursive,"Comic Sans";}
.inpdiv span.cancel { display: inline-block; border-radius: 3px; position: relative; top: 5px; margin: 3px 3px 3px 4px; height: 12px; width:12px; background: #bdbbae; cursor: pointer; }
.letter { position: absolute; display: inline-block; right: 4.4px; top: 4.7px; cursor: pointer; FONT-FAMILY: SANS-SERIF; FONT-SIZE: 0.9EM; }
div.friends { width: 400px; position: relative; overflow: hidden; border: 1px solid #4496e7; border-radius: 5px; cursor: text; height: 35px; height: auto !important; min-height: 35px; left: 5px; }
div.friends2 { margin-top: 10px; }
div.friendsc { position: relative; top: 100px; left: 350px; width: 410px; padding: 10px 0px; height: auto !important; height: 80px; min-height: 80px; background: green;}
div.clear { clear: both; width: 100%; height: 10px; }
button { position: absolute; top: 300px; left: 450px; }
input { position: relative; margin: 9px 0px 10px 10px; border: 0px solid white; float: left; max-width: 382px; }
div#outerfilter { width: 900px; background: grey; position: relative; min-height: 400px; max-height: 500px; margin:auto; top: 10px; overflow: auto; padding-bottom: 20px; }
div#innerfilter { position: relative; top: 0px; left: 0px; width: 880px; min-height: 400px;background: #eaeaea; }
.filtersection { position: relative; float: left; width: 440px; min-height: 400px; height: auto !important; }
</style>
<script type="text/javascript">
$(document).ready(function(){
(function($){
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = Math.min((testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth, o.maxWidth - 1),
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
arr = ["Soumyashree Chakraborty", "Payel","Jinia","Soujinia","Apoorva","Mona","Shamarpita","Pratik","Pranendra","Bhushan","Bijesh","Salma","Swift","Anushka","Radhe","Amol","Bardha","Sujata","Rohit","Amit","Anuradha","Amrita","Ajay","Sumil","Sachin","Sourav","Anmol","Britannia","Anamika","Priyanka"];
$("span.letter").live('click',function() {
$(this).parent().parent().find("input").focus();
$(this).parent().remove();
});
options = {
source: arr.slice(0,5),
minLength: 1,
select: function(event,ui) {
$('<span class = "inpdiv"><span class = "content">'+ui.item.value+'</span><span class = "cancel"></span><span class="letter">X</span></span>').replaceAll(this);
$("<input type='text' size='3' />").appendTo(curautocomp).focus();
event.preventDefault();
},
focus: function(e,ui) {
e.preventDefault();
},
autoFocus: true,
delay: 0
};
$("input").live("focus", function (event) {
curautocomp = $(this).parent();
$(this).autocomplete(options);
$(this).autoGrowInput({
comfortZone: 5,
minWidth: 15,
maxWidth: 382
});
});
});
</script>
</head>
<body>
<div id = 'outerfilter'>
<div id = 'innerfilter'>
<div class = 'filtersection'>
<div class="filtertab"><span class="filtertext">Filter by Forum</span><span class='arrow'></span></div>
<br />
<div class = "friends">
<input type = "text" size = "2" value = "" />
</div>
<div class="filtertab"><span class="filtertext">Not Asked by</span><span class='arrow'></span></div>
<br />
<div class = "friends">
<input type = "text" size = "2" value = "" />
</div>
<div class="filtertab"><span class="filtertext">Has No Answer by</span><span class='arrow'></span></div>
<br />
<div class = "friends">
<input type = "text" size = "2" value = "" />
</div>
<div class="filtertab"><span class="filtertext">No of Answers</span><span class='arrow'></span></div>
<br />
<div class = "friends">
<input type = "text" size = "2" value = "" />
</div>
</div>
<div class = 'filtersection'>
<div class="filtertab"><span class="filtertext">Asked by</span><span class='arrow'></span></div>
<br />
<div class = "friends">
<input type = "text" size = "2" value = "" />
</div>
<div class="filtertab"><span class="filtertext">Has Answer by</span><span class='arrow'></span></div>
<br />
<div class = "friends">
<input type = "text" size = "2" value = "" />
</div>
<div class="filtertab"><span class="filtertext">Filter by Date</span><span class='arrow'></span></div>
<br />
<div id = 'datecontainer'>
<div class = 'dateheaders fromheader'>
<span class = 'spandatew'>Select a date</span>
<div class = 'arrow'></div>
</div>
<div class = 'dateheaders toheader'>
<span class = 'spandatew'>Select a date</span>
<div class = 'arrow'></div>
</div>
<div id = 'diva1'></div>
<div id = 'diva2'></div>
</div>
</div>
<div class = 'clear'></div>
</div>
</div>
</body>
</html>
आपको कुछ डेमो या स्रोत शामिल करना चाहिए जो हम देख सकते हैं :) – OptimusCrime
स्रोत कोड बहुत बड़ा है, वहां कई सीएसएस फ़ाइलें हैं जहां से विभिन्न शैलियों को गले लगाया गया है, यह सब कुछ शामिल करना बहुत मुश्किल है! – SexyBeast
साइट ऑनलाइन उपलब्ध है? मैं समझता हूं कि आप क्या करने की कोशिश कर रहे हैं, लेकिन यह देखने के बिना समाधान ढूंढना मुश्किल है कि सब कुछ एक साथ कैसे रखा जाता है। यह पिच अंधेरे में पैरों के बिना चलने की कोशिश कर रहा है। – OptimusCrime