What is proper way to display a gif image into the dialog with text with nice formatting etc..
So far here is my code:
Copy code
var $dialog = jQuery('<div></div>').html('<p>Sending your message...</p><img src="../images/AjaxWait.gif"/>')
however by doing this the gif is not aligned nicely to the text, etc
What is the best way to format content of the dialog?
thanks
bogumbiker
Float the paragraph to the left with CSS.
You need to use CSS, what are you looking for as the end result.
Something like this I would float my image left
var $dialog = jQuery('<div></div>').html('<p>Sending your message...</p><img src="../images/AjaxWait.gif" style="float: left; padding: 10px;"/>')
Related
I try to find a way to place the icon of a JMenu above its text. I've seen the method setComponentOrientation(..), but it influences only the horizontal order of the icon and the text (icon on the left side, text on the right - or the opposite). Is there any possibility to place these parts of a JMenu vertically (icon on the top, text under the icon)?
I'm not sure if you are fully able to do that. Maybe this page can help you out. http://www.java-forums.org/awt-swing/36112-adding-jpanel-jmenu-focus-issues.html I have never really tried adding an image onto a JMenu vertically. You could always try using a JPanel, and adding the JMenu into it, and then setting the layout of the JPanel as a BoxLayout
JLabel imageForIcon = new JLabel(// image path );
JPanel p = new JPanel(imageForIcon);
JMenu m = new JMenu(p);
p.setLayout(new BoxLayout(p, BoxLayout.Y_AXIS));
I am not sure if this would work, but it seems as it could possibly be an option to consider.
http://themeforest.net/item/retro-portfolio-one-page-vintage-wordpress-theme/full_screen_preview/1708109
I wish to create something similar to this, however there is a nifty button that takes a person back to the top of the page, as well as a static header DIV.
Would be a case that i make the top div fixed?
#div{position: fixed; }
also would the back to top function use:
"LINKING TEXT HERE"
But with some CSS styling?
thanks
Kirsty
There is a very nice plugin you can use to achieve this. You can find it here : http://wordpress.org/extend/plugins/dynamic-to-top/
I need to give an overlay texture to 100+ images
like this.
I have transparent .PNG texture file. if i use this as background then it will go behind the <img>. And I don't want to add another <img> or any extra span, div for texture and z-index.
Is there any other way to achieve it in CSS?
I need to use specific texture .png so i cannot use CSS gradient only.
I don't want to use main product image as background.
I'm afraid you're going to have a very hard time getting that texture overlaid on the image without some added element to put it on. If you can't affect the html output, a little javascript would do the trick.
Another option is to place the texture over the top of the other image with absolute positioning. It's hard to know if that's a viable option without more context, however. Here's an example: http://jsfiddle.net/cPSFQ/1/.
Glad your post is tagged with CSS3
http://jsfiddle.net/WQTeE/2/
You have to create a reverse mask of the overlay. I tested this in FF9 and Chrome 16
img.stockphoto{
-webkit-mask-box-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
-o-mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
-moz-mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
}
You can try this.
http://jsfiddle.net/Bs7nv/
In this all I am doing is displaying an image and a div in which we can use the texture image as background and absolute positioning to display over the actual image.
There is no pure css solution to your question that's cross browser compatible. I realize that this answer doesn't meet your original criteria, but I figured I'd supply it anyways so that you could have it as an option.
Using pseudo elements (:before) would be a logical choice for CSS3, but alas, they don't work on img tags.
You'll have to do something, rather change the mark-up or add some javascript. Assuming you can't edit the mark-up (sometimes you can't control your source data), but can control the javascript, you could do it with pure javascript like this:
var transparentImage = "http://rd.cas.de/tim/native/image.png";
var imageList = document.getElementsByTagName("img");
var arrImages = [];
for (var i = 0; i < imageList.length; i++ ) {
// store the images as is first, otherwise the list is living and
// you loop forever...
arrImages.push(imageList[i]);
}
for (i = 0; i < arrImages.length; i++ ) {
// first wrap all the images in a relative positioned div.
var wrapper = document.createElement('div');
var newImg = document.createElement("img");
newImg.setAttribute("src", transparentImage);
newImg.style.position = "absolute";
wrapper.appendChild(newImg);
wrapper.appendChild(arrImages[i].cloneNode(true));
arrImages[i].parentNode.replaceChild(wrapper, arrImages[i]);
}
Here's a jsfiddle that does what you want (but with javascript).
I have a QCheckbox in a grid layout defined as such:
self.isSubfactorCheckbox = QtGui.QCheckBox('Is &subfactor', self)
By default the checkbox is to the left of the "Is subfactor" text. I wish to move it to the right of the text.
I've tried playing around with subcontrol-position but to no avail.
self.isSubfactorCheckbox.setStyleSheet('QCheckBox::indicator{subcontrol-origin: content; subcontrol-position: top right;}')
This moves the checkbox to the right (it's still on the left of the text) but it pushes the text to the right and out of the window's edge.
This didn't help to move the text to the right:
self.isSubfactorCheckbox.setStyleSheet('QCheckBox::text{subcontrol-origin: content; subcontrol-position: top left; }')
A solution would be creating a QLabel and adding the checkbox on its right but I don't haven't found a way to underline letters in a QLabel so that the user will know which is the shortcut key. I've tried prefixing letters with & or wrapping them in <u> </u> tags.
I'd still prefer to use only a QLabel, but how would I switch the checkbox to the right of the text without the text getting pushed out.
Even easier...
Use the QWidget.setLayoutDirection method and set it RightToLeft vs. LeftToRight
You can do this in Designer or through code, it is a property or all widgets.
Use the buddy mechanism. Set the QCheckBox to the buddy of the QLabel. After that prefix & will underline the shortcut character in the label. See the documentation of the QLabel's setBuddy.
I have a ASP:Menü in vertical style.
The MainItem is only 1 Button, deisgned by a Image (no text, pure image).
The ChildItems are normal Text.
Here is a very high zoomed screenshot: http://s2.imgimg.de/uploads/UnbenanntesBild661673a8png.png
Now, beacuse of the image, the childItems look very... strange, because the ChilItems begin, where the button is not there (very hard to explain, sorry).
I want to have the child menü begins at the pixel the button beginns after the white seperator in the image.
So, I want to move the whole childItems 2-4px to the right, how I can do this?
You need to add a left rule to the style of the sub-item, similar to the following:
.subitem
{
...
left: 1px;
...
}
You will need to figure out the exact spacing for yourself, as you have not included the actually styling for me to test with.