JQUERY horizontal Menu on IE9 - javascript

I have used the following example of the JQUERY UI horizontal Menu:
How to make jQuery UI nav menu horizontal?
which works great on Chrome
but in IE 9 it looks horrible and it is not horizontal
do you have any idea what I have been missing?
my JQUERY sources:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
my css:
#menu li
{
width: auto;
clear: none;
background:blue;
margin-right:3px;
margin-left:3px;
margin-top:2px;
float: left;
}
.menuIconItem
{
cursor:hand;
}
.liMenuItem
{
background-color:transparent;
}
.menu
{
border: 0px !important;
background:D0E1F7 !important;
}
my code:
<ul id="menu" class="menu">
<li class="liMenuItem" title="1">
<a onclick="menuItemClicked('1');" class="menuIconItem">
<img src="1.png" id="img1">
</a></li>
<li class="liMenuItem" title="2">
<a onclick="menuItemClicked('2');" class="menuIconItem">
<img src="2.png" id="img2">
</a></li></ul>
Thanks :)

please refer the following link for more details,
Cross browser menu
it tells that for IE you have to make changes to the css file because some stuffs might not work in IE normally,
ul.dropdown ul li {
display: inline;
width: 100%; /* Width depends on the size of containing block */
}
try this hope it helps..

Related

Why this mobile navigation toggle not working properly?

I am trying to create a mobile navigation (toggle type) on a breaking point 768px.
My mark up is:
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div id="nav">
<div class="navigasi_menu">
<div class="navigasi_list">
<div class="nav-menu">
<ul>
<li class="page_item page-item-7">Home</li>
<li class="page_item page-item-2">Sample Page</li>
<li class="page_item page-item-9">test page 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
this mobile navigation should be hidden screens wide above 768px. So I put following java script code in to the header:
/* Mobile navigation*/
jQuery(document).ready(function() {
$('#nav').hide();
$('.menu_icon').click(function() {
$('#nav').slideToggle('fast');
return false;
});
});
and I put following CSS code into my style sheet:
/* Primary mobile menu */
.tm_menu_mobile {
display: block;
margin: 15px auto !important;
width: 98.5% !important;
background:#0071B7;
padding:6px;
height:auto;
overflow:hidden;
}
/* avoiding horizontal scroll bar across the site */
.navigasi_menu {
width: 100%
}
.navigasi_menu li {
float: none;
text-align: center;
border-bottom: 1px solid #fff;
}
/* Making navigation li one below another */
.navigasi_menu li:hover {
width: 100%
}
.tm_menu_mobile .menu_icon {
width:50px;
height:50px;
border-radius: 10px;
border:2px solid #000;
float:right;
margin-right:10px;
}
.menu_icon .three_line {
float:none;
width:36px;
height:5px;
background:#fff;
margin:9px auto;
}
.tm_menu_mobile #nav {
display: inline-block;
}
but toggle not working.
Also when I hovering the navigation in 768px screen it's not stable... it's 3rd li comes above the 1st..
but the same js fiddle work here the sample js toggle I tested
and the site I am trying is bit different. SITE
How can I get it work?
the issue is related to wordpress??
Try this :
<script type="text/javascript">
/* Mobile navigation toggle*/
jQuery(document).ready(function() {
jQuery('.tm_menu_mobile #nav').hide();
jQuery('.menu_icon').click(function() {
jQuery('.tm_menu_mobile #nav').slideToggle('fast');
return false;
});
});
</script>

Matching element heights

