Re: Creating a vertical auto-hide toolbar - JavaScript Discussion Boards

If you question is if it is possible in Javascript?

My Answer is yes quite possible. As a matter of fact you just gave me the idea. I will implement this for my in house application today.

For your help:
read about
1. CSS visibility
2. OnMouseOver action
3. OnMouseOut action

I wish I could believe there is an after life.

Ok, thanks for your help.

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);    

}

Oh men! Why your simple auto-hide panel is so complicated? 2 css classes and maybe one ajax for dynamic loading of content should be enough! OMG | :OMG:

No more Mister Nice Guy... >: |

It auto loads a product database based on filters, so you don't have to leave the page to edit a product SKU with over 100 fields.

It's what evolved after hundreds of complaints from the initial simple ones we made in the beginning.

Ok. I understand that but why not replace those hardcoded styles with css classes and jQuery().addClass("xxx")?
Why you using selector: panel_ProductEditor_ToolBox_Next? Its obviously part of asp.net generated id. Why not set CssClass property just for selecting?
Than you have clear selector that will not change when you edit parent container(s)?
Why you setting both innerText and innerHtml? For simple string like "Close Panel" one from them is enough and they mean the same?
For simple case like in question this is achievable with single css rule:

CSS

.parent-container:hover .autohider{
 display:block;
}
.parent-container .autohider{
 display:none;
}

and html

HTML

<div class="parent-container">
<div class="autohider">
some hider content
</div>
</div>

I don't say that it's wrong. Just overcomplicated.

No more Mister Nice Guy... >: |

It's part of a back end application, that controls the front end of the website.

Customers were changing the css and messing it up, so we just hard coded the fonts. Got tired of having to fix it all on every installation.

We just use css names now for jquery on certain modules, so we can do a mass edit using each on css types. It appeared to be more effective and faster in speed.

on the innertext versus innerhtml, that's something I'm still messing with. It dates back to earlier in the year with compatibility issues between IE, Firefox, it use to be 2 different scripts, but I tried to combine them into one. Still working on that, and help was hard to find.

That script is still experimental, and is the 5th revision of it. At least the complaints went away on it, and it renders correctly every time, on both browsers and versions. It can use more optimization, but the speed and performance of the fly out tab is quite impressive and very reliable.

Feel free to suggest some optimizations, and I'll rewrite that module in October using your feedback.

So it's customer doings... I should suspect that.
In that case. Maybe you should consider using css from webresource.axd as part of some assembly. Just like DevExpress. But it is harder to maintain and deploy than just simple css file.
But maybe it can suit your situation.

I was also experimenting in doing something like this purely in css. It's posible, but seems to work for now nice only in FF. It's works like flag on/off in IE, Opera. In Chrome looks like crap.
But maybe you can do something with that:
http://jsfiddle.net/LnbuM/[^]

Another idea: http://jqueryui.com/demos/hide/[^]
But since this framework uses css as well and your customer is breaking that...

But this not change fact that you hardcoded part of asp.net id into js. I stumble on bugs coming from that few times. In current project I created in aspx file js object containing aspx controls ids for selecting them from jQuery. I benefit from compilation of pages:

HTML

<script>
var selector = '<%=control.ClientId%>'
</script>

but it's have to be separated from main js script in .js file.
So next time i will use some css class to avoid this separation.

But mainly i would cut if parts with "-360px" and use some predefined even only for this (without css rules). jQuery().hasClass(), addClass, toggleClass, removeClass functions are specifically for something like this. Since you have in auto hider only 2 states (visible/not visible) you can toggle this in single event:

JavaScript

$('.autohider').toggleClass('visible');

As for innerText/Html. What differences between browsers you have found? I am not specification expert. But it's pretty basic. Text sets text, and html set html. If it's not in all browsers, use
$().text and $().html functions.

Creating elements? I would rather use

JavaScript

$('.container').append('<td style="someStyle">someText</td>')

. It's hardcoded to but for me easier for eyes and cause of that for maintain.

Maybe I sound like jQuery fan boy, but why you should reinvent the wheel since jQuery folks done that before and it's works? I think they wheel is more... round then yours or main.
Wink | ;)

No more Mister Nice Guy... >: |

I found that IE has a different way or syntax for creating html in the dom. Firefox, Safari was pretty straight forward, but IE used table.insertRow(-1), and InnerText instead of InnerHTML. So I spent a week looking at the difference between the two, and found that you can set stuff, but it won't work or produce an error unless it's way off base. So IE just ignores InnerHTML, but picks up InnerText. Go Figure?. I didn't want to mess with more asp.net elements, so I just made them in Javascript. The main point was that if it's even used, then it's created on the fly by the client, if not, there's no extra asp.net code needed.

Drove me nuts!

So the big picture here, is that it's a very small piece of code in a large Server DLL Control (6 megs). The script is embedded, and everything is code behind.

The hard coded id is on the asp.net side, the jquery uses a wildcard for the id, in which the prefix can be anything, as long as the suffix matches. So masterpages are not a problem.

I didn't think of using CSS at the time, just wrote it all in mostly javascript. I suppose there are a dozen ways to do it.

I use to type out the HTML like your example and append it, just thought I would try something different this time. The createElement seems a little faster than just appending text.

I'm amazed at really fast it runs, so I'm going to stick with it for now.

jkirkerx wrote:
I'm amazed at really fast it runs, so I'm going to stick with it for now.

Just out of curiosity how did you tested it?

No more Mister Nice Guy... >: |

Visual test, plus count 1 one thousand, 2 one thousand,

It was quite obvious compared to the previous version, may be it was better tsql, no wrote that last.

Ok. Thanks. Smile | :)

No more Mister Nice Guy... >: |

Hi, I recently mentioned this site on a Lounge post, but I feel it's so relevant to the area of "responsive design," using the web-centric tools, JavaScript + jQuery, HTML 5, CSS 3, etc., that it really deserves mention, again, here.

Brad Frost's site, "This is Responsive:" [^]: this is perhaps the best site in this area I've come across.

Check out his UI demonstrations, as well as his source-code, and fluently expressed comments and explanations.

best, Bill

"Takuan Sōhō died in Edo (present-day Tokyo) in December of 1645. At the moment before his death, Takuan painted the Chinese character 'meng' ("dream"), laid down his brush and died."

Thanks for this Bill, looks like some good stuff there.

Steve

Hey guys, I'm new to Jquery and I'm trying to use

jCapSlide

in a datalist,

ASP.NET

<asp:DataList ID="DataListList" runat="server" DataSourceID="ObjectDataSourceList"
                    RepeatColumns="5" CellPadding="5" CellSpacing="5" 
                    OnItemDataBound="DataListList_ItemDataBound">
                    <ItemTemplate>
                        <div id="capslide_img_cont" class="ic_container">
                            <asp:Image ImageUrl='<%#Eval("Images.Image.Virtual_FileName") %>' ID="MainImage"
                                CssClass="NewsImage1" runat="server" />
                            <div class="overlay" style="display: none;">
                            </div>
                            <div class="ic_caption">
                                <p class="ic_category">
                                    '<%# Eval("Category.cName")%>'</p>
                                <h3>
                                    '<%# Eval("pTitle") %>'</h3>
                                <p class="ic_text">
                                    '<%# Eval("pTitle") %>'
                                </p>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:DataList>

with this Function

JavaScript

<script type="text/javascript">
    $(function () {
        $("#capslide_img_cont").capslide({
            caption_color: 'white',
            caption_bgcolor: 'black',
            overlay_bgcolor: 'black',
            border: '',
            showcaption: false
        });
    });
        </script>

There are 3 records, this applies on the first one but not the other two,
I think the problem is repeated

id="capslide_img_cont"

but can't seem to fix it.
can you help me out ?
It's deeply appreciated

try

$('[id*="capslide_img_cont"]')

it's a wildcard that accepts any prefix, and the suffix you enter. asp.net will inject a prefix like $content100 in front of your id name. so it becomes something like $content100_capside_img_cont

As far as the 2nd and 3rd record goes, I'm not sure yet, not enough info

$("#capslide_img_cont") will get the first element.if you use 'Id' attribute,there will be not only one div with 'id' attribute.it's not good.so I suggest using 'name' attribute ,and then $("div[name='capslide_img_cont']").capslide.or using 'class' attribute if no one use 'ic_container' except this div.zhe code below:

JavaScript

<script type="text/javascript">
    $(function () {
        $(".capslide_img_cont").capslide({
            caption_color: 'white',
            caption_bgcolor: 'black',
            overlay_bgcolor: 'black',
            border: '',
            showcaption: false
        });
    });
        </script>

I want to calculate the difference between two dates and the result should get in Year,Month and Date format. While calculating the difference it should take the end date also.

eg: 01/09/2012 - 30/09/2012 = 1 Month
01/02/2012 - 29/02/2012 = 1 Month
01/08/2012 - 10/08/2012 = 1 Month and 10 Days
01/01/2012 - 31/12/2012 = 1 Year
01/01/2012 - 10/01/2013 = 1 Year and 10 days

Crossposting is evil...

You should never do that here, it is annoying.
We wander from forum to forum willing to help.

For easy/fast questions Q&A, for longer questions forums. Keep in mind that crossposting will get you downvotes though.

[www.tamautomation.com] Robots, CNC and PLC machines for grinding and polishing.

"The Lazy Man’s URL Parsing in JavaScript"[^] on Joe Zim's blog.

Excerpt: "This method – originally posted on Github by John Long, though probably not originally discovered by him – uses native parsing abilities built into the DOM to give you simple access to the parts of a URL simply by querying properties of an anchor element. Check it out:"

best, Bill

<color>"When it comes to atoms, language can be used only as in poetry. The poet, too, is not nearly so concerned with describing facts as with creating images." Niels Bohr

I only worry about the performance of this method.

iframe
width="3000"
height="3000"
/iframe

i made iframe for google big image

1. i would like to move 3000 pixel to pan above with javascript , no google api
2. i would like to split save image with java because big image save error
no capture utill

I am trying to select all the elements in a Listbox/SelectBox.

At the moment I am using the following function *which is working*, the only thing is it takes around 10 seconds to select all elements(of which there are 652).

I'm a beginner at javascript so I was wondering whether anyone knew of a faster way to select all elements.

JavaScript

//selectBox is the selectbox ID, selectall is a boolean whether to select all elements,
//ensureOneSelected applies when false is specified for selectall
//it then ensures that the first element is always selected.

<script>

function selectAll(selectBox, selectAll, ensureOneSelected) {
    // have we been passed an ID
    var selectBoxElement = null;
    var selectBoxOption = null;

    var boolSelect = selectAll;

    if (typeof selectBox == "string") {
        selectBoxElement = document.getElementById(selectBox);
        selectBoxOption = selectBoxElement.options;
    }
    // is the select box a multiple select box?
    if (selectBoxElement.type == "select-multiple") {
        var max = (selectBoxOption.length);

        var modMaxUnrollFactor = (max % 4);

        max -= modMaxUnrollFactor ;

        for(var i = 0; i < max; i+=4){
            selectBoxOption[i].selected = boolSelect;
            selectBoxOption[i + 1].selected = boolSelect;
            selectBoxOption[i + 2].selected = boolSelect;
            selectBoxOption[i + 3].selected = boolSelect;

        }
        for (var i = max; i < selectBoxOption.length; i++) {
            selectBoxOption[i].selected = boolSelect;
        }

        if (typeof ensureOneSelected == "boolean") {
            if(selectBoxOption[0].selected == false)
            {
                selectBoxOption[0].selected = ensureOneSelected;
            }
        }
    }
}
</script>

thanks in advance

My blog:[^]

What is with the unroll factor and two loops? That is pointless ... running a for loop 600 times isn't what's slow.

Manipulating the DOM can be slow. You might do better to get .innerHTML, do a regex replace for '<option( selected)?' with either '<option' or '<option selected', and then reassign .innerHTML.

BobJanova wrote:
Manipulating the DOM can be slow. You might do better to get .innerHTML, do a
regex replace for '<option( selected)?' with either '<option' or
'<option selected', and then reassign .innerHTML.

Thanks, I'll look into it.

BobJanova wrote:
What is with the unroll factor and two loops? That is pointless ... running a
for loop 600 times isn't what's slow.

I'm a c/c++ programmer predominately, force of habit Smile | :)

My blog:[^]