Click here to Skip to main content
       

JavaScript

 
AnswerRe: Tried Typescript? What's your first impressions? Pinmembern.podbielski9-Oct-12 0:52 
GeneralRe: Tried Typescript? What's your first impressions? PinmemberRavi Bhavnani11-Oct-12 10:00 
AnswerRe: Tried Typescript? What's your first impressions? Pinmembern.podbielski11-Oct-12 21:25 
QuestionHow to resolve following specific bug in IE 10? PinmemberAmbesha5-Oct-12 2:15 
AnswerCrosspost PinmemberPeter_in_27805-Oct-12 3:22 
QuestionFind the selected radio button immediately using the 'this' variable in he javascript Pinmemberhiredotnet4-Oct-12 21:53 
AnswerRe: Find the selected radio button immediately using the 'this' variable in he javascript Pinmemberjohn-ph5-Oct-12 5:02 
QuestionPreventing Duplicate Form Submissions in JavaScript Pinmemberhiredotnet3-Oct-12 20:10 
QuestionUnit testing in JavaScript Pinmemberhiredotnet2-Oct-12 22:01 
AnswerRe: Unit testing in JavaScript PinmemberSpiff Dog9-Oct-12 10:43 
QuestionCreating a vertical auto-hide toolbar PinmemberChen Renjun26-Sep-12 18:02 
AnswerRe: Creating a vertical auto-hide toolbar PinmemberMohibur Rashid27-Sep-12 16:09 
GeneralRe: Creating a vertical auto-hide toolbar PinmemberChen Renjun27-Sep-12 16:26 
AnswerRe: Creating a vertical auto-hide toolbar Pinmemberjkirkerx27-Sep-12 19:06 
I have one for the left side, the right side required some heavy math to calculate the right side position for the tab and the flyout panel, to align with the right side of the form.
 
I thinking about posting some code to help out, but every circumstance if different. It's actually a combo of jquery and javascript, and i'm afraid you won't understand it.
 
It takes a panel you create in asp.net at left -360px with the id of "_ib_ProductEditor_Toolbox_Next", create a event bind in the dom for click, loads up dynamic html for a progress wheel, and then loads data, parts list, and fly's out to the right using animation. Requires Jquery 1.6 something. it makes a close link in the upper right, and create another bind, to animate the close back to -360px.
 
It should give you and idea of how to start yours at least.
 
// Binding when the dom is ready
$(document).ready(function () {
    // Product Editor Toolbox Tabs
    $('[id*="_ib_ProductEditor_Toolbox_Next"]').click(function () {
        toolbox_ProductItem_Next_MouseOver();
        return false;
    });
});
 
