Results 1 to 3 of 3

Thread: Smooth Navigation Menu with Ajax (Character issue)

  1. #1
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Smooth Navigation Menu with Ajax (Character issue)

    1) Script Title: Smooth Navigation Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

    3) Describe problem: This menu works well with english items on my webpage, but it becomes square box character while I changed items with Chinese word(Big5) as below screen shot.

    Please kindly help to give some suggestion to fix this issue.
    Thanks a lot in advance.

    My index.html code as
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=Big5" />
    
    <title>Test Handler Team</title>
    
    		<link rel="stylesheet" href="style/css/mystyle.css" />
            <link rel="stylesheet" type="text/css" href="style/css/ddsmoothmenu.css" />
            <script type="text/javascript" src="style/script/jquery.min.js"></script>
            <script type="text/javascript" src="style/script/ddsmoothmenu.js"></script>
    
    
    <script type="text/javascript">
    ddsmoothmenu.init({
    mainmenuid: "smoothmenu-5S",
    customtheme: ["#1c5a80", "#18374a"],
    contentsource: ["smoothcontainer", "5S_Nav_menu.html"]
    })
    
    </script>
    </head>
    
    <div align="center">
    <body background="style/Misc_Pic/bg1.jpg">
    
    <font face="Comic Sans MS" color="#0000ff" size="7"><B>IDL 5S 專頁</B></font>
    
    <hr>
    
    </div>
    
    <div id="smoothcontainer" class="ddsmoothmenu">
    <noscript>
    <a href="link to site map for search engines and user with JS disabled">Site map</a>
    </noscript>
    </div>
    
    <BR>
    
    </body>
    </html>
    And put menu items in external .html as 5S_Nav_menu.html as
    Code:
    <div id="smoothmenu-5S" class="ddsmoothmenu">
    <ul>
    
    <li><a href="#">Trainning Material</a>
      <ul>
      <li><a href="#">1S找問題</a></li>
      <li><a href="#">3x5Why_TTT</a></li>
      <li><a href="#">DMAIC sample</a></li>
      <li><a href="#">e-Announcement</a></li>
      <li><a href="#">ECS</a></li>
      <li><a href="#">IDL5S_0S deployment</a></li>
      <li><a href="#">IDL5S_1S_0408 Rev B</a></li>
      <li><a href="#">IDL5S_1S_RiskTag_Mgmt</a></li>
      <li><a href="#">IDL 5S</a></li>
      <li><a href="#">QBQ</a></li>
      <li><a href="#">QBQ</a></li>
      <li><a href="#">Safety</a></li>
      </ul>
    </li>
    
    <li><a href="#">FMEA</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    
    </ul>
    <br style="clear: left" />
    </div>
    Click image for larger version. 

Name:	ddmenu.jpg 
Views:	103 
Size:	43.1 KB 
ID:	5264

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Before doing anything, make sure that 5S_Nav_menu.html is saved as Big5.

    Easiest solution if it works is to put the charset meta tag on the external menu file:

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=Big5" />
    <div id="smoothmenu-5S" class="ddsmoothmenu">
    <ul>
    
    <li><a href="#">Trainning Material</a>
      <ul>
      <li><a href="#">1S找問題</a></li>
      <li><a href="#">3x5Why_TTT</a></li>
      <li><a href="#">DMAIC sample</a></li>
      <li><a href="#">e-Announcement</a></li>
      <li><a href="#">ECS</a></li>
      <li><a href="#">IDL5S_0S deployment</a></li>
      <li><a href="#">IDL5S_1S_0408 Rev B</a></li>
      <li><a href="#">IDL5S_1S_RiskTag_Mgmt</a></li>
      <li><a href="#">IDL 5S</a></li>
      <li><a href="#">QBQ</a></li>
      <li><a href="#">QBQ</a></li>
      <li><a href="#">Safety</a></li>
      </ul>
    </li>
    
    <li><a href="#">FMEA</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    
    </ul>
    <br style="clear: left" />
    </div>
    The browser cache may need to be cleared and/or the page refreshed to see changes. It would even help to load the external page directly into the browser to get it cached in its new form.

    If none of that works and you are using jQuery version 1.5.1 or later, you can try setting the character encoding in the AJAX call in the the ddsmoothmenu.js script. Using a text only editor like NotePad, edit the script here (around line #122), adding the highlighted as shown:

    Code:
    getajaxmenu: function($, setting, nobuild){ //function to fetch external page containing the panel DIVs
    	var $menucontainer=$('#'+setting.contentsource[0]); //reference empty div on page that will hold menu
    	$menucontainer.html("Loading Menu...");
    	$.ajax({
    		url: setting.contentsource[1], //path to external menu file
    		async: true,
    		beforeSend: function( xhr ) {
    			xhr.overrideMimeType( "text/html; charset=Big5" );
    		},
    		error: function(ajaxrequest){
    			$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText);
    		},
    		success: function(content){
    			$menucontainer.html(content);
    			!!!nobuild && ddsmoothmenu.buildmenu($, setting);
    		}
    	});
    },
    Save and use that version
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    yslo88 (11-01-2013)

  4. #3
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    It works after I put the charset meta tag on the external menu file and save 5S_Nav_menu.html as UTF-8 from ANSI.

    Thanks so much.

    BTW, It's only show "Loading Menu..." on IE7 but Chrome is ok while I put below code in ddsmoothmenu.js
    I didn't put below code in the .js file
    Code:
    		beforeSend: function( xhr ) {
    			xhr.overrideMimeType( "text/html; charset=Big5" );
    		},

Similar Threads

  1. Smooth Navigation Menu via Ajax
    By lirium in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-09-2011, 07:54 PM
  2. issue with Smooth Navigation Menu
    By chadlexmorgan in forum CSS
    Replies: 0
    Last Post: 05-23-2011, 03:11 AM
  3. Smooth Navigation Menu External File Issue
    By lirium in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 01-07-2011, 02:57 PM
  4. Smooth Navigation Menu...Not so Smooth
    By neogeekgirl in forum JavaScript
    Replies: 0
    Last Post: 02-25-2010, 03:56 PM
  5. Ajax character and JS issue
    By julmado in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-20-2007, 11:41 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •