I have this piece of code in my style sheet to change the cursor to a pointer on one page, and it works well except on firefox, where it doesn't give you a "pointer" finger to let you know the page is clickable.
html {
cursor:pointer;
}
The thing is, the normal method of putting an onclick event in the body tag isn't working. (shown below not working)
<body onclick="window.href.location=filename">
body text
</body>
How do I get a pointer finger on the whole page instead of the normal mouse cursor in firefox?
Add a hover rule to the body element.
body:hover {
cursor:pointer;
}
You'll have to fill your whole screen with the element.
html {
cursor:pointer;
width: 100%;
height: 100%;
}
Check this JSFiddle that I put together for you.
I guess you need to fill the entire page with some element like:
<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px">
</div>
and use this inside the body. There you probaly need to care about the bodies margins.
Or you append a click handler to the entire window via JavaScrip:
window.addEventListener("click", doSomething, false);
Make life easy:
CSS
#page{display:block;position:absolute;top:0;bottom:0:left:0;right:0;}
Related
I am using a simple iframe code;
<iframe src="http://caesium.x10.mx/test/index.html" allowtransparency="true" style="border:none" width="852" height="500"></iframe>
And inside http://caesium.x10.mx/test/index.html there is a working button (bottom right) but if you try to click this button on the iframed page (http://caesium.x10.mx/test/index.php) the button does not work.
Can anyone help me find a solution to this?
Thanks!
The code being used for the button.
<center><button onclick="ChangeSkin()">Change Skin</button></center>
<script>
function ChangeSkin() {
location.href = 'https://www.minecraft.net/profile/skin/remote?url=https://crafatar.com/skins/' + document.getElementById('username').value + '.png';
}
</script>
Is it possible the entire iframe is behind another transparent layer?
Try setting css properties:
EDIT:
Position:static;
z-index: 1000000; (or higher than any other elements)
You can do this either in a linked .css file, or within the head tags of the page like so:
<head>
<style>
#content{
Position:static;
z-index: 1000000;
}
</style>
</head>
I often find this to be the issue when ui elements are not functioning as expected.
Your transparent footer div is overlapping the iFrame. If I give your content div a positive z-index (like #content { z-index: 1; }), then the div containing your iFrame is layered on top of the footer, and all the buttons start working again.
Iframes are great, but from what I remember the entire Iframe is one button.
Thats because of exploits that broke out a long while back. The Iframe is basically a live updated screenshot.
I have however seen many that allow links.
So, I would try the other answers first.
I have solved this problem in bootstrap 4 by adding the following to my custom stylesheet:
iframe{
z-index:9999;
}
That seemed to do the trick
I want to have the background color stay after I click on the div.
This div is linked to target another div.
<div class="barbutton">ABOUT</div>
here is the CSS of the div i click on
.barbutton:hover {
background-color: #7BDFBE;
}
so I want the background color to stay when its clicked.
I think what you're trying to achieve is the normal link behaviour i.e. it changes colour and stays that way to indicate it has already been visited. If yes, then you're approaching the problem the wrong way in CSS.
Instead of putting the CSS on a new DIV inside the <a> tag put the CSS on the link itself.
<a class="barbutton" href="#aboutbody">ABOUT</a>
Then use the link states in CSS as below:
a.barbutton:visited {
background-color: #7BDFBE;
}
a.barbutton:hover {
background-color: #7BDFBE;
}
Similarly, add the other links states you require.
To maintain state like you are wanting, I would suggest using some javascript/jQuery.
Javascript:
<div id="barbuttonid" class="barbutton">ABOUT</div>
<script type="text/javascript">
document.getElementById("barbuttonid").onclick = function() {
document.getElementById("barbuttonid").className += " clicked";
};
</script>
jQuery:
<div class="barbutton">ABOUT</div>
<script type="text/javascript">
jQuery('.barbutton').click(function() { jQuery(this).addClass('clicked'); });
</script>
CSS:
/* anchor tags are inline and cannot contain blocks elements like divs */
#aboutbody {
display: inline-block;
}
.barbutton:hover {
background-color: #7BDFBE;
}
.barbutton.clicked {
background-color: #7BDFBE;
}
Now when it is clicked, the additional class will be added and the CSS style can make the background persist for you.
EDIT/NOTE:
Ravi's answer is better as it does not use javascript. If you kept the HTML layout as you have it, the CSS declarations would have to be:
a:hover .barbutton {...}
a:vistied .barbutton {...}
Also, this way will make the style persist as long as the browser remembers that the link has been visited (user comes back in 3 days and the background color may still be persistant). My way above will not keep the background as soon as the user refreshes or leaves the page. I guess it depends on what you are going for.
I'm using code from this answer to print a separate page directly from a print button. The user clicks the print button and a url is sent to the print function. The print function loads the separate page into a display:none iframe and prints that iframe onLoad. It works in IE, Chrome but not firefox. In firefox it loads the page into the div but never prints or opens the print dialog. It turns out firefox will not print an iframe if it is set to display:none as below:
<div id="printerDiv" style="display:none"></div>
Is this expected behavior? All other browsers print, I'm thinking of posting on Bugzilla. I tried some css "tricks" to make the div not display where the user can see it, but it's always visible in some way. I'm currently using the below CSS to make the iframe invisible:
#printerDiv iframe{
width:1px !important;
height:1px !important;
border:0 !important;
margin:0 !important;
}
But it's margins still exist and leave a 14px gap once the iframe is generated.
Is there some way to make the iframe not be visible at all without the display:none attribute? Better yet, is there some way to do this without a hack like that?
I even tried using CSS to set the iframe to display:block #print media types and display:none for screen, the JS function still won't print.
If you absolutely position your iFrame off the page, it will still be printable while not being visible to the user.
#printerDiv iframe{
position: absolute;
top: -1000px;
}
I had exactly the same problem. When the display attribute is set to none, Firefox returns 0 for $('#printerDiv').css('height'), $('#printerDiv')[0].style.height or when outerHeight() or outerWidth() are called on the element.
I used z-index for this which does not bind you to use position:absolute.
So, you could have this in the css file:
#printerDiv { z-index: -10; }
Then, when you want to make it visible, just set the z-index using a jquery css() call.
If you control the content of the iframe, make it print itself:
<script type="text/javascript">
window.print()
</script>
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.