I have a div that contains a table. This table is dynamically updated, and is filling up with data as user is using our website.
Is it possible to force this div to always be scrolled to bottom? So that the user will always be able to see the bottom most table row that was added.
Thank you!
That would be something like
...onRowAdded = function() {
$('#myTable').animate({scrollTop: $('#myTable').attr('scrollHeight')});
};
Note, if the rows are added very often, you would want to use setTimeout with blocking variable check at the beginning to prevent scrolling down more often than twice per second or so. This technique is discussed e.g. here
UPDATE
Starting with jQuery 1.6 it is better to use .prop() instead of .attr() (see comments to this question):
onRowAdded = function() {
$('#myTable').animate({scrollTop: $('#myTable').prop('scrollHeight')});
};
Set the update element as position absolute and bottom:0
DEMO http://jsfiddle.net/Mdzmx/
Try something like it :
Create a anchor like <a id='bottomDiv'></a> and insert a javascript like this document.getElementById('bottomOfDiv').scrollIntoView(true);
I made a example here
http://jsfiddle.net/PTmpL/1/
Follow this tutorial
http://jqueryfordesigners.com/fixed-floating-elements/
but use the bottom css property to have the bottom most element, visible on the page
element{
bottom:0;
}
I'd recommend using the ScrollTo JQuery plugin. Just use
element.scrollTo('max', {axis: 'y'});
or
element.scrollTo('max', duration, {axis: 'y'});
This plugin has the added benifit of having a nice smooth scroll.
I think this could be the easy solution !!!
element.scrollTo(element.get(0).scrollHeight);
Related
jQuery Mobile 1.2.0
I generate the HTML using JavaScript ($(selector).html(content)), add it to the DOM and then display it ($.mobile.changePage()).
Then I invoke an AJAX call, get some data, and re-generate the html (but the parent element, the same $(selector), stays the same, I just change its html(...)).
At this poing the HTML is not "enhanced" by jQM, no styling applied on it.
Now according to the docs I should simply call the page() function on the parent element, i.e $(selector).page().
Other places in the docs suggest triggering the create event, i.e $(selector).trigger("create").
The problem is that non of the above two methods works - the styling of jQM is not applied.
Looking at the code of jQM, I've tried triggering the pagecreate event on that element and it does work, but, this is not documented anywhere, so I'm uncertain of it, especially concerning future releases of jQM.
At some poing in the docs I've read that I can call page() on a page only once..
Anyway, is there any concise/standard way to tell jQM to "enhance" the whole element and its child-elements? Or should I simply stay with triggering the pagecreate event?
Thank you!
To recreate a whole page use this:
$(selector).trigger("pagecreate");
This was my answer to a simmilar question: https://stackoverflow.com/a/14011070/1848600. There's an example of page recreation. Take a look, this should probably solve your problem.
What is the scope of
$(selector).trigger("create");
You should be able to add any elements on the 'pagecreate' event which comes right before 'pageshow' jqm styling is applied to elements. For example I dynamically add a header/footer like this
$(document).on('pagecreate', "[data-role=page]", function() {
var header = "<div data-role='header'>some header stuff</div>";
var footer= "<div data-role='footer'>some footer stuff</div>";
$(this).prepend(header);
$(this).append(footer);
$("[data-role=header]").fixedtoolbar({tapToggle: false});
$("[data-role=footer]").fixedtoolbar({tapToggle: false});
});
Make sure you're using jquery 1.7 or above I think that's when the on method was introduced;
It sounds like you may be generating the DOM and then changing the page, try it the other way around go to the page first then dynamically edit the dom.
EDIT
set the reload page option to true
$.mobile.changePage($(page), {reloadPage: true});
Edit 2
$(selector).children().each(function(){
$(this).trigger('create');
})
There's this website http://www.phpvideotutorials.com/ I basically wanted to get some insights on how each right and left columns expands dynamically when these respective columns are clicked and contracts from expanded state when clicked again.
I'm new to web development, at least dynamic website development using jQuery and stuff.
You can check out the source code. The (simplified) operative part is here:
var dm = $('#developermonkey');
dm.bind('click', function(e) {
dm.animate({'right' : 400 });
});
So it's binding a click event to a function, which animates the element's right CSS property.
It's done with a javascript library called jQuery http://jquery.com you can read more about it there and see examples of how it works.
This can be found from view source. Please refer this code,
HTML
<div id="left">text
<a id="lefta">click</a>
</div>
JavaScript
$('#lefta').bind('click', function(e) {
$('#left').css({'width' : 200 });
$('#left').animate({'left' : 150 }, 400);
});
Here in example I am increasing width of div also so as to explain you how jQuery css function works so that you can use to set additional css style while moving your div. Please refer following fiddle.
http://jsfiddle.net/TqCmB/
after logging on to facebook, there is a downward arrow symbol after home tab. On clicking it shows a div (?) which just appears on the existing content and on another click it disappears.
How can I make exactly such a thing?
Edit:
I followed this link from TheBlackBenzKid. One thing is clear, on clicking on the button, just 2 divs are toggled.
But AFAIK toggle takes place on mouse click. so the 'click' event should be there in the jquery code.
1) But I didn't find it. where is that?
2)there is some css that makes it possible for the menu to appear on a place without dislocating the existing content there( from the demo this is not visible, but it does happen actually). What is that css code?
There are so many ways to do these things: thefinishedbox.com/files/freebies/dropdown-gui/index.html this is a nice one that already comes with simple clean CSS look and feel
This is how i wouldve done it, but its a pretty basic solution.
div id="arrowid">▼</div>
<div id="dropdownbox" style="display:none;">Dropdownbox</div>
<script type="text/javascript">
$(document).ready(function() {
$('#arrowid').click(){
$('#dropdownbox').toggle();
});
});
</script>
this one does'nt support outside clicks, it just shows and hides when clicking the arrow. Hope it helps!
You can use .slideToggle() to achieve this effect, if you are using jQuery.
Use it to display or hide the matched elements with a sliding motion.
.slideToggle( [duration] [, easing] [, callback] )
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
callback: A function to call once the animation is complete.
Once my eraser is clicked, I want the color to hidden or shouldn't show its dropdown elements. I tried..here is my partial code.
$('#chooseEraser').mousedown(function(e){
curTool = "eraser";
checkEraser = true;
$('#color').remove();
});
Here is the link
I just tried $("#color").hide(); and it did work on your page.
Your code is just missing the # symbol.
Also, try using jQuery instead of just $: jQuery("#color").hide();. The $ shortcut might not always be available (redefined in some scopes).
I don't exactly understand your question and I don't think you're doing anything wrong in your code. But just for clarification, there are a few ways that you can hide/disable elements using jQuery:
This will hide the element but the element will continue to take up space on the page:
$('#colorId').css('visibility', 'hidden');
This will hide the element and no longer occupy any space on the page:
$('#colorId').hide();
This will disable the element:
$('#colorId').attr('disabled', 'disabled');
I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..
What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>
You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.
Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.
As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.
For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage