Have scrollbar scrolled to the bottom without using Javascript? - javascript

I am currently setting a scrollbar to show as scrolled to the bottom upon page load by using this jquery code -
$(document).ready(function() {
$('.mydiv').scrollTop($('.mydiv')[0].scrollHeight);
});
Is there a way to do this using only css? So that this scrollbar is automatically scrolled to the bottom when the user visits the page?

You can do this without javascript by using anchors in the URL and in the document, with you placing the target anchor at the bottom of the page. Though this is not really very elegant.

There is browser based extension that can help you with that.
Different browsers use different extensions:
Chrome, Safari: WebKit, IE: Trident, FF: Gecko.
Each one can have different ways to do that.
I don't know specific features of webkits, but try to google for example
::-webkit-scrollbar-track-piece:start
I know it is not a straigtforward answer, but I hope it will help you in your research.

Related

Resize the browser's width using JQuery

I'm looking for a way to resize the Chrome browser's width with a button. Preferentially using JQuery. My goal is to show the mobile version of the website to desktop users.
I know I can do this by just resizing the BODY tag (which is definitely easier) but I got curious.
I haven't found reliable answers to this question and sorry if it has already been asked.
Other ideas are always welcome.
Thanks. :)
Recent browsers (since FF7) aren't going to support window.resizeTo(x,y) unless it's a window you created that doesn't have any other tabs. This is to prevent abusive website code.
Check the notes on this MDN Window.resizeTo() help:
Since Firefox 7, it's no longer possible for a web site to change the default size of a window in a browser, according to the following rules:
You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
Like you mentioned, you can launch a new window with a specified size to preview a mobile experience. Alternatively, you could create an IFrame with a specified size:
<iframe src="/mobile" width="200" height="200">
As Pranspach mentioned you can't resize the actual chrome window, but if your site is responsive on resize you could wrap the whole site in a wrapper div and shrink that instead of body.

Hide scrollbars of a iframe with javascript (Firefox, Opera and IE)

I have a website that needs to work without javascript.
In this website I show a iframe which contains the main content of the page. Because of a no javascript requirement, I have to show the iframe initially with scrolling. I want the scrollbars when there is no javascript.
If javascript is available, I resize the Iframe. I have to because the content of the page changes. Is it possible to remove the scrollbars when the frame is resized? Chrome and Safari hide the iframe scrollbars when its contents fit, so no issues there.
Is this possible in:
Firefox 13
IE 9
Opera 12
I've tried to do the following in javascript:
var iframe = document.getElementById('planneriframe');
iframe.setAttribute('style', 'style="overflow: hidden;"');
iframe.setAttribute('verticalscrolling', 'no"');
iframe.setAttribute('scrolling', 'no"');
it does add/change all the attributes, but the scrollbar is not hidden.
Solutions taking another approach or working javascript are welcome.
UPDATE
A better link to the site: http://planner.gvb.reizenapp.nl/advice
This contains no javascript for resizing the iframe tough, buts that not really relevant I think.

Facebook Comments widget makes page jump to bottom in IE7 IE8

I have a fairly long page with the Facebook comments widget at the bottom. With this widget in place the page jumps to the bottom on loading in IE7 and IE8. Whenever I remove the widget the page loads normally. This doesn't happen on any other browser. Can anyone suggest any way to prevent this? I've tried appending the .fb-comments div and calling FB.XFBML.parse() on it on document ready, but the behaviour in this case is the same.
This is a Facebook bug. I think they are working on it. If you go to the developers area on FB is a thread discussing it.
Also occurs in IE9, no updates in the last weeks for my web applications, should be a facebook bug or IE bug

Jquery Drag and Drop problem, jump to a new page

I want to use Jquery to implement a page that contains js from quotemedia.com. After I embed the js into the sortable, when I drag and drop the element that contains the js, it jump to full page display.
This happens under Firefox, IE is ok.
The running code is here: http://jsfiddle.net/dodoflying/9BkJ5/ Please use firefox to drag and drop element shopping to see the problem.
Is is a bug under firefox? How could I solve this problem?
Thanks in advance!
Don
I don't know if it's a bug on FF or a bad implementation in IE, anyway if you don't have a problem put the JS in a seperate html and include the html page in an iframe you'll still see the iframe reloaded but not the whole page, refer for this link for more info.
iFrame reload on sortable
Edit: by the way, you don't need to connect the list to itself...it's already connected so this is not needed:
$( ".column" ).sortable({
connectWith: ".column"
});
Now back to the main issue, as you can see the iframe (or your code) will be reloaded each time you change it's order in the dom tree, so instead of using sortable..maybe you will be able to come up with a similar effect by absolutely position these DIVs and change their position (CSS top & left using JS) when dragging them but this would require A LOT of work.
I just found it could be solved by using Jquery to remove the following javascript
<script src="http://app.quotemedia.com/quotetools/miniCharts.go?webmasterId=93004&symbol='.$symbol_chart.'&toolWidth=660&chhig=130&chbg=ffffff&chln=333333&chgrd=D5DDE8&chxyc=2B5286&chtcol=2B5286&chbgch=ffffff&chbdr=2B5286&chfill=ee5E739B&chfill2=8BA9E0" type="text/javascript" language="javascript"></script>
Under both Firefox and IE, it is ok.

Display DIVs over iFrame containing Flash

I have a some trouble with iFrame.
Basically, I have drop down basic CSS menu and right underneath it I have iFrame with flash from external website.
Unfortunately whenever the menu drops down it goes underneath the iFrame.
Is there a way using jQuery , JavaScript or CSS to prevent the menu from disparaging behind the iframe?
Many Thank
Dom
You can try putting your Flash object into opaque window mode (wmode = 'opaque'), but because of the Iframe, I still expect some inconsistency.
http://www.communitymx.com/content/article.cfm?cid=e5141
You could also try coupling this with what's known as an "Iframe shim". It's definitely a hackish work-around, but one that Google themselves have used, sooo... take that as you will.
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/
iframe shimming or ie6 (and below) select z-index bug
http://www.google.com/search?q=iframe+shim
Good luck :) #Vili might still have the right idea with just hiding the Iframe when your menu opens. This is certainly the lowest level, and should probably happen for any browsers that don't support these other "fixes" (hacks).
(BTW, you can forget Z-Index helping on any platform or browser. Iframes and Flash both exist on macro-layers above the normal document flow. A DIV will never show in front of either without some finagling).
AFAICT it will always be broken on linux, since Flash doesn't play nicely with the z-index directive.
On other platforms you should be able to tweak z-index to your needs.
Maybe visibility: hidden; on the iframe, when the menu is opened?

Categories