Given a page (x.cshtml) that has many divs in the body, I'm wondering if there is a way to collapse the whole document? as collapsing down to [html] and then expanding to [body] and my target div is a lot quicker than collapsing each div individually.
Use jQuery .hide() .show() feature
Related
When I am placing the jQuery selectmenu inside a div that has a CSS property overflow: scroll and is smaller then its content, then the dropdown menu is not following the scrolling inside the overflown div.
See the example here
https://codepen.io/Nighel123/pen/gZeQVd?editors=1000
I have found a way to fix it with this code:
$(".demo").scroll(function(){
$( "#salutation" ).selectmenu( "open" );
});
But I think this is not the best way to fix the problem since the dropdown does not seem to follow the select element precisely when I am trying the code on my computer. Additionally the dropdown menu opens when I am scrolling inside the overflown div, what is also not the expected behavior of a dropdown.
I also tried to trigger the scroll event of the window object, when the overflown div gets scrolled to fire the positioning methods of the jQuery dropdown menu. But this did not work at all.
I would like to follow the dropdown menu follow my select item more precisely with the scrolling of the overflown div. And maybe also get some less ugly hack compared to what I did above.
I found a solution with the appendTo method of the jQuery-UI selectmenu. Just append the dropdown menu to the div that is being scrolled and it works!
Currently in CKeditor, the style drop-down let you wrap content with block or inline tags.
If you select multiples lines in the editor and chose a div element in the style menu, each lines will be wrapped individually in a div element.
Is it possible to select multiple lines and then wrap them in one div?
I use inline CKEditor for editing elements on my page. So when I click into DIV with some class, CKEditor is attached to it and when it loses focus, editor instance is destroyed. I need to insert HTML element into that DIV after CKEditor instance is destroyed - to the last position of cursor before destroying editor instance. So I basicaly need to know index of cursor in edited element's HTML, as it would be taken as a plain text (for this example below it would be 25). I don't want to modify original data.
I have HTML in my DIV like this:
"some <span>text</span> wi|th <b>html</b> tags" (where "|" is cursor position)
I tried to get range and extend it to the start of editable element:
var range = editor.getSelection().getRanges()[ 0 ];
range.collapse( true );
range.setStartAt( editor.editable(), CKEDITOR.POSITION_AFTER_START );
Here range.endOffset is 3 (the same as if I didn't extend range). But even if I sum up offsets of more elements, it wouldn't solve my problem, because it exclude HTML tags.
You won't be able to use ranges if you want to use them after the editor is destroyed, because while being destroyed the editor replaces editable's inner HTML with the data and they are not the same thing.
Instead, you should create a marker for the selection before the editor is destroyed and find this marker in the data.
See this topic for ideas how to achieve that: Retain cursor position after reloading the page in CKEditor.
I have following code to put a view inside a region.
Layout.rightPanel.show(new changePasswordView());
How do I close this view as I don't have access to id?
Also it creates an empty div while rendering view. Is it possible to avoid this?
Simply call the close method:
Layout.rightPanel.close();
The only way to avoid having an extra div is to declare an enclosing tag with the tagName attribute in your view. For example, having tagName: "p" in your view will make your view get rendered within a "p" tag instead of a "div".
I've been trying to figure this out over several questions here on SO, finding out the different parts and then assembling them, but now I'm giving up.
What I'm trying do do:
The user is on a page, clicks a button and a list of content loads into a div using jQuerys .ajax. When he or she scrolls to the bottom of the div, load more content. As seen on Twitter, but this is inside a div.
I've seen examples on how to have infinite loading in scroll, but the problem is that those examples reload the entire page (it seems)
Has anyone got any idea how I can accomplish this?
As said, I cannot accomplish this using normal means.
The page is build as:
Page 1, has a div, empty until the user clicks a button.
Page 2 loads a lot of content. When the user clicks on the button on page 1, this is loaded into the div.
When the user scrolls through the div (It has overflow set to auto) and ends at the bottom of the div it should load the next page or so to speak.
Thanks in advance! :)
There are some plugins which do this for you quite well.
http://www.webdeveloperjuice.com/2010/02/24/create-infinte-scroll-effect-using-jquery-with-demo/
http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/
EDIT: Some more up to date plugins:
https://github.com/fredwu/jquery-endless-scroll
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
Use the JQuery.load() method to grab some html content and then insert it into an html element.
If you're using Paul Irish's Infinite Scroll, you can just specify a binder as one of the arguments where you have implemented infinite scroll, just like this:
$('.mydiv').infinitescroll({
binder: $(".name-of-div")
The binder is set to the document window by default, but if you specify it, you can have infinite scroll running simply inside one div on your page