Hi I'm using facebox plugin to display iframe link.
I want to change the style of my close button. I want to show it on Top can any one please help with CSS part.
I want to make facebox draggable is it possible to do soo..
Thanks
For Dragging facebox window i used jquery UI's draggable plugin like this,
$(document).bind('reveal.facebox', function () {
$("#facebox").draggable();
})
thats it.
For close button CSS im using,
facebox .close-image
{
background-color: inherit;
position: absolute;
right: -2px;
width: 24px;
height: 22px;
background-image: url(../images/close.png);
cursor: pointer;
z-index: 1103;
display: none;
}
Related
I want that when I click on a point in leaflet my popup opens on the left side. How can I do it?
https://i.stack.imgur.com/57zfZ.jpg .also
I change style leaflet css file like this :
I change this part :
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
to:
.leaflet-popup {
position:absolute;
top: 1px;
left: 1px;
}
But not working!!
I enter new style in my HTML and done!.
[Codepen]: https://codepen.io/stackoverflowcom/pen/OJJwooE/ "view on Codepen"
I am creating a website on Wordpress and I would like to have a horizontal navigation menu in my header with the logo in the center as a link to the homepage. I have been able to create this look using the Wordpress menu, but when I look at the website on my phone the "home" link is situated in the center, which isn't how I would like it to be ordered.
Using the current template (HTML) is there a way to finagle the CSS so the nav menu looks similar to these guys: http://bostonscally.com?
Thanks!
#mpcth_page_header_content #mpcth_logo_wrap #mpcth_logo {
display:none;
}
#mpcth_page_header_content {
text-align: center;
padding: 0px 0px 0px 0px;
}
#mpcth_menu {
font-size: 18px;
font-weight: bold;
padding: 10px;
display: inline-flex;
}
#mpcth_menu .menu-item-166 > a {
position: relative;
background-image:url('/wp-content/uploads/2014/01/Bostin-Irish-Header_Woo.png');
background-repeat: no-repeat;
background-position: 0px 0px 0px 0px;
width: 300px;
height: 100px;
text-indent: -9000px;
padding: 0px;
}
#mpcth_page_header_content #mpcth_controls_wrap {
padding-right: 2em;
vertical-align: middle;
}
I recently answered a question similar to this.
It can be found here: How to add a custom item to a specific WordPress menu item position
There are 3 options as i said in the answer above.
jQuery, PHP or HTML/CSS and its down to what you are most comfortable with and if it is for a client, what they most prefer.
I would personally go with the PHP way and split the navigation in 2 and have the logo in the middle.
EDIT
So you'll need the jQuery version.
Your navigation will need to be setup with Home being the first element on the navigation. This will mean that the mobile version will have home as the first link.
Next you need to add the jQuery below underneath your inclusion of the jQuery library
jQuery(document).ready(function() {
jQuery("ul#mpcth_menu").find("li:contains('Home')").hide(); // hides home from navigation
var position = jQuery("ul#mpcth_menu li").length-1;
var i = 0;
jQuery('ul#mpcth_menu li').each(function() {
if(i == position/2) {
jQuery(this).after('<img src="http://www.bostonirishclothing.com/wp-content/uploads/2014/01/Bostin-Irish-Header_Woo.png" width="250" />');
}
i++;
});
});
This code removes the first element from the main nav, being the Home button, then figures out how many is left and places the logo into the middle.
You will also need to remove the CSS which adds the logo to the class menu-item-166 as this may cause problems.
Hope this fixes your problems.
DEMO
i have created a web page with a modal popup control.
Within this control i dynamically build a html to display data.
Within some of the tables tags i have the following:
<td>
<span>S</span><span class="pop">description</span>
</td>
i want to create a popup effect when hovering over the tag.
My CSS is:
a .pop {
display:inline;
position:absolute;
visibility: hidden;
background-color: #FFFFFF;
border: solid 2px #000000;
padding: 5px;
margin: 0 0 0 10px;
color: #000000;
text-align: left;
font-weight: normal;
}
a:hover .pop {
visibility: visible;
}
This works perfectly when i use the control within a standard HTML page.
It appears to work within the modal popup control, until i need to scroll down the modal control when the table data is larger that the modal window.
The hover effect then appears to not be working. I think this is because im using the "position":"absolute" for the ".pop" class, and the hover effect is working, but its position is no longer relative to the tag because I have scrolled through the page.
I am not able to get round this and its killing me. Do i need to dynamically reposition the control using a "mouseover" event, or can this be achieved via CSS, and I’m just missing something / being a novice.
Karl
Try adding this:
a { display:block; position:relative }
This will make the span.pop be positioned relativily to the a tag it is in.
example:
http://jsfiddle.net/R4Erw/
so I'm using fancybox, as well as Google's minify http://code.google.com/p/minify/
but then after minifying the fancybox css, when I click on something that is fancyboxed, the close button on the fancybox disappears from it...
I checked the minified css source code, and there doesn't seem to be anything wrong with the close property:
#fancybox-close{position:absolute;top: -15px;right: -15px;width:30px;height:30px;background:transparent url('/jqui/plugins/fancybox/fancybox/fancybox.png') -40px 0px;cursor:pointer;z-index:1103;display:none}
versus the normal version
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('fancybox.png') -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}
does anyone know how to make fancybox close button still work despite minifying css using google's minify...
without minification, everything works correctly
The image path is probably wrong, try giving it a background:red or something and see if it shows up.
I have a button i want to convert the button into a hyper link, it works fine in Mozilla but in Internet Explorer it presses down as a button a click takes place ... so please help ....
Input.Button-Link, input.Button-Link:active
{
border: 0px;
behavior: url("cssHover.htc");
padding: 0px;
width: auto;
overflow: visible;
background: transparent;
color: Blue;
text-decoration: underline;
display: inline-block;
}
input.Button-Link:active
{
padding-right:50px;
outline:0;
}
Input.Button-Link:hover
{
cursor: pointer;
}
I don't understand what you're trying to accomplish but here are a few things you can try:
Add styles to input.Button-Link:focus
By using <input type="image" src="button.gif" alt="Button" />
In conjunction with jQuery use this plugin to style your buttons
You need JavaScript to solve this for IE.
IE's behaviour here is hard-coded and can't be changed with CSS IIRC. The last thing that springs to my mind is to use display: inline instead of display: inline-block.
You might be better off using a link and a tiny bit of JavaScript.