Rectangle 27 4

What you are talking about is a transient cookie - cookies are transient (they are removed when the browser is closed) when you set a cookie with no expiry date. They exist for the current browser session only

They provide a delete method :

$.cookies.del('myCookie');
//deletes a cookie, 'myCookie', with default options

Or removing a cookie using pure JavaScript :

document.cookie = "myCookie=; expires=Thu, 01-Jan-70 00:00:01 GMT;";

There is an unload event that you can bind to that will allow you to remove the cookies when the browser closes -

The unload event is sent to the window element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an unload event.

$(window).unload(function() {
 // delete your cookie here
});

It seems that using session cookies with the jQuery plugin isnt as simple as it should be ... i think that using a plugin for such a simple task is a waste of bandwidth (I know its only a couple of KB - but thing of the poor mobile users) .. these are the 2 methods I always use for getting / setting cookies :

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}


function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}
setCookie('myCookie','myvalues',5); 
// the 5 is the number of days in the future the cookies should be removed
// leave this parameter out or set to null for transient cookie

myvalues = getCookie('myCookie');

Its not that difficult with the jQuery plugin, you just need to set some options :

var newOptions = {
  expiresAt: null
};
$.cookies.setOptions(newOptions);
or 
$.cookies.setOptions({expiresAt: null});

unload event is calling whenever i'm refreshing browser as well as whenever i'm clicking on any link or any submit button. The event should be only called at the time of browser closing.

@Priyanka yes - as i said in my answer ... the best way would be to set the cookie with no date - when you initially create it ... i will add the JavaSCript methods for creating cookies - its very simple and really doesnt need a jQuery plugin ...

how to delete cookie in jquery at the time of browser closing? - Stack...

jquery cookies
Rectangle 27 5

One technique is to do a background POST to a hidden iframe on the initial page load using JavaScript. As soon as the POST response successfully returns, you'll be able to set cookies. This removes the need to affect user experience (an interstitial to force interaction is another technique). Some more thoughts and sample code here: http://gist.github.com/586182

This was very helpful. Thanks!

facebook - Accessing third party cookies in Firefox - Stack Overflow

firefox facebook cookies redirect safari
Rectangle 27 3

In plain english you're extending one class with another. A prototype can only be an object so you set WeatherWidget's prototype to a new instance of Widget. If you removed the new keyword you would be setting the prototype to the literal constructor function which doesn't do anything.

var Appendages = function(){
  this.legs = 2
};
var Features = function() {
   this.ears = 4;
   this.eyes = 1;
}

// Extend Features class with Appendages class.
Features.prototype = new Appendages;
var sara = new Features();
sara.legs;
// Returns 2.

Understanding that the prototype can be any object, something like this would also work:

In JavaScript, if the key isn't found on the object, it checks the parents object you extended it from. Hence you can change items on the parent object on the fly like so:

var appendages = {
  legs : 2
};
var Features = function() {
   this.ears = 4;
   this.eyes = 1;
}

// Extend Features class with Appendages class.
Features.prototype = appendages;
var sara = new Features();
sara.legs;
// Returns 2.
appendages.hair = true;
sara.hair;
// Returns true.

Note that this all happens during instantiation which means you can't just switch out the prototype after you've created the object:

However, all modern browsers come with this newer __proto__ method, which allows you to do it:

var foo = {name : 'bob'};
var bar = {nachos : 'cheese'};
foo.__proto__ = bar;
foo.nachos
// "cheese"

What is that Appendages function good for, why do you need an instance (including a prototype object) of it there?

Bergi: I just added a 3rd example to show that off. Objects can extend on each other up a chain so it enables you to reuse and build code. In a theoretical example, all vehicles have similarities including an engine. We can build that into a base class, but not all vehicles have four wheels. So we can build one car class and one motorcycle class on top of it and reuse the core code. In real life, I use the Backbone.js framework. A lot of views are similar where I need to show a list of items. By making a base list class, I can extend it to create 20 different list pages with very little bloat.

It's better for Appendages to be a class constructor instead of an object so that you can initialize it with various options. So it could be an "engine" class where you can pass in the size of the engine while still making it reusable.

Nah, a "class constructor" to instantiate prototype objects is usually a bad idea, the problem of similiar classes should be solved otherwise.

You're right if what you passed to the constructor turned it into a completely different object, but for a minor setting I disagree.

