onclick event not working with position:fixed - javascript

when i uses position:fixed the div's onclick event is not working. and this event is working with other values like static,relative etc.
My code is like below:
css:
#dialog_window_minimized_container {
position: fixed;
bottom: 0px;
left: 0px;
}
JavaScript:
<script>
var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
//Run the original initialization code
_init.apply(this, arguments);
//set some variables for use later
var dialog_element = this;
var dialog_id = this.uiDialogTitlebar.next().attr('id');
//append our minimize icon
this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id +
'-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">'+
'<span class="ui-icon ui-icon-minusthick"></span></a>');
$('#dialog_window_minimized_container').append(
'<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' +
dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() +
'<span class="ui-icon ui-icon-newwin"></div>');
$('#' + dialog_id + '-minbutton').hover(function() {
$(this).addClass('ui-state-hover');
}, function() {
$(this).removeClass('ui-state-hover');
}).click(function() {
dialog_element.close();
$('#' + dialog_id + '_minimized').show();
});
$('#' + dialog_id + '_minimized').click(function() {
$('#' + dialog_id + '_minimized').hide();
dialog_element.open();
});
};
</script>
jsp:

check if some other div or element is coming over it when you keep your element position as fixed, that's the first thing I would check for do a right click and inspect element on the position where you are clicking if you see some other element or div highlighted in the bar which shows up below then, some other div or element is covering your element.
Hope it helps

Try to give higher z-index value for the particular div and check . Might be other div covering over your position: fixed DIV

I had this problem. My element, which I added click and mouseover events, was not clickable. My element was inside a container div which was position: fixed and was positioned top: 400px;
<div class="container" style="position: fixed; top: 400px">
<div class="my-element">I have mouse events</div>
</div>
I found when I removed the top positioning my element's mouse events started working. For some reason the fixed positioning of the parent div was not "lining up" with the hit area of my element, if that makes sense. My solution was to take my element out of the fixed positioned container and to position it on it's own.
<div class="my-element" style="position: fixed; top: 400px">I have mouse events</div>
Hope this helps.

Related

Prevent children divs from moving while div toggle

I'm new and have I think very simple problem to solve.
I have 4 buttons to show/hide each panel. What should I do to prevent child divs from moving to te left while hiding some div?
I prefer them to stay at the initial position.
This is my code:
HTML:
<button class="panel-button" data-panel="panel1">1</button>
<button class="panel-button" data-panel="panel2">2</button>
<button class="panel-button" data-panel="panel3">3</button>
<button class="panel-button" data-panel="panel4">4</button>
<div class="wrapper">
<div id="panel1">1</div>
<div id="panel2">2</div>
<div id="panel3">3</div>
<div id="panel4">4</div>
</div>
JS:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggle();
});
});
CSS:
.wrapper {
overflow: hidden;
width: 420px;
}
.wrapper > div {
width: 100px;
height: 100px;
background: green;
float: left;
margin-left: 5px;
margin-top: 10px
}
Apply css rule opacity = 0; to the div, instead of hiding it.
Like this:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
pnl.css('opacity', pnl.css('opacity') == '0' ? '1' : '0');
});
Solution for clickability issue:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
if(pnl.is(':visible'))
$('<div></div>').appendTo(pnl).width(pnl.width());
else
pnl.next().remove();
pnl.toggle();
});
But still you can use another approach
You can use the visibility property in CSS to achieve this as shown in the below Fiddle link : link
JS Snippet:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
console.log($('#'+panelId).css('visibility'));
if($('#'+panelId).css('visibility') === 'hidden') {
$('#'+panelId).css('visibility','visible');
}
else {
$('#'+panelId).css('visibility','hidden');
}
});
});
The CSS visibility is designed to keep the space a DOM object occupies, but not actually rendering it. Opacity changes its appearance, but not its behavior (eg. still clickable).
So instead of .toggle(), combine visibility with jQuery's .toggleClass():
jsFiddle solution
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggleClass('hideMe');
});
});

closing a modal when clicking on a link

I'm using on my website a kind of modal overlay to display a full size image when clicking on a thumbnail.
here is my JS :
$(".mix.photos").on("click", function(){
var img = $(this).children("img").data("imagefull");
$("#modal_inner").html("<img src='"+img+"' />");
$("#modal_inner").fadeIn();
})
.mix.photos is my div containing the img.
when clicking on .mix.photos it oppens my #modal_inner wich displats the var img. (the src of the full size image is in my .data("imagefull").
it works great, but I'm trying to add a link to close the #modal_inner when clicking on it.
here is my CSS :
#modal_inner{
width: 847px;
height: 374px;
position: absolute;
top: 0px;
left: 0px;
padding-left: 120px;
background-color:rgba(187, 187, 187, 0.8);
display: none;
padding-top: 10px;
z-index: 1000;}
and my HTML :
<div id="modal_inner">
<div id="modal_close">CLOSE</div>
</div>
can anybody help me with this ?
thanks a lot
Try this.
To add close button
$(".mix.photos").on("click", function(){
var img = $(this).children("img").data("imagefull");
$("#modal_inner").html("<img src='"+img+"' />");
$("#modal_inner").fadeIn();
$('<div id="modal_close">CLOSE</div>').appendTo('#modal_inner');
});
Closing function
$(document).on('click','#modal_close',function(){
$('#modal_inner').empty().fadeOut();
})
You should be able to use the following code:
//if you want the modal to close when clicking on the modal itself:
$("#modal_inner").on("click", function(){
$(this).fadeOut();
});
//if you want the modal to close when clicking on the close button ie <div id="modal_close">CLOSE</div>:
$("#modal_close").on("click", function(){
$("#modal_inner").fadeOut();
});
you can add a link to your html markup
<div id="modal_inner">
<div id="modal_close">CLOSE</div>
My Link to Close the modal
</div>
and then do the following:
$("#modal_inner a").on("click", function(){
$("#modal_inner").fadeOut();
});
Something like this will work:
$(".mix.photos").on("click", function () {
var img = $(this).children("img").data("imagefull");
$modal = $("#modal_inner").find('.image').html("<img src='" + img + "' />").end()
.fadeIn(function() {
var self = this;
$(this).on('click', '#modal_close', function() {
$modal.off().hide();
});
});
});
You can also delegate close event to the document object, but I don't want all the clicks to be checked even when overlay is hidden.
Demo: http://jsfiddle.net/PG2Z8/

jQuery dialog - div positioned on top of dialog box inputs disabled

The problem is this:
A dialog box is opened. I click the input field of the dialog box to open a div that is absolutely positioned over the dialog box. The input cannot be interacted with.
Here is the example on Jsfiddle
You can mouse over the input and the mouse cursor will change to the 'I' icon. You can even interact with the close anchor tag on the absolutely positioned div. It's not a z-index issue. It works in jQuery UI 1.9 and older. Strangely, after the absolute div has been added to the DOM, if you append an empty div to the end of the body html (using firebug to edit the code realtime), the input works.
Any ideas?
Thanks in advance,
Bontke
$('#open_dialog').click(function (event) {
var dialog_html = '<div id="dialog_body">' +
'<input type="text" name="test1"/>' +
'</div>';
$(dialog_html).dialog({
title: 'WTF Test',
height: 110,
width: 300,
modal: 'true',
close: function () {
$(this).remove();
$('#test_div').remove();
}
});
//dialog input click
$('input[name=test1]').click(function (event) {
var html = $('<div id="test_div" style="border: 1px solid red; z-index: 10000; position: absolute; left: 45%; top: 60%; width: 235px; height: 100px; background-color: blue;"><input name="foobar"/><a id="test_close" style="color: white;" href="#">close</a><br/><span style="color: white">super awesome text</span></div>'),
body = $(document.body);
if ($('#test_div').length === 0) {
//append div to body
html.appendTo(body);
//add close functionality to test_div
$('#test_close').click(function (event) {
event.preventDefault();
//remove test_div from DOM
$(event.currentTarget).parent().remove();
});
}
});
});
The dialog_html dialog is set to modal: 'true' which means it will deactivate everything else on the page. If you remove this it removes any problems. I think you're getting mixed results because you're adding to the DOM after jQuery has made the dialog modal and you really shouldn't be able to interact with the second popup at all, but it is breaking. You may want to try making the second pop-up modal, or adding it as a child of the first dialog rather than appending it to document.body
Sorry for the delayed reply, here is the solution:
http://jsfiddle.net/aY9ms/5/
I want the dialog box to be a modal. You are right, the adding the DOM is the because of how dialog box works. And in my case, it is better to add any html to the dialog box parent for better memory clean up. And adjusting the overflow on the dialog box allows the div to float over the dialog box as I want.
Thanks for all of the feedback and help!
var $ = $j;
var dialog_html = '<div id="dialog_body">' +
'<input type="text" name="test1"/>' +
'</div>';
$(dialog_html).dialog({
title: 'WTF Test',
height: 110,
dragable: true,
width: 300,
modal: 'true',
close: function () {
$(this).remove();
$('#test_div').remove();
}
});
//dialog input click
$('input[name=test1]').click(function (event) {
var html = $('<div id="test_div" style="border: 1px solid red; z-index: 10000; position: absolute; left: 45%; top: 60%; width: 235px; height: 100px; background-color: blue;"><input name="foobar"/><a id="test_close" style="color: white;" href="#">close</a><br/><span style="color: white">super awesome text</span></div>'),
dialog_box = $('#dialog_body').parent(),
body = $(document.body);
//adjust css
dialog_box.css({'overflow': 'inherit'});
if ($('#test_div').length === 0) {
//append div to body
//html.appendTo(body);
html.appendTo(dialog_box);
//add close functionality to test_div
$('#test_close').click(function (event) {
event.preventDefault();
//remove test_div from DOM
$(event.currentTarget).parent().remove();
});
}
});

