Set page scroll top using css not jquery - css

I am working on multi view in asp web form.
For each view scroll position is not varying.It remains same that should not happens.
$('body').scrollTop(0);
is this possible with css

No. This is not possible with just using css. Because css doesn't accept expression script.

Related

How can I change the height of a dropdown box in angular?

I'm trying to adjust the scroll view hight because it's too long, any solution?
I tried to use css with no success.
As you can see in the image below, the current scroll view is too long.
Use property binding for height.you can change it run time.
In my opinion you will need to use a library to customize your dropdown. In fact this html tag is native and depends on your browser, I recommend ng-select to do this :)

Tinymce 4 inline css content applied to page instead of div only

I have a div and apply the latest version of tinymce (4.2.5) to it, including some of my websites stylesheets.
When I use the editor old fashioned way the loaded css is only applied to the div I'm attaching tinymce to. Like a charm.
But I want to use the inline: true option. When I use that all the css is applied to the complete page of the application, not only the div.
Is this expected behavior? Or should I look for another approach? My main reason to use the inline feature is that it keeps the toolbar visible on scrolling. Unfortunately tinymce loads different sets of html for the inline and fixed toolbar (for example, the menu bar and icon/tool bar are separate div's. On inline they have a parent div) so just applying the same or similar css isn't working out.
Anybody has any tips or tricks for me? Or should I accept the limitations of one or the other?
You will have to accept the limitations.
Both editor modes need different css for the UI and in inline mode it seems to be necessary to apply it to the complete page (even though you don't like that).

How to avoid text selection in web page using css?

I am developing a web application and want to block selection of any text on the web page for the user. Personally I do not like add any Javascript for this. Is it doable using CSS only?
Thanks in advance.
I believe there are css3 rules (e.g. the user-select property) but at the time of writing they are not supported in all browsers. If you're looking for tricks, here is one:
Create an overlay DIV that is same size as the disabled DIV and place it over the disabled DIV using CSS positioning. You can use simple CSS or fall back to JavaScript if you have problems in calculating width, height or position. This could be annoying for the user by the way.
demo here

How can you hide a div when CSS is disabled?

Here is the scenario: I have a div which I pre-load into a page and automatically set it's display property to hidden. I use javascript to pop-up said div. The issue is when clients have CSS disabled they can see the DIV, obviously. What is the best way to have the div (or contents of the div) display only when my javascript function is called?
The best way I could think of is passing the raw HTML to a javascript var and then loading all the HTML using javascript, however, this is a bit slow(theres a decent amount of HTML) which causes the script to break when it tries to reference DIVs that do not exist yet.
any other more elegant solutions?
Thanks
You can wrap html comment tags around it:
<!-- <div>your stuff, which should be invisible</div> -->
Or remove it completely from the DOM
http://plugins.jquery.com/plugin-tags/html-comments
Maybe, here some related stuff
If CSS is disabled, then the only way to hide the div is to remove it from the DOM.
You can set an inline style on the div (not recommended but your case is an exception anyway).
You can use JS/jQuery on page load to hide the div but it'll cause the flicker effect (div wiil be visible momentarily until the JS runs to hide it).
You want to have a div on your page when the page loads so that users without javascript can see it, perhaps to indicate them that some of the site functionalities require JS to work.
If you need to use that div exclusively with JS then having it already on the page is a bad approach imho. You should create it on the fly, at least the content.
This way you will ensure users without CSS won't see it, while still being able to show it for the rest of the people with JS enabled.
Set the height of the div you wanna hide to zero using javascript.
$('#mydiv').css("height", "0px");

CSS hover menu appearing behind pdf iframe

I am working on a web application that has a menu across the top of every page with sub menus that drop down when a menu item is hovered over. This works fine, except on one page where we are trying to show a pdf in an iframe. The hover menus all end up behind the iframe in this one case. I have tried adjusting the z-index of both the hover menu and the iframe but neither seems to work. This is occurring in both FireFox 3.5 and IE8 so far.
There are two ways my question could be solved. I can either find a way to accurately adjust the CSS so my menu appears in front of the iframe or if there is another way to show the pdf that doesn't have this issue I could do that too.
Thanks!
When I ran into this issue, I used jQuery to detach the iframe before showing the overlay (and in my case a modal too). Once the user was done with the modal/overlay, I reattached the iframe to the DOM. _viewerFrame and _viewerDiv are just some css selectors of course. In my case there was a wrapping div tag around the iframe element that made detaching and attaching easy.
// detach iframe
_frame = $(_viewerFrame).detach();
function reattach(frame) {
// append it back to the div it was in (reattaching essentially)
$(_viewerDiv).append(frame);
setButtonStates();
setViewerState();
}
function onOk() {
... // other code
reattach(_frame);
}
function onCancel() {
... // other code
reattach(_frame);
}
// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...
Hope that helps...
This is likely because PDFs are displayed in a plugin, rather than natively in the web browser. CSS will not have an effect on this, because CSS only applies to content rendered in the web browser. Google does have a system that converts PDFs to HTML for display in browsers, at which point there would be no z-index issues, but some formatting may be lost in the process, and of course it is no longer a PDF document. Unless there is some way to tell the PDF plugin itself to lower its z-index (and consider that not all users will be using the Adobe plugin, some may use Foxit or other programs) you may be out of luck.
Try position:relative and z-index adjustment to get it in front of the iframe.
You're showing a pdf in an iframe? I'm guessing it has some sort of flash viewer? If so, then make sure you set the wmode of the flash embed code appropriately.
http://kb2.adobe.com/cps/155/tn_15523.html

Resources