javascript - What is the reason to use the 'new' keyword at Derived.pr...

javascript constructor prototype
Rectangle 27 5

It seems that if you remove the Target tab, you cannot change the default value to "new window".

However, you can remove all the options in the Target list except "new window", and set it as the default value.

CKEDITOR.on('dialogDefinition', function(e) {
    if (e.data.name === 'link') {
        var target = e.data.definition.getContents('target');
        var options = target.get('linkTargetType').items;
        for (var i = options.length-1; i >= 0; i--) {
            var label = options[i][0];
            if (!label.match(/new window/i)) {
                options.splice(i, 1);
            }
        }
        var targetField = target.get( 'linkTargetType' );
        targetField['default'] = '_blank';
    }
});

In this case, the Target tab still exists, but there's only one value ("new window") to select, so the users can't change this.

What about links that are pasted into the editor from outside?

javascript - In CKEditor, how to set link open in a new window as defa...

javascript hyperlink ckeditor target
Rectangle 27 1

I made a jQuery solution, since it's tagged in your post. To incorporate this in your page, you would need to make sure to include jQuery (I used version 1.12.0). I removed the PHP stuff, since you're asking about the JavaScript, and I removed the onclick/onchange attributes, so I could set up the click listeners in jQuery instead.

$(document).on("change", "[name=gender],[name=status]", function(){
  var gender = $('[name=gender]:checked').val();
  var status = $('[name=status] option:selected').val();
  if(gender == 'female' && status == 'single'){
    $('[name=maiden]').prop('disabled', false);
  }
  else{
    $('[name=maiden]').prop('disabled', true);
  }
});

I did have to modify one other thing in your HTML too - I added values for the male and female gender checkboxes (the values being "male" and "female"). Here's the minimal HTML I tested with:

<form>
  <label for="maidenname" >Maiden Name</label>
  <input type="text" name="maiden" id="mySelect" value="" disabled=true maxlength="20" placeholder="Maidenname">
  <p><span class="message">(for female only)</span></p>
  <span class="error"></span>  

  <label for="gender" >Gender&nbsp;</label><br />
  <input type=radio name="gender" id="gender" value='male'>Male &nbsp;
  <input type=radio name="gender" id="gender" value='female'>Female 
  <p><span class="error"></span></p>
  <div class="col-sm-3">
    <label for="atatus" >Civil Status</label>
    <select name="status" id="status">
      <option value="single">Single</option>
      <option value="married">Married</option>
      <option value="widow/er">Widow/er</option>
      <option value="other">Other</option>
    </select>
    <p><span class="error"></span></p>
  </div>
</form>

Here's a fiddle for you to review it working with comments: https://jsfiddle.net/fo8m8fta/

thank you, that actually helped, i just edited it with how i wanted it. thanks!!! :)

jquery - Or and AND statement in Javascript - Stack Overflow

javascript jquery html web
Rectangle 27 3

Duplicate question but try this: (Set an id for it)

var elem = document.getElementById("myDiv");
elem.parentNode.removeChild(elem);

I'm lost at the parentNode bit, sorry @jiff

html - Use Javascript to remove a div from DOM without jQuery - Stack ...

javascript html dom
Rectangle 27 5

You call 'gotodate' after initializing your calendar, and you move to the desired date.

Apart from that, in viewDisplay callback you set the min and max dates, and you disable the 'previews' and 'next' buttons when user reach the edges...

in the following example it allows navigation between today and 5 days in the future

viewDisplay: function(view) {
    var today = new Date();
    today = new Date ( today.getFullYear(), today.getMonth(), today.getDate() );
    var maxDayLimit = new Date( new Date(today).setDate(today.getDate() + 5) );

    if( view.end >= maxDayLimit ) {
        $(".fc-button-next").addClass("fc-state-disabled");
    }
    else{
        $(".fc-button-next").removeClass("fc-state-disabled");
    }

    if( view.start <= today ){
        $(".fc-button-prev").addClass("fc-state-disabled");
    }
    else{
        $(".fc-button-prev").removeClass("fc-state-disabled");
    }
}

javascript - How to set full calendar to a specific start date and end...

javascript php fullcalendar
Rectangle 27 1