I have a menu on the left side of a slider. The slider's height is in direct correlation to the size of the image file that it loads. I want the menu's parent element to be at an equal height to the slider at all time.
I tried to code this with CSS and I looked around on here and realized that doing it with CSS is impossible. So, I tried to code it with Java, but it isn't right.
Any help with this would be amazing!
--Update--
This part is an edit. I tried a few of the suggestions, however they are not working. The slider changes height as it responds to the width of the screen. So, when I drag it out, it will change and the menu is left shorter than the slider. If I max-height the slider, the width will not display at 100% of the 60% allowance.
I believe what I need is a snippet of jquery that:
- grabs the nav element
- detects the height of the .Slider
- makes the nav element the same height as the .Slider element.
I have tried the js code below, but it didn't work.
Does anyone know how to do this?
Here is the code:
window.jQuery( function() {
window.jQuery('nav').height(window.jQuery('.Slider').height ())
});
nav {
display: block;
float: left;
width: 40%;
height: 100%;
}
nav ul {
background: lightgreen;
}
nav ul li {
display: inline;
width: 100%;
height: 33.3333%;
margin-left: 0;
}
.Slider {
display: block;
float: right;
width: 60%;
}
<div id="wrapper">
<nav>
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</nav>
<div class="Slider">
Pics are here.
</div>
</div>
I think you just need a clearfix, or I don't understand the question. Try this:
.theParent:after {
display: block;
clear: both;
content: "";
}
not only this is possible with CSS, there are thousands of ways to do this. This is just one of those:
.wrapper {
background: lightgreen;
position:relative;
width:100%;
height:100%;
padding:0;
}
nav {
display: block;
float: left;
width:40%;
height:100%;
margin:0;
padding:0;
}
nav ul {
margin:0;
padding:0;
height:100%;
}
nav ul li {
display: block;
width: 100%;
}
.Slider {
display: block;
float: right;
width: 60%;
margin:0;
padding:0;
}
.Slider img {
width:100%;
height:auto;
}
.clear {
display:block;
clear:both;
float:none;
}
and some tiny changes in your HTML
<div class="wrapper">
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<div class="Slider">
<img src="http://www.open.edu/openlearn/sites/www.open.edu.openlearn/files/design-nutshell-homepage.jpg" alt="" />
</div>
<div class="clear"></div>
</div>
(pay attention to that .clear div, which is the main reason why you probably had problems)
IN this case, since I notices you used percentages, I also added responsive behaviors.
fiddle to see it in action
You can use a little Jquery to solve this situation.
Just before the tag, you can add:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('nav').css('height','100%');
</script>
GOT IT!!!! So friggin' happy right now!!
var maxHeight = 400;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);

HTML JQuery slide show

Hi i have been trying to do a slide show using HTML and jquery. I tried to figure out why it it not working but could not find out why? That is the reason ia m writing here. I am also trying to get navigation left and right arrows.
thank you for any help.
<!DOCTYPE html>
<html>
<head>
<title>Roohi Health Screnning</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="roohiSTYLE.css">
<!--------- SCRIPT FOR SLIDER--------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
</header>
<section>
<!-- Content Starts Here -->
<header>
<h1> Welcome to Roohi</h1>
</header>
<!-- Navigation bar-->
<nav id="navigation">
<ul>
<li>Home</li>
<li>Products
<ul>
<li>Waterless Shampoo</li>
<li>Alcohol-Free Soap</li>
<li>Needle</li>
</ul>
</li>
<li>About Us</li>
<li>Service
<ul>
<li>BloodPresure</li>
<li>Test2</li>
<li>test3</li>
</ul>
</li>
<li>FindUs</li>
</ul>
</nav>
<div class="logo">
</div>
<div id="slides">
<ul>
<li><img src="images/green-stripes.jpg"/></li>
<li><img src="images/blue-stripes.jpg"/></li>
<li><img src="images/pink-stripes.jpg"/></li>
</ul>
</div>
<!-- Content Ends Here -->
</section>
<footer>
</footer>
</div>
</body>
</html>
css
#navigation{
font-family: crusoe;
color:#99;
margin: -0px auto;
position: realtive;}
#navigation ul{
list-style-type: none; /*removes bullet points*/
min-width:200px;}
#navigation ul li {
display:inline-block;}
#navigation ul li :hover{
background-color: #333}
#navigation ul li a, visited {
padding:20px;
display:inline-block;
text-decoration:none;
color:#999;}
#navigation ul li:hover ul{
display:block;
}
#navigation ul ul {
display: none;
position:absolute;}
#navigation ul ul li{
display: block;}
#navigation ul ul li a:hover {
display:block;
position: relative;
}
#navigation li:nth-child(3) {
padding-right: 80px;}
#navigation li:nth-child(4) {
padding-left: 80px;}
.logo {
background: url(images/Roohi-logo1.png) 50% 0 no-repeat;
background-size: 100px 90px;
width: 100px;
height: 90px;
position: absolute;
top: 30px;
left: 360px;
}
footer
{
display: table-row;
height: 1px;
background-color: blue;
}
Have a close look at their example on http://www.slidesjs.com/ . Pay close attention to their sample markup for the images. They are images inside a div, not images inside li's inside a ul inside a div as you have.
Also, you pasted a bunch of CSS in your question, assuming they are in a proper style block in your real site?
As for the arrow links, they provide you previous and next links which you can style to look like arrows.

