I want replace default close button in Fancybox 1.3.4 with custom one.
I've changed CSS as follows, but button not showing.
#fancybox_close {
width: 66px;
height: 22px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
background: url('../js/jquery/fancybox/closelabel.gif') 0 0 no-repeat;
}
Can someone help with this issue?
OK, this is solved. Just need to be specified correct path to image.
Related
I have problem which is frustrating me.
I have set up Swiper slider on my html - works fine no prob, but problem is with arrows -
i dont know why but when arrow is clicked then texting cursor appears and i think it shouldnt be that way.
Does someone has faced similar problem and how solved it?
thanks
Image 👇
css for buttons -
`.main-slider .swiper-button-prev {
position: absolute;
background-repeat: no-repeat;
height: 50px;
width: 50px;
border-radius: 50%;
top: 30px;
}
.main-slider .swiper-button-next {
position: absolute;
background-repeat: no-repeat;
background-color: #40A2D5;
height: 50px;
width: 50px;
border-radius: 50%;
top: 30px;
}`
`.arrow-container {
min-height: 66px;
max-width: 120px;
text-align: center;
margin: 0 auto;
border-radius: 65px;
position: relative;
margin-top: 80px;
margin-bottom: 65px;
}`
and the same problem is with HTML forms -
I can click outside form and this frustrating text enter cursor appears - probably it shows div but is it suppose to do that?
Image 👇
enter image description here
I was having the same problem and I thought that it was because of the swiperjs, but actually, in my case, I have accidentally enabled caret browsing mode in Chrome by clicking F7 button. Click F7 again to disable that mode. That option can be managed in settings in Accessibility page.
I am having some difficulties with a scrolling fixed header I am creating. I found a good example of it on here and now I am trying to make it work with my changes to it and I am trying to adapt it.
I put additional divs than what were in the example and now whenever I scroll past the yellow bar, the red bar(my header) displays way lower than I want.
I created a fiddle to show what it is doing.
https://jsfiddle.net/zoue6gv7/
This worked until I added my top margin to my div id join_login. It now is that far away from the top.
#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}
How can I get this header to stay fixed at the top after I get to my scroll point?
Is this what you want? https://jsfiddle.net/zoue6gv7/1/
I just removed the margin-top -50px and replaced it with
top: 0;
This should do the trick! You can just eliminate the space above #logo by adding margin-top: -15px
#logo {
position: absolute;
left: 15%;
top: 22px;
font-size: 2em;
margin-top: -15px;
}
Just kidding! I think I misunderstood what you're trying to do, if you want the red Header to stick to the top of the page even when you scroll down:
Use position: fixed; to tell the header to stay in the same location regardless of scrolling
Use top: 0px; to tell the header, that the location you'd like it to be fixed to is the very top of the page
header {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;
}
First for all: No, I'm not looking for the property position: absolute;
What I want to is to create a field that displays some text. I want to display that field exactly in the middle of the page and then fade out the background, doesnt matter, where the div is placed in the code.
At the moment it looks like that:
https://www.dropbox.com/s/wiljdh1xjj3we1c/Capture1.PNG
https://www.dropbox.com/s/chw7pdes5fdcj3u/Capture2.PNG
How can I place an Elemtn ABSOLUTE in the middle of the page, doesnt matter where it is written in the code?
Now I could just say well, I will place it on top of the content. But the problem is, in this field is displayed some information that generates in the content, so I have to put it in the code after the content.
I hope, someone can help me :)
PS: If you have another solution to solve something like this... feel welcome to tell me! I just want something like an alert();-Box with my own style.
EDIT: Some effort: (basically already shown with the screenshots, but here some code; just didnt want to make it confusing)
I save the text as following:
// Save Help-Text
ob_start();
?>
This is the main page. There is no help available!
<?php
$help = ob_get_clean();
I display the text as following: (echo create_help($help); creates the help-tag and displays it)
function create_help($content){
$help = "
<div id=\"help-bg\" class=\"closehelp\" ></div>
<div id=\"help\" >
<img src=\"../images/close.png\" class=\"closehelp\" />
$content
</div>
";
return $help;
}
This is the CSS for the box:
/* Help-box style */
#help
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
background-color: #B8DBFF;
border: 5px solid rgb(58, 100, 250);
border-top: 30px solid rgb(58, 100, 250);
border-radius: 5px;
padding: 20px;
width: 600px;
z-index: 1001;
#help img
position: absolute;
margin-left: 595px;
margin-top: -47px;
height: 25px;
width: 25px;
/* Makes background of Help-box transparent black */
#help-bg
background-color: black;
z-index: 1000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
opacity:0.6;
display: none;
First of all I would recommend using position:fixed; instead of position:absolute; because the alert would scroll within the page. If you have a fixed height and width try something like
margin: -150px 0 0 -150px;
left: 50%;
top: 50%;. This CSS-Code will center your div horizontally and vertically (Demo -> http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html). But if you are using an dynamic height maybe you should consider using jQuery or give it a fixed top position.
try this:
html, body{
position: relative;
}
.yourAbsoluteClass{
position: absolute;
width: 50%;
top: 25%;
left: 50%;
}
Ok, I'm not seeing something I guess...
I have an button that links down:
HTML:
<button id="get-down"><img src="images/arrow-down.png" /></button>
CSS:
#intro #get-down{
min-width: 4%;
max-width: 4%;
position: absolute;
z-index: -998;
bottom: 2%;
left: 46%;
border: none;
border-radius: 0;
visibility: hidden;
cursor: pointer;
}
#intro #get-down > img{
border: none;
}
JS:
// Scroll to demo section
$(function(toDemos) {
$('#get-down').click(function() {
$.scrollTo('#content', 500);
});
});
The JS code worked before, when I put it on list elements. But this should be able to work as well right? Or am I missing something?
Much thanks in advance!
Try scrolling the html element using the scrollTop method instead.
$('html').scrollTop(500);
or alternatively, if your #content is really scrollable, you can scroll that as well.
$('#content').scrollTop(500);
It works, check this http://jsfiddle.net/8eve6/2/
Are you sure you have included some sort of jQuery plugin like this one here: http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js" type="text/javascript">
I am working on a blog and wanted to add a next post button somewhere between every post like this website. http://www.damnlol.com/
In the website, you can see a blue button through which you can go to next or previous post. I tried creating something similar to my blog # http://viralonlineimages.blogspot.com/2011/11/invisible-man.html but nothing worked. Is there any way to add the button there?
This is the code which can place an image at the position:
Add position: relative; to your #main-wrapper div.
Add position: absolute; top: 45px; z-index:999 to #blog-pager span (You'll need to create this)
Add left: 0; to #blog-pager-newer-link
Add right: 0 to #blog-pager-older-link
#main-wrapper {
width: 580px;
margin: 20px 0px 20px 5px;
float: left;
word-wrap: break-word;
overflow: hidden;
position: relative;
}
#blogger-pager span {
position: absolute;
top: 45px;
z-index: 999;
}
#blog-pager-newer-link {
left: 0;
}
#blog-pager-older-link {
right: 0;
}
You can use negative values for left ad=nd right properties too.