Having issues displaying some websites within iframes.
Live example of code
This one works.
<article class='nobackground'>
<iframe src='http://en.wikipedia.org/wiki/<?php echo $myid ?>'></iframe>
</article>
This one does not display. (neither will youtube, google or facebook, however static html seems to display fine)
<article class='nobackground'>
<iframe src='http://www.google.ie/search?tbm=isch&hl=en&source=hp&biw=1280&bih=679&q=<?php echo $myid ?>'></iframe>
</article>
CSS used:
iframe {
width: 100%;
height: 620px;
background: white;
border: 1px solid rgb(192, 192, 192);
margin: -1px;
}
article.fill iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 0;
margin: 0;
border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index: -1;
}
Google and many others forbid iframing of content through both Javascript (using top.location to detect current framing) and the X-Frame-Option header mention by Grzegorz Grzybek (which forbids framing for compliant browsers).
If you want to capture content you'll have to write a work-around page that does a file_get_content() or cURL call to fetch the code of the page and modify the code slightly (make URLs absolute, remove unwanted scripts) and then echo the code onto a local page.
You cannot iframe Google or other sites because of their X-Frame-Options sent through with the header. Your browser respects this and refuses to show the page you are trying to link.
Related
everything was working fine then randomly any CSS I add to my Message-inbox.CSS or any other CSS file in my project none of the added CSS gets applied I'm using a required once to link the header and footer and a html link for the pages own CSS. below is the links and my CSS code. I have tried clearing my browser cache and other data and also tried the link with the echo to stop storing cache but no results.
<?php
require_once "../addons/header.php";
?>
<link rel="stylesheet" href="Messages-inbox.css" type="text/css"/>
.secondarynavigation-messages a:hover {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
.secondarynavigation-messages a:hover::before {
width: 100%;
}
.secondarynav-messages ::after {
content: "";
display: table;
clear: both;
}
.secondarynavigation-messages a::before {
content: "";
display: block;
height: 5px;
background-color: #fd886b;
position: relative;
top: 40px;
width: 0%;
transition: all ease-in-out 250ms;
}
.messages-nav-line {
width: 100%;
background-color: #e6e6e1;
padding: 1px 0px;
position: relative;
z-index: -1;
top: 10px;
}
You have to options.
Check whether your CSS can be accesed from the URL that you provide. Just open up source code in Chrome (Ctrl+U) and try clicking on your linked CSS file and check whether browser opens it, and it is the correct file.
In order to avoid cache just add version to your css file in the section in HTML where you refer to it, not the of the file itself in the storage, smth like "style.css?v=1". Any new parameter will be considered as new file by browsers and they will redownload that. And it won't affect your code.
To clarify, do smth like this:
<link href="/css/stylesnew.css?v=1.1" rel="stylesheet">
I have these two styles that position my div in the footer of my page. What happens is that when you generate the content of the page for php, these div can override the content.
div.panel-foot {
position: absolute;
z-index: 2;
height: 30px;
width: 100%;
bottom: 0;
color: white;
background-color: #333333;
white-space: nowrap;
padding: 5px 100px;
}
div.panel-foot-information {
background-color: rgb(65, 65, 65);
position: absolute;
bottom: 30px;
max-width: none !important;
z-index: 1;
color: white;
font-size: small;
padding-top: 10px;
padding-bottom: 10px;
}
So what I do is when the content is small they stay on radapé ie with position: absolute, and when the content is longer they stay position: relative.
Anyone know a solution to resize content dynamically?
Unlike the other answers so far, I'm going to assume you have images and other things that a real website has, besides text.
I suggest using Javascript (since you've got a jQuery tag). PHP ultimately has no idea how much space the content will take up in the browser, so JS is your best option.
Have a look at my example here. If you remove some of the div content, you will see the footer color changes (because it changes the classname). all you have to do is plug in your own selectors and classnames and you're good to go.
// check the size of your conent div
// assuming it's got an id of "content"
contentHeight = $("#content").height();
// set the threshold that will determine how big is too big
threshold = 300;
// or if you want to make the threshold as big as the window...
// threshold = $(window).height();
// if the content height is greater than the threshold..
if(contentHeight > threshold){
// remove one class and add another
$("#footer").removeClass('green');
$("#footer").addClass('red');
}
// otherwise, do the opposite
else{
$("#footer").removeClass('red');
$("#footer").addClass('green');
}
I have added custom CSS to style.css file on my own custom skin in Wordpress 3.9.2. All classes seem to be working fine, apart from the new ones that I have added.
.frontpage_tile {
width: 270px;
float: left;
min-height: 1px;
margin-left: 30px;
}
.block {
display: block;
position: relative;
}
.block img {
display: block;
border: 1px solid rgba(53, 53, 53, 0.65);
box-sizing: border-box;
border-radius: 3px;
}
.block .caption {
font-size: 13px;
font-weight: normal;
line-height: 1.2em;
padding: 10px;
margin: 0px;
position: absolute;
bottom: 1px;
left: 1px;
right: 1px;
color: #FFF;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.6);
text-shadow: 0px 0px 20px #000, 0px 0px 10px #000;
z-index: 1;
}
The above code is just ignored by all browsers. It does not appear on the page, nor on "Inspect Element" in the browser. Any ideas? This is the code I am using on the template, which I am calling on the custom page.
<div class="frontpage_tile">
<a class="block" href="<?php echo get_permalink(); ?>" data-icon="">
<?php the_post_thumbnail('home-thumb'); ?>
<span class="caption">
<?php the_title(); ?>
</span>
</a>
</div>
I just scanned your website with wpscan for the sake of it, and here's your problem:
[+] Interesting header: CF-RAY: 15644be6d86308d8-LHR
[+] Interesting header: SERVER: cloudflare-nginx
[+] Interesting header: X-CF-POWERED-BY: WP 1.3.14
[+] Interesting header: X-POWERED-BY: PHP/5.5.14
You're using Cloudflare :) , just login into your Control Panel and enable Development mode.
I'll leave the old answer below, just in case someone finds this question and wants to know how to do a bit of troubleshooting:
If you go at the top of your stylesheet you'll see the following comments:
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Author: the WordPress team
[...]
Version: 1.4
[...]
*/
Just change your number version and Wordpress now will serve the stylesheet with the new version number, forcing your browser to re-download it, otherwise while you're under development you can register your CSS in that way (which is really handy):
wp_enqueue_style( 'main-style', get_stylesheet_uri(), array(), time() );
This enforces to append a timestamp on the CSS as query variable, so your browser believes that's a new file and the new fresh CSS gets downloaded every time you refresh the page.
Generally the CTRL/CMD + SHIFT + R works without any problem, if you still see your old CSS even with those changes one of these is probably what is causing problems:
Your website is using Cloudflare and you forgot to enable dev mode
Your wordpress is running a caching plugin
You're uploading your file in the wrong place
Cheers
in the css addd the !important syntax after the lines like this
.some_class_to_edit{
text-decoration: none !important;
}
And also try to check that there is no another css coming after that, which can override it
I'm trying to make a modal appear on a user's screen if they are using Google Chrome.
I have like zero idea what I'm doing. I know that I am detecting the browser correctly, but I do not know how to open up the modal. The modal opens if I put the if/else statement into a comment, but that means it will open up in every browser.
<?php
$browser = get_browser(null, true);
$detectBrowser = strtolower($browser['browser']);
if ($detectBrowser == "chrome") {
header("Location: #BrowserWindow");
}
else {
}
?>
In the body:
<div id="BrowserWindow" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
The modal is obviously just for a test. When I load it on Google Chrome, it says "This webpage has a redirect loop."
The location header causes a redirect every time the page is loaded in chrome, even if the anchor already reflects #BrowserWindow. This is causing a redirect loop.
Unfortunately, the hash(#) part of the URL is never sent to the server, so you couldn't check this if you wanted to.
You're going to have to use javascript, which is a much better way to do this anyway.
Take a look at http://www.php.net/manual/en/function.header.php
The header function is made to send http headers like 404 or redirect to a special page. You are trying to access the content of a page with header which is basically impossible.
PHP is a server-side language and can't interfere in your html once sent.
Instead try to write in your html the browser detected to open your modal in JS.
echo "var browser = ".$detectBrowser;
and then write JS
#+
The problem is that you're trying to redirect via header() to #BrowserWindow. Because you're not calling a path on a web server you're stuck in a redirect loop (because the header() function is looking for a resource on a server and you're trying to have it open an element on your page). More info on header(): http://www.php.net/manual/en/function.header.php
Your best bet would be to script it out in Javascript and have it open the modal on detection. Here is a tutorial to get you started: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
I'm trying to code a design I've just made: http://www.richardhedges.co.uk/brlan/design.jpg
I'm pretty much done coding but the only thing I don't know how to do is the footer overlapping the main content. What I'd like it to do is scroll the content. (Like it is on Facebook messages)
The footer is simply a div with nothing in it:
<div class="footer"></div>
And here's the stylesheet:
div.footer {
width: 980px;
height: 114px;
float: left;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
margin-bottom: 20px;
}
I need to create a new div which I'll include the content in (as shown in the design.JPG) however it must be 'behind' the PNG image in the footer. I've absolutely no idea how I'd do this - My apologies for ignorance.
div#footer {
position: absolute;
bottom: 0px;
z-index: 9001;
}
div#content {
position: relative;
}
Use absolute positioning and a higher z-index on the footer div than on the ones it'll be in front of.