I am trying to trigger an event on div overflow and display the continued contents on to a new div, Is there any way this can be achieved,
basically what I am trying to do is to display a document, page wise and every page is represented as a div and the div will have a particular height and width, so all I want to do is to display the hidden contents from the first div in a new div once that div has triggered a overflow event, any help would be appreciated.
Add the event that adjust more to your needs to your div and handle it,
Or simple catch the event and do what you want:
$( "#yourDiv" ).click(function() {
// do stuff
});
EDIT : check this links:
CHROME: http://help.dottoro.com/ljgsfkbc.php
FIREFOX: http://help.dottoro.com/ljgsfkbc.php
Related
I am trying to detect scrolling in a div which is inside a div with position:fixed;.
This div with position fixed property is being added to DOM by javascript so i am attaching event handler like this
$(document).on('scroll', '.scroll_div', function(){
console.log("scrolled!");
});
But it is not working.
Try to use, everytime AFTER, when You add new .scroll_div element to DOM.
JSFiddle
$('.scroll_div').off('scroll').on('scroll', function(){
console.log("scrolled!");
});
I have a context menu that pops up whenever a click happens at a certain div inside a container and I want it to hide if either the window element or its container is scrolled.
How can I add the 'window' element in there?
$("#tree-container").scroll(function(){
$cxtMenu.hide();
});
If i understand your question, try:
$("#tree-container").add(window).scroll(function(){
$cxtMenu.hide();
});
If not, please consider to provide a jsFiddle which replicates your issue
You can add a scroll handler directly to the window like
$( window ).scroll(function() {
//Do stuff
});
(Per "Example: To do something when your page is scrolled" of http://api.jquery.com/scroll/)
I have a div#test , with which i bind a dblclick event to opens a jquery ui dialog, now i want to open
that dialog inside a floating div ( means a div whose position is absolute and placed on the
center of the screen) when the dblclick event triggers on div#test something like :
line #1 $("#test").trigger("dblclick"); => open the dialog
line #2 $("floatingdiv").html("I want to open the dialog inside
this div after executing the line #1);
Help me? Thanks.
First put test div inside floatingdiv.
$("#test .ui-dialog-content").bind("dialogopen", function() {
// Reposition dialog, 'this' refers to the element the even occurred on.
$(this).parent('div').css('position', 'relative');
});
I have a textbox and a div below it. I want to hide the div when the user clicks outside the textbox or div.
Is there any other way other than document.click to handle that user has clicked outside. Because in some of the controls, event.stoppropagation is given, which on click wont trigger the document click event.
Thanks
// This means if you click anywhere on the document once, it'll hide the div
$(document).one("click", function() {/*Do stuff, hide div*/});
// This overrides the previous line for just the textarea and div, therefore making this block of code only apply to everything but the textarea and div
$('textbox, div').click(function(){return false;});
Since you mentioned you have event.stopPropagation() at different sections of the page on click event so document.click will not work to hide the textbox.
Why don't you use document.mousedown? It will work fine.
$(document).mousedown(function(){
$('textboxSelector').hide();
});
Make sure you stop the mousedown event propagation from textbox and its containing div.
Create an overlay div (see other questions) and then add a click event to the overlay div that hides the div below the text box and destroys the overlay div.
<script type="text/javascript">
hideDiv()
{
document.getElementById("divId").style.display = "none";
}
</script>
<input type="text" onblur='javascript:hideDiv()'>
I think this should work.
I wrote accordion script to deploy in mobile website, every thing is working fine. However I am facing one issue when the page length is increasing.
there are about 8 to 10 bars in accordion. when i am scrolling down and clicking any of the item bar to display content, page is moving to top instead of staying at current position where i have clicked.
Please advice me the solution.
below is the script
$('.acc_container').hide();
$('.acc_container1').hide();
$('.acc_trigger').click(function(){
$(this).siblings('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container').slideUp('fast');
$(this).next().siblings('.acc_container').slideDown('fast');
});
On each of your accordion's triggers which display content, which I assume are anchor tags, you need to prevent the default behavior of the event. Which in the case of anchor tags, is to take you too the href attribute of the tag. If the href attribute is set to #, clicking on the anchor tag will take you to the top of the page. So, something like this should work, calling preventDefault() on jQuery's event object, assuming .acc_trigger is the selector for all of your accordian triggers:
$(".acc_trigger").click(function(e) {
$(this).siblings('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container').slideUp('fast');
$(this).next().siblings('.acc_container').slideDown('fast');
e.preventDefault();
});
I am assuming your click might a href click if so
$("a").click(function(event) {
// do all your logic here and add the below link
event.preventDefault();
});
If that is not href
Give your .acc_container class a set height of you need like 500px or so, and an
height:600px;
overflow: hidden;
That should take carek