I have a social netowork coded in PHP and css. Ive realized that it looks so much nicer and cleaner when its zoomed out at 90% instead of 100%. Is there a piece of code I can implement into the php or css to make the webpage automatically zoom out when its visited? This is mainly only for the login page.
if you want to take a look at the site, heres the URL: social.flamboyantent.co.uk
Thank you in advance.
If I understood you right.
This should work:
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "90%"
}
</script>
<body onload="zoom()">
To add zoom in Firefox read this object.Style.Zoom property not working in Firefox
Last answer will work for major browsers.
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "90%"
}
This is the compatibility chart.
But as stated in THIS QUESTION
You could use the "proprietary" -moz-transform property in Firefox 3.5+.
So you could use:
div.zoomed {
zoom: 3;
-moz-transform: scale(3);
-moz-transform-origin: 0 0;
}
And there´s also a BUGZILLA ticket.
Bugzilla
Related
Is there any way to add the fullscreen option to the PDF that is embedded using iframe ?
<iframe src="http://www.web.com/test.pdf"></iframe>
You can't reliably control the PDF experience unless you replace the default viewer of the browser. They all behave slightly differently. However, the new free Adobe DC View SDK is a client-side JavaScript PDF viewer that will allow you to embed a PDF in your HTML page and it has a full-screen option. By using this viewer, the PDF will behave consistently and have a consistent UI across all browsers.
The code would look like this...
<div id="adobe-dc-view" style="height: 360px; width: 500px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView =
new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
metaData:{fileName: "Bodea Brochure.pdf"}
}, {embedMode: "SIZED_CONTAINER"});
});
</script>
You can get the clientID here.
https://www.adobe.io/apis/documentcloud/dcsdk/viewsdk.html
Adobe DC View SDK kept throwing errors constantly for some reason. So I tried Mozilla’s PDF.js and seems to be working just fine, even on mobile.
I am working on an Automated Tumblr blog and noticed that you can't post Twitch streams as a video post, however when you embed them you can.
There are going to be multiple users and it will be expanding, so I am trying to automate the script in IFTTT, however, I don't have much scripting knowledge and tried to get this done... didn't work out.
The question:
It all starts with the content link, this can really be any platform. However, all platforms that aren't supported by Tumblr need a different embed.
So what I want is a script (not asking for the script, just help) that can detect what platform the link is from and chooses a path on what it found out.
Basically, a script that checks if it's twitch, run a, if it's youtube run b, etc.
If the input contains "Twitch" run:
<html>
<body>
<div id="twitch-embed"></div>
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: 854,
height: 480,
channel: "{channel Name}"
});
</script>
</body>
</html>
If YouTube:
<script type="text/html" id="Video URL here">
How do I create these checks?
(I know this question is stupid and probably easy, but I am not really big on scripting)
You can take the URL string and check it against each keyword to determine if it exists:
var urlString = "https://www.twitch.tv/Reco_Mouse";
if(urlString.indexOf("twitch.tv") !== -1) {
//First, dynamically include the Twitch script tag on the page
new Twitch.Embed("twitch-embed", {
width: 854,
height: 480,
channel: "{channel Name}"
});
break;
} else if(urlString.indexOf("youtube.com") !== -1) {
//Apply necessary steps for YouTube videos
} else if(urlString.indexOf("anothervideotype.com") !== -1) {
... //Apply necessary steps for another video type
}
I'm going mad. I get the value (it's the address of an home) from a Wordpress custom field (input type) with this code:
<?php $dudi=get_post_meta($post->ID, 'addr', true); ?>
It's good! Now I have to "pass" this variable $dudi to a jQuery function (it's gMap, for display Google maps):
$(function() {
$("#map").gMap({ markers: [
{ address: '<?php echo $dudi; ?>',
html: "blah blah<br>blah blah" }
],
zoom: 10 });
});
and now with the tag <div id="map"></div> gMap should display the map with the marker on the specified address (value in the variable $dudi) but doesn't work!
Notice that if I manually write the address (in place of <?php echo $dudi; ?>) it works on Chrome with bugs (strange effects when click the marker and move the map) and don't works on IE and Firefox
Don't know... I've tried in any way but nothing to do... and I need this for tomorrow! :(
Hope in you guys!!
UPDATE:
Oh my God! I'm going for steps because it's not clear if the issue is caused by the passing of the variable or by a html/css conflict. So for the moment I have manually written the address in the jQuery function bypassing the variable.
Well, after many headaches I've found that the map goes in conflict with the css:
max-width: 100%;
Infact, when I comment that line the map shows correctly.
NOW, I restored the variable and now the map doesn't work on any browser (aka gray backgroud) BUT it shows correctly the zoom fader and in the browser console I have two errors TypeError: a is null in the file main.js. Unfortunately I don't know this file and I'm not able to fix some codes.
Hope you guys... again!
if needed...
1st error
H(ff,hb);var Kh=256/360,Lh=256/(2*Math.PI);ff.prototype.fromLatLngToPixel=function(a,b){var c=128+a.lng()*Kh,d=Db(Math.sin(Xb(a.lat())),-0.9999,0.9999),d=128+0.5*Math.log((1+d)/(1-d))*-Lh,f=1<<b;return new r(u(c*f),u(d*f))};
2nd error
Oh(Sj,"arrow",1);function qi(a,b,c){!a.lat&&!a.lon&&(a=new P(a.y,a.x));this.Aa=a;this.Nu=i;this.na=0;this.N=this.mb=!1;this.Oo=[];this.V=[];this.Ra=Mj;this.Mg=this.cl=i;this.Ub=!0;this.Dg=this.rf=!1;this.g=i;if(b instanceof Qj||b==i||c!=i)this.Ra=b||Mj,this.Ub=!c,this.ha={icon:this.Ra,clickable:this.Ub};else{b=this.ha=b||{};this.Ra=b.icon||Mj;this.mv&&this.mv(b);if(b.clickable!=i)this.Ub=b.clickable;if(b.isPng)this.rf=!0}b&&Ob(this,b,"id,icon_id,name,description,snippet,nodeData".split(","));this.Zu=Tj;if(b&&b.getDomId)this.Zu=
"Chrome shows the map with the marker OK!!! While Firefox and IE don't
show nothing (gray background, etc)"
If Ennui's solution works fine at Chrome, then check the other browsers consoles - they should output some kind of errors. That's what usually happens when GoogleMaps show 'gray background' instead of a map.
A quick and dirty solution would be to echo the $dudi variable somewhere on the page in a hidden div. For example:
<p style="display:none" id="dudi">
<?php echo get_post_meta($post->ID, 'addr', true); ?>
</p>
Then in your jQuery:
var dudi = $('p#dudi').text();
Didn't have time to test this but I think it should work for your purposes.
try to find css stype for img tag
max-width: none;
and replace it to:
max-width: none;
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.
I make a simple html page and set it on facebook fan page tab but the tab which shows on fan page is shows a scroll bar buti already set to auto resize and the height of this html page is large i want to hide the scroll bar and show the complete page
The best solution I found, which works for me is:
You need to setup the Facebook app canvas settings, Canvas height to Fluid.

Then, add some javascript in the page header:
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoResize();
</script>
Finally, force our body and html tag to avoid scroll bars in css.
body, html {
overflow:hidden;
}
This has worked for me to remove all the scroll bars. It's working on the 18th of October 2011, but because Facebook keep changing their code, it may change in the future.
A full article about Facebook iframe is available on my blog: http://gpiot.com/facebook-page-tab-hide-scroll-bars-from-iframe/
Thanks to all of you.
Here is the answer of my question; I posted it here so that if any body find this question in future will also get the answer and his/her time is not wasted. I get the solution by adding the following code just before the </body> tag of my index page
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
Once again, thanks to all.
This solution works for me
http://aarosant.com/2011/03/14/adjust-the-size-of-facebook-iframe-tabs/
GO TO the App Setting -> Advanced setting -> canvas page there you can change width and height to fixed from fluid