Why does this jQuery click event not work? - javascript

I have this HTML:
<div id="studyTestContent" class="studyTestItem">
<input type="text" class="dropInput" size="15">
<ul class="inputDrop" style="display:none;">
<li class="dropDownItem">Si</li>
<li class="dropDownItem">y</li>
<li class="dropDownItem">con</li>
<li class="dropDownItem">el</li>
</ul>
</div>
and I have this jQuery:
$('.dropInput').click(function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$(this).next().show();
$(this).next().css({
'position': 'absolute',
'right': right,
'top': top
});
});
With this function I am attempting to show the <ul> when the input is clicked. Nothing happens when I click it. Any ideas why?
Edit: I just figured out what the problem was, I am inserting the html after the page loads so I need to do:
$('.dropInput').live('click', function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$(this).next().show();
$(this).next().css({
'position': 'absolute',
'right': right,
'top': top
});
});

Make sure you wait until the document is ready with
$(document).ready(function() {
// put all your jQuery goodness in here.
$('.dropInput').click(function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$(this).next().show();
$(this).next().css({
'position': 'absolute',
'right': right,
'top': top
});
});
});

Since you are inserting the HTML into the document after the initial, you will need to use jQuery live() to bind the event to the new element.

$(this).next(":hidden").show();

Try:
$(document).ready(function(){
$('.dropInput').click(function() {
var offset = $(this).offset(),
height = $(this).height(),
width = $(this).width(),
top = offset.top + height + "px",
right = offset.left + width + "px";
$(this)
.next('.inputDrop')
.show()
.css({
'position': 'absolute',
'right': right,
'top': top
});
});
});

Related

Use JQuery to fix element from bottom of window

I found plenty of examples of fixing an element's top relative to the window. How do I fix an element X pixels from the bottom of the window? Simply changing 'top' to 'bottom' does not work (for example,if the element's height is more than the window height)
From the top:
var pixels = 10;
var $elemPosition = $element.position();
var $elementH = $element.height();
var $windowH = $(window).height();
var $bottom = $element.offset().top + $element.height();
if ($(window).scrollTop() + pixels >= $elemPosition.top) {
$element.css({
'position': 'fixed',
'top': pixels + 'px'
});
} else {
$element.css({
'position': 'relative',
'top': '0px'
});
}
Solved it! Solution I came up with:
if (($windowH + $(window).scrollTop() - $bottom - pixels) >= 0) {
$element.css({
'position': 'fixed',
'top': ($windowH - $element.height() - pixels) + 'px',
'width': $eW + 'px',
'height': $eH + 'px'
});
} else {
$element.css({
'position': 'relative',
'top': '0px'
});
}
Use the CSS bottom property instead of the top property.
$element.css({
'position': 'fixed',
'bottom': pixels + 'px'
});
According to your comments and demand :
for example,if the element's height is more than the window height
You wants something like this ?
JS
$element = $("#element");
function setPosition(){
var pixels = 10;
var $elementH = $element.height();
var $windowH = $(window).height();
if ($windowH > $elementH) {
$element.css({
'position': 'fixed',
'bottom': pixels + 'px'
});
} else {
$element.css({
'position': 'relative',
'bottom': '0px'
});
}
}
$(function(){
setPosition();
$(window).scroll(function(){
setPosition();
});
});
If you try to change the height of the element to 700px for instance, you'll see he gets relative position.

Placing cursor in the center of a child div - mousemove event

I have div that can be placed anywhere inside another div. I am able to do this with jquery mousemove event. However it is not quite working. I am trying to get the mouse cursor to be in the center of the moving div. I set these css attributes inline with jquery 'top': relY + 30,'left': relX + 10 but no luck. As mention I am trying to get the cursor in the middle of the div. The user can only place the moving inside the parent div called middle-side empty. JSFIDDLE
I am trying to accomplish something similar to this: http://jsfiddle.net/Lqebpaov/
Jquery:
$('#button').click(function (e) {
$('<div />', {
class: 'draggable ui-widget-content',
text: $('textarea').val(),
appendTo: '.middle-side',
draggable: {
containment: 'parent'
}
}).addClass('placement');
$('.middle-side').parent().mousemove(function(e){
var offset = $(this).offset();
var relX = e.pageX - offset.left;
var relY = e.pageY - offset.top;
$('.placement').css({'top': relY + 30,'left': relX + 10, 'position': 'absolute'});
})
});
$('.middle-side').on('click', function(e){
var offset = $(this).offset();
var relX = e.pageX - offset.left;
var relY = e.pageY - offset.top;
$('.placement').css({'top': relY,'left': relX, 'position': 'absolute' });
$(this).off("mousemove").find('.placement').removeClass('placement')
});
HTML
<div>
<div class="middle-side empty"></div>
</div>
This was a fun question. I updated a lot of your Javascript, and set up my own JSFIDDLE.
With this setup you should be able to resize the boxes to any height/width combination and it will work as expected. You can check out the JSFIDDLE link, but here is the updated Javascript also:
$('#button').click(function (e) {
$('<div />', {
class: 'draggable ui-widget-content',
text: $('textarea').val(),
appendTo: '.middle-side',
draggable: {
containment: 'parent'
}
}).addClass('placement');
$('.middle-side').parent().mousemove(function(e){
var offset = $(this).offset(),
relX = e.pageX,
relY = e.pageY,
$dvPlacement = $('.placement'),
pWidth = $dvPlacement.outerWidth(),
pHeight = $dvPlacement.outerHeight(),
$dvOutBox = $('.middle-side'),
oWidth = $dvOutBox.outerWidth(),
oHeight = $dvOutBox.outerHeight(),
centerY = relY - pHeight / 2,
centerX = relX - pWidth / 2,
topBorder = $dvOutBox.offset().top,
bottomBorder = $dvOutBox.offset().top + oHeight,
leftBorder = $dvOutBox.offset().left,
rightBorder = $dvOutBox.offset().left + oWidth;
$dvPlacement.css({'top': centerY + pHeight > bottomBorder ? bottomBorder - pHeight :
centerY < topBorder ? topBorder :
centerY,
'left': centerX + pWidth > rightBorder ? rightBorder - pWidth :
centerX < leftBorder ? leftBorder :
centerX,
'position': 'absolute'
});
})
});
$('.middle-side').on('click', function(e){
$(this).off("mousemove").find('.placement').removeClass('placement')
});
Change the placement offset to
$('.placement').css({'top': relY + 30,'left': relX - 75 , 'position': 'absolute'});
Demo

