How to change the default behavior of the ThickBox? - thickbox

I am using Thickbox in one page,
now as u know, if we click out side the thickbox page [means in the black part],
so i want to remove that behavior, i want to remove that thing....means if the user had click out side of that page in dark part then the page should not be remove-disappear, it should stay in the window..
the only way to close the thickbox page by clicking on that "Close" link,
so is their any way to do this?
thanks in advance,
Nitz.

I know this is an old question but i found another way to do it without changing thickbox source code, after i launch the thickbox window, i do the following:
tb_show('', 'website.php?inlineId=hiddenModalContent&TB_iframe=true');
jQuery("#TB_overlay").off('click');
This removes the click action, so it becomes like a modal window without losing the titlebar.

In the Thickbox.js go to the function tb_show
In this if statement:
if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
$("body","html").css({height: "100%", width: "100%"});
$("html").css("overflow","hidden");
if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(tb_remove); //Remove me
}
}else{//all others
if(document.getElementById("TB_overlay") === null){
$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(tb_remove); //Remove me
}
}
You need to comment out both lines that contain $("#TB_overlay").click(tb_remove);. I have added a comment of //Remove Me on the lines you should comment out.

This could help you :-)
$("#TB_overlay").unbind("click",tb_remove);

Related

Hide edit tab in editform.aspx page for a list?

Based on client requirement, we have customized list editform.aspx page. By default when user lands on that page, edit tab is expanded. We do not want anyone to see the ribbon on page load. We do not want to hide s4-ribbonrow. Currently I am using This article to hide the edit tab on page load. But this takes lot of time (5 seconds).
Is there any other way that we can achieve this and still be fast? Please let me know your thought on this.
Environment: SharePoint Online
Thanks for all your help!
Try to use this css:
#Ribbon\.ListForm\.Edit {
display: none;
}
#Ribbon\.ListForm\.Edit-title {
display: none;
}

Orchard Navigation - how to make menu link not clickable

I have following menu navigation:
home
product
product 1
product 2
news
press releases
about us
Every menu item above links to a Content, except "product".I need to make it so when the user click "product" would not go anywhere.
I tried to use "Custom Link", and enters "#" or "javascript:void(0)" in the url, however that does not work since Orchard always prefix the url with "/".
Also, I tried to use "Html Menu Item" and enter "product" in the html body, but always rendered as
<li><span class="raw"><p>product</p></span><ul>...</ul></li>
I want either following:
<li>product<ul>....</ul></li>
or
<li>product<ul>....</ul></li>
Is there an easy way to do this?
In the Menu.cshtml file under the Core->Shapes->Views directory in the Orchard.Web project, you could do this:
$(document).ready(function () {
$("#Nav a").click(function(e) {
e.preventDefault();
});
});
The above disables clicking on all of your menu links, so if you want to prevent clicking on the second level menu items:
$('#Nav li ul li a').click(function(e){
e.preventDefault();
});
That Menu.cshtml file is the view for your navigation menu, so you can define it's behavior as you wish there. You can look at this answer of mine as well.
You may do as Mohammad says, but create an alternate Menu.cshtml in your Theme. It is bad practise to modify Orchards core code.

How to hide View in Browser in document library in sharepoint 2010 using javascript or jquery

I had integrated Office Web Apps in sharepoint 2010. When Document is selected from document Library in context menu I want to hide Option View in Browser and Edit in Browser Option from Document Library.
Is is possible using jquery or javascript If yes can any tell me how ?
I used following css to hide but it only hide Delet option not View in Browser Option
li.ms-MenuUIULItem[text~=Delete]
{
display: none;
}
So I also Modified it as follows
li.ms-MenuUIULItem[text~=View in Browser]
{
display: none;
}
It also didn't work.
Can anyone help me for that ?
It is better to do it with features than doing it with javascript.
You have to create a feature with a HideCustomAction element in it.
The element structure is like this:
<HideCustomAction
GroupId = "[GroupId]"
HideActionId = "[HideActionId]"
Id = "...."
Location = "....">
</HideCustomAction>
And here is a link that will help you find your required actions Id:
http://www.sharepointarchitects.us/johnholliday/post/0001/01/01/how-to-find-customaction-identifiers/
I have created it using jquery
$(document).ready(function(){
$('.ms-MenuUIPopupBody').live('blur', function() {
var elm = $("div.ms-MenuUIULItem a:contains('View in Browser')");
elm.remove();
$("div.ms-MenuUIULItem a:contains('Edit in Browser')").remove();
});
});
It is hiding menu only on focus or blur or mouseover
I wants it to be hide on load AS soon as i Click on "V" option on right side of document it should hide View in Browser and Edit in browser
When I click on V option ![I wants As soon as i Click on v option right side of test it should hide view in Browser and edit in browser][1]

floating popup.html div

I noticed that the Buffer app for chrome does things a little differently with a floating div when the extension icon is clicked. How is this achieved?
I don't believe they do this in a new window since I am not seeing an addition window being spawned.
Basically what I need is a thickbox to be displayed when the icon is clicked.
Any insight on how this is done would be appreciated.
They're using an api from that background page, to listen to the click event for when the browser action button gets clicked.
Here's a link to that API page:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {'file': 'createPopup.js'}, function callBackStub(){})
});
createPopup.js
You're html will be in a string. I personally recommend writing this like this:
var widgetHtml =
'<div id="main"> '+
' <p>some stuff goes here</p>'+
'</div>';
Then as your html grows, you can do a column edit of the beginning quote and end '+
Ok, now what you'll want to do is put your html in an iframe, but without setting a src property. Like this:
var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2
iframe.contentDocument.body.innerHTML = widgetHtml;
WHY? So your stuff doesn't take on styles from the rest of the page.
Um, and then you can do a translateX or transition left/right position to slide the element into the page.

Tab key behavior in browser edit control

Web browsers are good as thin clients for web applications.
But if the user has to enter some code (where tabs and formatting are important) in an edit box, inside a web browser, he navigates through the webpage controls every time he hits the "tab" key, instead of printing the "tab" character.
Are there any free web controls or is there any code to get the opposite behavior?
Google Docs does this perfectly.
Thanks.
Yahoo UI library has a rich text editor that handles tab characters properly.
EDIT: I suspect (because I haven't looked) that both the YUI editor and Google's editor accomplish this by adding a onKeyPress handler to the text container. When they detect a tab character they append a tab to the container and return false to cancel the normal tab action.
You can filter the keyDown event and catch the tab key:
<html>
<body>
<script type="text/javascript">
function keyFilter(e, field) {
var key = window.event ? e.keyCode : e.which;
if (key == 9) {
field.value += "\t";
return false;
}
return true;
}
</script>
<form>
<textarea onkeydown="return keyFilter(event, this);"></textarea>
</form>
</html>
EDIT: Note that it's of course more complicated than this. One needs to keep track on where in the text the tab key is pressed and insert the character accordingly.

Resources