C:\Documents and Settings\Omar.Abulawi\Desktop\t3\main.htm
This is a site i'm working on, now i'm trying to change and replace the main image with different ones according to one of the five menus once they are clicked. But with no use!
Your help and advice would be appreciated :)
Well, based on what you've said, this JavaScript should do it:
function changeimage()
{
document.getElementById("picture_id").src = "new_file_path";
}
Call that function in the onclick events of your menus.
You can actually do this with pure css using The :target pseudo class.
FIDDLE
Note: You'll need a modern browser to use this method. (IE9+)
Also, take a look at this article which shows some clever ways to simulate click events with css (one of them being the :target pseudo class.
Related
I've made an global css that I used in two page (basic search and advance search page). I use it in advance search page, and the css script is running well. But when I move to basic search page (by click a link), the css not working. I used firebug to see what happen, and then I found that the css script is strike-through.
How can I solve it,.?
That basically means that your CSS property is being overriden by another CSS.
See where that property is defined, and you'll probably need to fix the order of the CSS inclusion on your web-page.
If you want to override the css from here means, all you have to do is set !important to your css.
like input.range{ width:73px !important}
Hope it will help you.
The width: 73px;rule is overridden. As you see the input.range is defined in cramp.css. Above you should find a rule that overrides it.
Does anyone know how do I specify that jQuery UI's datepicker will have my own CSS class?
I'm not talking about the div\input that the datepicker is "made on", rather about the pop-up that comes up when you open up the datepicker.
This div's id is: ui-datepicker-div
I can define my own styles for that pop-up using
.ui-datepicker { blah }
but, what if I have several datepickers, and want different styles for each?
I can't even do something like
.myContainer .ui-datepicker { blah }
Since the datepicker's div is added by jQuery such that it is right under "body" in the DOM. That's why I'm asking if there is a way to specify to jQuery UI to add my own class to that div, sort of like the "dialogClass" option that exists with jQuery UI's dialog ...
Thanks
You are correct that there is only one actual datepicker UI element on the page, but you could use the beforeShow event to add a class or change a theme for different elements. I added a small demo here that changes the border for different datepickers. You could add in other styles as you need. Might even be possible to swap to different jquery themes with enough effort :-)
I don't think it is possible with a simple option, but it is possible i think, the code can be seen here.
You should be able to see where the classes are set, I'm no javascript guru, but it should be possible to do something like this:
Datepicker.prototype._currentClass = Datepicker.prototype._currentClass + '-theme1';
then define a class as ui-datepicker-current-day-theme1
Somebody may correct me though!
By default JQuery UI doesn't support multiple calendar styles on 1 page. It could be possible to alter the datepicker component to include it, but you would have to take the time to figure out how to modify the javascript.
I am running into this problem where my page loads and then after a fraction of a second the CSS effects or styling takes place.
The main issue I am seeing is with the JQuery tabs that I am using
http://docs.jquery.com/UI/Tabs#source
When the page renders, the tabs show one below the other for a second like this:
One
Two
Three
and then render properly as tabs
Is there a quick and easy way to fix this.
Thanks
It's not the styling; it's the jQuery UI javascript library, which is appending the necessary html to your page so that the tabs can look all pretty-like.
You have a few options. First, you can hide your tabs and display them once jQuery UI has completed its magic. Second, you can style your tabs so they look close enough to the finished output so that the change isn't so noticeable. Third, you can drop jQuery UI and style the tabs with CSS only. All valid approaches, I'd say.
Hope this helps!
EDIT:
For the first option, let's say that this is your div containing the tabs:
<div id="tabs">
...stuff...
</div>
In your stylesheet, hide #tabs:
#tabs {
display:none;
}
Then, modify your jQuery UI call like so:
var t = $("#tabs");
t.tabs({
create:function(){
t.show();
}
});
weirdlover's response almost worked for me (using jQuery 1.5.2), but I had to hook the create event:
var t = $("#tabs");
t.tabs({
create:function(){
t.show();
}
});
Thanks!
Browsers usually load files as they appear in your HTML code. Be sure to put the reference to your CSS file first so it loads as soon as possible.
If the CSS is being applied using Javascript, it's not possible to make it load faster. The Javascript file needs to be loaded before it can be used.
Other than that, I don't think there's a way to control how the browser rendering works.
Is the CSS applied through Javascript? In that case you can add some static CSS that ensures the elements get at least shown horizontally arranged before the javascript is executed, by adding some static CSS.
If it is the case that the browser just decides to apply the CSS after rendering without it, there is not much you can do. It could however be, that the CSS is loaded to slowly (if its an external file), in this case, you could add the most important style to a CSS-section directly in the HTML.
i have few listbox widget, and i need to change the color of the arrow that opens the drop down list, and its surrounding box
how can i do it with the CSS?
is there an attribute list for all styles that can be applied on a widget?
Me
The javadoc for GWT specifies what styles you get by default on each of the Widgets:
See ListBox javadoc page, it states that it has the .gwt-ListBox { } style. For this particular style GWT doesn't have any property defined.
Open the css file inside your applications "war" folder and paste .gwt-ListBox { }, then put any CSS property you want to use inside that style, like .gwt-ListBox {
color: red;
}
You should probably notice that ListBox is using a select HTML element (have a look at the generated HTML code), and AFAIK you cannot style the color of the arrow, as it is browser dependent.
If you really need to do that you are going to have to try more complicated things like the ones suggested in here, but this involves doing some javascript hackery.
FWIW, I had a quasi-related problem, which may or may not help you. I needed to be able to set the color of the text in the label of a checkbox programmatically, depending on where the checkbox was in a list of checkboxes and a couple of other factors.
It turned out to be possible to construct the checkbox with some html, roughly like this (sorry, currently away from my code): "new CheckBox(new Html(""));
Hope that helps at all; I don't know for sure that the ListBox enables construction with additional html. And it took a bunch of experimentation to figure out exactly what worked in there. But now it does.
I am using the AJAX Control Toolkit Popup Calendar Control in a datagrid. When it is in the footer it looks fine. When it is in the edit side of the datagrid it is inheriting the style from the datagrid and looks completely different (i.e. too big).
Is there a way to alter the CSS so that it does not inherit the style from the datagrid?
Open the page in firefox. However, first, download the firebug extension. Then, right click on the offending version and go down to inspect element.
Firebug is awesome because it let's you navigate the css of any element. You have two options here:
1) Assign the topmost element an css class and work it that way.
or
If that's not an option, you can use firebug to get the xpath to the offending element.
Xpaths look like body/table/tr/td/table/tr[2]
what you want to do with that in css is
body table tr td table tr {
/*css goes here */
}
Option 1 is definitely the better pick. Option 2 is more of a dirty way of getting things
done when things like asp.net doesn't let us have the fine grain of control we want.
It would be really awesome if you used a pastebin and posted the link to your rendered page's html.
It uses the style from the grid, because it's in it. If you want to change it's style, change the style of the control. What do you want it to do?
Here is the pastebin link:
http://pastebin.com/m17d99f8a
I am using a stylesheet for the grid that I got from Matt Berseth's blog located here:
http://mattberseth.com/blog/2007/10/a_yui_datatable_styled_gridvie.html
I am using a similar stylesheet for the calendar that I cannot find the link for anymore.