Edit: The final processing of your text values needs to be in a callback function because of the way JavaScript works -- it is single threaded, meaning only one piece of code runs at a time. Looking at your original code, execution first goes into job1(). It builds action() as a function without executing it and them moves on to the setTimeout(), which sets up action() to run but doesn't run it yet. For a setTimeout() to actually execute, even with time value 0, the current code has to finish executing. Next it moves on to the end code in job1() which is document.Write, job1/job3, and returning the object. Since action() has not yet executed, the subText objects are not yet set.

Once control has left job1(), and finished any current code, the browser will start executing action() from your setTimeout() call. Inside action() there are other setTimeout calls, and those behave similarly -- the current code must finish executing, then there's a wait, and then finally the code specified will execute.

So in summary, you must use a callback function because execution must finish with all current code before any code queued up with setTimeout() will execute. You can't take an asynchronous function like job1() and make it synchronous because none of the async setTimeout() calls can possibly execute while you're inside job1().

In certain other languages, like C++ or Java, you can make code run in parallel, so you can spawn code in a "background thread" and then the current thread can wait for it to finish, giving you the effect you want. You cannot do this with JavaScript. All async functions require a callback. Callback literally means, "Call me back when you're done". In the future, there will be Web Workers which may support multiple pieces of code running at a time: Web Workers

Here is an example using a callback whendone, which is referenced below. It gets called when the values have been set.

function job1(whendone) {
    var subText1="";
    var subText2="";
    var text="";
    var vocabulary = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz0123456789";

    // Use the delay function to create a full text in 20 * 150 milliseconds
    var i = 0, 
    action = function() {
            var temp = vocabulary.charAt(Math.floor(Math.random() * vocabulary.length));
            text+= temp;
            document.write(text + "<br>");
            i++;
            if (i < 20) {
                        setTimeout(action, 150);
            } else {
                // The first subText is from position 0 until some random number random between 0 and the text length
                subText1 = text.slice(0, Math.floor(Math.random() * text.length));
                // The second subText is from where the first subText ends until the last character form the text input
                subText2 = text.slice(subText1.length, text.length);

                // output of the subText1 and the subText2 for the first time
                document.write("subText1: " + subText1 + "<br>");
                document.write("subText2: " + subText2 + "<br>");
                document.write("text: " + text + "<br>");

                // Now we're done
                whendone(subText1, subText2);
            }
        };

    setTimeout(action, 0);
}

job1(function(subText1, subText2) {
    // output of the subText1 and the subText2 once more
    document.write("subText1: " + subText1 + "<br>");
    document.write("subText2: " + subText2 + "<br>");

    // NextJob: job2, job3
    // job dependency
    var nextJob = "job2, job3";
    var prevJob = "null";

    // results
    var returned = { 
        subText1_RT : subText1,
        subText2_RT : subText2
    };

    // Your code doing something with 'returned' here
});

The value you want ends up in returned. If you want to do something with the value, add code after the returned = statement.

Thanks for this code!!!, is it possible to capsule the whole thing in one function lets say function job(){...} which will have the output parameters at the end. The thing is with this solution is that at the end I have 2 separate functions that interact with each other. I actually need one function job(){...} that I can call and this function can have others functions inside like you have in your example, but at the end only by calling the job() function (which capsules all the other) I want to get the results. Again thanks for the code!

jquery - Using a delay function inside another function in JavaScript ...

javascript jquery
Rectangle 27 1

Edit: The final processing of your text values needs to be in a callback function because of the way JavaScript works -- it is single threaded, meaning only one piece of code runs at a time. Looking at your original code, execution first goes into job1(). It builds action() as a function without executing it and them moves on to the setTimeout(), which sets up action() to run but doesn't run it yet. For a setTimeout() to actually execute, even with time value 0, the current code has to finish executing. Next it moves on to the end code in job1() which is document.Write, job1/job3, and returning the object. Since action() has not yet executed, the subText objects are not yet set.

Once control has left job1(), and finished any current code, the browser will start executing action() from your setTimeout() call. Inside action() there are other setTimeout calls, and those behave similarly -- the current code must finish executing, then there's a wait, and then finally the code specified will execute.

So in summary, you must use a callback function because execution must finish with all current code before any code queued up with setTimeout() will execute. You can't take an asynchronous function like job1() and make it synchronous because none of the async setTimeout() calls can possibly execute while you're inside job1().

