I'm trying to implement a css menu in a website, and have run into a problem.
Note: The css is in the file, it's the only thing under The javascript is called http://w.sharethis.com/button/buttons.js and it's defined on the header as well.
The menu is called cssmenu.
The problem is, on that css menu, when hovering over contact, the background colors are transparent, and with my limited knowledge on the subject, I really don't know how to fix this.
The css menu is not my creation, I found it on the web. I have modified many properties that I knew how, but got stuck there.
You need to bump up the z-index of the main menu <ul> so it always appears over the ShareThis bar:
ul.cssmenu {
display: block;
zoom: 1;
float: left;
position:relative; /* allows the z-index to be effective -- http://www.w3.org/wiki/CSS/Properties/z-index */
z-index:100; /* makes the menu appear above the ShareThis widget */
}
If I understand your problem correctly, the issue is that the menu is positions incorrectly on the z axis.
Try adding something like this to bring it forward on top of the buttons:
.cssmenum {
z-index: 1000;
}
z-index seems to be the right solution, I have just checked now.
However I have also noticed that tabels have been used to build the menu with social icons. I suggest creating a DIV and use CSS to position it where needed.
add z-index:2;
ul.cssmenu, ul.cssmenu ul
in this class and you will get your result :-)
You have to set a ground zero for your z-index like this
body{position:relative;
z-index:0;}
Then you can give each of your menu's a z-index
.div1{z-index:1;}
.div2{z-index:5;}
Related
By "selector bar", I am referring to the selected tree-cell from when you click on a node of the TreeView. I'm using javafx8.
When an object in a TreeView is selected, the selector bar stretches to edges of whatever pane contains the aforementioned TreeView, like in the image above. What I want to achieve can be seen below.
I figured a reasonable way to achieve this would be to write a couple of css blocks. First, one that makes the current selector bar not visible, like below,
.tree-cell:selected
{
-fx-background-color: transparent;
}
in combination with a css block to make whatever node contains the icon and label some background color. I can't find a resource that lists the substructure of the TreeView or TreeCell; I did not see much here, and there were no related google search results other than the documentation linked. Maybe I'm not looking in the right place? Anyway, I would imagine a second block would go something like below
.tree-cell:selected > .hbox
{
-fx-background-color: blue;
}
where hbox should be replaced with whatever node contains the icon and label. If anyone could tell me what information I'm missing, or perhaps this is possible an entirely different way? I would really appreciate any efforts.
Thank you so much for your time.
I'm using vaadin 8.1 in my project.
I needed to give an extra large width to a grid column (the latest at the right), and when user clicks in one field of this extra large column, vaadin move horizontal scroll automatically at the end of the grid. I would like stop this vaadin behaviour. I researched and I tried different things but I didn't find anything,
How can I do it?
Thank you,
Best regards
There is no API in Vaadin to turn it off (You can find feature request here: https://github.com/vaadin/framework/issues/7667). There is one trick you could try, namely disable pointer events in Grid cells. It is a bit harsh method, since it will disable also selection and item click.
In your code
grid.setStyleGenerator(item -> { return "disable-events";});
And your theme
.disable-events {
pointer-events: none;
}
It is possible to add the style generator also for one Column only, which could be option to you as well
I googled for this, but couldn't find anything. I know that I can style a Buttons text, background colour etc, but I would like to change the text itself.
This is what I've tried (of course the actual end result is more complex, but this will do):
Button#playButton {
-fx-background-color: #ddd;
-fx-text: "Play";
}
the background colour is correctly applied, but the text does not change.
Edit: The way to go seems to be a custom property, if someone has knowledge within that field I would love a concise explanation and implementation, that could save me hours of trial and error with the few sources I found!
No you cannot set the text of your button using css. But hey! In the other hand, you can still display an icon in your button using css!
You only need to add this to your css :
-fx-graphic : url("relative path to your icon");
In case your icon is repeated in the button, then add this as well :
-fx-background-repeat : no-repeat;
I want to remove the Selected page label (see image below) of the Pagination control.
After digging into caspian.css I wasn't able to find any clue about how to do that. By code I also didn't find any method to remove (or eventually hide) this label.
Is there a way to do that in JavaFX without re-implementing the whole control ?
Use -fx-page-information-visible
It's described within these links:
http://docs.oracle.com/javafx/2/ui_controls/pagination.htm
https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/pagination.htm#JFXUI459
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#pagination
I couldn't find a way either to hide just the label, but would it help to hide the whole button?
.number-button:selected{
-fx-opacity: 0;
}
That would hide the current selected button.
It's not what you actually wanted but maybe it can help you.
Firstly I am no longer a student and doing this for other purposes, so don't hold back on the help ;)
I want to incorporate a simple program into my webpage. I want 4 buttons labelled right arm, left arm, activate voice and walk forward. There will be a box above these buttons showing an image of a robot and as the buttons are pressed by the user I want a different image to be loaded in the box.
So if the right arm button is pressed the image with the robot raising its right arm will need to be displayed.
So basically all I want the buttons to do is to load the image that belongs to each one. I am assuming java is the best choice? I have the open source Java package, would I need any other software when it comes to embedding it into a webpage? My webpage is done on dreamweaver and I am pretty good with html. Would appreciate it if someone could point me to the right direction.....Thanks
Don't use Java for this. Use JavaScript. Something like this:
HTML:
<img src="one.jpg" id="firstImage" />
<img src="two.jpg" id="secondImage" />
<button id="doSomething">Do Something</button>
<button id="doSomethingElse">Do Something Else</button>
CSS:
img {
display: none;
}
JavaScript:
var hideImages = function() {
$('#firstImage').hide();
$('#secondImage').hide();
};
$('#doSomething').click(function() {
hideImages();
$('#firstImage').show();
});
$('#doSomething').click(function() {
hideImages();
$('#secondImage').show();
});
What this essentially does is initially display no images, just buttons. Then as each button is clicked, the corresponding image is displayed. (And all other images are first hidden, since previous button clicks would have displayed previous images.)
This is an overly simple proof of concept, of course. At the very least you'll want to use better variable names :) This just demonstrates the idea of how you'd show/hide images in JavaScript in response to button clicks. (This also assumes the use of jQuery, which is a safe assumption these days. The easiest way to use that is to refer to a CDN link in your page, using a standard HTML script tag.) You can see this code in action here (though the images are broken, of course.)
If there are a lot of buttons and a lot of images, you may be able to re-factor the code to be less repetitive as well. Maybe store the images in an array and have a single button click handler which can associate the sending button with the correct array element, etc. That's up to you.
There are many technologies that could help you: javascript is one of them and it would be much simpler than using Java for such simple thing. You can use Java applet if you really want to use Java for that project.