Toggling a absolute DIV is not working after firsttime

$('.pallete').hide();
$(document).delegate('.pick', 'click', function () {
var pos = $(this).offset();
var x = pos.left - $(window).scrollLeft() + $(this).width();
var y = pos.top - $(window).scrollTop() + $(this).height();
$('.pallete').css({
top: y + "px",
left: x + "px",
}).show();
});
$(document).delegate('.col', 'click', function () {
var pos = $(this).css('background-color');
$('.pick').css('background-color', pos);
$(this).parents('div').fadeOut();
});
Here is the fiddle, http://jsfiddle.net/zPNk3/5/.
The problem is when I click first time on .pick element the '.palette' element is shown properly. But when I click next time the same is not working.
When you do $(this).parents('div').fadeOut(), you’re fading out all <div> parents of the element. You’re only showing .pallete.
Try:
$(this).closest('.pallete').fadeOut();
It works!
Look at the row div, that should not be hidden,
$(document).delegate('.col', 'click', function () {
var pos = $(this).css('background-color');
$('.pick').css('background-color', pos);
//$(this).parents('div').fadeOut(); // this is wrong
$(this).parent().parent().fadeOut(); // fixed
});

Dynamically change height of container div when content changes height

I have a website with different sections, each set to be the height of the browser window. In some cases, the content is taller than the browser window, and I use a function to check for this and set the height of the div to be the height of its content, using the function:
$('.container').each(function() {
var _this = $(this);
var this_ = this;
var windowH = $(window).height();
var textH = $('.text', this).height();
if(windowH < textH) {
$(this).css({'height': textH + 'px'});
}
else {
$(this).css({'height': windowH + 'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var textH = $('.text', this_).height();
if(windowH < textH) {
_this.css({'height': textH + 'px'});
}
else {
_this.css('height', windowH + 'px');
}
});
});
The issue I am having is that I want to dynamically hide and show content, and when the new content is taller than the current height of the div, I want the div to expand to contain it. I am using the function,
$('#container').on('click', 'p', function () {
$(this).height('300px');
var windowH = $(window).height();
$('#container').css({
'height': ($('#container .text').height() + 'px')
});
var textH = $('#container').height();
if (windowH < textH) {
$('#container').css({
'height': textH + 'px'
});
} else {
$('#container').css('height', windowH + 'px');
}
});
but with no success. I have created a fiddle, http://jsfiddle.net/wDRzY/
Using a nested div, limit the height of the outer div and let the inner div stay the height of the content. When you need the outer div to be the height of the content, you can set the outer div height equal to the inner div height.
Although, I'm not sure why you would need to do this at all. I would suggest reading up on CSS more and using that for display purposes like this.

jquery offset() return empty string in each() in firefox 12

http://jsfiddle.net/suenot/3b3XM/1/
// in FF and IE each() don't work offset()
// $(this).offset().top return empty string
$(document).ready(function(){
var index = 0;
$('.box').each(function(){
var background = $(this).css('background');
$(this).css('background', 'none');
var height = $(this).css('height');
var top = $(this).offset().top;
$('body').prepend('<div id="box' + ++index + '"></div>');
$('#box' + index).css({
'height': height,
'background': background,
'position': 'absolute',
'z-index': '-1',
'top': top,
'width': '100%'
});
});
});​
Help me please, i can't find the solution.
I am not sure if $(this).css('background-color'); is what you want, but after updating it shows the box. See output in fiddle
$(document).ready(function(){
var index = 0;
$('.box').each(function(){
var background = $(this).css('background-color');
$(this).css('background', 'none');
var height = $(this).css('height');
var top = $(this).offset().top;
$('body').prepend('<div id="box' + ++index + '"></div>');
$('#box' + index).css({
'height': height,
'background': background,
'position': 'absolute',
'z-index': '-1',
'top': top,
'width': '100%'
});
});
});

Categories