Hey my question is how they made that, that the bar over and under the text fade in when the site is displayed ?
http://joy-interactive.com/
-Kai
They probably set a jQuery event to automatically trigger the animation upon $( document ).ready
$(function() {
$("#progress-bar").toggleClass("top-bar-animation");
});
And then in their CSS, they have something like:
.top-bar-animation {
//animation code here
}
Related
Basically:
div:hover
{
body{ background-image:(bg.png); }
}
This is logical code, I know it does not work, but its the best how I can show you my problem.
Well what your trying to accomplish cannot be achieved that way using Css only, You can do it using jquery like this
$("#someDiv").hover(function(){
$("body").css("background-image", "url('image_url')")
});
In css ,You can not do this as "body" is parent element to "div" and it should come next to the element hovered to use the for format like
firstelement:hover second_element {/*styles*/}
you can use jquery to achieve it
$("div").hover(function(){
$("body").css("background", "url('url_of_image_here')")
});
or javascript
elem = document.getElementById("ID");
elem.addEventListener("mouseout", function(){
document.getElementsByTagName("body")[0].style.backgroundImage="url()";
});
Using the JQuery UI datepicker, in the header it gives you the option to go to the next month or previous month with left/right arrows. My question is what is the css property to change the colors when hovering over the previous or next arrows?
ui-state-hover is the class that is applied when hovering, see here
It's a little harder than it seems. As NimChipsky pointed out, it's in ui-state-hover, but the colors aren't there directly.
If you look at ui-state-hover, out of the box, you will see something that looks like:
background-image: url("images/ui-icons_222222_256x240.png");
Basically, this is telling you that you will be using an icon sheet with color #222222, but the icon sheet graphic has to be available. You can generate other icon sheets directly, with other colors, by using the jQuery UI theme builder.
<script>
$(".ui-datepicker-next, .ui-datepicker-prev").hover(function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
});
</script>
and css for your class 'hover'
.hover
{
background-image:url('paper.gif');
}
I would like to style my selected button.
I would like to display a light-blue border around the image of my selected button to show which page the user is on. (or just use the same hover image as the selected button image when the button is pushed.)
I didn't have success with the css link selectors :visited, :focus, or :selected.
Does this require a javascript solution?
thanks for any pointers!
i usually just a extra class name called selected
<div class="button selected">Button 1</div>
<div class="button">Button 2</div>
.selected {
border: 1px solid #0000ff;
}
It depends on how you display your page (using ajax or refresh on every click). If you are using javascript to load the page content than you just put an extra classname using javascript when the button is clicked.
you should use :active pseudo class in css to achieve what you want.
jQuery Solution with your CSS
You would probably want to check first if it is selected, that way this solution works with things like Twitter Bootstrap, where you can make any element act like a button:
$(function () {
$('div.button').click(function(){
if ($(this).hasClass('selected') {
$(this).removeClass('selected');
//Insert logic if you want a type of optional click/off click code
}
else
{
$(this).addClass('selected');
//Insert event handling logic
}
})
});
You will, in fact, need to use javascript. I did this in a project a while back, by iterating through the links in the navbar, and setting a class called "selected" on the one the user is currently visiting.
If you use jQuery, you can accomplish it like this:
$(function() {
$('#navbar li').each(function() {
if ($(this).children('a').attr('href') == window.location.pathname)
{
$(this).addClass('active');
}
});
})
The CSS Pseudo-selector :active won't still be active after a pagereload.
I currently have an asp form that uses jquery for two elements: an image upload and a datapicker.
The code that implements the image upload is
$(function() {
$("#wcpImage").makeAsyncUploader({
upload_url: "/Business/ImageUpload",
flash_url: '../../Scripts/swfupload.swf',
button_image_url: '../../Content/images/blankButton.png',
disableDuringUpload: 'INPUT[type="submit"]'
});
});
With an input element <input type="file" id="wcpImage" name="wcpImage" />.
The code that implements the Datepicker using the JQueryUI DatePicker widget is
$().ready(function() {
$('#Business_Work_Cover_Expiry_Date').datepicker({ dateFormat: 'dd/mm/yy' });
});
With an input element generated by <%= Html.TextBoxFor(m => Model.Business.Liability_Expiry_Date) %>
The datepicker pops up when users enter the text box for the expiry date. The issue I'm having is that the buttons for the image upload are appearing over the top of the datepicker.
Can I use CSS z-index to fix this and how?
The use of the CSS z-index is most likely the only way to hand these types of issues.
This might do it:
<style type="text/css">
#ui-datepicker-div {
z-index: 9999999;
}
</style>
Turns out that it was because the buttons were flash objects being drawn with a wmode of Window, which means that z-index will have no effect as the button is rendered over the top of everything. Set the wmode to Transparent in the javascript and now it works.
Found the answer here.
A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:
http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm
Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.
Is there a workaround? At least with pure CSS or DOM hacks?
I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.
You can however work around it with Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.nav_element a').mouseover(function() {
$('.submenu').hide();
$(this).parent().find('.submenu').show();
});
$('.submenu').mouseover(function() {
$(this).show();
});
$('.submenu').mouseout(function (e) {
// Do not close if going over to a select element
if (e.target.tagName.toLowerCase() == 'select') return;
$(this).hide();
});
});
</script>
The code above uses jQuery.
Here is a way to improver select behavior in IE7/8, but it does not fix the issue
Change DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Add script
<script>
function ddlOut(e) {
setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
}
</script>
Add css
#nav .over div.submenu
{
display: block;
}
#nav .nav_element{
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("ddlOut(this)"),
this.style.behavior = null
);
}
It will work better at least but of course not perfect.
My advice is to change select control to html equivalent. I use OboutDropDown that has a nice view. There are many implementations that can suite you needs.
First you need to expand the :hover surface underneath your menu.
So in your css add width:310px;height:220px to #nav .nav_element a.
(also add a class or an id on the second div styled with top:220px)
Now you just need to simulate a mousedown triggered when you click on the select which will halt when the selection between the options is done - you can probably do the last part if you check for the onfocus state of the select which will stop the mousedown.