Cant get this to work in IE, but works perfect Firefox, is this due to the way i have written my CSS?
Thanks
R
CSS
.theme-default .nivo-directionNav a {
display:block;
width:26px;
height:23px;
background: url(../images/arrows-3.png) no-repeat;
text-indent:-9999px;
border:0;
}
.theme-default .nivo-directionNav a:hover {
display:block;
width:26px;
height:23px;
background: url(../images/arrows-over-1.png) no-repeat;
text-indent:-9999px;
border:0;
}
Javascript
//Add Direction nav
if(settings.directionNav){
slider.append(
'<div class="nivo-directionNav">
<a class="nivo-prevNav">'+ settings.prevText +'</a>
<a class="nivo-nextNav">'+ settings.nextText +'</a>
</div>'
);
//Hide Direction nav
if(settings.directionNavHide){
$('.nivo-directionNav', slider).hide();
slider.hover( function(){
$('.nivo-directionNav', slider).show();
},
function(){
$('.nivo-directionNav', slider).hide();
});
}
For reasons beyond human comprehension IE8 (possibly other versions of IE also) does not apply the :hover state unless a link has an associated href property.
This can be rectified by replacing:
//Add Direction nav
if(settings.directionNav){
slider.append(
'<div class="nivo-directionNav">
<a class="nivo-prevNav">'+ settings.prevText +'</a>
<a class="nivo-nextNav">'+ settings.nextText +'</a>
</div>'
);
//Hide Direction nav
if(settings.directionNavHide){
$('.nivo-directionNav', slider).hide();
slider.hover( function(){
$('.nivo-directionNav', slider).show();
},
function(){
$('.nivo-directionNav', slider).hide();
});
}
with
//Add Direction nav
if(settings.directionNav){
slider.append(
'<div class="nivo-directionNav">
<a class="nivo-prevNav" href="#">'+ settings.prevText +'</a>
<a class="nivo-nextNav" href="#">'+ settings.nextText +'</a>
</div>'
);
//Hide Direction nav
if(settings.directionNavHide){
$('.nivo-directionNav', slider).hide();
slider.hover( function(){
$('.nivo-directionNav', slider).show();
},
function(){
$('.nivo-directionNav', slider).hide();
});
}
There is no reason this should not work in IE 8. Maybe your image path is incorrect.
Also you dont need to repeat porperties in :hover becouse everything is adepted from a-tag.
Try a backgroundcolor and i think it will work. Figure out your problem with the background-image if this works (red background-color on hover state):
.theme-default .nivo-directionNav a {
display:block;
width:26px;
height:23px;
background: url(../images/arrows-3.png) no-repeat;
text-indent:-9999px;
border:0;
}
.theme-default .nivo-directionNav a:hover {
background: url(../images/arrows-over-1.png) no-repeat 0 0 #FF0000;
}
For best design view in IE6 to 9 you must use javascript libraries below. just call these js only rest will do js.
important:- these js must be called in head not in body of a file
htmlshiv for html5 new tags
google js for IE
selectivizr js for css3 new classes
Related
I wan't to make a special menu for the iPad version of my website.
It should work like this:
http://itu.dk/people/mbul/humlum/images/ipad_menu.png
Click on IMG 1 and the menu expands (to IMG 2) and the links gets visible. When you click outside IMG 2 it disappears along with the links so only IMG 1 is visible.
I've come this far but it doesn't really do the trick:
<div class="nav_mobile_container">
<div class="nav_mobile_elements">
<div class="nav_mobile"></div>
</div>
</div>
div.nav_mobile_container{
position: fixed;
top: 0px;
left: 0px;
}
div.nav_mobile_elements{
display: inline-block;
}
div.nav_mobile_elements a{
vertical-align: top;
display: inline-block;}
div.nav_bookmark:hover{
display: inline-block;
}
.nav_mobile{
width:70px;
height:70px;
background-image:url('images/menu_small.png');
display: inline-block;
}
.nav_mobile:hover{
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
I would really appreciate a CSS solution on this if possible.
Thank you!
The closest you can get is
#nav_mobile:active {
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
But that does not work on an ipad.
I recommend to use a bit of javascript.
Create an onclick event that displays a div with all the navigation information you need.
With jquery:
$("#small_navigation").click(function(){
$("#big_navigation").show();
});
The css:
#big_navigation {
display: none;
width: ...
height: ...
etc...
}
You will need javascript for this. Using jQuery, this is how you could make it :
First, don't set an :hover in your CSS, but just make a class that you will add on click :
.nav_mobile.navopen {
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
And then a bit of jQuery to make it work :
$(document).ready(function(){
// expend the menu on click
$('.nav_mobile').on('click', function(event){
event.stopPropagation();
$(this).addClass('navopen');
});
// close menu on click outside the menu
$('html').click(function() {
$('.nav_mobile').removeClass('navopen');
});
});
The jsFiddle demo
Edit : with pure javascript
window.onload = function() {
var menu = document.getElementsByClassName('nav_mobile')[0];
menu.onclick=function(e){
e.stopPropagation();
menu.className = "nav_mobile navopen";
};
var html = document.getElementsByTagName('html')[0];
html.onclick=function(){
menu.className = "nav_mobile";
};
};
I have a css tooltip that I use to provide guidance, and I'm trying to include it in the jqgrid.
However, the title of the column appears on hover. The <span> does not. I tried adding title:false, but then nothing happens.
Here's the css I'm using:
.tooltip { border-bottom:1px dotted #000000; outline:none; text-decoration:none; cursor:help; }
.tooltip:hover em { padding: .2em 0 .6em 0; font-weight:bold; display:block; }
.tooltip { position:relative; }
.tooltip:hover span { position:absolute; left:1em; top:-4.5em; z-index:99; margin-left:0; width:150px; }
.tooltip:hover em { border:0; margin: -10px 0 0 -55px; float:left; position:absolute; }
.tooltip span { margin-left:-999em; position:absolute; }
And here's how it's applied:
<a class='tooltip' href='#'>
<img alt='Help' src='/Images/question_mark_sm.png' />
<span class='tooltip_classic info'>Guidance Tag</span>
</a>
Not sure why it will work anywhere else but in the jqGrid. I've tried and tried, but it doesn't seem to work. (Well, the image shows up and the cursor changes, but no popup.)
Try to remove tooltip attribute from a jqGrid cell.
For me it works fine for all the browsers, except IE7. I used jqGrig gridComplete event.
Here is an example:
// _YourColID is you column name from colModel
$("td[aria-describedby*=_YourColID]", "#yourGridID tr").removeAttr("title");
$("td[aria-describedby*=_YourColID]", "#yourGridID tr").tooltip({
// each trashcan image works as a trigger
tip: '.tooltip',
// custom positioning
position: 'center right',
// move tooltip a little bit to the right
offset: [0, -10],
// there is no delay when the mouse is moved away from the trigger
delay: 0,
predelay: 2000,
onShow: function(e){
if ($(e.target).parent("tr").attr('id') != -1) {
yourTooltipFunction($(e.target).parent("tr").attr("id"));
}
}
}).dynamic({
bottom: {
direction: 'down',
bounce: true
}
});
i am using this jquery function to display a pop window. in this code it works fine for paragraph or div attribute with a css id. but i want to use it a several times in my html file, so i need to convert the id's to classes.
here is my js file:
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/3.25,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
here is the css:
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
width:470px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
cursor: pointer;
}
#button{
text-align:left;
}
and here is html:
<div id="button"><input type="submit" value="submit" /></div>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Description</h1>
<p id="contactArea">
<?php echo $data['description'];?>
</p>
</div>
<div id="backgroundPopup"></div>
it works perfectly, when it is set for div with a css id.but now, if i change all those '#'s to '.'s to make the id's into classes, it doesn't work. how do make it work?
maybe you must clear your browsercache. If you change all # to . and all id to class it must work....for more informations click here
Changed to class from id's it's working fine for me
In my thumbnail scroller I have a : <span id="tt" style="display:none;"></span> which is driven by a jquery fade in/fade out script and I want to position it outside of the thumbnails container.
the css for the span tag is :
span#tt {
position:absolute;
left:0;
top:0;
}
You can check the thumbnail scroller here
If I understand you well, these will do the job.
#tt {
position:absolute;
left:0;
top: 0;
margin-top:-20px; /*added*/
}
.jThumbnailScroller{
position:relative;
width:800px;
height:260px; /*changed 255px set it if you change #tt margin-top value*/
margin:0;
padding:0;
overflow:hidden
}
.jThumbnailScroller#tS1{
position:relative;
width:100%;
margin-top:100px;
padding-top:20px
}
Also edited your tip script. It was blinking If you move faster over images, because your script trying to fadein it before it finishes fadeout.
jQuery(document).ready(function(){
var link = jQuery('.jTscroller a');
link.each(function(){
$(this).mouseenter(function(){
var imgtitle = $(this).find('img').data('title');
$('#tt').html(imgtitle);
$('#tt').fadeIn('slow');
$(this).mouseleave(function()
{
$('#tt').hide();
});
});
});
});
Here's jsfiddle http://jsfiddle.net/dsu9a/7/
Don forget to remove these codes. This was for correcting img links with actual ones in fiddle.
jQuery(document).ready(function(){
var img = jQuery('.jTscroller a img');
img.each(function(){
var url = $(this).attr('src');
$(this).attr('src','http://outboxvision.com/test/'+url)
});
});
Correct your html like this.
<body>
<div id="tt"></div>
<!-- rest of the code -->
So I'm creating an unordered list, floated to the right and styled with varying backgrounds to fashion a menu.
It was hell setting up the Jquery (animation queues, repeating animations while hovered, etc,) but I got it to work finally. Here's the CSS and Jquery for the navigation, and animation.
<script type="text/javascript">
$(document).ready(function(){
$("#nav li").hover(function() {
$(this).children('p').stop(true, true).animate({opacity: "show"}, "fast");
}, function() {
$(this).children('p').stop(true, true).animate({opacity: "hide"}, "fast");
});
});
</script>
#nav {
margin:0;
padding:0;
background:#FF0000;
clear:both;
float:right;
}
#nav li {
position:relative;
list-style:none;
padding-left:0;
margin-left:0;
float:right;
width:75px;
}
#nav li a {
display:block;
width:75px;
height:48px;
margin-left:0;
padding-left:0;
Z-index:20;
}
.hover {
display:none;
position:absolute;
top:0;
left:0;
height:48px;
width:75px;
z-index:0;
}
.nav1 a {
background-image:url(images/nav_1.gif)
}
.nav2 a {
background-image:url(images/nav_2.gif)
}
.nav3 a {
background-image:url(images/nav_3.gif)
}
.nav4 a {
background-image:url(images/nav_4.gif)
}
.nav1 p.hover {
background-image:url(images/nav_1_hover.gif)
}
.nav2 p.hover {
background-image:url(images/nav_2_hover.gif)
}
.nav3 p.hover {
background-image:url(images/nav_3_hover.gif)
}
.nav4 p.hover {
background-image:url(images/nav_4_hover.gif)
}
and then here's the HTML for the menu....
<ul id="nav">
<li class="nav1"><img src="images/nav_spacer.gif" border="0" /><p class="hover"></p></li>
<li class="nav2"><img src="images/nav_spacer.gif" border="0" /><p class="hover"></p></li>
<li class="nav3"><img src="images/nav_spacer.gif" border="0" /><p class="hover"></p></li>
<li class="nav4"><img src="images/nav_spacer.gif" border="0" /><p class="hover"></p></li>
</ul>
I hope this is sufficient -- I'm still pretty green to Javascript/Jquery and CSS, and I can't seem to figure out why there's a buffer between my menu items.
I'd appreciate any help.
Thanks!
Which browser? I don't get any buffer in between.
Of course, I don't have your images to work with either. Perhaps there's some overflow taking place.
Try adding clip:auto; overflow: hidden; to your #nav li a.
#nav li a {
display:block;
width:75px;
height:48px;
margin-left:0;
padding-left:0;
z-index:20;
clip: auto;
overflow:hidden;
}
Also, I may be wrong about this, but as far as I remember, you'll need to set positioning in order for z-index to have any effect. Like: position:relative.
Uhm... Try to add display:block for all images inside of a tag. This should work.
Correcting my original answer: You only set the left-margin, maybe you should also try setting the right margin to 0.