How to make Jquery UI Tabs scroll horizontally if there are too many tabs

Now the image above is an example of " too many tabs ", It appears as multiple line by default.
But I want to make it in a single line and horizontally scrollable, either adding two arrows before the beginning tab and after the last tab, or scroll automatically are OK.
I have a different approach to this issue, as I think a scroll for the tabs is counter-intuitive. I created a plugin to do a dropdown when the tabs break to a second line.
https://github.com/jasonday/plusTabs
I was recently looking for a solution to this but none of the other plugins / examples seemed to work with jQuery 1.9+, I also think that Jason's answer of creating a 'more' tab and displaying any extra tabs as a drop down provides the best UI experience, and so I expanded on his answer and created a jQuery plugin for 1.9+ that extends jQuery UI tabs, if the total width of all of the tabs exceeds the width of the tabs container then the additional tabs are grouped together in a dropdown.
You can see the JSFiddle Demo to see it in action. Try resizing your browser window to see it working.
Or you can view the full plugin code at JSFiddle.
Initialising 'Overflow Tabs' is as simple as this:
$("#tabs").tabs({
overflowTabs: true,
tabPadding: 23,
containerPadding: 40,
dropdownSize: 50
});
tabPadding is the number of pixels of padding around the text in a tab.
containerPadding is the padding of the container.
dropdownSize is the pixel size of the dropdown selector button
I have tested this on the latest versions of Chrome, Firefox, and IE. If you spot any issues or can improve this then feel free to fork it and go ahead.
Now also available on GitHub.
None of the plugins listed here quite worked for me (most are outdated and not compatible with jQuery 2.0+) but I eventually found this:
https://github.com/joshreed/jQuery-ScrollTabs
...worth adding to the list.
I've just made a very simple plugin for this. Basically you have to add one fixed length div and a moveable one to the tab navigator.
Plugin code:
(function ($) {
var settings = {
barheight: 38
}
$.fn.scrollabletab = function (options) {
var ops = $.extend(settings, options);
var ul = this.children('ul').first();
var ulHtmlOld = ul.html();
var tabBarWidth = $(this).width()-60;
ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
var leftArrow = ul.children().last();
leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
leftArrow.children('.ui-icon-carat-1-w').first().css('left', '2px');
ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
var rightArrow = ul.children().last();
rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
rightArrow.children('.ui-icon-carat-1-e').first().css('left', '2px');
var moveable = ul.find('.moveableContainer').first();
leftArrow.click(function () {
var offset = tabBarWidth / 6;
var currentPosition = moveable.css('left').replace('px', '') / 1;
if (currentPosition + offset >= 0) {
moveable.stop().animate({ left: '0' }, 'slow');
}
else {
moveable.stop().animate({ left: currentPosition + offset + 'px' }, 'slow');
}
});
rightArrow.click(function () {
var offset = tabBarWidth / 6;
var currentPosition = moveable.css('left').replace('px', '') / 1;
var tabsRealWidth = 0;
ul.find('li').each(function (index, element) {
tabsRealWidth += $(element).width();
tabsRealWidth += ($(element).css('margin-right').replace('px', '') / 1);
});
tabsRealWidth *= -1;
if (currentPosition - tabBarWidth > tabsRealWidth) {
moveable.stop().animate({ left: currentPosition - offset + 'px' }, 'slow');
}
});
return this;
}; })(jQuery);
Check it out at http://jsfiddle.net/Bua2d/
Here is a plugin for that: http://jquery.aamirafridi.com/jst/
I've also created an jQuery plugin for it here, but my main focus was on creating such structure for mobile sites that have little space and could rely also on scrolling horizontally with touch as well as control arrows.
The solution looks like the following:
I'm using Bootstrap and to implement the plugin you basically need to include:
In you HTML the following structure so the arrows can work correctly (I'm using font-awesome for them)
<div id="js_image_selection" class="horizontal-scrollable-tabs">
<div class="scroller arrow-left"><i class="fa fa-arrow-left"></i></div>
<div class="scroller arrow-right"><i class="fa fa-arrow-right"></i></div>
<div class="horizontal-tabs">
<ul role="tablist" class="nav nav-tabs nav-tabs-horizontal">
<li role="presentation" class="active"><img src="external/images/t-shirt-white.jpg"/></li>
<li role="presentation"><img src="external/images/t-shirt-orange.jpg"/></li>
<li role="presentation"><img src="external/images/t-shirt-green.jpg"/></li>
<li role="presentation"><img src="external/images/t-shirt-white.jpg"/></li>
<li role="presentation"><img src="external/images/t-shirt-orange.jpg"/></li>
<li role="presentation"><img src="external/images/t-shirt-green.jpg"/></li>
<li role="presentation"><img src="external/images/t-shirt-white.jpg"/></li>
<li role="presentation"><img src="external/images/t-shirt-orange.jpg"/></li>
<li role="presentation"><img src="external/images/t-shirt-green.jpg"/></li>
</ul>
</div>
</div>
And call in you Js:
$("#js_image_selection").horizontalTabs();
Hope it helps anyone in the future!
Cheers!
One plugin can be found here https://github.com/Casper1131/scroller
it can be used for any undordered list.
Re: André Lourenço - Great addon, just wanted to throw in a hack that needs refining that allows the scroller to resize on window resize (ie: rotate mobile device);
if(!$(".fixedContainer").length) {
ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
ul.append('<div class="leftBtn" style="width: 40px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
var leftArrow = ul.children().last();
leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
leftArrow.children('.ui-icon-carat-1-w').first().css('text-align', 'center');
ul.append('<div class="rightBtn" style="width: 40px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
var rightArrow = ul.children().last();
rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
rightArrow.children('.ui-icon-carat-1-e').first().css('text-align', 'center');
} else {
var leftArrow = $(".leftBtn");
var rightArrow = $(".rightBtn");
$(".fixedContainer").css("width", tabBarWidth);
}
Then I call it again on window resize ie:
$(window).resize(function(e){
$("#tabs").scrollabletab();
});
Not the most efficient way to do it, but it works for my testing purposes at the moment.
I created yet another plugin for this. This time using Chrome style tab-resizing behaviour.
Initialize with
$( ".tabpanel" ).tabs().tabs('overflowResize');
Demo
GitHub
There are multiple scenarios and cases to handle when showing tabs on single line.
Simple solution would be to add a div around the ui-tab-header <ul> and set the overflow as scroll. This method works out of box as the browser handles the scrolling through the tab headers. But the default scrollbar provided by browser will look odd. So you need a customize/stylish scrollbar addon. OR
To use an jQuery UI tabs extension like the below one:
Extended jQuery UI widget that offers scroll-able tab feature and does automatically handle responsive page size changes by showing navigation controls when required.
Features:
It is responsive or fluid layouts
Has support for touch swipe to scroll through tab headers in touch devices (* requires external dependency)
Fully customizable & css based styling
Supports removal of tabs using close button
No extra HTML structure changes required, it automatically enhances the markups on the fly.
https://davidsekar.github.io/jQuery-UI-ScrollTabs

Detecting div height on resize

I am trying to detect the height of a div that I am loading content into. This div does not have a specified height, as I am loading pages into it and they themselves fill up the div in different amounts. I think the code I am using is not working.
The #content div is getting the correct height on document load, however I cannot get the height when the load event is clicked.
html:
<div id="select">
<div id="menu">
<ul>
<li><a class="load" href="javascript:void(0)" id="p1">P1</a></li>
<li><a class="load" href="javascript:void(0)" id="p2">P2</a></li>
</ul>
</div>
<div id="spacer"></div>
<div id="content"></div>
css:
#content {
left: 227px;
top: 20px;
width: 703px;
padding: 0 0 100px 0;
position: absolute;
}
#spacer {
border-right: 2px solid #000000;
left: 10px;
position: absolute;
top: 710px;
width: 215px;
}
my jquery:
$(document).ready(function() {
//Load Initial Content
$("#content").html('<ul><li>Loading Content...</li></ul>')
.load("/content/" + "projects.php", null, function() {
contentHeight = $("#content").height();
selectHeight = $("#select").height();
$("#content").height(contentHeight);
$("#select").height(selectHeight);
$("#spacer").height((contentHeight - selectHeight - 40) + "px")
.css({"top": selectHeight + 40 + "px" });
});
//Load content on click function
$(".load").click(function(){
loadName = $(this).attr("id");
$("#content").html('<ul><li>Loading Content...</li></ul>')
.load("/content/" + loadName + ".php", null, function(){
contentHeight = $("#content").height();
selectHeight = $("#select").height();
$("#spacer").height(0);
if(selectHeight > contentHeight) {
$("#spacer").css({"display": "none"});
}else{
$("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" })
.height((contentHeight - selectHeight - 40) + "px");
return false;
}
});
});
});
I am getting this in firebug on load:
<div id="select" style="height: 689px;"/>
<div id="spacer" style="height: 5461px; top: 729px;"/>
<div id="content" style="height: 6190px;"/>
Now if I click on say P2, the div with content height stays the same, even though the actual content inside the div is only 625px tall; so it is not getting switched.
Unless JQuery is being super clever (and it is clever but I don't think its this clever) you aren't getting a resize event because firefox (and probably Safari) only support the resize event on the window object. IE does support the resize event on elements such as a DIV.
Hence you need a different approach:-
$(document).ready(function()
{
$("#content").html('<ul><li>Loading Content...</li></ul>')
.load("/content/" + "projects.php", null, function()
{
window.setTimeout(content_loaded, 0);
});
function content_loaded()
{
$("#content").css({"height": $("#content").height() + "px"});
}
$("#spacer").css({"height": $("#content").height() + "px"});
$(".load").click(function()
{
loadName = $(this).attr("id");
$("#content").html('<ul><li>Loading Content...</li></ul>')
.load("/content/" + loadName + ".php", null, function()
{
window.setTimeout(content_loaded, 0); });
});
$("#spacer").css({"height": $("#content").height + "px"});
});
});
Note I use the setTimeout method here because IE often lags when sorting out width and height parameters when content has changed. By using setTimeout it lets IE sort things out before the height and width properties are accessed. You could choose to remove it and pass content_loaded directly as the callback parameter to the load method.
//Get Content size after load
$("#content").bind("resize", function(){
$("#content").css({"height": $("#content").height()});
});
you're not adding the "px" to the end of the height value
//Get Content size after load
$("#content").bind("resize", function(){
$("#content").css({"height": $("#content").height() + "px"});
});
EDIT follows
got it working locally, you were missing parenthesis at the end of the height function in the click event:
$("#spacer").css({"height": $("#content").height() + "px"}); //added parenthesis enables the #spacer div to change height accordingly
hope this helps
I like to use offsetheight to detect height when one is not set.

Categories