How to display text over image

I want to display text over image. Whenever someone hover mouse over the image.
My Div block is:
<div class="MainDIV">
<br><br><br>
<div class="popular_stores" align="center">
<span style="font-size: 12pt;">Browse our list of stores that we have coupons, coupon codes, and promo codes for.
</span>
<br>
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
</li>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
</li>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
</li>
</ul>
</div></div>
And rest of the CSS and JavaScript Function is:
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.drama').mouseover(function(){
alert("dss");
var tt = $(this).parent().find('.toolTip');
tt.html($(this).attr('title'));
tt.show();
});
$('.drama').mouseout(function(){
var tt = $(this).parent().find('.toolTip');
tt.hide();
});
</script>
<style type="text/css">
body {
text-align: center;
}
.MainDIV{
padding:0;
width:700px;
display: inline-block;
background-color:white;
}
.MainDIV ul
{
list-style-type: none;
}
.MainDIV ul li {
display: inline-block;
padding : 1em;
}
.MainDIV ul li img
{
padding: .2em ;
border-radius: 10px;
-moz-border-radius: 10px;
background-color: #F5F5E3;
}
ul li div{display:none; background:white; opacity:.5; position:absolute;}
What i am trying to do is shown here.please take a look :click here
Similar to this page i want to display text over the image whenever someone hover mouse on the image. Can someone please help me out...
I build up a fiddle with the simpliest way I could think of.
$('#hover1').mouseover(function(){
$('#hoverDiv1').css('opacity', 1)
});
$('#hover1').mouseout(function(){
$('#hoverDiv1').css('opacity', 0)
});
Please see this Fiddle
Hover effect is not correctly positioned, because "li" needs to be defined.
It is just to show an easy jQuery way.
Best

Google liked drop down menu

alt text http://sites.google.com/site/yanchengcheok/Home/google-drop-down-menu.png
Hello, whenever we go to Google Page and click on the "more", a menu will be dropped down. I would like to have the following effect on my web site too. May I know which JavaScript library can help me to achieve the similar effect?
Google released their closure libray, I think the menu in your question is the following
http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/submenus.html
hope it helps
Cheers
Similar menus, very well documented and flexible. Only Denis' answer -- using the actual closure library -- is better, but I doubt it's as well documented.
Any JavaScript library can help you in such situations.
You may want to check out the following example, which I hope can get you going in the right direction:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Drop down demo</title>
</head>
<body style="font-family: Arial; font-size: 11px; margin: 0 auto;">
<div id="menu_bar" style="height: 25px; width: 100%; position: absolute;">
Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
<div style="float: left;">
<a id="more_link" href="#" style="float: left;">more...</a>
<div id="more_menu" style="width: 95px; display: none;">
More Item 1
More Item 2
More Item 3
More Item 4
</div>
</div>
</div>
<div id="spacer" style="height: 30px;"></div>
Here goes the body
<script type="text/javascript">
document.getElementById('more_link').addEventListener('click', function(e) {
document.getElementById('more_menu').style.display = 'block';
e.stopPropagation();
}, false);
document.body.addEventListener('click', function() {
document.getElementById('more_menu').style.display = 'none';
}, false);
</script>
</body>
</html>
Screenshot from the above example:
Drop down demo http://img31.imageshack.us/img31/7576/menuxs.png
You just add listener to click event for a "more" element:
elementRef.addEventListener("click", function() {
// listener code here
}, false);
(you can do this in any JS library if you want to). This listener should now just display (change CSS property display from none to block) another element (ie. <div id="more" />). Also you add another listener for click event, but this time for the body element (to hide menu).
Final code could looks like following:
JavaScript:
document.getElementById("toggle-more").addEventListener("click", function(e) {
document.getElementById("more").style.display = "block";
e.stopPropagation();
}, false);
document.body.addEventListener("click", function() {
document.getElementById("more").style.display = "none";
}, false);
HTML:
<span id="toggle-more">More...</span>
<div id="more">
<ul> ... </ul>
</div>
CSS:
#more {
display: none;
position: absolute;
top: 15px;
left: 150px;
}
alt text http://sites.google.com/site/yanchengcheok/Home/google-copy-cat.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #fff;
font: .74em "Trebuchet MS", Verdana, Arial, sans-serif;
line-height: 1.5em;
}
/* Help Menu Section. */
a#help-menu:hover {
color: #3B6EBF;
}
#help-menu {
text-decoration: none;
}
#help-menu u {
text-decoration: underline;
}
#jsddm
{ margin: 0;
padding: 0}
#jsddm li
{ display: -moz-inline-box; /* For FF */
display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on blocks */
list-style: none;
}
#jsddm li a
{
display: block;
white-space: nowrap}
#jsddm li ul
{ margin: 0;
padding: 0;
background:none repeat scroll 0 0 #FFFFFF;
border-color:#C9D7F1 #3366CC #3366CC #A2BAE7;
border-style:solid;
border-width:1px;
text-align: left;
position: absolute;
display: none;}
#jsddm li ul li
{
float: none;
display: inline}
#jsddm li ul li a
{
padding:0.2em 0.5em;
text-decoration: none;
background: #FFFFFF}
#jsddm li ul li a:hover
{
color: #FFFFFF;
background: #3366CC}
.jsddm-seperator {
border-top:1px solid #C9D7F1;
font-size:1px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{ ddmenuitem = $(this).find('ul').eq(0).toggle();}
function jsddm_close(evt)
{
if (ddmenuitem) ddmenuitem.hide();
}
$(document).ready(function()
{
$('#jsddm > li').bind('click', jsddm_open);
//$(this).bind('click', jsddm_close);
});
</script>
</head>
<body>
<div style="text-align:center">
<ul id="jsddm">
<li>Home</li>
<li> · </li>
<li>Main Menu1</li>
<li> · </li>
<li>Main Menu2</li>
<li> · </li>
<li>Main Menu3</li>
<li> · </li>
<li>Main Menu4</li>
<li> · </li>
<li><u>Help</u><small>▼</small>
<ul>
<li>Install</li>
<li><div class="jsddm-seperator"></div></li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</body>
a few weeks back I had stumbled across a blog post on creating google like menu
may be that could help you :
http://blog.geotitles.com/2011/09/creating-the-new-top-black-bar-found-in-google-and-all-its-products/
It uses jQuery but the images you have posted looks like the old google menu since the new menu is black and even this blog post is on the same new menu but it also includes the dropdown menu, so I think this might help you.
Update
Here is a blog post on creating the old menu as well, you can also check this out, but this does not have the dropdown feature which you are asking for, may be the former one is better.

Categories

Resources