Click here to Skip to main content
12,888,931 members (51,305 online)

JavaScript

 
AnswerRe: Find the selected radio button immediately using the 'this' variable in he javascript Pin
john-ph5-Oct-12 4:02
memberjohn-ph5-Oct-12 4:02 
QuestionPreventing Duplicate Form Submissions in JavaScript Pin
hiredotnet3-Oct-12 19:10
memberhiredotnet3-Oct-12 19:10 
QuestionUnit testing in JavaScript Pin
hiredotnet2-Oct-12 21:01
memberhiredotnet2-Oct-12 21:01 
AnswerRe: Unit testing in JavaScript Pin
Spiff Dog9-Oct-12 9:43
memberSpiff Dog9-Oct-12 9:43 
QuestionCreating a vertical auto-hide toolbar Pin
Chen Renjun26-Sep-12 17:02
memberChen Renjun26-Sep-12 17:02 
AnswerRe: Creating a vertical auto-hide toolbar Pin
Mohibur Rashid27-Sep-12 15:09
memberMohibur Rashid27-Sep-12 15:09 
GeneralRe: Creating a vertical auto-hide toolbar Pin
Chen Renjun27-Sep-12 15:26
memberChen Renjun27-Sep-12 15:26 
AnswerRe: Creating a vertical auto-hide toolbar Pin
jkirkerx27-Sep-12 18:06
memberjkirkerx27-Sep-12 18: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 Pin
n.podbielski28-Sep-12 6:06
membern.podbielski28-Sep-12 6:06 
GeneralRe: Creating a vertical auto-hide toolbar Pin
jkirkerx28-Sep-12 6:12
memberjkirkerx28-Sep-12 6:12 
GeneralRe: Creating a vertical auto-hide toolbar Pin
n.podbielski28-Sep-12 8:43
membern.podbielski28-Sep-12 8:43 
GeneralRe: Creating a vertical auto-hide toolbar Pin
jkirkerx28-Sep-12 9:05
memberjkirkerx28-Sep-12 9:05 
GeneralRe: Creating a vertical auto-hide toolbar Pin
n.podbielski28-Sep-12 10:44
membern.podbielski28-Sep-12 10:44 
GeneralRe: Creating a vertical auto-hide toolbar Pin
jkirkerx28-Sep-12 12:16
memberjkirkerx28-Sep-12 12:16 
GeneralRe: Creating a vertical auto-hide toolbar Pin
n.podbielski28-Sep-12 12:51
membern.podbielski28-Sep-12 12:51 
GeneralRe: Creating a vertical auto-hide toolbar Pin
jkirkerx29-Sep-12 19:24
memberjkirkerx29-Sep-12 19:24 
GeneralRe: Creating a vertical auto-hide toolbar Pin
n.podbielski29-Sep-12 22:04
membern.podbielski29-Sep-12 22:04 
QuestionFantastic site demonstrating and teaching "responsive" UI concepts using JavaScript, HTML 5, etc. Pin
BillWoodruff25-Sep-12 13:46
memberBillWoodruff25-Sep-12 13:46 
AnswerRe: Fantastic site demonstrating and teaching "responsive" UI concepts using JavaScript, HTML 5, etc. Pin
Steve Bondy7-Dec-12 12:38
memberSteve Bondy7-Dec-12 12:38 
QuestionUsing Jquery in DataList Pin
mrkeivan19-Sep-12 6:17
membermrkeivan19-Sep-12 6:17 
AnswerRe: Using Jquery in DataList Pin
jkirkerx25-Sep-12 18:01
memberjkirkerx25-Sep-12 18:01 
AnswerRe: Using Jquery in DataList Pin
gjllyl9-Oct-12 19:36
membergjllyl9-Oct-12 19:36 
QuestionHow to calculate difference between two dates Pin
Robymon17-Sep-12 23:46
memberRobymon17-Sep-12 23:46 
AnswerRe: How to calculate difference between two dates Pin
Joan Murt18-Sep-12 4:59
memberJoan Murt18-Sep-12 4:59 
Questionfyi: accidental find: using JavaScript DOM in browser to parse a URL Pin
BillWoodruff14-Sep-12 22:54
memberBillWoodruff14-Sep-12 22:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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
Web02 | 2.8.170424.1 | Last Updated 24 Apr 2017
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid