How to Add div right below to the input text? - javascript

I want to develop my simple autocomplete, I'm not interested in the JQuery autocomplete Plugin.
I just want to add a dive right below the input text, this code was suppose to work, what am I doing wrong? what is the way to accomplish that?
JSFiddle
here is the code if you don't whant to open fiddle:
$("#txtSearch").keypress(function (e) {
if ($("#txtSearch").val().length >= 2) {
var pos = $("#txtSearch").position();
$('<div />', {
'html': "xxxxxxxxx xx x"
}).css({
top: pos.top,
left: pos.left,
width: '300px',
position: 'absolute',
'background-color': 'Yellow'
}).appendTo($("#txtSearch"));
}
});

Try below code,
$("#txtSearch").keypress(function (e) {
if ($("#txtSearch").val().length >= 2) {
var pos = $("#txtSearch").position();
$('<div />')
.html("xxxxxxxxx xx x")
.css({
top: pos.top + $("#txtSearch").height() + 1,
left: pos.left,
width: '300px',
position: 'absolute',
'background-color': 'Yellow'
}).insertAfter($("#txtSearch"));
}
});
DEMO: http://jsfiddle.net/uZF5g/1/

You can't append to (.appendTo) empty content model elements. Use .insertAfter (or .insertBefore) instead. You probably also want the top to at least be added to the height of the input.
http://jsfiddle.net/uZF5g/3/

$("#txtSearch").keypress(function (e)
{
if ($("#txtSearch").val().length >= 2)
{
$('#txtSearch').after('<div id="someID">');
$('#someID').html('xxxxxxx xx x')
.css({
top: pos.top,
left: pos.left,
width: '300px',
position: 'absolute',
'background-color': 'Yellow'
})
.appendTo($("#txtSearch"));
}
});

Related

How to set position with css method in jquery?

My default values for .csw-step4-price-summary div is
.csw-step4-price-summary {
width: 270px;
position: absolute;
display: inline-block;
bottom: 661px;
right: 40px;
}
When I want to do the following, it does change position to fixed, but it does not react to bottom and right values.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 220) {
$(".csw-step4-price-summary").css({
'position': 'fixed',
'bottom': '661',
'right': '140'
});
} else {
$(".csw-step4-price-summary").css({ 'position': 'absolute'});
}
});
Any suggestions why this might be happening? Thanks in advance.
Try using 'px' in the unit in the css function
$(".csw-step4-price-summary").css({
'position': 'fixed',
'bottom': '661px',
'right': '140px'
});
it's
'bottom': '661px',
'right': '140px'

stick part in a specific range

i have a container that is stick to top after a specific point.
but its not enough for me.
i have a footer in the page and when the screen is small the stick part is hiding under the footer.
i want it to stop moving down in the footer top (to stop be fixed to 0 that point but be fixed to minus number that is the substraction between them).
this is my code.
what should i add for that goal?
and when to call it?
on resize?
on ready?
etc.
thanks a lot
window.onscroll = function (event) {
fixDiv();
};
function fixDiv() {
if (getBrowserHeight().width > 1284) {
var $div = $("#Container");
if ($(window).scrollTop() > $div.data("top")) {
$('#Container').css({ 'position': 'fixed', 'top': '0' });
}
else {
$('#Container').css({ 'position': 'static', 'top': 'auto' });
}
}
}
$(document).ready(function () {
$("#Container").data("top", $("#Container").offset().top);
});
This should get you going.
Don't mind to ask for help if somehting isn't clear.
$(document).ready(function() {
$(window).scroll(function() {
var footerEl = $('footer').offset().top;
var footerTop = (footerEl - $(window).scrollTop());
var containerHeight = $('.container').height();
var footerHeight = $('footer').height();
console.log('footer', footerTop);
$('.container').removeClass('sticky');
if (footerTop <= containerHeight) {
$('.container').addClass('sticky');
$('.container').css('bottom', footerHeight);
}
});
});
body {
height: 1000px;
position: relative;
}
.container {
width: 100%;
min-height: 300px;
position: fixed;
top: 0;
background: red;
}
.sticky {
position: absolute;
top: auto;
}
footer {
width: 100%;
min-height: 500px;
position: absolute;
bottom: 0;
background: black;
}
<html>
<body>
<div class="container"></div>
<footer></footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</html>
I've tried to make as few changes to your code as possible, but there's better ways to get around this ie. using classes, like in #mhx answer. Full JavaScript below (sorry, had to remove your getBrowserHeight() as it wasn't defined):
window.onscroll = function (event) {
fixDiv();
};
function fixDiv() {
var $div = $("#Container");
var $footer = $("footer");
if ($(window).scrollTop() >= $div.data("top") && $(window).scrollTop() < $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'fixed', 'top': '0' });
}
else if ($footer.data("top") > $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}
else {
$('#Container').css({ 'position': 'static', 'top': 'auto' });
}
}
$(document).ready(function () {
$("#Container").data("top", $("#Container").offset().top);
$("footer").data("top", $("footer").offset().top);
});
Besides adding a top data attribute to your footer and defining $footer in the start of fixDiv(),I've added this to your initial if statement, to make sure that the scroll position, does not exceed the top of the footer minus the height of your div.
&& $(window).scrollTop() < $footer.data("top") - $div.height()
... and I've added this else if statement, in case it does exceed the top of the footer minus the height of your div
else if ($footer.data("top") > $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}
Here's a fiddle: http://jsfiddle.net/ds5tptay/

stick child to bottom when parent div touches the browser bottom

I want to stick child div to bottom when parent div touches the browser bottom.
P.S : This should happen when the parent div is pushed down not when scrolled down.
For example in my demo there is a content panel which is hidden. If you click on expand link you get to see the expanded content (which is pushing the bottom_content div to the bottom).
But accordion is just an example, there will be some other element which will be pushing the bottom_content div down. So I dont want to write stick function with reference to accordion.
It should stick down only when bottom_content div touches the bottom of the browser and when there is no much content in the page then the child div should stay as it is like child of the bottom_content
Parent div: bottom_content
Child div: footer
Here is my code currently used, which is not proper
$('.expandble_conetnt a').click(function(event){
event.preventDefault();
$(this).next('span').slideToggle();
});
//this is for stick to the bottom
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom: '0px', width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: '0px', width: '100%' });
}
});
DEMO
The whole idea is to handle .footer position on window scrolling, on window resizing and after .slideToggle() for the list is completed:
Fiddle.
var stickyHeaderbottom = $('.footer').offset().top;
$('.expandble_conetnt a').click(function()
{
$(this).next('span').slideToggle(function()
{
handleBottom();
});
return false;
});
$(window).scroll(function()
{
handleBottom();
});
$(window).resize(function()
{
handleBottom();
});
function handleBottom()
{
if ($(window).height() + $(window).scrollTop() < $(document).height())
{
$('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
}
else
{
$('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
}
}
Edit. Updated fiddle without weird footer jumping after list opening.
var stickyHeaderbottom = $('.footer').offset().top;
$('.expandble_conetnt a').click(function()
{
var toggledElement = $(this).next('span');
handleBottom(toggledElement.height());
toggledElement.slideToggle(function()
{
handleBottom();
});
return false;
});
$(window).scroll(function()
{
handleBottom();
});
$(window).resize(function()
{
handleBottom();
});
function handleBottom(additionalHeight)
{
var pageHeight = $(document).height();
if (additionalHeight)
{
pageHeight += additionalHeight;
}
if ($(window).height() + $(window).scrollTop() < pageHeight)
{
$('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
}
else
{
$('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
}
}
you can make js on.change to change that div position to absolute and bottom:0 left:0

disabling more that one element in a page by cover overlay

I have some elements in one page which I want to have cover overlay on those in order to disable those elements.
I have an ajax call which in success, I used the coverWithOverlay($('.disable')); to disable all the elements that have .disable class.
Here is the function:
function coverWithOverlay($element) {
var pos = $element.offset();
var $overlay = $('<div class="inside"></div>').attr({
title: 'this is disabled'
}).css({
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
top: pos.top + 'px',
left: pos.left + 'px',
width: $element.outerWidth() + 'px',
height: $element.outerHeight() + 'px'
});
$(document.body).append($overlay);
return $overlay;
}
It works if I have just one element in the page. How can I investigate that to several elements?
Some pages have one some pages have more than one elements to be disabled.
Why don't you try something like this?
function coverWithOverlay($elements) {
$($elements).each(function () {
var $element = $(this);
var pos = $element.offset();
var $overlay = $('<div class="inside"></div>').attr({
title: 'this is disabled'
}).css({
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
top: pos.top + 'px',
left: pos.left + 'px',
width: $element.outerWidth() + 'px',
height: $element.outerHeight() + 'px'
});
$(document.body).append($overlay);
});
}
Working fiddle: http://jsfiddle.net/codovations/23FtA/
That being said, jQuery BlockUI plugin will be a more generic way to do this.
Fiddle: http://jsfiddle.net/codovations/X5DfK/

Problem showing loader GIF in Internet Explorer

I'm trying to show a loader gif, on a jquery dialog(with no title bar of course) after a user clicks submit on a form.
After doing a couple of thing I came up with this: demo ,and said to myself "Finally! Success!", but when I tested it on IE (I usually use Chrome),much to my disappointment, the animation (loader.gif) didn't seem to be that animated, I mean it looked like a static image and I don't know why it works so fine in FF, Chrome and safary and it simply doesn't work in IE.
I know that gif works wonders on the jsfiddle , even If you use IE, but for some reason when I do the same on my project it doesn't :(
PS:I have no problem if you have another way of doing the same thing, as long as it also works in IE
Hope you can help me out with this.
Ok Here is how I got around it. It seems to be dependent on the time the overlay is added to the document.
Explanations:
If the image is added to chrome and FF's DOM during onclick it won't show my wait GIF... but it will show up in IE. I'm not sure as to why it shows up in IE and not ff or chrome. It could have something to do with the fact that it's added to the DOM on the fly just before a postback.
If the image is added to the DOM at page load time and just slid off the screen, I can simply move it to the proper place just before postback and it will work in FF and chrome but not in IE. IE stops the GIF from animating when doing it this way.
Works in IE
function IeWaitOverlayObj() {
var _waitoverlay = null;
var _waitImage = null;
var _isHidden = true;
this.showOverlay = function() {
if (!_waitoverlay) {
_waitoverlay =
$('<div></div>')
.css({
zIndex: '9998',
backgroundColor: '#000000',
width: $(window).width(),
height: $(window).height(),
top: '0px',
left: '0px',
position: 'absolute',
opacity: '0.5'
});
var tag = '<img alt="pleaseWait" src="../Images/wait.gif" />';
_waitImage = $(tag).css({
zIndex: '9999',
position: 'absolute',
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200,
width: '400px',
height: '150px'
});
$('body').append(_waitoverlay);
$('body').append(_waitImage);
_isHidden = false;
}
};
this.hideOverlay = function() {
_waitoverlay.hide();
_isHidden = true;
};
this.OnWindowResize = function() {
if (!_isHidden) {
_waitoverlay.css({
width: $(window).width(),
height: $(window).height()
});
_waitImage.css({
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200
});
}
}
}
Works in Chrome and FF
function WaitOverlayObj() {
var _waitoverlay = $('<div></div>');
var _waitImage = $('<img alt="pleaseWait" src="../Images/wait.gif" />');
var _isHidden = true;
$('body').append(_waitoverlay);
$('body').append(_waitImage);
_waitoverlay.css({
zIndex: '9998',
backgroundColor: '#000000',
width: $(window).width(),
height: $(window).height(),
top: '0px',
left: $(window).width() * -1,
position: 'absolute',
opacity: '0.5'
});
_waitImage.css({
zIndex: '9999',
position: 'absolute',
top: '0px',
left: '-400px',
width: '400px',
height: '150px'
});
this.showOverlay = function() {
_waitImage.css({ top: $(window).height() / 2 - 75, left: $(window).width() / 2 - 200 });
_waitoverlay.css({ top: '0px', left: '0px' });
_isHidden = false;
};
this.hideOverlay = function() {
_waitImage.css({ top: '0px', left: '-400px' });
_waitoverlay.css({ top: '0px', left: $(window).width() * -1 });
_isHidden = true;
};
this.OnWindowResize = function() {
if (!_isHidden) {
_waitoverlay.css({
width: $(window).width(),
height: $(window).height()
});
_waitImage.css({
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200
});
}
}
}
And in my Document.Ready
if (navigator.appName == "Microsoft Internet Explorer") {
wait = new IeWaitOverlayObj();
}
else{
wait = new WaitOverlayObj();
}
Base64-encode the image into your CSS. IE8 continues to animate it then.
window.onbeforeunload = function() { jQuery("img").attr("src", "image.gif") }; should work. I didn't check it now but the idea is the same I successfully used sometime ago

Categories

Resources