function toolbox_ProductItem_Next_MouseOver() {
 
    var panelPosition = $('[id*="_panel_ProductEditor_ToolBox_Next"]').css("left");
    if (panelPosition == "32px") {
        unload_Navigator_Tab();
    }
    else if (panelPosition == "-360px") {
 
        var table_Navigator_Container = document.createElement("table");
        table_Navigator_Container.id = "_table_Navigator_Container";
        table_Navigator_Container.cellSpacing = 0;
        table_Navigator_Container.cellPadding = 0;
        table_Navigator_Container.style.width = "320px";
        table_Navigator_Container.style.margin = "15px";
        table_Navigator_Container.style.backgroundColor = "rgb(217,215,197)";
        table_Navigator_Container.style.borderRadius = "12px";
        table_Navigator_Container.style.border = "solid 2px rgb(176,167,144)";
 
        var tr_Navigator_Container_Close = table_Navigator_Container.insertRow(-1);
        var td_Navigator_Container_Close = document.createElement("td");
        td_Navigator_Container_Close.style.width = "100%";
        td_Navigator_Container_Close.style.height = "16px";
        td_Navigator_Container_Close.style.textAlign = "right";
        tr_Navigator_Container_Close.appendChild(td_Navigator_Container_Close);
 
        var lb_Navigator_Close = document.createElement("a");
        lb_Navigator_Close.id = "toolbox_close";
        lb_Navigator_Close.style.color = "rgb(0,0,0)";
        lb_Navigator_Close.style.fontSize = "0.8em";
        lb_Navigator_Close.style.textDecoration = "underline";
        lb_Navigator_Close.style.paddingRight = "25px";
        lb_Navigator_Close.style.cursor = "hand";
        lb_Navigator_Close.style.cursor = "pointer";
        lb_Navigator_Close.innerText = "Close Panel";
        lb_Navigator_Close.innerHTML = "Close Panel";
        td_Navigator_Container_Close.appendChild(lb_Navigator_Close);
 
        var tr_Navigator_Container_Title = table_Navigator_Container.insertRow(-1);
        var td_Naviator_Container_Title = document.createElement("td");
        td_Naviator_Container_Title.style.width = "100%";
        td_Naviator_Container_Title.style.height, "32px";
        td_Naviator_Container_Title.style.textAlign = "left";
        tr_Navigator_Container_Title.appendChild(td_Naviator_Container_Title);
 
        var span_Navigator_Container_Title = document.createElement("span");
        span_Navigator_Container_Title.style.color = "rgb(0,0,0)";
        span_Navigator_Container_Title.style.fontSize = "1.2em";
        span_Navigator_Container_Title.style.fontWeight = "bold";
        span_Navigator_Container_Title.style.letterSpacing = "-1px";
        span_Navigator_Container_Title.style.paddingLeft = "10px";
        span_Navigator_Container_Title.innerText = "Quick Navigator";
        span_Navigator_Container_Title.innerHTML = "Quick Navigator";
        td_Naviator_Container_Title.appendChild(span_Navigator_Container_Title);
 
        var tr_Navigator_Container_Content = table_Navigator_Container.insertRow(-1);
        var td_Naviator_Container_Content = document.createElement("td");
        td_Naviator_Container_Content.style.width = "100%";
        td_Naviator_Container_Content.style.height, "490px";
        td_Naviator_Container_Content.style.textAlign = "center";
        td_Naviator_Container_Content.style.valign = "top";
        td_Naviator_Container_Content.style.paddingTop = "10px";
        td_Naviator_Container_Content.style.paddingBottom = "10px";
        tr_Navigator_Container_Content.appendChild(td_Naviator_Container_Content);
 
        var panel_Navigator_Container_Content = document.createElement("div");
        panel_Navigator_Container_Content.id = "_panel_Navigator_Container_Content";
        panel_Navigator_Container_Content.style.width = "320px";
        panel_Navigator_Container_Content.style.height = "470px";
        panel_Navigator_Container_Content.style.verticalAlign = "top";
        panel_Navigator_Container_Content.style.overflowX = "hidden";
        panel_Navigator_Container_Content.style.overflowY = "scroll";
        panel_Navigator_Container_Content.style.textAlign = "center";
        panel_Navigator_Container_Content.style.margin = "2px auto";
        //panel_Navigator_Container_Content.style.border = "solid 1px red";
        td_Naviator_Container_Content.appendChild(panel_Navigator_Container_Content);
 
        var table_Container_Progress = document.createElement("table");
        table_Container_Progress.cellpadding = 0;
        table_Container_Progress.cellspacing = 0;
        table_Container_Progress.style.width = "100%";
        panel_Navigator_Container_Content.appendChild(table_Container_Progress);
 
        var tr_Container_Progress_Image = table_Container_Progress.insertRow(-1);
        var td_Container_Progress_Image = document.createElement("td");
        td_Container_Progress_Image.style.width = "100%";
        td_Container_Progress_Image.style.height = "180px";
        td_Container_Progress_Image.style.textAlign, "center";
        td_Container_Progress_Image.style.verticalAlign = "Bottom"
        tr_Container_Progress_Image.appendChild(td_Container_Progress_Image);
 
        var img_Navigator_Container_Progress = document.createElement("img");
        img_Navigator_Container_Progress.src = $('[id*="_txt_ProductEditor_ProgressIndicator"]').val();
        td_Container_Progress_Image.appendChild(img_Navigator_Container_Progress);
 
        var tr_Container_Progress_Message = table_Container_Progress.insertRow(-1);
        var td_Container_Progress_Message = document.createElement("td");
        td_Container_Progress_Message.style.width = "100%";
        td_Container_Progress_Message.style.height = "320px";
        td_Container_Progress_Message.style.textAlign, "center";
        td_Container_Progress_Message.style.verticalAlign = "top";
        tr_Container_Progress_Message.appendChild(td_Container_Progress_Message);
 
        var span_Navigator_Container_Message = document.createElement("span");
        span_Navigator_Container_Message.style.fontSize = "1.4em";
        span_Navigator_Container_Message.style.fontWeight = "bold";
        span_Navigator_Container_Message.innerText = "Loading Items";
        td_Container_Progress_Message.appendChild(span_Navigator_Container_Message);        
 
        $('[id*="_panel_ProductEditor_ToolBox_Next"]').empty();
        $('[id*="_panel_ProductEditor_ToolBox_Next"]').append(table_Navigator_Container);
        
        $('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ "left": "32px" }, 300);
        $('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ backgroundColor: "rgb(51,51,51)" }, 300);
 
        if (panelPosition != "32px") {
            $('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ "left": "32px" }, 300);          
        }
            
        load_Navigator_Tab();
 
        $("#toolbox_close").click(function () {
            unload_Navigator_Tab();
            return false;
        });       
    }    
 }
 
 function unload_Navigator_Tab() {
 
    $('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ backgroundColor: "rgb(32,32,32)" }, 300);
    $('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ "left": "-360px" }, 300);    
 
}
 


GeneralRe: Creating a vertical auto-hide toolbar Pinmembern.podbielski28-Sep-12 7:06 
GeneralRe: Creating a vertical auto-hide toolbar Pinmemberjkirkerx28-Sep-12 7:12 
GeneralRe: Creating a vertical auto-hide toolbar Pinmembern.podbielski28-Sep-12 9:43 
GeneralRe: Creating a vertical auto-hide toolbar Pinmemberjkirkerx28-Sep-12 10:05 
GeneralRe: Creating a vertical auto-hide toolbar Pinmembern.podbielski28-Sep-12 11:44 
GeneralRe: Creating a vertical auto-hide toolbar Pinmemberjkirkerx28-Sep-12 13:16 
GeneralRe: Creating a vertical auto-hide toolbar Pinmembern.podbielski28-Sep-12 13:51 
GeneralRe: Creating a vertical auto-hide toolbar Pinmemberjkirkerx29-Sep-12 20:24 
GeneralRe: Creating a vertical auto-hide toolbar Pinmembern.podbielski29-Sep-12 23:04 
QuestionFantastic site demonstrating and teaching "responsive" UI concepts using JavaScript, HTML 5, etc. PinmemberBillWoodruff25-Sep-12 14:46 
AnswerRe: Fantastic site demonstrating and teaching "responsive" UI concepts using JavaScript, HTML 5, etc. PinmemberSteve Bondy7-Dec-12 13:38 
QuestionUsing Jquery in DataList Pinmembermrkeivan19-Sep-12 7:17 
AnswerRe: Using Jquery in DataList Pinmemberjkirkerx25-Sep-12 19:01 
AnswerRe: Using Jquery in DataList Pinmembergjllyl9-Oct-12 20:36 
QuestionHow to calculate difference between two dates PinmemberRobymon18-Sep-12 0:46 
AnswerRe: How to calculate difference between two dates PinmemberJoan Murt18-Sep-12 5:59 
Questionfyi: accidental find: using JavaScript DOM in browser to parse a URL PinmemberBillWoodruff14-Sep-12 23:54 
AnswerRe: fyi: accidental find: using JavaScript DOM in browser to parse a URL Pinmemberziggyfish10-Oct-12 7:26 
Questiongoogle map splite write problem Pinmemberchogrf13-Sep-12 3:48 
QuestionFastest way to select all elements in a *ListBox* PinmemberA*****12-Sep-12 20:32 
AnswerRe: Fastest way to select all elements in a *ListBox* PinmemberBobJanova13-Sep-12 0:04 
GeneralRe: Fastest way to select all elements in a *ListBox* PinmemberA*****13-Sep-12 13:27 
GeneralRe: Fastest way to select all elements in a *ListBox* PinmemberA*****13-Sep-12 19:55 
Questionjavascript _> activex passing by reference PinmemberJohan000112-Sep-12 2:40 
AnswerRe: javascript _> activex passing by reference Pinmembertwseitex16-Sep-12 2:09 
GeneralRe: javascript _> activex passing by reference PinmemberJohan000117-Sep-12 1:46 
GeneralRe: javascript _> activex passing by reference Pinmembertwseitex17-Sep-12 9:30 
GeneralRe: javascript _> activex passing by reference PinmemberJohan000117-Sep-12 22:38 
GeneralRe: javascript _> activex passing by reference Pinmembertwseitex18-Sep-12 9:58 
GeneralRe: javascript _> activex passing by reference PinmemberJohan000119-Sep-12 0:28 
GeneralRe: javascript _> activex passing by reference PinmemberJohan000117-Sep-12 2:03 
AnswerRe: javascript _> activex passing by reference [modified] PinmvpManfred R. Bihy19-Sep-12 2:02 
GeneralRe: javascript _> activex passing by reference PinmemberJohan000119-Sep-12 3:02 
GeneralRe: javascript _> activex passing by reference PinmvpManfred R. Bihy19-Sep-12 3:06 
GeneralRe: javascript _> activex passing by reference PinmvpManfred R. Bihy19-Sep-12 3:12 
QuestionCreate AD block functionality for my website Pinmemberswayam.test1.gmail10-Sep-12 20:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.


Advertise | Privacy | Mobile
Web04 | 2.8.141220.1 | Last Updated 22 Dec 2014
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid