I am trying to put a pdf object on my web page. The pdf loads fine, but it creates a gray area around the document. I know that the gray area is part of the pdf document and it is just part of the object, but I am trying to find out how to get rid of it. I have adjusted margins and padding. I have adjusted height and width to try and get it to go away. I have tried passing a zoom option to the pdf when it opens and nothing worked.
I want the document to load without creating any sort of edges or borders on the page. Any help would be appreciated. The markup that applies to it is below. I'm pretty sure it won't help much but you never know.
<article class="main_content">
<object id="resume_object" type="application/pdf" data="images/AlexsResume30Jan15.pdf">Alex's Resume</object>
</article>
article.main_content{
margin-top:70px;
}
#resume_object{
height:1190px;
width: 910px;
margin-left:20%;
margin-right:20%;
padding:-20px;
background-color:white;
}
I am just wondering, is there anyway to resize a video that is inside an iframe? Below is the code I am working on, when I tried to resize the iframe, it only resizes the wrap and not the player itself therefore creating a scrollbar. Is there anyway to resize the video player itself?
<iframe width="600" height="370" src="http://online.fairytail.tv/s/googplayer.php?skintype=nemesis1&to=1002MJumgQZG&autostart=false&id=108994262975881368074/Ft1#5832691710150899906"></iframe>
iframe{
width: 600px; height: 370px;
}
you cant style the elements inside iframe from another domain
unless they give you the ability to change some parameters in url or something...
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Here's your WORKING DEMO
$("button").click(function () {
$('embed').attr('width', '800');
$('embed').attr('height', '600');
});
Stackoverflow is not a code generator, that's why I only gave you a clue not a simple solution. It would be better if you can work out something and become your own knowledge. Id doesn't mean I don't really know how to.
In my page I have a frame .I need to design the frame independently and just place it in my page.I does not want to specify the frames style in the page where it included.But in the frame's style sheet.
I desinged the frame as follows
http://jsfiddle.net/Hf2pR/
In my page I included the frame as follows
http://jsfiddle.net/9Lckh/
The problem is that the width of the frame is not 20% (I specified 20%).
How to solve this?
How to independently design a frame and use it by just including it?
Hey you can define your iframe width properties as like this
<iframe class ='cLeft' src = './leftPanel.html' FRAMEBORDER="0" SCROLLING="yes" width="20%">
</iframe>
Live Demo
http://jsfiddle.net/9Lckh/1/
or This
iframe
{
border:none !important;
width:20%;
}
i am trying to put an html element -that i want to use to close it- over a video iframe,
trying with
#close{
position:absolute;
top:50px;
z-index:9999;
}
but it won't work. the iframe is always on top,
also tried to add
&wmode=opaque to the URL... but nothing
You can see/test here: http://jsfiddle.net/fdsaP/467/
Any idea what am i missing??? or it's just not posible?
This is possible. Solved it here: http://jsfiddle.net/vyder/fdsaP/506/
Essentially, you do need to set the window mode to opaque. But you need to set the option by appending ?wmode=opaque at the end of the video id, but before any other parameters.
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.