javascript,jquery,html,css,internet-explorer , CSS MegaMenu Full Width in IE 10/11

CSS MegaMenu Full Width in IE 10/11


Tag: javascript,jquery,html,css,internet-explorer

I am working on Superfish Menu with some custom styles to make menu full width and responsive. My project works perfectly on Google Chrome and Firefox, but not in IE 11.

Take a look in this Sample

* { margin:0; padding:0; }
html { height: 100%; width: 100%; }
body { font-size:13px; color:#777; text-align:center; min-width:250px; position:relative; }
body > .wrapper { position:relative; }
.page { margin: 0 auto; padding: 0 0 0; text-align: left; width: 900px; }

.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { position: relative; float: none; width: 100%; display: table; font-family: Tahoma, Helvetica, Arial, sans-serif; }
.sf-menu li { position: relative; -webkit-transition: background .2s; -moz-transition: background .2s; -o-transition: background .2s; transition: background .2s; }
.sf-menu ul { position: absolute; padding-top: 15px; padding-bottom: 15px; display: none; top: 100%; left: 0; z-index: 99; min-width: 12em; }
.sf-menu li.last > ul { left: inherit; right:0; }
.sf-menu > li { float: none; display: table-cell; }
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; }
.sf-menu a { display: block; position: relative; zoom: 1; }
.sf-menu ul ul { top: 0; left: 100%; }

/*** Default Skin ***/
#menu-icon, .sf-menu-phone, .sf-menu-block { display: none; }
.sf-menu { border:1px solid #ddd; border-bottom-color:#b0afaf; background:#e4e5e6; box-shadow:0 3px 6px rgba(0,0,0,0.08); }
.sf-menu > li { border-right: 1px solid #ddd; vertical-align: middle; }
.sf-menu > li:last-child { border-right: 0; }
.sf-menu > li:last-child > ul ul { left: auto; right: 100%; }
.sf-menu li a { color: #333; text-decoration: none; padding: 0; }
.sf-menu > li > a > span { display: block; font-size: 1.4em; line-height: 18px; cursor: pointer; padding: 18px 5px; text-align: center; }
.sf-menu li ul a span { white-space: normal; }
.sf-menu > li.parent > a span { margin-right: 0; }
.sf-menu > li.sfHover > a, 
.sf-menu> li > a:hover, 
.sf-menu > > a { background: #fff; color: #000; }
.sf-menu ul { background-color: #FFF; border-top:5px solid #515151; box-shadow:0 4px 10px 0 rgba(150, 150, 150, 1); }
.sf-menu > li > a:before, 
.sf-menu li li.parent > a:before { font-size: 14px; color:#ddd; float: right; }
.sf-menu > li > a:before { line-height: 54px; margin-right: 10px; }
.sf-menu li li a { display:block; background: none; font-size: 13px; line-height: 16px; color: #777; padding:4px 20px; }
.sf-menu li li > a:hover, 
.sf-menu li li.sfHover > a, 
.sf-menu li > a, 
.sf-menu li li > a:hover:before, 
.sf-menu li li.sfHover > a:before, 
.sf-menu li > a:before { color: #333; }

.sf-arrows .sf-with-ul { padding-right: 0.5em; }
.sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 1em; margin-top: -3px; height: 0; width: 0; border: 5px solid transparent; border-top-color: #000; border-top-color: rgba(0,0,0,1); }
.sf-arrows > li > .sf-with-ul:focus:after, 
.sf-arrows > li:hover > .sf-with-ul:after, 
.sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: #FFF; }
.sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #000; border-left-color: rgba(0,0,0,1); }
.sf-arrows ul li > .sf-with-ul:focus:after, 
.sf-arrows ul li:hover > .sf-with-ul:after, 
.sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: #999; }

/* MegaMenu */
.mega-pos-01 { position: initial !important; }
.mega-pos-02 { position: relative !important; }
.megamenu { }
.megamenu > li.last-col > ul,
.megamenu > li.last-col > ul ul { left: auto; right: 100%; }
.megamenu li { float:left; padding: 0; text-align:left; margin-left:2%; }
.megamenu li ul li { float:none; width: auto; margin-left:0; }
.megamenu li ul a span { white-space: nowrap; }
.mega-wFull { width: 100% !important; }
.mega-w200 { width: 200px; }
.mega-w250 { width: 250px; }
.mega-w300 { width: 300px; }
.mega-w350 { width: 350px; }
.mega-w400 { width: 400px; }
.mega-w450 { width: 450px; }
.mega-w500 { width: 500px; }
.mega-w550 { width: 550px; }
.mega-w600 { width: 600px; }
.mega-w650 { width: 650px; }
.mega-w700 { width: 700px; }
.mega-col2 li { width: 48%; }
.mega-col3 li { width: 31.3333%; }
.mega-col4 li { width: 23%; }
.mega-col5 li { width: 18%; }
.mega-col6 li { width: 14.6666%; }
.mega-col7 li { width: 12.2857%; }
.mega-col8 li { width: 10.5%; }
    <div class="wrapper">
        <div class="page">
            <ul id="nav" class="sf-menu">
                <li class="level0 level-top parent first"><a href="#" target="_self" class=" level-top "><span>Category 01</span></a>
                    <ul class="level0   ">	
                        <li class="level1 first  "><a href="#" target="_self" class=""><span>cabelos</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>olhos</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>lábios</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>corpo</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>pescoço</span></a></li>
                        <li class="level1 first last  last-col"><a href="#" target="_self" class=""><span>unhas</span></a></li>
                <li class="level0 level-top parent mega-pos-01"><a href="#" target="_self" class=" level-top "><span>Category 02</span></a>
                    <ul class="level0 megamenu mega-wFull mega-col6">
                        <li class="level1 parent first  "><a href="#" target="_self" class=" "><span>subcategoria 01</span></a>
                            <ul class="level1   ">
                                <li class="level2 first last  "><a href="#" target="_self" class=""><span>face</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 41</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 02</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 03</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 04</span></a></li>
                        <li class="level1 parent  last-col"><a href="#" target="_self" class=" "><span>subcategoria 05</span></a>
                            <ul class="level1   ">	
                                <li class="level2 parent first  "><a href="#" target="_self" class=" "><span>subcategoria 37</span></a>
                                    <ul class="level2   ">	
                                        <li class="level3 first  "><a href="#" target="_self" class=""><span>subcategoria 34</span></a></li>
                                        <li class="level3 first last  "><a href="#" target="_self" class=""><span>subcategoria 33</span></a></li>
                                <li class="level2 parent first last  "><a href="#" target="_self" class=" "><span>subcategoria 38</span></a>
                                    <ul class="level2   ">	
                                        <li class="level3 first  "><a href="#" target="_self" class=""><span>subcategoria 36</span></a></li>
                                        <li class="level3 first last  "><a href="#" target="_self" class=""><span>subcategoria 35</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 06</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 07</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 08</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 09</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 10</span></a></li>
                        <li class="level1  last-col"><a href="#" target="_self" class=""><span>subcategoria 11</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 12</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 13</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 14</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 15</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 16</span></a></li>
                        <li class="level1  last-col"><a href="#" target="_self" class=""><span>subcategoria 17</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 18</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 19</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 20</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 21</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 22</span></a></li>
                        <li class="level1  last-col"><a href="#" target="_self" class=""><span>subcategoria 23</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 24</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 25</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 26</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 27</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 28</span></a></li>
                        <li class="level1  last-col"><a href="#" target="_self" class=""><span>subcategoria 29</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 30</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 31</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 32</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>feminino</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>masculino</span></a></li>
                        <li class="level1 first last  last-col"><a href="#" target="_self" class=""><span>desodorante</span></a></li>
                <li class="level0 level-top  "><a href="#" target="_top" class=" level-top"><span>Category 03</span></a></li>
                <li class="level0 level-top  "><a href="#" target="_top" class=" level-top"><span>Category 04</span></a></li>
                <li class="level0 level-top parent last  "><a href="#" target="_self" class=" level-top "><span>Category 05</span></a>
                    <ul class="level0   ">	
                        <li class="level1 first  "><a href="#" target="_self" class=""><span>outros</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>gel de banho</span></a></li>
                        <li class="level1 parent first last  "><a href="#" target="_self" class=" "><span>loção corporal</span></a>
                            <ul class="level1   ">	
                                <li class="level2 first  "><a href="#" target="_self" class=""><span>subcategoria 40</span></a></li>
                                <li class="level2 first last  "><a href="#" target="_self" class=""><span>subcategoria 39</span></a></li>

To test, mouseover the menu item "Category 02" and see how this work well on Chrome and FF but not in IE.

I'll appreciate any help!

Thanks a lot!


Changing the position CSS attribute for the mega-pos-01 class elements from initial to static seems to have done the trick for me. Pity, I was hoping for some jQuery maneuvering.

.mega-pos-01 { position: static !important; }


How to remove unmatched row in html table using jquery

I have two tables. I want to delete unmatching rows. Compare with first column in Table1 and compare with first column in Table2. Table1 111 aaa 222 bbb 333 ccc Table2 333 xxx 444 zzz 111 vvv result of Table2 333 xxx 111 vvv I tried some thing here Please...

How to get my node.js mocha test running?

I have developed a service in node.js and looking to create my first ever mocha test for this in a seperate file test.js, so I can run the test like this: mocha test I could not figure out how to get the reference to my app, routes.js: var _ =...

Teechart HTML5, line color and thickness

How do you change the line color and thickness of a series in Teechart HTML5. I have been looking through the examples, but i can't find anything describing that....

Converting “i+=n” for-loop to $.each

I have the below html structure: <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> Now to group/wrap each 4 items in a separate div I did as below: var div=$('.thumbnail'); for(var i = 0; i < div.length; i+=4) { div.slice(i, i+4).wrapAll("<div...

Login Signup PopUp

When I Open Login and signUp Portal it open with the both tab contents and then when I click on Login tab it open login tab content and on click register tab it open register tab page. But again after refresh the page popup showing both tabs content together![enter image...

access the json encoded object returned by php in jquery

I want to post some data to php function by ajax, then get the encoded json object that the php function will return, then I want to get the information (keys and values) from this object, but I don't know how, here is my code: $.ajax({ url: "functions.php", dataType: "JSON",...

show div only when printing

Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...

Javascript sort array of objects in reverse chronological order

I have an array of objects which holds a list of jobs and I would like to sort them in reverse chronological order as they would appear on a resume for example. I came up with the below solution which 'seems' to work but I was wondering if there is...

Dynamically resize side-by-side images with different dimensions to the same height

I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...

Detect when the jQuery UI slider is being moved?

I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

Identifier starts immediately after numeric literal

I'm trying to get the current logged in usersID in my jquery function var userID = @User.Identity.GetUserId(); Many answers on this page say that I have to do something like \"@User.Identity.GetUserId()\" But it dont seem to work, can someone tell me how to fix it. Its for my ajax post....

Javscript Replace Text in tags without changing children element HTML and Content

I have a script where I'd like to replace the text anywhere in the body visible to the user like so: $("body").html($("body").html().replace(/replaced word/g,'HELLO')); This works but it works to well. Whenever "replaced word" is within a tag, like a href, or span, or div, or anything it throws off all...

Google map infowindow position

Here is a sample google map with three polygons. I am setting the infowindow for each polygon as, for (var i in coordinates) { arr = []; for (var j=0; j < coordinates[i].length; j++) { arr.push( new google.maps.LatLng( parseFloat(coordinates[i][j][0]), parseFloat(coordinates[i][j][1]) )); bounds.extend(arr[arr.length-1]) } // Construct the polygon. polygons.push(new google.maps.Polygon({ paths:...

Javascript function to validate contents of an array

Here's what is asked: validItems(items) – this function receives a string array of items which are to be for a customer. The function returns an empty string indicating all item codes in the array are valid; otherwise the function returns the first invalid item code in the array. All item...

Cant submit form

Basically I've got a form with 5 radio buttons. No submit button. I want the form to run when the user clicks on any of the radio buttons, so this is what I did. <input id="5" type="radio" name="star" onchange="this.form.submit();" <?php if ($row["star"] =="5") echo "checked";?> value="5"/> a querystring is required...

How to find the days b/w two long date values

I have two long dates value. For Ex: 1433097000000 1434479400000 Here i have to find the days between these two by jquery For Ex: 15/06/2015 - 22/06/2015 If it is more than 5 days, I want to get from is 15/06/2016, to is 19/06/2015. It is based on long values...

Replacing elements in an HTML file with JSON objects

I am writing some Javascript to: Read in and Parse a JSON file Read in an HTML file (created as a template file) Replace elements in the HTML file with elements from the JSON file. It is only replacing the first element obj.verb. Can someone please help me figure out...

submitting form then showing loading image by javascript

I am submitting a form and loading loading gif in the same div by replacing html of form by html of loading image. I am first submitting the form then loading gif, because I have to replace the content of div(in which form exist) with loading image. Logs 1,2,3 are...

writing jQuery instead of $ to access controls in a page

Can I write jQuery( "body" ).append('Hello') instead of $( "body" ).append('Hello') in jQuery

Automatically calling server side class without

I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...

Set default value for struts 2 autocompleter

I have implemented a struts 2 autocompleter in which i have used a list of String like this - <sj:autocompleter id="cityId" cssClass="txtfield8" name="outlet.cityName" list="cityList" autoComplete="true" forceValidOption="false" /> How can I set a default value for this, so that every time it loads, a default value will be shown ?...

change css dynamically by selecting dropdown list item

I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...

Sockets make no sense?

I'm using the 'ws' library for Node.js. I can write code that sends data from my server to my client, posting a date and time update, and closes the socket when I click a button; var wss = new WebSocketServer({server: server}); console.log("WebSocket server created"); wss.on('connection', function(socket) { // SEND DATE...

How to remove legend from bottom of chart - amcharts

Can you please help me out to remove the legend (of y-axis data) from the below the line-chart. This is the icon that helps to remove the corresponding line from the line-chart. See inline image...

How to remove all the borders of a selectbox?

How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...

Angular $http and Fusion Tables in IE9

I am trying a simple get request to a google fusion table in my angular controller. $http.get(url) .success(function(data) { //Do stuff with data }) This works in firefox, chrome, safari and IE10+ however in IE9 (Which I am requried to support) the request fails to even send and the console...

want to show and hide text using “this” jquery

I want to achieve this effect with this because I have several paragraphs like this so I don't wanna use id for each paragraph <p class="desc_services_subheading"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,...

Click on link next link should be display on same page

I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

Get all prices with $ from string into an array in Javascript

var string = 'Our Prices are $355.00 and $550, down form $999.00'; How can I get those 3 prices into an array?...

slideToggle state not working with multiple boxes

I'm trying to save the toggle state of collapsable boxes using cookies. Here's my code: HTML: <div class="box_container"> <div class="box_handle"> Title </div> <div class="box" data-title="admin_actions"> Content </div> </div> Javascript: $('div.box_container div.box_handle').click(function() { $(this).next('.box').slideToggle('fast'); }); $.each($('div.box_container div.box_handle'), function(index,value){ if ($.cookie('show_box_' + $(value).next('.box').attr('data-title')) != 'closed'){...

Substring of a file

I have a file that is structure like this : var file = "a|b|c|d, a|b|c|d, a|b|c|d, a|b|c|d, a|b|c|d"; Now I would extract all letters "c" and "d" of this file and put those letter in array, structure like this: var array = [ [a,b,1], [a,b,2], [a,b,3], [a,b,4], [a,b,5] ]; How...

Can't call fetch directly in Backbone model listenTo

I'm trying to have a model listen to a collection and fetch itself when the collection changes: class Team extends Backbone.Model urlRoot: '/team', initialize: function(attributes, options) { this.listenTo(members, 'change', this.fetch) The fetch does seem to trigger, but the url is all messed up, and to get it to work I...

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

I have one app: app.js: angular.module('AngApp', [ 'angularGrid' ]); My own restangular service.js: var app = angular.module('AngApp'); app.factory('restService', ['Restangular', function (Restangular) { // make use of Restangular } ]); and controller.js: var app = angular.module('AngApp'); app.controller('ctrlAG', ['$scope', '$http', '$log', '$mdDialog', 'Restangular',function ($scope,$http, $log, $mdDialog, Restangular) { // make use of...

How To Check Value Of String

<span id='amount'>0.00000000</span> <a class='button-withdraw' id='tombolco' href='#'>Checkout</a> <script> var amount = document.getElementById("amount").innerHTML; if (amount >= 0.001) { document.GetElementById("tombolco").style = "display:block"; } else { document.GetElementById("tombolco").style = "display:none"; } </script> Why my code doesn't work? What's wrong with it and how to solve it?...

Parsing XML array using Jquery

I have stuck up with an issue of passing XML using Jquery. I am getting empty array while traversing to jquery.Please help me how to get datas from XML array. I have mentioned my code below. XML <?xml version="1.0" encoding="UTF-8"?> <json> <json> <CustomerName>999GIZA MID INSURANCEAND SERVICES PVT LTD</CustomerName> <mobiLastReceiptDate>null</mobiLastReceiptDate> </json>...

Get elements containing text from array

I want to search all the elements containing any string in the array. For example I have following list of items <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li> <li>hockey stick</li> </ul> and this array var arr = ['bat', 'ball']; It should select all the elements having text bat and ball....

Saving data using promises

On I have the following function, and my question follows: function myFunction(array, value) { var logMessage; logMessage = "array: " + array.length.toString(); console.log(logMessage); if (!array.length) return; if (!value) value = Math.min(10, array.length); if (array[array.length - 1].get("advertisePointNumber") >= value) return; var classPromise; array[array.length - 1].set("advertisePointNumber", value); logMessage = "(BIS)array: "...

Javascript change the souce of all images present inside a string

I have a message or string which contain both text as well as images as below. var text = '<span class="user_message">hiiiiiii <img title=":benztip" src="path../files/stickers/1427956613.gif"> <img src="path../files/stickers/416397278.gif" title=":happy"></span>'; Before appending this to the the chat div i want to replace the src of the images to a default image. How can...

Not able to access variables in required file

I'm using browserify on a project and am running in to the following: I have a file test.js. In test.js there is nothing but the following: var test = 'test'; Now, in the same directory I have my main file 'app.js'. I require test.js and try to access the 'test'...

Javascript: Forloop Difference between i++ and (i+1)

I was building a javascript for loop and I want to compare the value of an array to the next value in the array. If both values are not equal, I want to return true, otherwise I want to return false. In the code below I pass the string "aba",...

session value in javascript cannot be set

I am quite new to javascript, I wonder why my session value in javascript wont be set to 1 even I tried. When call this function again, the value of the session will change again. My javascript code as below. <script type="text/javascript"> function Confirm() { alert(<%=Session["Once"]%> != 1); var value...