In certain other languages, like C++ or Java, you can make code run in parallel, so you can spawn code in a "background thread" and then the current thread can wait for it to finish, giving you the effect you want. You cannot do this with JavaScript. All async functions require a callback. Callback literally means, "Call me back when you're done". In the future, there will be Web Workers which may support multiple pieces of code running at a time: Web Workers

Here is an example using a callback whendone, which is referenced below. It gets called when the values have been set.

function job1(whendone) {
    var subText1="";
    var subText2="";
    var text="";
    var vocabulary = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz0123456789";

    // Use the delay function to create a full text in 20 * 150 milliseconds
    var i = 0, 
    action = function() {
            var temp = vocabulary.charAt(Math.floor(Math.random() * vocabulary.length));
            text+= temp;
            document.write(text + "<br>");
            i++;
            if (i < 20) {
                        setTimeout(action, 150);
            } else {
                // The first subText is from position 0 until some random number random between 0 and the text length
                subText1 = text.slice(0, Math.floor(Math.random() * text.length));
                // The second subText is from where the first subText ends until the last character form the text input
                subText2 = text.slice(subText1.length, text.length);

                // output of the subText1 and the subText2 for the first time
                document.write("subText1: " + subText1 + "<br>");
                document.write("subText2: " + subText2 + "<br>");
                document.write("text: " + text + "<br>");

                // Now we're done
                whendone(subText1, subText2);
            }
        };

    setTimeout(action, 0);
}

job1(function(subText1, subText2) {
    // output of the subText1 and the subText2 once more
    document.write("subText1: " + subText1 + "<br>");
    document.write("subText2: " + subText2 + "<br>");

    // NextJob: job2, job3
    // job dependency
    var nextJob = "job2, job3";
    var prevJob = "null";

    // results
    var returned = { 
        subText1_RT : subText1,
        subText2_RT : subText2
    };

    // Your code doing something with 'returned' here
});

The value you want ends up in returned. If you want to do something with the value, add code after the returned = statement.

Thanks for this code!!!, is it possible to capsule the whole thing in one function lets say function job(){...} which will have the output parameters at the end. The thing is with this solution is that at the end I have 2 separate functions that interact with each other. I actually need one function job(){...} that I can call and this function can have others functions inside like you have in your example, but at the end only by calling the job() function (which capsules all the other) I want to get the results. Again thanks for the code!

jquery - Using a delay function inside another function in JavaScript ...

javascript jquery
Rectangle 27 2

I think the best way to simplify this would be to move the formatting buttons into the model:

So the buttons get a model

FormatButton = function(data)
{
  var self = this;

   self.letter = ko.observable(data.Letter);

   //Styles for button group 
   self.isFirst = ko.observable(data.isFirst);
   self.isLast = ko.observable(data.isLast);
   self.isHovering = ko.observable(false);
   self.isSelected = ko.observable(false);

   self.mouseOver = function(){ self.isHovering(true);};
   self.mouseOut = function(){ self.isSelected(false); };
}

Each title would have some buttons

Title = function(data){
    var self = this;

    self.ID = data.ID;    
    self.name = ko.observable(data.name);

    self.buttons = ko.observableArray([
        new FormatButton( {isFirst: true, letter: 'B' }),
        new FormatButton( {letter: 'I'}),
        new FormatButton( {isLast: true, letter: 'U'})
    ]); 


    return self;
};

And the html for displaying the buttons could turn into a for loop

<!-- ko foreach: buttons -->
    <input class="ui-helper-hidden-accessible" type="checkbox"  data-bind="attr: { 'id' : letter}, checked: isSelected" />
    <label 
    rule="button" aria-disabled="false"
    class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active" 
    data-bind="attr: { 'for' : 'myBold'+ ID},
               hasFocus: $root.bIsSelected,
               event: { mouseover: $root.bMouseOver, mouseout: $root.bMouseOut },
               css: { 'ui-state-active' : isBold, 'ui-state-focus' : $root.bIsSelected(), 'ui-state-hover' : $root.bHovering(), 'ui-corner-left': isFirst, 'ui-corner-right': isRight }">
        <span class="ui-button-text" data-bind="text: letter"></span>
    </label>
<!-- /ko -->

javascript - How set css-classes for hovering and focus with knockoutJ...

javascript jquery css jquery-ui knockout.js
Rectangle 27 2

It's not an array at all. It's an object. An array is an ordered set of entries keyed by an index value (a number). An object (in JavaScript) is a set of unordered key/value pairs.

To remove a property from an object, you use delete, specifying the property either with bracketed syntax and a string expression for the property name (which can be a variable reference, for instance to your option_label):

delete options[option_label];
// or
delete options["some property name"];
// or
delete options["some " + " property" + "name"];

...or with dot syntax and a literal property name:

delete options.someLiteralPropertyName;

.pop doesn't exist for objects, because objects have no order, so the concept of popping the "last" entry off of an object is meaningless.

javascript - What is this array called... and how to remove items from...

javascript arrays javascript-objects
Rectangle 27 2

It's not an array at all. It's an object. An array is an ordered set of entries keyed by an index value (a number). An object (in JavaScript) is a set of unordered key/value pairs.

To remove a property from an object, you use delete, specifying the property either with bracketed syntax and a string expression for the property name (which can be a variable reference, for instance to your option_label):

delete options[option_label];
// or
delete options["some property name"];
// or
delete options["some " + " property" + "name"];

...or with dot syntax and a literal property name:

delete options.someLiteralPropertyName;

.pop doesn't exist for objects, because objects have no order, so the concept of popping the "last" entry off of an object is meaningless.

javascript - What is this array called... and how to remove items from...

javascript arrays javascript-objects
Rectangle 27 1

If you remove the .trigger('change') from your fiddle it logs Object {id: 1, label: "NEW VALUE"} (need to click twice since the logging is before the value change). Is that what you're looking for?

Yes, I removed the .trigger('change');, too, and it just worked for me (Chrome)

javascript - Programmatically set the value of a Select2 ajax - Stack ...

javascript jquery jquery-select2 sonata-admin
Rectangle 27 0

There is no JavaScript function to achieve this. However, you could set a boolean value to true when you add the listener, and false when you remove it. Then check against this boolean before potentially adding a duplicate event listener.

javascript - Check if an element has event listener on it. no jquery -...

javascript web
Rectangle 27 0

I have gone through your code, and the apparent reason for your problem is that if you move the mouse out of the menu too quickly, the hover style gets stuck. I cannot think of anything that can be done about this root cause, it is a quirk of IE7, and that is that. Some kind of failsafe is needed, and javascript can be used for that. What you need to do is set the CSS display property to block on mouseover, and none on mouseout. This will guarantee that the third level elements are hidden when they should be.

While I was sorting out the problem, I also reorganized part of the HTML and much of the CSS. There was a high number of overlapping and conflicting styles, which makes me amazed that it worked as well as it did.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/test.css" rel="stylesheet" type="text/css" />
<link href="css/ie7.css" rel="stylesheet" type="text/css" />
<!-- JavaScript -->
<script type="text/javascript">
function changeBackground(oEl, iMode) {
    var sId = oEl.id;
    if (sId == null) alert("Your Element Does Not Have An ID!");

    if ((sId == 'menuAllProducts') || (sId == 'sub-menuAllProducts')) {
        if (iMode == 1) {
            document.getElementById('menuAllProducts').style.backgroundPosition='0px -35px';
            document.getElementById('menuAllProducts').style.height = "46px";
        } else if (iMode == 2) {
            document.getElementById('menuAllProducts').style.backgroundPosition='0px 0px';
            document.getElementById('menuAllProducts').style.height = "35px";
        }
    } else if ((sId == 'menuCustomerResources') || (sId == 'sub-menuCustomerResources')) {
        if (iMode == 1) {
            document.getElementById('menuCustomerResources').style.backgroundPosition='0px -35px';
            document.getElementById('menuCustomerResources').style.height = "46px";
        } else if (iMode == 2) {
            document.getElementById('menuCustomerResources').style.backgroundPosition='0px 0px';
            document.getElementById('menuCustomerResources').style.height = "35px";
        }
    } else if ((sId == 'menuPowerMaxAttitude') || (sId == 'sub-menuPowerMaxAttitude')) {
        if (iMode == 1) {
            document.getElementById('menuPowerMaxAttitude').style.backgroundPosition='0px -35px';
            document.getElementById('menuPowerMaxAttitude').style.height = "46px";
        } else if (iMode == 2) {
            document.getElementById('menuPowerMaxAttitude').style.backgroundPosition='0px 0px';
            document.getElementById('menuPowerMaxAttitude').style.height = "35px";
        }
    } else if ((sId == 'menuShippingPayment') || (sId == 'sub-menuShippingPayment')) {
        if (iMode == 1) {
            document.getElementById('menuShippingPayment').style.backgroundPosition='0px -35px';
            document.getElementById('menuShippingPayment').style.height = "46px";
        } else if (iMode == 2) {
            document.getElementById('menuShippingPayment').style.backgroundPosition='0px 0px';
            document.getElementById('menuShippingPayment').style.height = "35px";
        }
    } 
}
</script>
</head>

<body>
<div id="header">
<div id="nav">
<ul id="menu">
  <li class="menu-item" onMouseOver="changeBackground(document.getElementById('menuAllProducts'), 1);" onMouseOut="changeBackground(document.getElementById('menuAllProducts'), 2);">
    <div id="menuAllProducts">
      <a href="#">All Products</a>
    </div>
    <ul class="sub-menu" id="sub-menuAllProducts">
      <li class="sub-item" onmouseover="document.getElementById('third-menuNewMacs').style.display='block'" onmouseout="document.getElementById('third-menuNewMacs').style.display='none'">
        <a href="#">New Macs</a>
        <div id="third-menuNewMacs" class="third-menu">
          <div class="bkg"></div>
          <div class="arrow"><img src="/images/nav/arrow_head.png" /></div>
          <div class="newMacsOptions">
            <ul class="menuMacBookPro">
              <li><img src="/images/nav/icons/macbook_pro.png" /></li>
              <li><a href="#">MacBook Pro: 13"</a></li>
              <li><a href="#">MacBook Pro: 15"</a></li>
              <li><a href="#">Macbook Pro: 17"</a></li>
            </ul>
            <ul class="menuMacBookAir">
              <li><img src="/images/nav/icons/macbook_air.png" /></li>
              <li><a href="#">MacBook Air: 11"</a></li>
              <li><a href="#">MacBook Air: 13"</a></li>
            </ul>
            <ul class="menuIMac">
              <li><img src="/images/nav/icons/imac.png" /></li>
              <li><a href="#">iMac: 21.5"</a></li>
              <li><a href="#">iMac: 27"</a></li>
            </ul>
            <ul class="menuMacMini">
              <li><img src="/images/nav/icons/mac_mini.png" /></li>
              <li><a href="#">Mac mini</a></li>
              <li><a href="#">Servers</a></li>
            </ul>
            <ul class="menuMacPro">
              <li><img src="/images/nav/icons/mac_pro.png" /></li>
              <li><a href="#">Mac Pro</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="sub-item" onmouseover="document.getElementById('third-menuUsedMacs').style.display='block'" onmouseout="document.getElementById('third-menuUsedMacs').style.display='none'">
        <a href="#">Used Macs</a>
        <div id="third-menuUsedMacs" class="third-menu">
          <div class="bkg"></div>
          <div class="arrow"><img src="/images/nav/arrow_head.png" /></div>
          <ul>
            <li><h5>Desktops / Xserve</h5></li>
            <li><a href="#">Mac Pro</a></li>
            <li><a href="#">G5 Power Mac - PCI-E</a></li>
            <li><a href="#">G5 Power Mac - PCI-x</a></li>
            <li><a href="#">G5 Power Mac - PCI</a></li>
            <li><a href="#">G4 Power Mac Towers</a></li>
            <li><a href="#">Mac Mini - G4</a></li>
            <li><a href="#">XServe - Intel</a></li>
            <li><a href="#">XServe - G5</a></li>
            <li><a href="#">XServe - G4</a></li>
          </ul>
          <ul>
            <li><h5>iMacs / eMac</h5></li>
            <li><a href="#">Intel iMac: 27-inch</a></li>
            <li><a href="#">Intel iMac: 21.5-inch</a></li>
            <li><a href="#">Intel iMac: 24-inch</a></li>
            <li><a href="#">Intel iMac: 20-inch</a></li>
            <li><a href="#">Intel iMac: 17-inch</a></li>
            <li><a href="#">G5 iMac: 20-inch</a></li>
            <li><a href="#">G5 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 20-inch</a></li>
            <li><a href="#">G4 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 15-inch</a></li>
            <li><a href="#">eMac</a></li>
          </ul>
          <ul>
            <li><h5>MacBook / MacBook Pro</h5></li>
            <li><a href="#">Intel iMac: 27-inch</a></li>
            <li><a href="#">Intel iMac: 21.5-inch</a></li>
            <li><a href="#">Intel iMac: 24-inch</a></li>
            <li><a href="#">Intel iMac: 20-inch</a></li>
            <li><a href="#">Intel iMac: 17-inch</a></li>
            <li><a href="#">G5 iMac: 20-inch</a></li>
            <li><a href="#">G5 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 20-inch</a></li>
            <li><a href="#">G4 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 15-inch</a></li>
            <li><a href="#">eMac</a></li>
          </ul>

          <ul>
            <li><h5>iBook / PowerBooks</h5></li>
            <li><a href="#">Intel iMac: 27-inch</a></li>
            <li><a href="#">Intel iMac: 21.5-inch</a></li>
            <li><a href="#">Intel iMac: 24-inch</a></li>
            <li><a href="#">Intel iMac: 20-inch</a></li>
            <li><a href="#">Intel iMac: 17-inch</a></li>
            <li><a href="#">G5 iMac: 20-inch</a></li>
            <li><a href="#">G5 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 20-inch</a></li>
            <li><a href="#">G4 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 15-inch</a></li>
            <li><a href="#">eMac</a></li>
          </ul>
          <div class="clear">&nbsp;</div>
        </div>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuSpecialValueMacs">Special Value Macs</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuCustomMacs">Custom Macs</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuiPods">iPods</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuiPads">iPads</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuStorage">Storage</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuDisplays">Displays</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuVideoAudio">Video+Audio</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuAccessories">Accessories</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuNetworking">Networking</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuSoftware">Software</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><img src="/images/nav/click_to_chat.png" /></a>
  </li>
</ul>
</div>
</div>
</body>
</html>
/* CSS Document */
h5 {font-family:'FranklinGothicLT-BookCnd', Arial, Helvetica, sans-serif;font-size:13px;font-weight:normal;color:#ff8e04;text-transform:uppercase;letter-spacing:-1px;margin:0; }
img{border:none;}
/* HEADER */
#header {
    position:relative;
    z-index:100;
    padding-bottom:38px;
}

/* NAVIGATION */
#nav {
    width:965px;
    position:absolute;
}
#menu {
    list-style:none;
    padding:0;
    margin:0;
}
.menu-item {
    position:relative;
    float:left;
    line-height:30px;
}
.menu-item:hover .sub-menu {
    display: block;
}
#menuAllProducts {
    position:relative;
    width:110px;
    height:35px;
    z-index:100;
    text-indent:-9000px;
    margin-right:4px;
    background:url(/images/nav/all_products.png) no-repeat;
}
.sub-menu {
    position:absolute;
    top:45px;
    left:0;
    width:199px;
    z-index:50;
    display:none;
    list-style:none;
    padding:10px 0 0;
    margin:0;
    background:#ff8e04;
    border:solid 1px #a3a3a3;
    box-shadow:3px 4px 10px -3px #555454;
}

    .sub-item {position:relative;height:26px;line-height:30px;padding-left:10px;background:url(/images/background/nav_dropdown.png) no-repeat;}
    .sub-item:hover {background:#fcba00;}
    .sub-item:hover .third-menu {display: block;}
    .sub-item a {color:#ff8e04;text-decoration:none;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;}
    .sub-item:hover a {color:#fff;}

    .third-menu {position:absolute;top:-26px;right:-752px;width:750px;display:none;list-style:none;padding:0;margin:0;background:#f7f7f7;border:solid 1px #a3a3a3;box-shadow: 3px 4px 10px -3px #555454;}
    .third-menu ul {float:left;margin:0;padding:5px 10px;list-style:none;line-height:100%;width:160px;}
    .third-menu li {height:auto;line-height:20px;color:#595858;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;}
    .third-menu li h5{color:#ff8e04;border-bottom:solid 1px #cbcbca;}
    .third-menu li a, 
    .third-menu li a:link, 
    .third-menu li a:active{color:#6a6a6a;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-weight:normal;font-size:11px;} 
    .third-menu li a:hover{color:#6a6a6a;text-decoration:underline;}
    .third-menu .bkg{background:#b8b7b6;height:10px;}

    #third-menuNewMacs {top:0;right:-470px; width:468px;height:151px;background:url(/images/background/nav_newmacs.png) no-repeat;}
    #third-menuNewMacs ul {float:left;margin:0;padding:0;list-style:none;line-height:100%;width:100px;}
    #third-menuNewMacs ul.menuMacMini {width:65px;}
    #third-menuNewMacs li {height:auto;line-height:20px;color:#595858;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;text-align:center;}
    #third-menuNewMacs li a,
    #third-menuNewMacs li a:link,
    #third-menuNewMacs li a:active {color:#35cffa;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-weight:normal;font-size:11px;} 
    #third-menuNewMacs li a:hover {text-decoration:underline;}
    #third-menuNewMacs .arrow {position:absolute;top:0;left:-2px;}

    #third-menuUsedMacs {top:-26px;right:-752px;width:750px;}
    #third-menuUsedMacs .arrow {position:absolute;top:27px;left:-2px;}

    #menuCustomerResources{background:url(/images/nav/customer_resources.png) no-repeat;width:112px;height:35px;z-index:100;position:relative;text-indent:-9000px;margin-right:4px;}
    #menuPowerMaxAttitude{background:url(/images/nav/attitude_fun.png) no-repeat;width:130px;height:35px;z-index:100;position:relative;text-indent:-9000px;margin-right:4px;}
    #menuShippingPayment{background:url(/images/nav/shipping_payment.png) no-repeat;width:173px;height:35px;z-index:100;position:relative;text-indent:-9000px;margin-right:4px;}

.stretch,.clear {clear: both;height: 1px;margin: 0;padding: 0;font-size: 15px;line-height: 1px;}

Thanks for the help. I also thanks for orginizing the CSS. I guess I was so worried about getting it to work, I didn't realize how many styles I was repeating. Thanks Again!

IE7 Compatibility Issue with Navigation Drop-Down (3-Levels) CSS/Javas...

javascript css internet-explorer internet-explorer-7 navigation
Rectangle 27 0

You could create a timer like this that would remove the div after 10 seconds

var maxTime = 10; /* Seconds */ var myTime = 0; var myTimer = setInterval(function() { myTime++; if (myTime >= maxTime) { myTimer.clear(); $("#loading").remove(); }

javascript - How to set the progress bar to work till either content i...

javascript jquery html progress-bar
Rectangle 27 0

Form collection in symfony2 is quite straightforward, it does almost all the work for you. Basically you just need add a collection type and set allow_add, allow_remove flags and add a small JavaScript code. Have a look at the cookbook example

allow_delete
allow_remove

delete - Symfony2 form collection: How to remove entity from a collect...

forms delete symfony2
Rectangle 27 0

A workaround that works for Chrome, FF and IE8+ is to use a setTimeout() inside the window.onload event handler. I'm looking for a better solution and an explanation, though...

javascript - How to make sure the Cookie is set before a new request i...

javascript cookies http-headers httprequest
Rectangle 27 0

I think I may have found the solution to this. In my case, the way I was setting font size was causing the problem. I think the API relies on a pixel font size to set the initial width/height (because the JavaScript fires too late to calculate around relative widths? Not positive about that.)

Anyway, you need to specify font sizes within your infowindow in pixels (not a relative unit.) Like:

.infowindow p {
  font-size: 15px;
}

Once I had set the units to pixels, I also had to specify (to get rid of the default width setting):

.gm-style-iw {
  width: auto !important;   
}

Google doesn't note the formatting needs very carefully in the API docs, so it was a pretty "trial and error" process to get this working. I still don't feel like this solution is 100% reliable.

popup - How to remove scrollbars from Google map bubble in Google map ...

google-maps popup height
Rectangle 27 0

When you remove the div, that removes the display panel and the map will disappear. To remove the map instance, just make sure that your reference to the map is set to null and that any references to other parts of the map are set to null. At that point, JavaScript garbage collection will take care of cleaning up, as described in: javascript garbage collection.

I'm not sure that setting the map variable to null will properly remove all the event listeners.

It's not just the map that has to be set to null, but any references to anything else. So if the marker reference is set to null, making it unreachable, there is no way to reach the event listener. It may still be connected to the map, but the map can't be reached, so it is just a big hunk of memory that has essentially become orphaned. It's the same as setting an Array.length = 0; if there are no other references to the members, they just form a group of orphaned memory that is eligible for garbage collection.

javascript - What is the Proper Way to Destroy a Map Instance? - Stack...

javascript google-maps-api-3