Click here to Skip to main content
12,350,728 members (26,117 online)

JavaScript

 
AnswerRe: Tried Typescript? What's your first impressions? Pin
n.podbielski8-Oct-12 23:52
membern.podbielski8-Oct-12 23:52 
GeneralRe: Tried Typescript? What's your first impressions? Pin
Ravi Bhavnani11-Oct-12 9:00
memberRavi Bhavnani11-Oct-12 9:00 
AnswerRe: Tried Typescript? What's your first impressions? Pin
n.podbielski11-Oct-12 20:25
membern.podbielski11-Oct-12 20:25 
QuestionHow to resolve following specific bug in IE 10? Pin
Ambesha5-Oct-12 1:15
memberAmbesha5-Oct-12 1:15 
AnswerCrosspost Pin
Peter_in_27805-Oct-12 2:22
memberPeter_in_27805-Oct-12 2:22 
QuestionFind the selected radio button immediately using the 'this' variable in he javascript Pin
hiredotnet4-Oct-12 20:53
memberhiredotnet4-Oct-12 20:53 
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 
AnswerRe: fyi: accidental find: using JavaScript DOM in browser to parse a URL Pin
ziggyfish10-Oct-12 6:26
memberziggyfish10-Oct-12 6:26 
Questiongoogle map splite write problem Pin
chogrf13-Sep-12 2:48
memberchogrf13-Sep-12 2:48 
QuestionFastest way to select all elements in a *ListBox* Pin
A*****12-Sep-12 19:32
memberA*****12-Sep-12 19:32 
AnswerRe: Fastest way to select all elements in a *ListBox* Pin
BobJanova12-Sep-12 23:04
memberBobJanova12-Sep-12 23:04 
GeneralRe: Fastest way to select all elements in a *ListBox* Pin
A*****13-Sep-12 12:27
memberA*****13-Sep-12 12:27 
GeneralRe: Fastest way to select all elements in a *ListBox* Pin
A*****13-Sep-12 18:55
memberA*****13-Sep-12 18:55 
Questionjavascript _> activex passing by reference Pin
Johan000112-Sep-12 1:40
memberJohan000112-Sep-12 1:40 
AnswerRe: javascript _> activex passing by reference Pin
twseitex16-Sep-12 1:09
membertwseitex16-Sep-12 1:09 
GeneralRe: javascript _> activex passing by reference Pin
Johan000117-Sep-12 0:46
memberJohan000117-Sep-12 0:46 
GeneralRe: javascript _> activex passing by reference Pin
twseitex17-Sep-12 8:30
membertwseitex17-Sep-12 8:30 
GeneralRe: javascript _> activex passing by reference Pin
Johan000117-Sep-12 21:38
memberJohan000117-Sep-12 21:38 
GeneralRe: javascript _> activex passing by reference Pin
twseitex18-Sep-12 8:58
membertwseitex18-Sep-12 8:58 
GeneralRe: javascript _> activex passing by reference Pin
Johan000118-Sep-12 23:28
memberJohan000118-Sep-12 23:28 
GeneralRe: javascript _> activex passing by reference Pin
Johan000117-Sep-12 1:03
memberJohan000117-Sep-12 1:03 
AnswerRe: javascript _> activex passing by reference Pin
Manfred R. Bihy19-Sep-12 1:02
mvpManfred R. Bihy19-Sep-12 1:02 
GeneralRe: javascript _> activex passing by reference Pin
Johan000119-Sep-12 2:02
memberJohan000119-Sep-12 2:02 
GeneralRe: javascript _> activex passing by reference Pin
Manfred R. Bihy19-Sep-12 2:06
mvpManfred R. Bihy19-Sep-12 2:06 
GeneralRe: javascript _> activex passing by reference Pin
Manfred R. Bihy19-Sep-12 2:12
mvpManfred R. Bihy19-Sep-12 2:12 
QuestionCreate AD block functionality for my website Pin
swayam.test1.gmail10-Sep-12 19:58
memberswayam.test1.gmail10-Sep-12 19:58 

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.160621.1 | Last Updated 26 Jun 2016
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid